UX: Use classNames in ConnectedSitesMenu (#20067)

* UX: Use classNames in ConnectedSitesMenu * Update snapshots
MetaMask · Jul 20, 2023 · 1125115 · 1125115
1 parent 26d7520
commit 1125115
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap b/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
@@ -27,7 +27,7 @@ exports[`Connected Site Menu should render the site menu in connected state 1`]
             style="bottom: 2px; right: -4px; z-index: 1;"
           >
             <div
-              class="mm-box multichain-connected-site-menu__badge  mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-3 box--border-style-solid"
+              class="mm-box multichain-connected-site-menu__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-3 box--border-style-solid"
             />
           </div>
         </div>
@@ -64,7 +64,7 @@ exports[`Connected Site Menu should render the site menu in not connected state
             style="bottom: 2px; right: -4px; z-index: 1;"
           >
             <div
-              class="mm-box multichain-connected-site-menu__badge  mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-3 box--border-style-solid"
+              class="mm-box multichain-connected-site-menu__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-3 box--border-style-solid"
             />
           </div>
         </div>

diff --git a/ui/components/multichain/connected-site-menu/connected-site-menu.js b/ui/components/multichain/connected-site-menu/connected-site-menu.js
@@ -64,11 +64,9 @@ export const ConnectedSiteMenu = ({
           badge={
             <Box
               backgroundColor={globalMenuColor}
-              className={`multichain-connected-site-menu__badge ${
-                status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT
-                  ? 'not-connected'
-                  : ''
-              }`}
+              className={classNames('multichain-connected-site-menu__badge', {
+                'not-connected': status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
+              })}
               borderRadius={BorderRadius.full}
               borderColor={
                 status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT