Fix: Fix Capabilities screen UI [APP-1003]

Author: pkniazevych

modules/settings/assets/js/components/bottom-bar/index.js

@@ -1,9 +1,19 @@
 import Box from '@elementor/ui/Box';
 import Button from '@elementor/ui/Button';
+import { styled } from '@elementor/ui/styles';
 import { useSettings, useStorage, useToastNotification } from '@ea11y/hooks';
 import { mixpanelService } from '@ea11y/services';
 import { __ } from '@wordpress/i18n';
 
+const StyledContainer = styled(Box)`
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+
+	padding: ${({ theme }) => theme.spacing(2)};
+	border-top: 1px solid ${({ theme }) => theme.palette.divider};
+`;
+
 const BottomBar = () => {
 	const {
 		selectedMenu,
@@ -51,13 +61,7 @@ const BottomBar = () => {
 	};
 
 	return (
-		<Box
-			display="flex"
-			justifyContent="end"
-			p={2}
-			width="100%"
-			borderTop="1px solid rgba(0, 0, 0, 0.12)"
-		>
+		<StyledContainer>
 			<Button
 				variant="contained"
 				color="info"
@@ -66,7 +70,7 @@ const BottomBar = () => {
 			>
 				{__('Save changes', 'pojo-accessibility')}
 			</Button>
-		</Box>
+		</StyledContainer>
 	);
 };
 

modules/settings/assets/js/layouts/menu-settings.js

@@ -1,5 +1,6 @@
 import { CardActions } from '@elementor/ui';
 import Alert from '@elementor/ui/Alert';
+import Box from '@elementor/ui/Box';
 import Card from '@elementor/ui/Card';
 import CardContent from '@elementor/ui/CardContent';
 import CardHeader from '@elementor/ui/CardHeader';
@@ -17,12 +18,32 @@ import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { MENU_SETTINGS } from '../constants/menu-settings';
 
-// Customization to override the WP admin global CSS.
-const StyledSwitch = styled(Switch)(() => ({
-	input: {
-		height: '56px',
-	},
-}));
+const StyledSwitch = styled(Switch)`
+	input {
+		height: 56px;
+	}
+`;
+
+const StyledCardContent = styled(CardContent)`
+	height: 50vh;
+	overflow: auto;
+	margin-bottom: 61.5px;
+	padding: 0 ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledCardActions = styled(CardActions)`
+	position: absolute;
+	width: 100%;
+	bottom: 0;
+
+	padding: 0;
+	background: ${({ theme }) => theme.palette.background.paper};
+
+	& .MuiBox-root {
+		padding: ${({ theme }) => theme.spacing(1.5)}
+			${({ theme }) => theme.spacing(2)};
+	}
+`;
 
 const MenuSettings = () => {
 	const {
@@ -40,13 +61,13 @@ const MenuSettings = () => {
 			setDisableOptions(true);
 		} else {
 			setDisableOptions(false);
+
 			save({ a11y_hide_minimum_active_options_alert: false }).then(() => {
 				setHideMinimumOptionAlert(false);
 			});
 		}
 	}, [widgetMenuSettings]);
 
-	// Toggle the value of a setting
 	const toggleSetting = (category, option) => {
 		setWidgetMenuSettings((prevSettings) => {
 			const newSettings = {
@@ -57,15 +78,16 @@ const MenuSettings = () => {
 			};
 
 			setHasChanges(true);
+
 			if (window?.ea11yWidget?.toolsSettings && window?.ea11yWidget?.widget) {
 				window.ea11yWidget.toolsSettings = newSettings;
 				window?.ea11yWidget?.widget.updateState();
 			}
+
 			return newSettings;
 		});
 	};
 
-	// Check if at least two options are enabled
 	const areAtLeastTwoOptionsEnabled = (settings) => {
 		let enabledCount = 0;
 
@@ -87,35 +109,42 @@ const MenuSettings = () => {
 			setHideMinimumOptionAlert(true);
 		});
 	};
+
+	const sectionsCount = Object.entries(MENU_SETTINGS).length;
+
 	return (
 		<Card variant="outlined">
 			<CardHeader
 				title={__('Feature Menu', 'pojo-accessibility')}
-				subheader={__(
-					'Choose which accessibility features and capabilities you want to include.',
-					'pojo-accessibility',
-				)}
-				sx={{ paddingBottom: 0 }}
+				subheader={
+					<Typography variant="body2">
+						{__(
+							'Choose which accessibility features and capabilities you want to include.',
+							'pojo-accessibility',
+						)}
+					</Typography>
+				}
 			/>
+
 			{disableOptions && !hideMinimumOptionAlert && (
 				<Alert severity="info" sx={{ m: 2 }} onClose={handleCloseNotification}>
 					{__('At least two option must remain active', 'pojo-accessibility')}
 				</Alert>
 			)}
-			<CardContent
-				sx={{ height: '50vh', overflow: 'auto', marginBottom: '100px' }}
-			>
+
+			<StyledCardContent>
 				<List>
-					{Object.entries(MENU_SETTINGS).map(([parentKey, parentItem]) => {
+					{Object.entries(MENU_SETTINGS).map(([parentKey, parentItem], i) => {
 						return (
-							<div key={parentKey}>
+							<Box key={parentKey}>
 								<ListItem disableGutters>
 									<ListItemText>
 										<Typography variant="subtitle2">
 											{parentItem.title}
 										</Typography>
 									</ListItemText>
 								</ListItem>
+
 								{parentItem.options &&
 									Object.entries(parentItem.options).map(
 										([childKey, childValue]) => {
@@ -148,22 +177,17 @@ const MenuSettings = () => {
 											);
 										},
 									)}
-								<Divider sx={{ my: 2 }} />
-							</div>
+
+								{i + 1 < sectionsCount && <Divider sx={{ my: 2 }} />}
+							</Box>
 						);
 					})}
 				</List>
-			</CardContent>
-			<CardActions
-				sx={{
-					position: 'absolute',
-					bottom: 0,
-					width: '100%',
-					background: 'white',
-				}}
-			>
+			</StyledCardContent>
+
+			<StyledCardActions>
 				<BottomBar />
-			</CardActions>
+			</StyledCardActions>
 		</Card>
 	);
 };

modules/settings/assets/js/layouts/widget-preview.js

@@ -1,30 +1,46 @@
 import Card from '@elementor/ui/Card';
 import CardContent from '@elementor/ui/CardContent';
 import CardHeader from '@elementor/ui/CardHeader';
+import Typography from '@elementor/ui/Typography';
+import { styled } from '@elementor/ui/styles';
 import { WidgetLoader } from '@ea11y/components';
 import { __ } from '@wordpress/i18n';
 
+const StyledPreview = styled(CardContent)`
+	margin-right: auto;
+	margin-left: auto;
+	margin-top: ${({ theme }) => theme.spacing(4)};
+	padding: 0 24px;
+
+	overflow: auto;
+
+	& #ea11y-root {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+
+		transform: scale(70%);
+	}
+`;
+
 const WidgetPreview = () => {
 	return (
 		<>
 			<Card variant="outlined">
 				<CardHeader
 					title={__('Preview', 'pojo-accessibility')}
-					subheader={__(
-						'This is what the widget will look like to your site viewers.',
-						'pojo-accessibility',
-					)}
+					subheader={
+						<Typography variant="body2">
+							{__(
+								'This is what the widget will look like to your site viewers.',
+								'pojo-accessibility',
+							)}
+						</Typography>
+					}
 				/>
-				<CardContent
-					id="ea11y-widget-preview--container"
-					sx={{
-						overflow: 'auto',
-						marginRight: 'auto',
-						marginLeft: 'auto',
-						marginTop: 4,
-						padding: '0 24px',
-					}}
-				></CardContent>
+
+				<StyledPreview id="ea11y-widget-preview--container"></StyledPreview>
 			</Card>
 			<WidgetLoader />
 		</>

modules/settings/assets/js/pages/menu.js

@@ -1,11 +1,18 @@
 import Box from '@elementor/ui/Box';
 import Container from '@elementor/ui/Container';
 import Typography from '@elementor/ui/Typography';
+import { styled } from '@elementor/ui/styles';
 import { MenuSettings, WidgetPreview } from '@ea11y/layouts';
 import { mixpanelService } from '@ea11y/services';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
+const StyledContainer = styled(Container)`
+	overflow: auto;
+	max-height: 100%;
+	padding: ${({ theme }) => theme.spacing(5)};
+`;
+
 const Menu = () => {
 	useEffect(() => {
 		mixpanelService.sendEvent('page_view', {
@@ -14,15 +21,16 @@ const Menu = () => {
 	}, []);
 
 	return (
-		<Container sx={{ overflow: 'auto', maxHeight: '100%', p: 5 }}>
+		<StyledContainer>
 			<Typography variant="h4" fontWeight="400" marginBottom={4}>
 				{__('Capabilities', 'pojo-accessibility')}
 			</Typography>
+
 			<Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={4}>
 				<MenuSettings />
 				<WidgetPreview />
 			</Box>
-		</Container>
+		</StyledContainer>
 	);
 };