Fix: Fix the QA bugs [n/a]

modules/connect/classes/config.php

@@ -14,7 +14,7 @@ class Config {
 	const APP_PREFIX = 'ea11y';
 	const APP_REST_NAMESPACE = 'ea11y';
 	const BASE_URL = 'https://my.elementor.com/connect';
-	const ADMIN_PAGE = 'accessibility-settings-2';
+	const ADMIN_PAGE = 'accessibility-settings';
 	const APP_TYPE = 'app_access';
 	const SCOPES = 'openid offline_access share_usage_data';
 	const STATE_NONCE = 'ea11y_auth_nonce';

modules/settings/assets/css/style.css

@@ -1,3 +1,7 @@
+#wpbody-content {
+	padding-bottom: 0;
+}
+
 body {
 	background: #fff;
 }

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>
 	);
 };

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;

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;

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' }}