From 112511542fb32557b9c101de996f5c2fb3ad3aae Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 20 Jul 2023 18:29:24 -0500
Subject: [PATCH] UX: Use classNames in ConnectedSitesMenu (#20067)

* UX: Use classNames in ConnectedSitesMenu

* Update snapshots
---
 .../__snapshots__/connected-site-menu.test.js.snap        | 4 ++--
 .../multichain/connected-site-menu/connected-site-menu.js | 8 +++-----
 2 files changed, 5 insertions(+), 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
index 372d90b6f51d..b6538b1d9ae4 100644
--- 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
index 8d67867b21b9..16d7a345d9ee 100644
--- 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