diff --git a/ui/components/app/connected-status-indicator/connected-status-indicator.js b/ui/components/app/connected-status-indicator/connected-status-indicator.js index 55a268510..6274c7239 100644 --- a/ui/components/app/connected-status-indicator/connected-status-indicator.js +++ b/ui/components/app/connected-status-indicator/connected-status-indicator.js @@ -62,20 +62,22 @@ export default function ConnectedStatusIndicator({ onClick }) { ? t('tooltipSatusConnected') : t('tooltipSatusNotConnected'); return ( - )} - + ); } diff --git a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap index 35458afd1..90d95c7b6 100644 --- a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap +++ b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap @@ -9,7 +9,7 @@ exports[`AccountPicker renders properly 1`] = ` class="box mm-text mm-text--inherit mm-text--ellipsis box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--color-primary-inverse" >
{ : AvatarAccountVariant.Jazzicon } address={address} - size={Size.SM} + size={Size.XS} + borderColor={BackgroundColor.backgroundDefault} // we currently don't have white color for border hence using backgroundDefault as the border /> {name} diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js index e48e15b32..4a5579130 100644 --- a/ui/components/multichain/app-header/app-header.js +++ b/ui/components/multichain/app-header/app-header.js @@ -25,7 +25,9 @@ import { import { AvatarNetwork, ButtonIcon, + ButtonIconSize, IconName, + IconSize, PickerNetwork, } from '../../component-library'; @@ -143,10 +145,11 @@ export const AppHeader = ({ onClick }) => { width={BLOCK_SIZES.FULL} backgroundColor={BackgroundColor.backgroundDefault} padding={2} + paddingLeft={4} + paddingRight={4} gap={2} > { display={[DISPLAY.FLEX, DISPLAY.NONE]} // show on popover hide on desktop /> { - {showStatus ? ( - - + {showStatus ? ( + + { + history.push(CONNECTED_ACCOUNTS_ROUTE); + trackEvent({ + event: MetaMetricsEventName.NavConnectedSitesOpened, + category: MetaMetricsEventCategory.Navigation, + }); + }} + /> + + ) : null}{' '} + {popupStatus && multichainProductTourStep === 2 ? ( + setAccountOptionsMenuOpen(false)} + prevIcon + title={t('permissionsTitle')} + description={t('permissionsTourDescription')} + currentStep="2" + totalSteps="3" + prevClick={() => + setMultichainProductTourStep( + multichainProductTourStep - 1, + ) + } + onClick={() => + setMultichainProductTourStep( + multichainProductTourStep + 1, + ) + } + positionObj={ + productTourDirection === 'rtl' ? '76%' : '12%' + } + productTourDirection={productTourDirection} + /> + ) : null} + + { - history.push(CONNECTED_ACCOUNTS_ROUTE); trackEvent({ - event: MetaMetricsEventName.NavConnectedSitesOpened, + event: MetaMetricsEventName.NavAccountMenuOpened, category: MetaMetricsEventCategory.Navigation, + properties: { + location: 'Home', + }, }); + setAccountOptionsMenuOpen(true); }} + size={ButtonIconSize.Sm} + iconProps={{ size: IconSize.Sm }} /> - ) : null}{' '} - {popupStatus && multichainProductTourStep === 2 ? ( + + {accountOptionsMenuOpen ? ( + setAccountOptionsMenuOpen(false)} + /> + ) : null} + {showProductTour && + popupStatus && + multichainProductTourStep === 3 ? ( setAccountOptionsMenuOpen(false)} prevIcon - title={t('permissionsTitle')} - description={t('permissionsTourDescription')} - currentStep="2" + title={t('globalTitle')} + description={t('globalTourDescription')} + currentStep="3" totalSteps="3" prevClick={() => setMultichainProductTourStep( multichainProductTourStep - 1, ) } - onClick={() => - setMultichainProductTourStep( - multichainProductTourStep + 1, - ) - } - positionObj={productTourDirection === 'rtl' ? '74%' : '12%'} + onClick={() => { + hideProductTour(); + }} + positionObj={productTourDirection === 'rtl' ? '88%' : '0%'} productTourDirection={productTourDirection} /> ) : null} - - { - trackEvent({ - event: MetaMetricsEventName.NavAccountMenuOpened, - category: MetaMetricsEventCategory.Navigation, - properties: { - location: 'Home', - }, - }); - setAccountOptionsMenuOpen(true); - }} - /> - - {accountOptionsMenuOpen ? ( - setAccountOptionsMenuOpen(false)} - /> - ) : null} - {showProductTour && - popupStatus && - multichainProductTourStep === 3 ? ( - setAccountOptionsMenuOpen(false)} - prevIcon - title={t('globalTitle')} - description={t('globalTourDescription')} - currentStep="3" - totalSteps="3" - prevClick={() => - setMultichainProductTourStep(multichainProductTourStep - 1) - } - onClick={() => { - hideProductTour(); - }} - positionObj={productTourDirection === 'rtl' ? '89%' : '0%'} - productTourDirection={productTourDirection} - /> - ) : null} ) : ( -
@@ -19,7 +19,7 @@ exports[`Multichain Connected Site Menu should render the site menu in connected class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row" >
-
+ `; exports[`Multichain Connected Site Menu should render the site menu in not connected state 1`] = `
-
@@ -56,7 +56,7 @@ exports[`Multichain Connected Site Menu should render the site menu in not conne class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row" >
-
+
`; exports[`Multichain Connected Site Menu should render the site menu in not connected to current account state 1`] = `
-
@@ -93,7 +93,7 @@ exports[`Multichain Connected Site Menu should render the site menu in not conne class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row" >
-
+
`; diff --git a/ui/components/multichain/multichain-connected-site-menu/index.scss b/ui/components/multichain/multichain-connected-site-menu/index.scss index 3b7c363c4..c3e339477 100644 --- a/ui/components/multichain/multichain-connected-site-menu/index.scss +++ b/ui/components/multichain/multichain-connected-site-menu/index.scss @@ -1,21 +1,25 @@ .multichain-connected-site-menu { + height: 24px; + width: 24px; + padding: 0; + &__badge { - height: 16px; - width: 16px; + height: 12px; + width: 12px; } &__badge.not-connected { - height: 10px; - width: 10px; + height: 8px; + width: 8px; } &__badge.not-connected::after { content: ''; position: absolute; - top: -3px; - left: -3px; - right: -3px; - bottom: -3px; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; background: var(--color-background-default); z-index: -1; border-radius: 50%; diff --git a/ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.js b/ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.js index abc22247e..c3f64e4e0 100644 --- a/ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.js +++ b/ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.js @@ -7,13 +7,20 @@ import { STATUS_NOT_CONNECTED, } from '../../../helpers/constants/connected-sites'; import { + AlignItems, BackgroundColor, BorderColor, BorderRadius, + DISPLAY, IconColor, - Size, + JustifyContent, } from '../../../helpers/constants/design-system'; -import { BadgeWrapper, Icon, IconName } from '../../component-library'; +import { + BadgeWrapper, + Icon, + IconName, + IconSize, +} from '../../component-library'; import Box from '../../ui/box'; import { getSelectedIdentity } from '../../../selectors'; import Tooltip from '../../ui/tooltip'; @@ -24,6 +31,7 @@ export const MultichainConnectedSiteMenu = ({ globalMenuColor, status, text, + onClick, }) => { const t = useI18nContext(); const selectedAccount = useSelector(getSelectedIdentity); @@ -31,6 +39,12 @@ export const MultichainConnectedSiteMenu = ({ @@ -95,4 +109,8 @@ MultichainConnectedSiteMenu.propTypes = { * Connection status message */ text: PropTypes.string, + /** + * onClick handler to be passed + */ + onClick: PropTypes.func, };