From a14bdd36abab3467acca5e6cedcd4b31a3bfd627 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 5 Oct 2023 22:25:34 -0500
Subject: [PATCH] Fix the alignment of the account picker

---
 .../account-picker/account-picker.js          |  8 +-
 .../multichain/app-header/app-header.js       | 97 ++++++++++---------
 .../multichain/app-header/app-header.scss     |  9 ++
 3 files changed, 69 insertions(+), 45 deletions(-)

diff --git a/ui/components/multichain/account-picker/account-picker.js b/ui/components/multichain/account-picker/account-picker.js
index 278f0b54d7c9..74b68f18797d 100644
--- a/ui/components/multichain/account-picker/account-picker.js
+++ b/ui/components/multichain/account-picker/account-picker.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { toChecksumHexAddress } from '@metamask/controller-utils';
+import classnames from 'classnames';
 import {
   Box,
   AvatarAccount,
@@ -32,6 +33,7 @@ export const AccountPicker = ({
   name,
   onClick,
   disabled,
+  className = '',
   showAddress = false,
 }) => {
   const useBlockie = useSelector(getUseBlockie);
@@ -39,7 +41,7 @@ export const AccountPicker = ({
 
   return (
     <ButtonBase
-      className="multichain-account-picker"
+      className={classnames('multichain-account-picker', className)}
       data-testid="account-menu-icon"
       onClick={onClick}
       backgroundColor={BackgroundColor.transparent}
@@ -112,4 +114,8 @@ AccountPicker.propTypes = {
    * Represents if the account address should display
    */
   showAddress: PropTypes.bool,
+  /**
+   * CSS class to be added to the root element
+   */
+  className: PropTypes.string,
 };
diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js
index b7714766c954..32b2ec9a6fa3 100644
--- a/ui/components/multichain/app-header/app-header.js
+++ b/ui/components/multichain/app-header/app-header.js
@@ -210,6 +210,9 @@ export const AppHeader = ({ location }) => {
             <Box
               className={classnames('multichain-app-header__contents', {
                 'multichain-app-header-shadow': isUnlocked && !popupStatus,
+                'multichain-app-header__contents--no-network': Boolean(
+                  process.env.MULTICHAIN,
+                ),
               })}
               alignItems={AlignItems.center}
               width={BlockSize.Full}
@@ -220,52 +223,53 @@ export const AppHeader = ({ location }) => {
               gap={2}
             >
               {popupStatus ? (
-                <Box className="multichain-app-header__contents__container">
-                  <Box
-                    display={showNetworkPicker ? Display.Flex : Display.None}
-                  >
-                    <Tooltip title={currentNetwork?.nickname} position="right">
-                      <PickerNetwork
-                        avatarNetworkProps={{
-                          backgroundColor: testNetworkBackgroundColor,
-                        }}
-                        className="multichain-app-header__contents--avatar-network"
-                        ref={menuRef}
-                        as="button"
-                        src={currentNetwork?.rpcPrefs?.imageUrl}
-                        label={currentNetwork?.nickname}
-                        aria-label={t('networkMenu')}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          e.preventDefault();
-                          networkOpenCallback();
-                        }}
-                        display={[Display.Flex, Display.None]} // show on popover hide on desktop
-                        disabled={disableNetworkPicker}
-                      />
-                    </Tooltip>
-                  </Box>
+                <Box
+                  className="multichain-app-header__contents__container"
+                  display={showNetworkPicker ? Display.Flex : Display.None}
+                >
+                  <Tooltip title={currentNetwork?.nickname} position="right">
+                    <PickerNetwork
+                      avatarNetworkProps={{
+                        backgroundColor: testNetworkBackgroundColor,
+                      }}
+                      className="multichain-app-header__contents--avatar-network"
+                      ref={menuRef}
+                      as="button"
+                      src={currentNetwork?.rpcPrefs?.imageUrl}
+                      label={currentNetwork?.nickname}
+                      aria-label={t('networkMenu')}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        networkOpenCallback();
+                      }}
+                      display={[Display.Flex, Display.None]} // show on popover hide on desktop
+                      disabled={disableNetworkPicker}
+                    />
+                  </Tooltip>
                 </Box>
               ) : (
-                <Box display={showNetworkPicker ? Display.Flex : Display.None}>
-                  <PickerNetwork
-                    avatarNetworkProps={{
-                      backgroundColor: testNetworkBackgroundColor,
-                    }}
-                    margin={2}
-                    label={currentNetwork?.nickname}
-                    src={currentNetwork?.rpcPrefs?.imageUrl}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      networkOpenCallback();
-                    }}
-                    display={[Display.None, Display.Flex]} // show on desktop hide on popover
-                    className="multichain-app-header__contents__network-picker"
-                    disabled={disableNetworkPicker}
-                    data-testid="network-display"
-                  />
-                </Box>
+                showNetworkPicker && (
+                  <Box>
+                    <PickerNetwork
+                      avatarNetworkProps={{
+                        backgroundColor: testNetworkBackgroundColor,
+                      }}
+                      margin={2}
+                      label={currentNetwork?.nickname}
+                      src={currentNetwork?.rpcPrefs?.imageUrl}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        networkOpenCallback();
+                      }}
+                      display={[Display.None, Display.Flex]} // show on desktop hide on popover
+                      className="multichain-app-header__contents__network-picker"
+                      disabled={disableNetworkPicker}
+                      data-testid="network-display"
+                    />
+                  </Box>
+                )
               )}
               {showProductTour &&
               popupStatus &&
@@ -303,6 +307,11 @@ export const AppHeader = ({ location }) => {
                   }}
                   disabled={disableAccountPicker}
                   showAddress={Boolean(process.env.MULTICHAIN)}
+                  className={classnames({
+                    'multichain-app-header__account-picker': Boolean(
+                      process.env.MULTICHAIN,
+                    ),
+                  })}
                 />
               ) : null}
               <Box
diff --git a/ui/components/multichain/app-header/app-header.scss b/ui/components/multichain/app-header/app-header.scss
index d7d12cbfc9b1..da8380c1ddee 100644
--- a/ui/components/multichain/app-header/app-header.scss
+++ b/ui/components/multichain/app-header/app-header.scss
@@ -13,6 +13,10 @@
     grid-template-columns: 1fr 2fr 1fr;
     height: 64px;
 
+    &--no-network {
+      grid-template-columns: 2fr 1fr;
+    }
+
     @include screen-sm-max {
       height: $height-screen-sm-max;
     }
@@ -42,6 +46,11 @@
     }
   }
 
+  /* Aligns the Account Picker left when there's no PickerNetwork */
+  &__account-picker {
+    justify-self: baseline;
+  }
+
   &__lock-contents {
     flex-flow: row nowrap;
     height: 64px;