Fix: Fix the QA bugs [n/a] (#138)

* New: Finish the BE integration [n/a] * Fix: Fix some bugs [n/a]
elementor · Jan 19, 2025 · 82499ee · 82499ee
1 parent 0040584
commit 82499ee
Show file tree

Hide file tree

Showing 24 changed files with 261 additions and 180 deletions.
diff --git a/assets/images/widget-icon-controls.svg b/assets/images/widget-icon-controls.svg
diff --git a/assets/images/widget-icon-eye.svg b/assets/images/widget-icon-eye.svg
diff --git a/assets/images/widget-icon-person.svg b/assets/images/widget-icon-person.svg
diff --git a/assets/images/widget-icon-text.svg b/assets/images/widget-icon-text.svg
diff --git a/modules/settings/assets/css/style.css b/modules/settings/assets/css/style.css
@@ -1,3 +1,7 @@
+#wpbody-content {
+	padding-bottom: 0;
+}
+
 body {
 	background: #fff;
 }

diff --git a/modules/settings/assets/js/components/admin-top-bar/index.js b/modules/settings/assets/js/components/admin-top-bar/index.js
@@ -2,21 +2,24 @@ import HelpIcon from '@elementor/icons/HelpIcon';
 import AppBar from '@elementor/ui/AppBar';
 import Link from '@elementor/ui/Link';
 import Toolbar from '@elementor/ui/Toolbar';
+import { styled } from '@elementor/ui/styles';
 import { mixpanelService } from '@ea11y/services';
 import { __ } from '@wordpress/i18n';
 import { HELP_LINK } from '../../constants';
 
+const StyledToolbar = styled(Toolbar)`
+	justify-content: end;
+	align-items: center;
+	flex-direction: row;
+	background-color: ${({ theme }) => theme.palette.background.default};
+	gap: 10px;
+	border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+`;
+
 const AdminTopBar = () => {
-	const toolBarStyle = {
-		justifyContent: 'end',
-		alignItems: 'center',
-		backgroundColor: 'background.default',
-		gap: '10px',
-		borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
-	};
 	return (
 		<AppBar position="static">
-			<Toolbar direction="row" sx={toolBarStyle} padding={2}>
+			<StyledToolbar variant="dense">
 				<Link
 					color="secondary"
 					underline="hover"
@@ -32,7 +35,7 @@ const AdminTopBar = () => {
 				>
 					<HelpIcon />
 				</Link>
-			</Toolbar>
+			</StyledToolbar>
 		</AppBar>
 	);
 };

diff --git a/modules/settings/assets/js/components/connect-modal/check-icon.js b/modules/settings/assets/js/components/connect-modal/check-icon.js
@@ -0,0 +1,12 @@
+import { CircleCheckFilledIcon } from '@elementor/icons';
+import ListItemIcon from '@elementor/ui/ListItemIcon';
+
+const ConnectModalCheckIcon = () => {
+	return (
+		<ListItemIcon sx={{ color: 'info.main' }}>
+			<CircleCheckFilledIcon width={20} />
+		</ListItemIcon>
+	);
+};
+
+export default ConnectModalCheckIcon;
diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js
@@ -4,46 +4,57 @@ import Button from '@elementor/ui/Button';
 import Grid from '@elementor/ui/Grid';
 import List from '@elementor/ui/List';
 import ListItem from '@elementor/ui/ListItem';
-import ListItemIcon from '@elementor/ui/ListItemIcon';
 import ListItemText from '@elementor/ui/ListItemText';
 import Modal from '@elementor/ui/Modal';
 import Typography from '@elementor/ui/Typography';
+import { styled } from '@elementor/ui/styles';
+import ConnectModalCheckIcon from '@ea11y/components/connect-modal/check-icon';
 import { useAuth, useModal } from '@ea11y/hooks';
 import { ConnectModalIcon } from '@ea11y/icons';
 import { __ } from '@wordpress/i18n';
 
-function ConnectModal() {
+const StyledGrid = styled(Grid)`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	width: 600px;
+	max-width: 95%;
+	height: 552px;
+	gap: 0;
+	background-color: ${({ theme }) => theme.palette.background.paper};
+	padding: ${({ theme }) => theme.spacing(5)};
+	text-align: center;
+	border-radius: 4px;
+`;
+
+const StyledListItemText = styled(ListItemText)`
+	margin: 0;
+	padding: 0;
+
+	color: ${({ theme }) => theme.palette.text.secondary};
+`;
+
+const StyledListItem = styled(ListItem)`
+	margin: 8px;
+	padding: 0;
+`;
+
+const ConnectModal = () => {
 	const { isOpen } = useModal();
 	const { redirectToConnect } = useAuth();
 
-	const ListItemStyle = { margin: '8px', padding: 0 };
-	const ListItemTextStyle = { color: 'text.secondary', margin: 0, padding: 0 };
-	const listIconColor = 'info.main';
-
 	return (
 		<Modal open={isOpen}>
-			<Grid
-				container
-				gap={0}
-				direction="column"
-				justifyContent="start"
-				alignItems="center"
-				sx={{
-					position: 'absolute',
-					top: '50%',
-					left: '50%',
-					transform: 'translate(-50%, -50%)',
-					width: 600,
-					maxWidth: '95%',
-					height: 552,
-					backgroundColor: 'background.paper',
-					boxShadow: 24,
-					p: 5,
-					textAlign: 'center',
-					borderRadius: '4px',
-				}}
-			>
+			<StyledGrid container sx={{ boxShadow: 24 }}>
 				<ConnectModalIcon />
+
 				<Typography
 					variant="h5"
 					color="text.primary"
@@ -52,48 +63,47 @@ function ConnectModal() {
 				>
 					{__("Let's improve your site's accessibility", 'pojo-accessibility')}
 				</Typography>
+
 				<Typography variant="body2" color="text.primary" width={400}>
 					{__(
-						'Make your site more inclusive with One Click Accessibility.',
+						'Make your site more inclusive with Web accessibility.',
 						'pojo-accessibility',
 					)}
 				</Typography>
+
 				<Box>
 					<List dense={true}>
-						<ListItem disableGutters sx={ListItemStyle}>
-							<ListItemIcon sx={{ color: listIconColor }}>
-								<CircleCheckFilledIcon width={20} />
-							</ListItemIcon>
-							<ListItemText
-								sx={ListItemTextStyle}
+						<StyledListItem disableGutters>
+							<ConnectModalCheckIcon />
+
+							<StyledListItemText
 								primary={__('Fully customizable design', 'pojo-accessibility')}
 							/>
-						</ListItem>
-						<ListItem disableGutters sx={ListItemStyle}>
-							<ListItemIcon sx={{ color: listIconColor }}>
-								<CircleCheckFilledIcon width={20} />
-							</ListItemIcon>
-							<ListItemText
-								sx={ListItemTextStyle}
+						</StyledListItem>
+
+						<StyledListItem disableGutters>
+							<ConnectModalCheckIcon />
+
+							<StyledListItemText
 								primary={__(
 									'Feature management & control',
 									'pojo-accessibility',
 								)}
 							/>
-						</ListItem>
-						<ListItem disableGutters sx={ListItemStyle}>
-							<ListItemIcon sx={{ color: listIconColor }}>
-								<CircleCheckFilledIcon width={20} />
-							</ListItemIcon>
-							<ListItemText
-								sx={ListItemTextStyle}
+						</StyledListItem>
+
+						<StyledListItem disableGutters>
+							<ConnectModalCheckIcon />
+
+							<StyledListItemText
 								primary={__(
 									'Accessibility statement generator',
 									'pojo-accessibility',
 								)}
 							/>
-						</ListItem>
+						</StyledListItem>
 					</List>
+
 					<Button
 						variant="contained"
 						color="info"
@@ -105,9 +115,9 @@ function ConnectModal() {
 						{__('Get started', 'pojo-accessibility')}
 					</Button>
 				</Box>
-			</Grid>
+			</StyledGrid>
 		</Modal>
 	);
-}
+};
 
 export default ConnectModal;
diff --git a/modules/settings/assets/js/components/icon-size/index.js b/modules/settings/assets/js/components/icon-size/index.js
@@ -18,15 +18,16 @@ const StyledPaper = styled(Paper)`
 	gap: 12px;
 	align-items: center;
 	justify-content: center;
-	padding: 16px
+	padding: 16px;
 	min-width: 10px;
 	width: 100px;
 	min-height: 100px;
 	border-radius: ${({ theme }) => theme.shape.borderRadius};
 	box-shadow: ${({ theme }) => theme.shadows[0]};
 	cursor: pointer;
+
 	:hover {
-		box-shadow: 0px 0px 15px 0px rgba(37, 99, 235, 0.15);
+		box-shadow: 0 0 15px 0 rgba(37, 99, 235, 0.15);
 		border-color: ${({ theme }) => theme.palette.info.main};
 	}
 `;
@@ -54,6 +55,7 @@ const IconSize = (props) => {
 					{__('Size', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
+
 			<RadioGroup
 				{...props}
 				aria-labelledby="icon-size-radio-buttons-group-label"
@@ -85,6 +87,7 @@ const IconSize = (props) => {
 									width: 'auto',
 								},
 							})}
+
 						<Radio
 							value={option.value}
 							sx={{ opacity: 0, position: 'absolute' }}

diff --git a/modules/settings/assets/js/components/my-account-menu/index.js b/modules/settings/assets/js/components/my-account-menu/index.js
@@ -1,4 +1,9 @@
-import { ChevronDownIcon, UserIcon, ExternalLinkIcon } from '@elementor/icons';
+import {
+	UserIcon,
+	ExternalLinkIcon,
+	ChevronUpIcon,
+	ChevronDownIcon,
+} from '@elementor/icons';
 import Avatar from '@elementor/ui/Avatar';
 import Box from '@elementor/ui/Box';
 import List from '@elementor/ui/List';
@@ -25,6 +30,7 @@ const MyAccountMenu = () => {
 	const { openSidebar, planData } = useSettings();
 	const { save } = useStorage();
 	const { error } = useToastNotification();
+
 	const accountMenuState = usePopupState({
 		variant: 'popover',
 		popupId: 'myAccountMenu',
@@ -34,32 +40,38 @@ const MyAccountMenu = () => {
 		if (email === undefined || email === null) {
 			return '';
 		}
+
 		if (email.length <= maxLength) {
 			return email;
 		}
+
 		return email.slice(0, maxLength - 3) + '...';
 	};
 
 	const onDeactivateAndDisconnect = async () => {
 		try {
 			await API.disconnect();
 			await API.redirectToConnect();
+
 			await save({
 				ea11y_close_post_connect_modal: false,
 			});
+
 			mixpanelService.sendEvent('menu_button_clicked', {
 				buttonName: 'Switch account',
 			});
 		} catch (e) {
 			error(
 				__('Failed to switch account. Please try again.', 'pojo-accessibility'),
 			);
+
 			console.error(e);
 		}
 	};
 
 	const redirectToBilling = () => {
 		window.open(BILLING_LINK, '_blank').focus();
+
 		mixpanelService.sendEvent('menu_button_clicked', {
 			buttonName: 'Billing',
 		});
@@ -76,20 +88,33 @@ const MyAccountMenu = () => {
 			>
 				<ListItemButton
 					{...bindTrigger(accountMenuState)}
-					sx={{ justifyContent: 'center' }}
+					sx={{
+						justifyContent: 'center',
+						py: 2,
+						px: 3,
+					}}
+					selected={accountMenuState.isOpen}
+					shape="rounded"
 				>
 					<ListItemIcon>
-						<UserIcon sx={{ color: 'common.black' }} />
+						<UserIcon sx={{ color: 'common.black' }} fontSize="small" />
 					</ListItemIcon>
+
 					<ListItemText
 						primary={__('My Account', 'pojo-accessibility')}
 						hidden={!openSidebar}
 					/>
+
 					<ListItemIcon sx={{ display: !openSidebar ? 'none' : 'default' }}>
-						<ChevronDownIcon />
+						{accountMenuState.isOpen ? (
+							<ChevronDownIcon fontSize="small" />
+						) : (
+							<ChevronUpIcon fontSize="small" />
+						)}
 					</ListItemIcon>
 				</ListItemButton>
 			</List>
+
 			<Menu
 				{...bindMenu(accountMenuState)}
 				anchorOrigin={{
@@ -113,6 +138,7 @@ const MyAccountMenu = () => {
 					<Avatar>
 						<UserIcon sx={{ color: 'common.white' }} />
 					</Avatar>
+
 					<Box display="flex" flexDirection="column" gap={0}>
 						{planData?.user?.email.length < 24 ? (
 							<Typography variant="caption" color="common.white">
@@ -127,17 +153,22 @@ const MyAccountMenu = () => {
 						)}
 					</Box>
 				</MenuItem>
+
 				<MenuItem onClick={onDeactivateAndDisconnect}>
 					<UserArrowIcon sx={{ color: 'common.white' }} />
+
 					<Typography color="common.white" marginLeft={1}>
 						{__('Switch account', 'pojo-accessibility')}
 					</Typography>
 				</MenuItem>
+
 				<MenuItem onClick={redirectToBilling}>
 					<CreditCardIcon sx={{ color: 'common.white' }} />
+
 					<Typography color="common.white" marginLeft={1}>
 						{__('Billing', 'pojo-accessibility')}
 					</Typography>
+
 					<ExternalLinkIcon
 						fontSize="small"
 						sx={{ color: 'common.white', marginLeft: 1 }}