From 82499ee78c0ab42f3cca2ebb28877e7cc146c2ec Mon Sep 17 00:00:00 2001 From: Pavlo Kniazevych <139438463+pkniazevych@users.noreply.github.com> Date: Sun, 19 Jan 2025 13:11:09 +0200 Subject: [PATCH] Fix: Fix the QA bugs [n/a] (#138) * New: Finish the BE integration [n/a] * Fix: Fix some bugs [n/a] --- assets/images/widget-icon-controls.svg | 1 - assets/images/widget-icon-eye.svg | 1 - assets/images/widget-icon-person.svg | 1 - assets/images/widget-icon-text.svg | 1 - modules/settings/assets/css/style.css | 4 + .../js/components/admin-top-bar/index.js | 21 ++-- .../js/components/connect-modal/check-icon.js | 12 ++ .../js/components/connect-modal/index.js | 112 ++++++++++-------- .../assets/js/components/icon-size/index.js | 7 +- .../js/components/my-account-menu/index.js | 39 +++++- .../js/components/position-control/index.js | 16 ++- .../js/components/post-connect-modal/index.js | 54 +++++---- .../js/components/sidebar-app-bar/index.js | 28 ++++- .../js/components/sidebar-menu/index.js | 12 +- .../assets/js/components/sidebar-menu/menu.js | 4 +- .../js/components/widget-loader/index.js | 1 + .../settings/assets/js/hooks/use-settings.js | 8 +- .../assets/js/icons/connect-modal-icon.js | 22 ++-- .../assets/js/icons/elementor-logo.js | 37 +++--- .../js/icons/post-connect-modal-icon.js | 16 +-- modules/settings/assets/js/layouts/sidebar.js | 4 +- .../settings/components/settings-pointer.php | 8 +- modules/settings/module.php | 8 +- modules/widget/module.php | 24 +--- 24 files changed, 261 insertions(+), 180 deletions(-) delete mode 100644 assets/images/widget-icon-controls.svg delete mode 100644 assets/images/widget-icon-eye.svg delete mode 100644 assets/images/widget-icon-person.svg delete mode 100644 assets/images/widget-icon-text.svg create mode 100644 modules/settings/assets/js/components/connect-modal/check-icon.js 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) => ( { ), }} /> +