From ea872946cd97eabc8b1be72ee642512036378d4d Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 25 Apr 2023 15:39:54 -0500
Subject: [PATCH] UX: Multichain: App header cleanups (#18627)

* UX: Multichain: App header cleanups

* Fix snapshot

---------

Co-authored-by: David Walsh <davidwalsh83@gmail>
---
 .../__snapshots__/app-header.test.js.snap     |  2 +-
 .../multichain/app-header/app-header.js       | 22 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index d4d1cc8da..7592d9461 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -6,7 +6,7 @@ exports[`App Header should match snapshot 1`] = `
     class="box multichain-app-header multichain-app-header-shadow box--display-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default"
   >
     <div
-      class="box multichain-app-header__lock-contents  box--padding-2 box--display-flex box--gap-2 box--flex-direction-row box--justify-content-space-between box--align-items-center box--width-full box--background-color-background-default"
+      class="box multichain-app-header__lock-contents box--padding-2 box--display-flex box--gap-2 box--flex-direction-row box--justify-content-space-between box--align-items-center box--width-full box--background-color-background-default"
     >
       <button
         class="box mm-picker-network box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"
diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js
index 105a38f7e..70a7631e8 100644
--- a/ui/components/multichain/app-header/app-header.js
+++ b/ui/components/multichain/app-header/app-header.js
@@ -1,4 +1,5 @@
 import React, { useContext, useState, useRef } from 'react';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import browser from 'webextension-polyfill';
 import { useDispatch, useSelector } from 'react-redux';
@@ -59,6 +60,7 @@ export const AppHeader = ({ onClick }) => {
   const history = useHistory();
   const isUnlocked = useSelector((state) => state.metamask.isUnlocked);
   const t = useI18nContext();
+
   // Used for account picker
   const identity = useSelector(getSelectedIdentity);
   const dispatch = useDispatch();
@@ -105,9 +107,9 @@ export const AppHeader = ({ onClick }) => {
       ) : null}
       <Box
         display={DISPLAY.FLEX}
-        className={`multichain-app-header ${
-          !isUnlocked || popupStatus ? 'multichain-app-header-shadow' : ''
-        }`}
+        className={classnames('multichain-app-header', {
+          'multichain-app-header-shadow': !isUnlocked || popupStatus,
+        })}
         alignItems={AlignItems.center}
         width={BLOCK_SIZES.FULL}
         backgroundColor={
@@ -119,9 +121,9 @@ export const AppHeader = ({ onClick }) => {
         <>
           {isUnlocked ? (
             <Box
-              className={`multichain-app-header__contents ${
-                isUnlocked && !popupStatus ? 'multichain-app-header-shadow' : ''
-              }`}
+              className={classnames('multichain-app-header__contents', {
+                'multichain-app-header-shadow': isUnlocked && !popupStatus,
+              })}
               alignItems={AlignItems.center}
               width={BLOCK_SIZES.FULL}
               backgroundColor={BackgroundColor.backgroundDefault}
@@ -216,7 +218,7 @@ export const AppHeader = ({ onClick }) => {
                   <ButtonIcon
                     iconName={IconName.MoreVertical}
                     data-testid="account-options-menu-button"
-                    ariaLabel="NEEDS NEW TRANSLATED LABEL" // TODO: Update the label
+                    ariaLabel={t('accountOptions')}
                     onClick={() => {
                       trackEvent({
                         event: MetaMetricsEventName.NavAccountMenuOpened,
@@ -262,9 +264,9 @@ export const AppHeader = ({ onClick }) => {
           ) : (
             <Box
               display={DISPLAY.FLEX}
-              className={`multichain-app-header__lock-contents ${
-                isUnlocked && !popupStatus ? 'multichain-app-header-shadow' : ''
-              }`}
+              className={classnames('multichain-app-header__lock-contents', {
+                'multichain-app-header-shadow': isUnlocked && !popupStatus,
+              })}
               alignItems={AlignItems.center}
               width={BLOCK_SIZES.FULL}
               justifyContent={JustifyContent.spaceBetween}