Fix: Fix the QA bugs [n/a]

elementor · Jan 15, 2025 · 25f097d · 25f097d
1 parent 89c6e54
commit 25f097d
Show file tree

Hide file tree

Showing 14 changed files with 156 additions and 49 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -0,0 +1,5 @@
+#adminmenu .toplevel_page_accessibility-settings .wp-menu-image img {
+  padding: 5px 0 0;
+  opacity: 1;
+  filter: none;
+}
diff --git a/assets/images/menu-icon.svg b/assets/images/menu-icon.svg
diff --git a/modules/core/module.php b/modules/core/module.php
@@ -55,12 +55,22 @@ public static function is_active() : bool {
 		return true;
 	}
 
+    public function enqueue_scripts() : void {
+        wp_enqueue_style(
+            'ea11y-global-style',
+            EA11Y_ASSETS_URL . 'css/admin.css',
+            [],
+            EA11Y_VERSION
+        );
+    }
+
 	/**
 	 * Module constructor.
 	 */
 	public function __construct() {
 		$this->register_components();
 
-		add_filter( 'plugin_action_links', [ $this, 'add_plugin_links' ], 10, 2 );
+        add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
+        add_filter( 'plugin_action_links', [ $this, 'add_plugin_links' ], 10, 2 );
 	}
 }
diff --git a/modules/legacy/notices/dismissible-deprecated-nag.php b/modules/legacy/notices/dismissible-deprecated-nag.php
@@ -31,7 +31,7 @@ public function content(): string {
 			esc_attr( Upgrade::get_learn_more_link() ),
 			esc_html__( 'Learn more', 'pojo-accessibility' ),
 			esc_attr( Upgrade::get_switch_now_link() ),
-			esc_html__( 'Switch To Equally', 'pojo-accessibility' )
+			esc_html__( 'Switch To Web Accessibility', 'pojo-accessibility' )
 		);
 	}
 

diff --git a/modules/settings/assets/css/style.css b/modules/settings/assets/css/style.css
@@ -55,25 +55,15 @@ html[dir='rtl'] #ea11y-app {
 	position: absolute;
 }
 
-.ea11y-statement--widget-preview .ea11y-widget-container * {
-	opacity: 0.5;
-}
-
-.ea11y-statement--widget-preview .ea11y-widget-container:before {
+.ea11y-statement--widget-preview .ea11y-widget-content::after {
 	content: '';
+
 	position: absolute;
 	top: 0;
+	right: 0;
 	left: 0;
-	height: 100%;
-	width: 100%;
-	background-color: #eaf4ff;
-	opacity: 0.1;
-	z-index: 0;
-	box-sizing: border-box;
-}
+	bottom: 60px;
 
-.ea11y-statement--widget-preview .ea11y-widget-statement-link,
-.ea11y-statement--widget-preview .ea11y-widget-statement-link * {
-	z-index: 1;
-	opacity: 1;
+	background-color: #FCFDFF;
+	opacity: 0.6;
 }
diff --git a/modules/settings/assets/js/components/copy-link/index.js b/modules/settings/assets/js/components/copy-link/index.js
@@ -28,12 +28,13 @@ const CopyLink = ({ content }) => {
 			open={open}
 			onClose={handleClose}
 			onOpen={handleOpen}
+			placement="top"
 			title={
 				copied
 					? __('Copied!', 'pojo-accessibility')
 					: __('Copy', 'pojo-accessibility')
 			}
-			arrow={false}
+			arrow={true}
 			PopperProps={{
 				modifiers: [
 					{

diff --git a/modules/settings/assets/js/components/generated-page-infotip-card/index.js b/modules/settings/assets/js/components/generated-page-infotip-card/index.js
@@ -10,23 +10,28 @@ import { __ } from '@wordpress/i18n';
 const GeneratedPageInfoTipCard = () => {
 	const { setShowAccessibilityGeneratedInfotip } = useSettings();
 	const { save } = useStorage();
+
 	const dismissNotice = async () => {
 		setShowAccessibilityGeneratedInfotip(false);
+
 		await save({
 			ea11y_show_accessibility_generated_page_infotip: false,
 		});
 	};
+
 	return (
 		<Card elevation={0} sx={{ maxWidth: 300 }}>
-			<CardHeader title={__('Tooltip', 'pojo-accessibility')} />
+			<CardHeader title={''} />
+
 			<CardContent>
 				<Typography variant="body2" color="text.secondary">
 					{__(
-						'The accessibility statement page you generated is already linked to the widget.',
+						'We went ahead and linked the accessibility statement page you just created to your widget.',
 						'pojo-accessibility',
 					)}
 				</Typography>
 			</CardContent>
+
 			<CardActions>
 				<Button
 					size="small"

diff --git a/modules/settings/assets/js/components/icon-select/index.js b/modules/settings/assets/js/components/icon-select/index.js
@@ -24,8 +24,9 @@ const StyledPaper = styled(Paper)`
 	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};
 	}
 `;
@@ -40,6 +41,7 @@ const IconSelect = (props) => {
 					{__('Icon', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
+
 			<RadioGroup
 				{...props}
 				aria-labelledby="icon-select-radio-buttons-group-label"
@@ -48,7 +50,7 @@ const IconSelect = (props) => {
 				sx={{
 					display: 'flex',
 					flexDirection: 'row',
-					flexWrap: 'nowrap',
+					flexWrap: 'wrap',
 					gap: 2,
 				}}
 			>

diff --git a/modules/settings/assets/js/components/sidebar-app-bar/index.js b/modules/settings/assets/js/components/sidebar-app-bar/index.js
@@ -20,7 +20,7 @@ const SidebarAppBar = () => {
 						marginLeft={1}
 						display={!openSidebar ? 'none' : 'inherit'}
 					>
-						{__('Equally', 'pojo-accessibility')}
+						{__('Web Accessibility', 'pojo-accessibility')}
 					</Typography>
 				</Box>
 				<IconButton

diff --git a/modules/settings/assets/js/layouts/icon-design-settings.js b/modules/settings/assets/js/layouts/icon-design-settings.js
@@ -11,18 +11,21 @@ const IconDesignSettings = (props) => {
 				<Typography variant="subtitle1">
 					{__('Design', 'pojo-accessibility')}
 				</Typography>
+
 				<Typography variant="body2">
 					{__(
 						"Customize your accessibility button's color, icon, and size to match your brand.",
 						'pojo-accessibility',
 					)}
 				</Typography>
 			</Box>
+
 			<Grid gridTemplateColumns="repeat(2, 1fr)" display="grid" gap={5} p={2}>
 				<Box display="flex" flexDirection="column" gap={5}>
 					<IconSelect />
 					<IconSize />
 				</Box>
+
 				<Box>
 					<ColorPicker />
 				</Box>

diff --git a/modules/settings/assets/js/layouts/statement-link.js b/modules/settings/assets/js/layouts/statement-link.js
@@ -88,7 +88,7 @@ const StatementLink = () => {
 	};
 
 	return (
-		<Card elevation={0} variant="outlined" sx={{ marginTop: 5, width: '100%' }}>
+		<Card elevation={0} variant="outlined" sx={{ marginTop: 1, width: '100%' }}>
 			<CardHeader
 				title={__('Statement link', 'pojo-accessibility')}
 				subheader={__(
@@ -97,23 +97,25 @@ const StatementLink = () => {
 				)}
 				sx={{ borderBottom: '1px solid', borderBottomColor: 'divider' }}
 			/>
+
 			<CardContent>
 				<Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={5}>
 					<Box display="flex" flexDirection="column">
-						<FormControl fullWidth sx={{ marginBottom: 5 }}>
-							<FormLabel sx={{ marginBottom: 2 }}>
+						<FormControl fullWidth sx={{ marginBottom: 2 }}>
+							<FormLabel sx={{ marginBottom: 1 }}>
 								<Typography variant="subtitle2" color="text.primary">
 									{__('Choose which page to link', 'pojo-accessibility')}
 								</Typography>
 							</FormLabel>
+
 							<Box
 								display="flex"
 								flexDirection="row"
 								fullWidth
 								alignItems="center"
 							>
 								<Infotip
-									placement="bottom"
+									placement="right-start"
 									content={<GeneratedPageInfoTipCard />}
 									disableHoverListener
 									disableFocusListener
@@ -125,7 +127,8 @@ const StatementLink = () => {
 										value={accessibilityStatementData?.pageId}
 										error={!isValidPage}
 										color="info"
-										fullWidth
+										size="small"
+										sx={{ minWidth: '242px' }}
 									>
 										{pages?.hasResolved && pages?.records.length > 0 ? (
 											pages?.records.map((page) => (
@@ -140,27 +143,35 @@ const StatementLink = () => {
 										)}
 									</Select>
 								</Infotip>
+
 								{accessibilityStatementData?.link && (
 									<CopyLink content={accessibilityStatementData?.link} />
 								)}
 							</Box>
+
 							{!isValidPage && (
 								<FormHelperText>
 									{__('Please select a page', 'pojo-accessibility')}
 								</FormHelperText>
 							)}
 						</FormControl>
+
 						<FormControl fullWidth>
 							<FormLabel sx={{ marginBottom: 2, marginTop: 2 }}>
 								<Typography variant="subtitle2" color="text.primary">
 									{__('Want to hide the link?', 'pojo-accessibility')}
 								</Typography>
 							</FormLabel>
+
 							<FormControlLabel
 								label={__('Hide link', 'pojo-accessibility')}
 								labelPlacement="start"
 								control={
-									<Switch color="info" size="small" sx={{ marginLeft: 3 }} />
+									<Switch
+										color="secondary"
+										size="small"
+										sx={{ marginLeft: 3 }}
+									/>
 								}
 								sx={{ marginBottom: 3, alignSelf: 'start', ml: 0 }}
 								onChange={() => {
@@ -173,16 +184,24 @@ const StatementLink = () => {
 							/>
 						</FormControl>
 					</Box>
-					<Box
-						id="ea11y-widget-preview--container"
-						className="ea11y-statement--widget-preview"
-						padding={0}
-						marginTop={4}
-					>
-						<WidgetLoader />
+
+					<Box>
+						<Typography variant="subtitle2" color="text.primary">
+							{__('Preview link in widget', 'pojo-accessibility')}
+						</Typography>
+
+						<Box
+							id="ea11y-widget-preview--container"
+							className="ea11y-statement--widget-preview"
+							padding={0}
+							marginTop={2}
+						>
+							<WidgetLoader />
+						</Box>
 					</Box>
 				</Box>
 			</CardContent>
+
 			<CardActions>
 				<Button
 					color="info"