UX Multichain: Fixed UI updates for header (#19006)

* Fixed UI updates for header

* updated padding

* replaced grey avatar border with white color and updated snapshots

---------

Co-authored-by: David Walsh <davidwalsh83@gmail.com>

ui/components/app/connected-status-indicator/connected-status-indicator.js

@@ -62,20 +62,22 @@ export default function ConnectedStatusIndicator({ onClick }) {
       ? t('tooltipSatusConnected')
       : t('tooltipSatusNotConnected');
   return (
-    <button className="connected-status-indicator" onClick={onClick}>
+    <>
       {process.env.MULTICHAIN ? (
         <MultichainConnectedSiteMenu
           status={status}
           globalMenuColor={globalMenuColor}
           text={tooltipText}
+          as="button"
+          onClick={onClick}
         />
       ) : (
-        <>
+        <button className="connected-status-indicator" onClick={onClick}>
           <ColorIndicator color={indicatorColor} type={indicatorType} />
           <div className="connected-status-indicator__text">{text}</div>
-        </>
+        </button>
       )}
-    </button>
+    </>
   );
 }
 

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"
     >
       <div
-        class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
+        class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-background-default box--border-style-solid box--border-width-1"
       >
         <canvas
           height="32"
@@ -18,10 +18,10 @@ exports[`AccountPicker renders properly 1`] = `
         />
         <img
           alt=""
-          height="24"
+          height="16"
           src="data:image/png;base64,00"
           style="border-radius: 50%;"
-          width="24"
+          width="16"
         />
       </div>
       <span

ui/components/multichain/account-picker/account-picker.js

@@ -42,7 +42,8 @@ export const AccountPicker = ({ address, name, onClick }) => {
             : 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
       />
       <Text as="span" fontWeight={FONT_WEIGHT.BOLD} ellipsis>
         {name}

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}
             >
               <AvatarNetwork
-                margin={2}
                 className="multichain-app-header__contents--avatar-network"
                 ref={menuRef}
                 as="button"
@@ -159,7 +162,6 @@ export const AppHeader = ({ onClick }) => {
                 display={[DISPLAY.FLEX, DISPLAY.NONE]} // show on popover hide on desktop
               />
               <PickerNetwork
-                margin={2}
                 label={currentNetwork?.nickname}
                 src={currentNetwork?.rpcPrefs?.imageUrl}
                 onClick={networkOpenCallback}
@@ -202,96 +204,104 @@ export const AppHeader = ({ onClick }) => {
               <Box
                 display={DISPLAY.FLEX}
                 alignItems={AlignItems.center}
-                justifyContent={JustifyContent.spaceBetween}
+                justifyContent={JustifyContent.flexEnd}
               >
-                {showStatus ? (
+                <Box display={DISPLAY.FLEX} gap={4}>
-                  <Box ref={menuRef}>
+                  {showStatus ? (
-                    <ConnectedStatusIndicator
+                    <Box ref={menuRef}>
+                      <ConnectedStatusIndicator
+                        onClick={() => {
+                          history.push(CONNECTED_ACCOUNTS_ROUTE);
+                          trackEvent({
+                            event: MetaMetricsEventName.NavConnectedSitesOpened,
+                            category: MetaMetricsEventCategory.Navigation,
+                          });
+                        }}
+                      />
+                    </Box>
+                  ) : null}{' '}
+                  {popupStatus && multichainProductTourStep === 2 ? (
+                    <ProductTour
+                      className="multichain-app-header__product-tour"
+                      anchorElement={menuRef.current}
+                      closeMenu={() => 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}
+                  <Box
+                    ref={menuRef}
+                    display={DISPLAY.FLEX}
+                    justifyContent={JustifyContent.flexEnd}
+                    width={BLOCK_SIZES.FULL}
+                  >
+                    <ButtonIcon
+                      iconName={IconName.MoreVertical}
+                      data-testid="account-options-menu-button"
+                      ariaLabel={t('accountOptions')}
                       onClick={() => {
-                        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 }}
                     />
                   </Box>
-                ) : null}{' '}
+                </Box>
-                {popupStatus && multichainProductTourStep === 2 ? (
+                {accountOptionsMenuOpen ? (
+                  <GlobalMenu
+                    anchorElement={menuRef.current}
+                    closeMenu={() => setAccountOptionsMenuOpen(false)}
+                  />
+                ) : null}
+                {showProductTour &&
+                popupStatus &&
+                multichainProductTourStep === 3 ? (
                   <ProductTour
                     className="multichain-app-header__product-tour"
                     anchorElement={menuRef.current}
                     closeMenu={() => setAccountOptionsMenuOpen(false)}
                     prevIcon
-                    title={t('permissionsTitle')}
+                    title={t('globalTitle')}
-                    description={t('permissionsTourDescription')}
+                    description={t('globalTourDescription')}
-                    currentStep="2"
+                    currentStep="3"
                     totalSteps="3"
                     prevClick={() =>
                       setMultichainProductTourStep(
                         multichainProductTourStep - 1,
                       )
                     }
-                    onClick={() =>
+                    onClick={() => {
-                      setMultichainProductTourStep(
+                      hideProductTour();
-                        multichainProductTourStep + 1,
+                    }}
-                      )
+                    positionObj={productTourDirection === 'rtl' ? '88%' : '0%'}
-                    }
-                    positionObj={productTourDirection === 'rtl' ? '74%' : '12%'}
                     productTourDirection={productTourDirection}
                   />
                 ) : null}
-                <Box
-                  ref={menuRef}
-                  display={DISPLAY.FLEX}
-                  justifyContent={JustifyContent.flexEnd}
-                  width={BLOCK_SIZES.FULL}
-                >
-                  <ButtonIcon
-                    iconName={IconName.MoreVertical}
-                    data-testid="account-options-menu-button"
-                    ariaLabel={t('accountOptions')}
-                    onClick={() => {
-                      trackEvent({
-                        event: MetaMetricsEventName.NavAccountMenuOpened,
-                        category: MetaMetricsEventCategory.Navigation,
-                        properties: {
-                          location: 'Home',
-                        },
-                      });
-                      setAccountOptionsMenuOpen(true);
-                    }}
-                  />
-                </Box>
               </Box>
-              {accountOptionsMenuOpen ? (
-                <GlobalMenu
-                  anchorElement={menuRef.current}
-                  closeMenu={() => setAccountOptionsMenuOpen(false)}
-                />
-              ) : null}
-              {showProductTour &&
-              popupStatus &&
-              multichainProductTourStep === 3 ? (
-                <ProductTour
-                  className="multichain-app-header__product-tour"
-                  anchorElement={menuRef.current}
-                  closeMenu={() => 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}
             </Box>
           ) : (
             <Box

ui/components/multichain/multichain-connected-site-menu/__snapshots__/multichain-connected-site-menu.test.js.snap

@@ -2,8 +2,8 @@
 
 exports[`Multichain Connected Site Menu should render the site menu in connected state 1`] = `
 <div>
-  <div
+  <button
-    class="box multichain-connected-site-menu box--flex-direction-row"
+    class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
     data-testid="connection-menu"
   >
     <div>
@@ -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"
         >
           <span
-            class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-icon-default"
+            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
             style="mask-image: url('./images/icons/global.svg');"
           />
           <div
@@ -33,14 +33,14 @@ exports[`Multichain Connected Site Menu should render the site menu in connected
         </div>
       </div>
     </div>
-  </div>
+  </button>
 </div>
 `;
 
 exports[`Multichain Connected Site Menu should render the site menu in not connected state 1`] = `
 <div>
-  <div
+  <button
-    class="box multichain-connected-site-menu box--flex-direction-row"
+    class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
     data-testid="connection-menu"
   >
     <div>
@@ -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"
         >
           <span
-            class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-icon-default"
+            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
             style="mask-image: url('./images/icons/global.svg');"
           />
           <div
@@ -70,14 +70,14 @@ exports[`Multichain Connected Site Menu should render the site menu in not conne
         </div>
       </div>
     </div>
-  </div>
+  </button>
 </div>
 `;
 
 exports[`Multichain Connected Site Menu should render the site menu in not connected to current account state 1`] = `
 <div>
-  <div
+  <button
-    class="box multichain-connected-site-menu box--flex-direction-row"
+    class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
     data-testid="connection-menu"
   >
     <div>
@@ -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"
         >
           <span
-            class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-icon-default"
+            class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
             style="mask-image: url('./images/icons/global.svg');"
           />
           <div
@@ -107,6 +107,6 @@ exports[`Multichain Connected Site Menu should render the site menu in not conne
         </div>
       </div>
     </div>
-  </div>
+  </button>
 </div>
 `;

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;
+    height: 12px;
-    width: 16px;
+    width: 12px;
   }
 
   &__badge.not-connected {
-    height: 10px;
+    height: 8px;
-    width: 10px;
+    width: 8px;
   }
 
   &__badge.not-connected::after {
     content: '';
     position: absolute;
-    top: -3px;
+    top: -2px;
-    left: -3px;
+    left: -2px;
-    right: -3px;
+    right: -2px;
-    bottom: -3px;
+    bottom: -2px;
     background: var(--color-background-default);
     z-index: -1;
     border-radius: 50%;

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 = ({
     <Box
       className={classNames('multichain-connected-site-menu', className)}
       data-testid="connection-menu"
+      as="button"
+      onClick={onClick}
+      display={DISPLAY.FLEX}
+      alignItems={AlignItems.center}
+      justifyContent={JustifyContent.center}
+      backgroundColor={BackgroundColor.backgroundDefault}
     >
       <Tooltip
         title={
@@ -69,7 +83,7 @@ export const MultichainConnectedSiteMenu = ({
         >
           <Icon
             name={IconName.Global}
-            size={Size.LG}
+            size={IconSize.Sm}
             color={IconColor.iconDefault}
           />
         </BadgeWrapper>
@@ -95,4 +109,8 @@ MultichainConnectedSiteMenu.propTypes = {
    * Connection status message
    */
   text: PropTypes.string,
+  /**
+   * onClick handler to be passed
+   */
+  onClick: PropTypes.func,
 };