diff --git a/assets/images/widget-icon-controls.svg b/assets/images/widget-icon-controls.svg deleted file mode 100644 index 38fab3c..0000000 --- a/assets/images/widget-icon-controls.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/widget-icon-eye.svg b/assets/images/widget-icon-eye.svg deleted file mode 100644 index ebf058d..0000000 --- a/assets/images/widget-icon-eye.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/widget-icon-person.svg b/assets/images/widget-icon-person.svg deleted file mode 100644 index 4aac00c..0000000 --- a/assets/images/widget-icon-person.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/widget-icon-text.svg b/assets/images/widget-icon-text.svg deleted file mode 100644 index c5e1e18..0000000 --- a/assets/images/widget-icon-text.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/modules/settings/assets/css/style.css b/modules/settings/assets/css/style.css index 9871685..5a87d0e 100644 --- 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 index 36b59bf..6d20810 100644 --- 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 ( - + { > - + ); }; diff --git a/modules/settings/assets/js/components/connect-modal/check-icon.js b/modules/settings/assets/js/components/connect-modal/check-icon.js new file mode 100644 index 0000000..e261224 --- /dev/null +++ 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 ( + + + + ); +}; + +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 index 243db86..3e23ff3 100644 --- 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 ( - + + {__("Let's improve your site's accessibility", 'pojo-accessibility')} + {__( - 'Make your site more inclusive with One Click Accessibility.', + 'Make your site more inclusive with Web accessibility.', 'pojo-accessibility', )} + - - - - - + + + - - - - - - + + + + + - - - - - - + + + + + - + + + {units.map((unit, index) => ( { ), }} /> +