From 5648f9c29c54cff7d29746ae9c025f1c0d923876 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 1 Aug 2024 11:03:12 -0700
Subject: [PATCH 01/23] Bump Avatar Network marginRight to 16px

---
 ui/components/multichain/token-list-item/token-list-item.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index ed69d6638b37..22dcd69233ae 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -229,7 +229,7 @@ export const TokenListItem = ({
               }
             />
           }
-          marginRight={3}
+          marginRight={4}
           className="multichain-token-list-item__badge"
         >
           <AvatarToken

From d64de36d173b2a4966fab1a4390e02611adffeb9 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 1 Aug 2024 11:11:57 -0700
Subject: [PATCH 02/23] Tweak top & bottom padding on AssetList item

---
 ui/components/multichain/token-list-item/token-list-item.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index 22dcd69233ae..66408d58bb6a 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -189,7 +189,10 @@ export const TokenListItem = ({
         })}
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
-        padding={4}
+        paddingTop={2}
+        paddingBottom={2}
+        paddingLeft={4}
+        paddingRight={4}
         data-testid="multichain-token-list-button"
         {...(onClick && {
           as: 'a',

From 7dd7a1d67f92147869a213495408ea6e7a417fd7 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 1 Aug 2024 12:00:50 -0700
Subject: [PATCH 03/23] Bump border width on AvatarBase and set to default
 background

---
 .../component-library/avatar-network/avatar-network.tsx        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/components/component-library/avatar-network/avatar-network.tsx b/ui/components/component-library/avatar-network/avatar-network.tsx
index 487f2ad7ee05..634023d71557 100644
--- a/ui/components/component-library/avatar-network/avatar-network.tsx
+++ b/ui/components/component-library/avatar-network/avatar-network.tsx
@@ -21,7 +21,7 @@ export const AvatarNetwork: AvatarNetworkComponent = React.forwardRef(
       src,
       showHalo,
       color = TextColor.textDefault,
-      backgroundColor = BackgroundColor.backgroundAlternative,
+      backgroundColor = BackgroundColor.backgroundDefault,
       borderColor = BorderColor.transparent,
       className = '',
       ...props
@@ -55,6 +55,7 @@ export const AvatarNetwork: AvatarNetworkComponent = React.forwardRef(
         {...{
           backgroundColor,
           borderColor,
+          borderWidth: 2,
           color,
           ...(props as AvatarBaseProps<C>),
         }}

From 50affff85a0d1e5fed6f35ef2e4fbf68a49a7642 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 1 Aug 2024 12:46:32 -0700
Subject: [PATCH 04/23] Convert stakeableTitle to in-line rather than Flexbox
 to avoid incosistent padding

---
 .../multichain/token-list-item/token-list-item.js    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index 66408d58bb6a..a17bc46f2d63 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -128,11 +128,10 @@ export const TokenListItem = ({
       as="button"
       backgroundColor={BackgroundColor.transparent}
       data-testid={`staking-entrypoint-${chainId}`}
-      display={Display.InlineFlex}
-      flexDirection={FlexDirection.Row}
-      alignItems={AlignItems.center}
       gap={1}
       paddingInline={0}
+      paddingInlineStart={1}
+      paddingInlineEnd={1}
       tabIndex="0"
       onClick={(e) => {
         e.preventDefault();
@@ -159,7 +158,12 @@ export const TokenListItem = ({
       }}
     >
       <Text as="span">•</Text>
-      <Text as="span" color={TextColor.primaryDefault}>
+      <Text
+        as="span"
+        color={TextColor.primaryDefault}
+        paddingInlineStart={1}
+        paddingInlineEnd={1}
+      >
         {t('stake')}
       </Text>
       <Icon

From ec3ed118edd83a3a8fc164739f8bbaf6153c229c Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 1 Aug 2024 12:53:56 -0700
Subject: [PATCH 05/23] Bump font weight on Stake button to match token title

---
 ui/components/multichain/token-list-item/token-list-item.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index a17bc46f2d63..4493e268d33d 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -163,6 +163,7 @@ export const TokenListItem = ({
         color={TextColor.primaryDefault}
         paddingInlineStart={1}
         paddingInlineEnd={1}
+        fontWeight={FontWeight.Medium}
       >
         {t('stake')}
       </Text>

From 4f53c6ba5cf35453673c0ab3c3e4e33198e94413 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 1 Aug 2024 14:36:39 -0700
Subject: [PATCH 06/23] Update snapshots

---
 .../__snapshots__/nft-details.test.js.snap     |  2 +-
 .../__snapshots__/token-cell.test.js.snap      |  6 +++---
 .../incoming-transaction-toggle.test.js.snap   | 14 +++++++-------
 .../__snapshots__/avatar-network.test.tsx.snap |  2 +-
 .../__snapshots__/picker-network.test.tsx.snap |  2 +-
 .../__snapshots__/app-header.test.js.snap      |  4 ++--
 .../__snapshots__/asset-picker.test.tsx.snap   |  4 ++--
 .../network-list-item.test.js.snap             |  2 +-
 .../permissions-page.test.js.snap              |  2 +-
 .../__snapshots__/network-picker.test.tsx.snap |  2 +-
 .../__snapshots__/token-list-item.test.js.snap |  6 +++---
 .../__snapshots__/asset-page.test.tsx.snap     | 18 +++++++++---------
 ...age-container-header.component.test.js.snap |  2 +-
 .../header/__snapshots__/header.test.tsx.snap  |  4 ++--
 .../contract-interaction.test.tsx.snap         |  4 ++--
 ...ature-request-header.component.test.js.snap |  4 ++--
 .../confirm-send-ether.test.js.snap            |  4 ++--
 .../__snapshots__/confirm.test.tsx.snap        |  8 ++++----
 .../add-ethereum-chain.test.js.snap            |  2 +-
 .../switch-ethereum-chain.test.js.snap         | 12 ++++++------
 .../__snapshots__/security-tab.test.js.snap    | 10 +++++-----
 21 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap b/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap
index d03df016c1b3..992b0a4509fa 100644
--- a/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap
+++ b/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap
@@ -61,7 +61,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
                   style="top: -4px; right: -4px;"
                 >
                   <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
+                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                     data-testid="nft-network-badge"
                   >
                     C
diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
index a3ddde203929..00a7ed7ca3fa 100644
--- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
@@ -7,12 +7,12 @@ exports[`Token Cell should match snapshot 1`] = `
     data-testid="multichain-token-list-item"
   >
     <a
-      class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
+      class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
       data-testid="multichain-token-list-button"
       href="#"
     >
       <div
-        class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-3 mm-box--display-inline-block"
+        class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
       >
         <div
           class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
@@ -27,7 +27,7 @@ exports[`Token Cell should match snapshot 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
           >
             ?
           </div>
diff --git a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
index faf8faf6dedf..2d773a7541cf 100644
--- a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
+++ b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
@@ -23,7 +23,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           <img
             alt="Ethereum Mainnet logo"
@@ -110,7 +110,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           <img
             alt="Linea Mainnet logo"
@@ -197,7 +197,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           F
         </div>
@@ -280,7 +280,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           G
         </div>
@@ -363,7 +363,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           S
         </div>
@@ -446,7 +446,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           <img
             alt="Linea Goerli logo"
@@ -533,7 +533,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           <img
             alt="Linea Sepolia logo"
diff --git a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
index 053fae825a3e..25a445c3460d 100644
--- a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
+++ b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AvatarNetwork should render correctly 1`] = `
 <div>
   <div
-    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
     data-testid="avatar-network"
   >
     <img
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
index 0827e30f349a..6c6570063236 100644
--- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
+++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
     data-testid="picker-network"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
     >
       I
     </div>
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 d22597edd89f..b8ed9a751799 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
@@ -15,7 +15,7 @@ exports[`App Header locked state matches snapshot: locked 1`] = `
           data-testid="network-display"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             role="img"
           >
             C
@@ -441,7 +441,7 @@ exports[`App Header unlocked state matches snapshot: unlocked 1`] = `
           disabled=""
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             role="img"
           >
             C
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
index 0acf78dd5a46..57bda8b4007a 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`AssetPicker matches snapshot 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
               >
                 ?
               </div>
@@ -93,7 +93,7 @@ exports[`AssetPicker render if disabled 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
               >
                 ?
               </div>
diff --git a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
index ede77cf934c3..956445d11379 100644
--- a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
+++ b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
@@ -6,7 +6,7 @@ exports[`NetworkListItem renders properly 1`] = `
     class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
     >
       <img
         alt="Polygon logo"
diff --git a/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap b/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap
index 69054c8eaa43..0a0cfed09728 100644
--- a/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap
+++ b/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap
@@ -71,7 +71,7 @@ exports[`All Connections render renders correctly 1`] = `
                 class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
               >
                 <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
                   data-testid="connection-list-item__avatar-network-badge"
                 >
                   <img
diff --git a/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
index aaf424f4ee44..fa1ca9c9217d 100644
--- a/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
+++ b/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`SendPageNetworkPicker render renders correctly 1`] = `
       data-testid="send-page-network-picker"
     >
       <div
-        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
       >
         C
       </div>
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
index bc795c07b57b..40d4b31eef56 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -7,12 +7,12 @@ exports[`TokenListItem should render correctly 1`] = `
     data-testid="multichain-token-list-item"
   >
     <a
-      class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
+      class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
       data-testid="multichain-token-list-button"
       href="#"
     >
       <div
-        class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-3 mm-box--display-inline-block"
+        class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
       >
         <div
           class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
@@ -23,7 +23,7 @@ exports[`TokenListItem should render correctly 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
           >
             <img
               alt="network logo"
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
index 8e1446dc6461..3ce53b5881b8 100644
--- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
+++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -174,11 +174,11 @@ exports[`AssetPage should render a native asset 1`] = `
         data-testid="multichain-token-list-item"
       >
         <div
-          class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
+          class="mm-box multichain-token-list-item__container-cell mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
           data-testid="multichain-token-list-button"
         >
           <div
-            class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-3 mm-box--display-inline-block"
+            class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
           >
             <div
               class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
@@ -189,7 +189,7 @@ exports[`AssetPage should render a native asset 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
               >
                 <img
                   alt="network logo"
@@ -458,11 +458,11 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
         data-testid="multichain-token-list-item"
       >
         <div
-          class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
+          class="mm-box multichain-token-list-item__container-cell mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
           data-testid="multichain-token-list-button"
         >
           <div
-            class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-3 mm-box--display-inline-block"
+            class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
           >
             <div
               class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
@@ -473,7 +473,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
               >
                 <img
                   alt="network logo"
@@ -935,11 +935,11 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
         data-testid="multichain-token-list-item"
       >
         <div
-          class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
+          class="mm-box multichain-token-list-item__container-cell mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
           data-testid="multichain-token-list-button"
         >
           <div
-            class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-3 mm-box--display-inline-block"
+            class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
           >
             <div
               class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
@@ -950,7 +950,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
               >
                 <img
                   alt="network logo"
diff --git a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
index ba0839bfd123..d0d4bfb8fd2f 100644
--- a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
+++ b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
@@ -28,7 +28,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           ?
         </div>
diff --git a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
index 2d1ac826aa65..810e60bb8672 100644
--- a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`Header should match snapshot with signature confirmation 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           C
         </div>
@@ -168,7 +168,7 @@ exports[`Header should match snapshot with transaction confirmation 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           ?
         </div>
diff --git a/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
index dcf160546ca0..e68998f12dde 100644
--- a/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
@@ -431,7 +431,7 @@ exports[`<ContractInteractionInfo /> renders component for contract interaction
                       style="padding: 1px 8px 1px 4px;"
                     >
                       <div
-                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
                       >
                         <img
                           alt="ETH logo"
@@ -790,7 +790,7 @@ exports[`<ContractInteractionInfo /> renders component for contract interaction
                       style="padding: 1px 8px 1px 4px;"
                     >
                       <div
-                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
                       >
                         E
                       </div>
diff --git a/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap b/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
index eb3f057a76a7..d34a0efc16a2 100644
--- a/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
+++ b/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
@@ -74,7 +74,7 @@ exports[`SignatureRequestHeader renders correctly with fromAccount 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           C
         </div>
@@ -109,7 +109,7 @@ exports[`SignatureRequestHeader renders correctly without fromAccount 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
         >
           C
         </div>
diff --git a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index bc7049ab2173..dcb774cc575e 100644
--- a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -83,7 +83,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
           >
             C
           </div>
@@ -299,7 +299,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 variant="inherit"
               >
                 <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
                 >
                   g
                 </div>
diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index 64eed06931de..a824743cec17 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               C
             </div>
@@ -288,7 +288,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               C
             </div>
@@ -1199,7 +1199,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               C
             </div>
@@ -1822,7 +1822,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               C
             </div>
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
index 8fd320c388cc..f8951f20011c 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -15,7 +15,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
           >
             ?
           </div>
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
index 4671e67ab89c..db0a5abe3d2e 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
@@ -15,7 +15,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
           >
             ?
           </div>
@@ -49,7 +49,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               T
             </div>
@@ -74,7 +74,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               T
             </div>
@@ -129,7 +129,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
           >
             ?
           </div>
@@ -163,7 +163,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               T
             </div>
@@ -188,7 +188,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               T
             </div>
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
index dcf41e47ee77..146d4f25cc2a 100644
--- a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -567,7 +567,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               <img
                 alt="Custom Mainnet RPC logo"
@@ -654,7 +654,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               <img
                 alt="Linea Mainnet logo"
@@ -741,7 +741,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               C
             </div>
@@ -824,7 +824,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               S
             </div>
@@ -907,7 +907,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
             >
               <img
                 alt="Linea Sepolia logo"

From 9e420ff7c1517e72bce16b57b7a546f511750ec1 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 1 Aug 2024 22:18:33 -0700
Subject: [PATCH 07/23] Tweak padding on Import Token modal

---
 ui/components/app/import-token/token-list/index.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/import-token/token-list/index.scss b/ui/components/app/import-token/token-list/index.scss
index 49611764c985..e94a62de0600 100644
--- a/ui/components/app/import-token/token-list/index.scss
+++ b/ui/components/app/import-token/token-list/index.scss
@@ -23,7 +23,10 @@
   &__token_component {
     display: flex;
     flex-flow: row nowrap;
-    padding: 16px;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 8px;
+    padding-bottom: 8px;
     align-items: center;
     cursor: pointer;
 

From 4ebdb9ce828585d74ecaddd793250e61e41e885c Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 1 Aug 2024 22:23:22 -0700
Subject: [PATCH 08/23] Tweak padding on Account Overview tabs

---
 .../multichain/account-overview/account-overview-tabs.tsx      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/components/multichain/account-overview/account-overview-tabs.tsx b/ui/components/multichain/account-overview/account-overview-tabs.tsx
index 33de033fa103..554d9fb0acfc 100644
--- a/ui/components/multichain/account-overview/account-overview-tabs.tsx
+++ b/ui/components/multichain/account-overview/account-overview-tabs.tsx
@@ -61,7 +61,6 @@ export const AccountOverviewTabs = ({
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
 
-  const tabPadding = 4;
   const tabProps = useMemo(
     () => ({
       activeClassName: 'account-overview__tab--active',
@@ -128,7 +127,7 @@ export const AccountOverviewTabs = ({
   ///: END:ONLY_INCLUDE_IF
 
   return (
-    <Box style={{ flexGrow: '1' }} paddingTop={tabPadding}>
+    <Box style={{ flexGrow: '1' }}>
       <Tabs
         defaultActiveTabKey={defaultHomeActiveTabName}
         onTabClick={handleTabClick}

From 7bd5456deb16378a6f62b2d7618befa9e6ac6ef1 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 1 Aug 2024 23:22:28 -0700
Subject: [PATCH 09/23] Use outline instead of border for AvatarNetwork, remove
 border from AvatarToken, handle hover state on AvatarNetwork background

---
 .../avatar-network/avatar-network.scss                |  2 ++
 .../avatar-network/avatar-network.tsx                 |  3 ---
 ui/components/multichain/token-list-item/index.scss   |  3 +++
 .../multichain/token-list-item/token-list-item.js     | 11 +----------
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/ui/components/component-library/avatar-network/avatar-network.scss b/ui/components/component-library/avatar-network/avatar-network.scss
index a71418b3e073..3a0810003671 100644
--- a/ui/components/component-library/avatar-network/avatar-network.scss
+++ b/ui/components/component-library/avatar-network/avatar-network.scss
@@ -1,4 +1,6 @@
 .mm-avatar-network {
+  outline: solid 2px;
+  outline-color: var(--color-background-default);
   &--with-halo {
     position: relative;
   }
diff --git a/ui/components/component-library/avatar-network/avatar-network.tsx b/ui/components/component-library/avatar-network/avatar-network.tsx
index 634023d71557..48b8526ca7ec 100644
--- a/ui/components/component-library/avatar-network/avatar-network.tsx
+++ b/ui/components/component-library/avatar-network/avatar-network.tsx
@@ -22,7 +22,6 @@ export const AvatarNetwork: AvatarNetworkComponent = React.forwardRef(
       showHalo,
       color = TextColor.textDefault,
       backgroundColor = BackgroundColor.backgroundDefault,
-      borderColor = BorderColor.transparent,
       className = '',
       ...props
     }: AvatarNetworkProps<C>,
@@ -54,8 +53,6 @@ export const AvatarNetwork: AvatarNetworkComponent = React.forwardRef(
         )}
         {...{
           backgroundColor,
-          borderColor,
-          borderWidth: 2,
           color,
           ...(props as AvatarBaseProps<C>),
         }}
diff --git a/ui/components/multichain/token-list-item/index.scss b/ui/components/multichain/token-list-item/index.scss
index f40fcf5a1df6..a0ec48b23020 100644
--- a/ui/components/multichain/token-list-item/index.scss
+++ b/ui/components/multichain/token-list-item/index.scss
@@ -4,6 +4,9 @@
       &:hover,
       &:focus-within {
         background-color: var(--color-background-default-hover);
+        .mm-avatar-network {
+            outline-color: var(--color-background-default-hover);
+        }
       }
     }
   }
diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index 4493e268d33d..3d38c9be3610 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -230,21 +230,12 @@ export const TokenListItem = ({
               name={currentNetwork?.nickname}
               src={currentNetwork?.rpcPrefs?.imageUrl}
               backgroundColor={testNetworkBackgroundColor}
-              borderColor={
-                primaryTokenImage
-                  ? BorderColor.borderMuted
-                  : BorderColor.borderDefault
-              }
             />
           }
           marginRight={4}
           className="multichain-token-list-item__badge"
         >
-          <AvatarToken
-            name={tokenSymbol}
-            src={tokenImage}
-            borderColor={tokenImage ? undefined : BorderColor.borderDefault}
-          />
+          <AvatarToken name={tokenSymbol} src={tokenImage} />
         </BadgeWrapper>
         <Box
           className="multichain-token-list-item__container-cell--text-container"

From 3aff29b0c6b3398faebfec841b76694083817386 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 1 Aug 2024 23:26:49 -0700
Subject: [PATCH 10/23] Update snapshots

---
 .../__snapshots__/token-cell.test.js.snap          |  2 +-
 .../incoming-transaction-toggle.test.js.snap       | 14 +++++++-------
 .../__snapshots__/avatar-network.test.tsx.snap     |  2 +-
 .../__snapshots__/picker-network.test.tsx.snap     |  2 +-
 .../__snapshots__/app-header.test.js.snap          |  4 ++--
 .../__snapshots__/asset-picker.test.tsx.snap       |  4 ++--
 .../__snapshots__/network-list-item.test.js.snap   |  2 +-
 .../__snapshots__/network-picker.test.tsx.snap     |  2 +-
 .../__snapshots__/token-list-item.test.js.snap     |  4 ++--
 .../__snapshots__/asset-page.test.tsx.snap         | 12 ++++++------
 ...rm-page-container-header.component.test.js.snap |  2 +-
 .../header/__snapshots__/header.test.tsx.snap      |  4 ++--
 .../contract-interaction.test.tsx.snap             |  4 ++--
 ...signature-request-header.component.test.js.snap |  4 ++--
 .../__snapshots__/confirm-send-ether.test.js.snap  |  4 ++--
 .../confirm/__snapshots__/confirm.test.tsx.snap    |  8 ++++----
 .../__snapshots__/add-ethereum-chain.test.js.snap  |  2 +-
 .../switch-ethereum-chain.test.js.snap             | 12 ++++++------
 .../__snapshots__/security-tab.test.js.snap        | 10 +++++-----
 19 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
index 00a7ed7ca3fa..4d23ac310a49 100644
--- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
@@ -27,7 +27,7 @@ exports[`Token Cell should match snapshot 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--rounded-full"
           >
             ?
           </div>
diff --git a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
index 2d773a7541cf..d598971c5c8b 100644
--- a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
+++ b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
@@ -23,7 +23,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           <img
             alt="Ethereum Mainnet logo"
@@ -110,7 +110,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           <img
             alt="Linea Mainnet logo"
@@ -197,7 +197,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           F
         </div>
@@ -280,7 +280,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           G
         </div>
@@ -363,7 +363,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           S
         </div>
@@ -446,7 +446,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           <img
             alt="Linea Goerli logo"
@@ -533,7 +533,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           <img
             alt="Linea Sepolia logo"
diff --git a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
index 25a445c3460d..862c40e971dd 100644
--- a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
+++ b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AvatarNetwork should render correctly 1`] = `
 <div>
   <div
-    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
     data-testid="avatar-network"
   >
     <img
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
index 6c6570063236..6abb35f62353 100644
--- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
+++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
     data-testid="picker-network"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
     >
       I
     </div>
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 b8ed9a751799..b4ba44df3945 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
@@ -15,7 +15,7 @@ exports[`App Header locked state matches snapshot: locked 1`] = `
           data-testid="network-display"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             role="img"
           >
             C
@@ -441,7 +441,7 @@ exports[`App Header unlocked state matches snapshot: unlocked 1`] = `
           disabled=""
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             role="img"
           >
             C
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
index 57bda8b4007a..b4e301bc4673 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`AssetPicker matches snapshot 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
               >
                 ?
               </div>
@@ -93,7 +93,7 @@ exports[`AssetPicker render if disabled 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
               >
                 ?
               </div>
diff --git a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
index 956445d11379..c9a9d9af39e3 100644
--- a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
+++ b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
@@ -6,7 +6,7 @@ exports[`NetworkListItem renders properly 1`] = `
     class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
     >
       <img
         alt="Polygon logo"
diff --git a/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
index fa1ca9c9217d..12fc9e4e04c6 100644
--- a/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
+++ b/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`SendPageNetworkPicker render renders correctly 1`] = `
       data-testid="send-page-network-picker"
     >
       <div
-        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
       >
         C
       </div>
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
index 40d4b31eef56..1ad2e7ee6703 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -15,7 +15,7 @@ exports[`TokenListItem should render correctly 1`] = `
         class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
         >
           ?
         </div>
@@ -23,7 +23,7 @@ exports[`TokenListItem should render correctly 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
           >
             <img
               alt="network logo"
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
index 3ce53b5881b8..2fb4e82126ba 100644
--- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
+++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -181,7 +181,7 @@ exports[`AssetPage should render a native asset 1`] = `
             class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
             >
               T
             </div>
@@ -189,7 +189,7 @@ exports[`AssetPage should render a native asset 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
               >
                 <img
                   alt="network logo"
@@ -465,7 +465,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
             class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
             >
               T
             </div>
@@ -473,7 +473,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
               >
                 <img
                   alt="network logo"
@@ -942,7 +942,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
             class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
             >
               T
             </div>
@@ -950,7 +950,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted mm-box--border-width-2 box--border-style-solid"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
               >
                 <img
                   alt="network logo"
diff --git a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
index d0d4bfb8fd2f..bb007cb76a3a 100644
--- a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
+++ b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
@@ -28,7 +28,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           ?
         </div>
diff --git a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
index 810e60bb8672..19efae407b93 100644
--- a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`Header should match snapshot with signature confirmation 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           C
         </div>
@@ -168,7 +168,7 @@ exports[`Header should match snapshot with transaction confirmation 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           ?
         </div>
diff --git a/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
index e68998f12dde..901f36c90c33 100644
--- a/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
@@ -431,7 +431,7 @@ exports[`<ContractInteractionInfo /> renders component for contract interaction
                       style="padding: 1px 8px 1px 4px;"
                     >
                       <div
-                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
                       >
                         <img
                           alt="ETH logo"
@@ -790,7 +790,7 @@ exports[`<ContractInteractionInfo /> renders component for contract interaction
                       style="padding: 1px 8px 1px 4px;"
                     >
                       <div
-                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
                       >
                         E
                       </div>
diff --git a/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap b/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
index d34a0efc16a2..e3406af5c855 100644
--- a/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
+++ b/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
@@ -74,7 +74,7 @@ exports[`SignatureRequestHeader renders correctly with fromAccount 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           C
         </div>
@@ -109,7 +109,7 @@ exports[`SignatureRequestHeader renders correctly without fromAccount 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
         >
           C
         </div>
diff --git a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index dcb774cc575e..5e1f626d96f1 100644
--- a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -83,7 +83,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
           >
             C
           </div>
@@ -299,7 +299,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 variant="inherit"
               >
                 <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
                 >
                   g
                 </div>
diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index a824743cec17..2c4a111c2b59 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               C
             </div>
@@ -288,7 +288,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               C
             </div>
@@ -1199,7 +1199,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               C
             </div>
@@ -1822,7 +1822,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               C
             </div>
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
index f8951f20011c..81b020fa3297 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -15,7 +15,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
           >
             ?
           </div>
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
index db0a5abe3d2e..bde088c62859 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
@@ -15,7 +15,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
           >
             ?
           </div>
@@ -49,7 +49,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               T
             </div>
@@ -74,7 +74,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               T
             </div>
@@ -129,7 +129,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
           >
             ?
           </div>
@@ -163,7 +163,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               T
             </div>
@@ -188,7 +188,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               T
             </div>
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
index 146d4f25cc2a..a7c6ad9d3692 100644
--- a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -567,7 +567,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               <img
                 alt="Custom Mainnet RPC logo"
@@ -654,7 +654,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               <img
                 alt="Linea Mainnet logo"
@@ -741,7 +741,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               C
             </div>
@@ -824,7 +824,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               S
             </div>
@@ -907,7 +907,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent mm-box--border-width-2 box--border-style-solid"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
             >
               <img
                 alt="Linea Sepolia logo"

From 919ea3aa39112c9743db898946be2381c16f64d4 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 2 Aug 2024 00:04:03 -0700
Subject: [PATCH 11/23] Lint

---
 .../component-library/avatar-network/avatar-network.tsx         | 1 -
 ui/components/multichain/token-list-item/token-list-item.js     | 2 --
 2 files changed, 3 deletions(-)

diff --git a/ui/components/component-library/avatar-network/avatar-network.tsx b/ui/components/component-library/avatar-network/avatar-network.tsx
index 48b8526ca7ec..0e0643a60a97 100644
--- a/ui/components/component-library/avatar-network/avatar-network.tsx
+++ b/ui/components/component-library/avatar-network/avatar-network.tsx
@@ -6,7 +6,6 @@ import {
   JustifyContent,
   TextColor,
   BackgroundColor,
-  BorderColor,
 } from '../../../helpers/constants/design-system';
 import type { PolymorphicRef } from '../box';
 import { AvatarBase, AvatarBaseProps } from '../avatar-base';
diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index 3d38c9be3610..cc7e296455fd 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -8,7 +8,6 @@ import {
   AlignItems,
   BackgroundColor,
   BlockSize,
-  BorderColor,
   Display,
   FlexDirection,
   FontWeight,
@@ -82,7 +81,6 @@ export const TokenListItem = ({
 }) => {
   const t = useI18nContext();
   const isEvm = useSelector(getMultichainIsEvm);
-  const primaryTokenImage = useSelector(getMultichainNativeCurrencyImage);
   const trackEvent = useContext(MetaMetricsContext);
   const chainId = useSelector(getMultichainCurrentChainId);
   const metaMetricsId = useSelector(getMetaMetricsId);

From 49453a1ccb30a5bd35086276655b563c91c45dac Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 2 Aug 2024 08:23:49 -0700
Subject: [PATCH 12/23] Lint

---
 ui/components/multichain/token-list-item/token-list-item.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index cc7e296455fd..e1fac62e0af6 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -45,7 +45,6 @@ import {
   getMultichainCurrentChainId,
   getMultichainCurrentNetwork,
   getMultichainIsEvm,
-  getMultichainNativeCurrencyImage,
 } from '../../../selectors/multichain';
 import Tooltip from '../../ui/tooltip';
 import { useI18nContext } from '../../../hooks/useI18nContext';

From be1befe2129df1d378f8029fd1cefdfed58666a8 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 2 Aug 2024 09:03:45 -0700
Subject: [PATCH 13/23] Lint scss file

---
 .../component-library/avatar-network/avatar-network.scss       | 1 +
 ui/components/multichain/token-list-item/index.scss            | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/components/component-library/avatar-network/avatar-network.scss b/ui/components/component-library/avatar-network/avatar-network.scss
index 3a0810003671..693d6c272349 100644
--- a/ui/components/component-library/avatar-network/avatar-network.scss
+++ b/ui/components/component-library/avatar-network/avatar-network.scss
@@ -1,6 +1,7 @@
 .mm-avatar-network {
   outline: solid 2px;
   outline-color: var(--color-background-default);
+
   &--with-halo {
     position: relative;
   }
diff --git a/ui/components/multichain/token-list-item/index.scss b/ui/components/multichain/token-list-item/index.scss
index a0ec48b23020..4e5a2afdab6d 100644
--- a/ui/components/multichain/token-list-item/index.scss
+++ b/ui/components/multichain/token-list-item/index.scss
@@ -4,8 +4,9 @@
       &:hover,
       &:focus-within {
         background-color: var(--color-background-default-hover);
+
         .mm-avatar-network {
-            outline-color: var(--color-background-default-hover);
+          outline-color: var(--color-background-default-hover);
         }
       }
     }

From f8c9881ac05a4d4302038e4980cb419f9e3346d9 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 2 Aug 2024 11:39:36 -0700
Subject: [PATCH 14/23] Remove all borders from NetworkAvatar icons, in network
 tab, network modal, and network pill selector

---
 .../component-library/picker-network/picker-network.scss | 4 ++++
 ui/components/multichain/network-list-item/index.scss    | 9 +++++++++
 ui/pages/settings/networks-tab/index.scss                | 4 +++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui/components/component-library/picker-network/picker-network.scss b/ui/components/component-library/picker-network/picker-network.scss
index 76ac895cbb91..8d672e71ef2a 100644
--- a/ui/components/component-library/picker-network/picker-network.scss
+++ b/ui/components/component-library/picker-network/picker-network.scss
@@ -6,4 +6,8 @@
   &:not([disabled]):active {
     background-color: var(--color-background-default-hover);
   }
+
+  .mm-avatar-network {
+    outline: none;
+  }
 }
diff --git a/ui/components/multichain/network-list-item/index.scss b/ui/components/multichain/network-list-item/index.scss
index a7a1e6aa158e..3a668f679d09 100644
--- a/ui/components/multichain/network-list-item/index.scss
+++ b/ui/components/multichain/network-list-item/index.scss
@@ -6,6 +6,11 @@
     &:hover,
     &:focus-within {
       background: var(--color-background-default-hover);
+
+      .mm-avatar-network {
+        outline: solid 2px;
+        outline-color: var(--color-background-default-hover);
+      }
     }
   }
 
@@ -20,6 +25,10 @@
     .multichain-network-list-item__delete {
       visibility: visible;
     }
+    .mm-avatar-network {
+      outline: solid 2px;
+      outline-color: transparent;
+    }
   }
 
   &__network-name {
diff --git a/ui/pages/settings/networks-tab/index.scss b/ui/pages/settings/networks-tab/index.scss
index 69f1cbb9d073..d5e500018d0d 100644
--- a/ui/pages/settings/networks-tab/index.scss
+++ b/ui/pages/settings/networks-tab/index.scss
@@ -61,7 +61,9 @@
     }
 
     &__custom-image {
-      border: 1px solid var(--color-border-muted);
+      border: none;
+      outline: 2px solid;
+      outline-color: var(--color-background-default);
     }
 
     &__icon-with-fallback {

From ce838ef7c7c3f35ccafa724820d34426317291c0 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 2 Aug 2024 11:53:31 -0700
Subject: [PATCH 15/23] Lint css

---
 ui/components/multichain/network-list-item/index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/components/multichain/network-list-item/index.scss b/ui/components/multichain/network-list-item/index.scss
index 3a668f679d09..057099649745 100644
--- a/ui/components/multichain/network-list-item/index.scss
+++ b/ui/components/multichain/network-list-item/index.scss
@@ -25,6 +25,7 @@
     .multichain-network-list-item__delete {
       visibility: visible;
     }
+
     .mm-avatar-network {
       outline: solid 2px;
       outline-color: transparent;

From 1ff64c5e2626b560135d382b4283d5c3490bc9c9 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 2 Aug 2024 13:04:45 -0700
Subject: [PATCH 16/23] Move padding to jsx, rather than scss

---
 ui/components/app/import-token/token-list/index.scss          | 4 ----
 .../app/import-token/token-list/token-list.component.js       | 4 ++++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/import-token/token-list/index.scss b/ui/components/app/import-token/token-list/index.scss
index e94a62de0600..b4ad3120e1f6 100644
--- a/ui/components/app/import-token/token-list/index.scss
+++ b/ui/components/app/import-token/token-list/index.scss
@@ -23,10 +23,6 @@
   &__token_component {
     display: flex;
     flex-flow: row nowrap;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-top: 8px;
-    padding-bottom: 8px;
     align-items: center;
     cursor: pointer;
 
diff --git a/ui/components/app/import-token/token-list/token-list.component.js b/ui/components/app/import-token/token-list/token-list.component.js
index bb472a703ba0..2a9ac9eb3b64 100644
--- a/ui/components/app/import-token/token-list/token-list.component.js
+++ b/ui/components/app/import-token/token-list/token-list.component.js
@@ -72,6 +72,10 @@ export default class TokenList extends Component {
                     <Box
                       key={address}
                       display={Display.Flex}
+                      paddingLeft={4}
+                      paddingRight={4}
+                      paddingTop={2}
+                      paddingBottom={2}
                       className={classnames('token-list__token_component', {
                         'token-list__token_component--selected':
                           selectedTokens[address],

From 0e4494a7e0e76875896ef0e1667f417d2c75c7fe Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 22 Aug 2024 15:00:27 -0700
Subject: [PATCH 17/23] Replace border to AvatarNetwork component-library,
 remove custom outline styles

---
 .../avatar-network/avatar-network.tsx                  |  3 +++
 .../picker-network/picker-network.scss                 |  4 ----
 ui/components/multichain/network-list-item/index.scss  | 10 ----------
 ui/components/multichain/token-list-item/index.scss    |  4 ----
 ui/pages/settings/networks-tab/index.scss              |  4 +---
 5 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/ui/components/component-library/avatar-network/avatar-network.tsx b/ui/components/component-library/avatar-network/avatar-network.tsx
index 0e0643a60a97..396b7f5a1444 100644
--- a/ui/components/component-library/avatar-network/avatar-network.tsx
+++ b/ui/components/component-library/avatar-network/avatar-network.tsx
@@ -6,6 +6,7 @@ import {
   JustifyContent,
   TextColor,
   BackgroundColor,
+  BorderColor,
 } from '../../../helpers/constants/design-system';
 import type { PolymorphicRef } from '../box';
 import { AvatarBase, AvatarBaseProps } from '../avatar-base';
@@ -21,6 +22,7 @@ export const AvatarNetwork: AvatarNetworkComponent = React.forwardRef(
       showHalo,
       color = TextColor.textDefault,
       backgroundColor = BackgroundColor.backgroundDefault,
+      borderColor = BorderColor.transparent,
       className = '',
       ...props
     }: AvatarNetworkProps<C>,
@@ -52,6 +54,7 @@ export const AvatarNetwork: AvatarNetworkComponent = React.forwardRef(
         )}
         {...{
           backgroundColor,
+          borderColor,
           color,
           ...(props as AvatarBaseProps<C>),
         }}
diff --git a/ui/components/component-library/picker-network/picker-network.scss b/ui/components/component-library/picker-network/picker-network.scss
index 8d672e71ef2a..76ac895cbb91 100644
--- a/ui/components/component-library/picker-network/picker-network.scss
+++ b/ui/components/component-library/picker-network/picker-network.scss
@@ -6,8 +6,4 @@
   &:not([disabled]):active {
     background-color: var(--color-background-default-hover);
   }
-
-  .mm-avatar-network {
-    outline: none;
-  }
 }
diff --git a/ui/components/multichain/network-list-item/index.scss b/ui/components/multichain/network-list-item/index.scss
index 057099649745..a7a1e6aa158e 100644
--- a/ui/components/multichain/network-list-item/index.scss
+++ b/ui/components/multichain/network-list-item/index.scss
@@ -6,11 +6,6 @@
     &:hover,
     &:focus-within {
       background: var(--color-background-default-hover);
-
-      .mm-avatar-network {
-        outline: solid 2px;
-        outline-color: var(--color-background-default-hover);
-      }
     }
   }
 
@@ -25,11 +20,6 @@
     .multichain-network-list-item__delete {
       visibility: visible;
     }
-
-    .mm-avatar-network {
-      outline: solid 2px;
-      outline-color: transparent;
-    }
   }
 
   &__network-name {
diff --git a/ui/components/multichain/token-list-item/index.scss b/ui/components/multichain/token-list-item/index.scss
index 4e5a2afdab6d..f40fcf5a1df6 100644
--- a/ui/components/multichain/token-list-item/index.scss
+++ b/ui/components/multichain/token-list-item/index.scss
@@ -4,10 +4,6 @@
       &:hover,
       &:focus-within {
         background-color: var(--color-background-default-hover);
-
-        .mm-avatar-network {
-          outline-color: var(--color-background-default-hover);
-        }
       }
     }
   }
diff --git a/ui/pages/settings/networks-tab/index.scss b/ui/pages/settings/networks-tab/index.scss
index d5e500018d0d..69f1cbb9d073 100644
--- a/ui/pages/settings/networks-tab/index.scss
+++ b/ui/pages/settings/networks-tab/index.scss
@@ -61,9 +61,7 @@
     }
 
     &__custom-image {
-      border: none;
-      outline: 2px solid;
-      outline-color: var(--color-background-default);
+      border: 1px solid var(--color-border-muted);
     }
 
     &__icon-with-fallback {

From 160cdcc951f57c9e8d62324f5c791402ae1daa09 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 22 Aug 2024 15:42:06 -0700
Subject: [PATCH 18/23] Update snapshots

---
 .../__snapshots__/token-cell.test.js.snap          |  2 +-
 .../incoming-transaction-toggle.test.js.snap       | 14 +++++++-------
 .../__snapshots__/avatar-network.test.tsx.snap     |  2 +-
 .../__snapshots__/picker-network.test.tsx.snap     |  2 +-
 .../__snapshots__/app-header.test.js.snap          |  4 ++--
 .../__snapshots__/network-list-item.test.js.snap   |  2 +-
 .../__snapshots__/network-picker.test.tsx.snap     |  2 +-
 .../__snapshots__/token-list-item.test.js.snap     |  2 +-
 .../__snapshots__/asset-page.test.tsx.snap         |  6 +++---
 ...rm-page-container-header.component.test.js.snap |  2 +-
 .../header/__snapshots__/header.test.tsx.snap      |  4 ++--
 ...signature-request-header.component.test.js.snap |  4 ++--
 .../__snapshots__/confirm-send-ether.test.js.snap  |  4 ++--
 .../confirm/__snapshots__/confirm.test.tsx.snap    |  8 ++++----
 .../__snapshots__/add-ethereum-chain.test.js.snap  |  2 +-
 .../switch-ethereum-chain.test.js.snap             | 12 ++++++------
 .../__snapshots__/security-tab.test.js.snap        | 10 +++++-----
 17 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
index 4d23ac310a49..5fe8fdcb8129 100644
--- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
@@ -27,7 +27,7 @@ exports[`Token Cell should match snapshot 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--rounded-full"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             ?
           </div>
diff --git a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
index d598971c5c8b..101f635fb0eb 100644
--- a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
+++ b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
@@ -23,7 +23,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           <img
             alt="Ethereum Mainnet logo"
@@ -110,7 +110,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           <img
             alt="Linea Mainnet logo"
@@ -197,7 +197,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           F
         </div>
@@ -280,7 +280,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           G
         </div>
@@ -363,7 +363,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           S
         </div>
@@ -446,7 +446,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           <img
             alt="Linea Goerli logo"
@@ -533,7 +533,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           <img
             alt="Linea Sepolia logo"
diff --git a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
index 862c40e971dd..8cbe6acea75b 100644
--- a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
+++ b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AvatarNetwork should render correctly 1`] = `
 <div>
   <div
-    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-network"
   >
     <img
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
index 6abb35f62353..051770f6d339 100644
--- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
+++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
     data-testid="picker-network"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       I
     </div>
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 b4ba44df3945..dc06b711a6df 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
@@ -15,7 +15,7 @@ exports[`App Header locked state matches snapshot: locked 1`] = `
           data-testid="network-display"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             role="img"
           >
             C
@@ -441,7 +441,7 @@ exports[`App Header unlocked state matches snapshot: unlocked 1`] = `
           disabled=""
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             role="img"
           >
             C
diff --git a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
index c9a9d9af39e3..29b109270ae5 100644
--- a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
+++ b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
@@ -6,7 +6,7 @@ exports[`NetworkListItem renders properly 1`] = `
     class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       <img
         alt="Polygon logo"
diff --git a/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
index 12fc9e4e04c6..ca2313615565 100644
--- a/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
+++ b/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`SendPageNetworkPicker render renders correctly 1`] = `
       data-testid="send-page-network-picker"
     >
       <div
-        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
       >
         C
       </div>
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
index 1ad2e7ee6703..f96eeac19da6 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -23,7 +23,7 @@ exports[`TokenListItem should render correctly 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <img
               alt="network logo"
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
index becdf38aebf5..a61e4d0b5488 100644
--- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
+++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -189,7 +189,7 @@ exports[`AssetPage should render a native asset 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
               >
                 <img
                   alt="network logo"
@@ -473,7 +473,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
               >
                 <img
                   alt="network logo"
@@ -950,7 +950,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
               >
                 <img
                   alt="network logo"
diff --git a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
index bb007cb76a3a..27958f54ac8d 100644
--- a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
+++ b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
@@ -28,7 +28,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           ?
         </div>
diff --git a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
index 19efae407b93..f9322111027a 100644
--- a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`Header should match snapshot with signature confirmation 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           C
         </div>
@@ -168,7 +168,7 @@ exports[`Header should match snapshot with transaction confirmation 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           ?
         </div>
diff --git a/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap b/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
index e3406af5c855..581a907d0876 100644
--- a/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
+++ b/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
@@ -74,7 +74,7 @@ exports[`SignatureRequestHeader renders correctly with fromAccount 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           C
         </div>
@@ -109,7 +109,7 @@ exports[`SignatureRequestHeader renders correctly without fromAccount 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           C
         </div>
diff --git a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index fce8ad77f15f..dd262cb03b36 100644
--- a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -83,7 +83,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             C
           </div>
@@ -299,7 +299,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 variant="inherit"
               >
                 <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
                 >
                   g
                 </div>
diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index 6a8c84f646ee..4fd2f6a41bce 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               C
             </div>
@@ -288,7 +288,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               C
             </div>
@@ -1199,7 +1199,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               C
             </div>
@@ -1823,7 +1823,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               C
             </div>
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
index b5f00e8c3c88..6b98173d3869 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -15,7 +15,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             T
           </div>
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
index 565cfdb16cce..8aa66556969a 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
@@ -15,7 +15,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             T
           </div>
@@ -51,7 +51,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               T
             </div>
@@ -76,7 +76,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               T
             </div>
@@ -131,7 +131,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             T
           </div>
@@ -167,7 +167,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               T
             </div>
@@ -192,7 +192,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               T
             </div>
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
index a7c6ad9d3692..d0bb33c97be5 100644
--- a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -567,7 +567,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <img
                 alt="Custom Mainnet RPC logo"
@@ -654,7 +654,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <img
                 alt="Linea Mainnet logo"
@@ -741,7 +741,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               C
             </div>
@@ -824,7 +824,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               S
             </div>
@@ -907,7 +907,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <img
                 alt="Linea Sepolia logo"

From f3a46d072a42c4ba757fca52f6634d25a4be81c5 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 22 Aug 2024 16:03:09 -0700
Subject: [PATCH 19/23] Add content-box to mm-avatar-network styles

---
 .../component-library/avatar-network/avatar-network.scss       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/components/component-library/avatar-network/avatar-network.scss b/ui/components/component-library/avatar-network/avatar-network.scss
index 693d6c272349..c2fb4a35802b 100644
--- a/ui/components/component-library/avatar-network/avatar-network.scss
+++ b/ui/components/component-library/avatar-network/avatar-network.scss
@@ -1,6 +1,5 @@
 .mm-avatar-network {
-  outline: solid 2px;
-  outline-color: var(--color-background-default);
+  box-sizing: content-box;
 
   &--with-halo {
     position: relative;

From cbabd33493908f48b4c0f8059a5d6b79d033f900 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 22 Aug 2024 16:17:44 -0700
Subject: [PATCH 20/23] Revert borderColor to existing implementation of
 alternative

---
 .../__snapshots__/nft-details.test.js.snap         |  2 +-
 .../incoming-transaction-toggle.test.js.snap       | 14 +++++++-------
 .../__snapshots__/avatar-network.test.tsx.snap     |  2 +-
 .../avatar-network/avatar-network.tsx              |  2 +-
 .../__snapshots__/picker-network.test.tsx.snap     |  2 +-
 .../__snapshots__/app-header.test.js.snap          |  4 ++--
 .../__snapshots__/asset-picker.test.tsx.snap       |  4 ++--
 .../__snapshots__/network-list-item.test.js.snap   |  2 +-
 .../__snapshots__/permissions-page.test.js.snap    |  2 +-
 .../__snapshots__/network-picker.test.tsx.snap     |  2 +-
 .../__snapshots__/token-list-item.test.js.snap     |  2 +-
 .../__snapshots__/asset-page.test.tsx.snap         |  6 +++---
 ...rm-page-container-header.component.test.js.snap |  2 +-
 .../header/__snapshots__/header.test.tsx.snap      |  4 ++--
 .../base-transaction-info.test.tsx.snap            |  4 ++--
 ...signature-request-header.component.test.js.snap |  4 ++--
 .../__snapshots__/confirm-send-ether.test.js.snap  |  4 ++--
 .../confirm/__snapshots__/confirm.test.tsx.snap    |  8 ++++----
 .../__snapshots__/add-ethereum-chain.test.js.snap  |  2 +-
 .../switch-ethereum-chain.test.js.snap             | 12 ++++++------
 .../__snapshots__/security-tab.test.js.snap        | 10 +++++-----
 21 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap b/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap
index 992b0a4509fa..d03df016c1b3 100644
--- a/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap
+++ b/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap
@@ -61,7 +61,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
                   style="top: -4px; right: -4px;"
                 >
                   <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
+                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                     data-testid="nft-network-badge"
                   >
                     C
diff --git a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
index 101f635fb0eb..faf8faf6dedf 100644
--- a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
+++ b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
@@ -23,7 +23,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           <img
             alt="Ethereum Mainnet logo"
@@ -110,7 +110,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           <img
             alt="Linea Mainnet logo"
@@ -197,7 +197,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           F
         </div>
@@ -280,7 +280,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           G
         </div>
@@ -363,7 +363,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           S
         </div>
@@ -446,7 +446,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           <img
             alt="Linea Goerli logo"
@@ -533,7 +533,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
         class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           <img
             alt="Linea Sepolia logo"
diff --git a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
index 8cbe6acea75b..053fae825a3e 100644
--- a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
+++ b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AvatarNetwork should render correctly 1`] = `
 <div>
   <div
-    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-network"
   >
     <img
diff --git a/ui/components/component-library/avatar-network/avatar-network.tsx b/ui/components/component-library/avatar-network/avatar-network.tsx
index 396b7f5a1444..487f2ad7ee05 100644
--- a/ui/components/component-library/avatar-network/avatar-network.tsx
+++ b/ui/components/component-library/avatar-network/avatar-network.tsx
@@ -21,7 +21,7 @@ export const AvatarNetwork: AvatarNetworkComponent = React.forwardRef(
       src,
       showHalo,
       color = TextColor.textDefault,
-      backgroundColor = BackgroundColor.backgroundDefault,
+      backgroundColor = BackgroundColor.backgroundAlternative,
       borderColor = BorderColor.transparent,
       className = '',
       ...props
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
index 051770f6d339..0827e30f349a 100644
--- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
+++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
     data-testid="picker-network"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       I
     </div>
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 dc06b711a6df..d22597edd89f 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
@@ -15,7 +15,7 @@ exports[`App Header locked state matches snapshot: locked 1`] = `
           data-testid="network-display"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             role="img"
           >
             C
@@ -441,7 +441,7 @@ exports[`App Header unlocked state matches snapshot: unlocked 1`] = `
           disabled=""
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             role="img"
           >
             C
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
index b4e301bc4673..0acf78dd5a46 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`AssetPicker matches snapshot 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
               >
                 ?
               </div>
@@ -93,7 +93,7 @@ exports[`AssetPicker render if disabled 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
               >
                 ?
               </div>
diff --git a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
index 29b109270ae5..ede77cf934c3 100644
--- a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
+++ b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
@@ -6,7 +6,7 @@ exports[`NetworkListItem renders properly 1`] = `
     class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       <img
         alt="Polygon logo"
diff --git a/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap b/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap
index 0a0cfed09728..69054c8eaa43 100644
--- a/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap
+++ b/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap
@@ -71,7 +71,7 @@ exports[`All Connections render renders correctly 1`] = `
                 class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
               >
                 <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
                   data-testid="connection-list-item__avatar-network-badge"
                 >
                   <img
diff --git a/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
index ca2313615565..aaf424f4ee44 100644
--- a/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
+++ b/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`SendPageNetworkPicker render renders correctly 1`] = `
       data-testid="send-page-network-picker"
     >
       <div
-        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
       >
         C
       </div>
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
index f96eeac19da6..28f15721f180 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -23,7 +23,7 @@ exports[`TokenListItem should render correctly 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <img
               alt="network logo"
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
index a61e4d0b5488..e9cba232d9ea 100644
--- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
+++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -189,7 +189,7 @@ exports[`AssetPage should render a native asset 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
               >
                 <img
                   alt="network logo"
@@ -473,7 +473,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
               >
                 <img
                   alt="network logo"
@@ -950,7 +950,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
               >
                 <img
                   alt="network logo"
diff --git a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
index 27958f54ac8d..ba0839bfd123 100644
--- a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
+++ b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
@@ -28,7 +28,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           ?
         </div>
diff --git a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
index f9322111027a..2d1ac826aa65 100644
--- a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`Header should match snapshot with signature confirmation 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           C
         </div>
@@ -168,7 +168,7 @@ exports[`Header should match snapshot with transaction confirmation 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           ?
         </div>
diff --git a/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
index 6ebf0bf85a59..5f3365506436 100644
--- a/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
@@ -438,7 +438,7 @@ exports[`<BaseTransactionInfo /> renders component for contract interaction requ
                       style="padding: 1px 8px 1px 4px;"
                     >
                       <div
-                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
                       >
                         <img
                           alt="ETH logo"
@@ -804,7 +804,7 @@ exports[`<BaseTransactionInfo /> renders component for contract interaction requ
                       style="padding: 1px 8px 1px 4px;"
                     >
                       <div
-                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
                       >
                         E
                       </div>
diff --git a/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap b/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
index 581a907d0876..eb3f057a76a7 100644
--- a/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
+++ b/ui/pages/confirmations/components/signature-request/signature-request-header/__snapshots__/signature-request-header.component.test.js.snap
@@ -74,7 +74,7 @@ exports[`SignatureRequestHeader renders correctly with fromAccount 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           C
         </div>
@@ -109,7 +109,7 @@ exports[`SignatureRequestHeader renders correctly without fromAccount 1`] = `
         class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
         >
           C
         </div>
diff --git a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index dd262cb03b36..2ea808dd192e 100644
--- a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -83,7 +83,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             C
           </div>
@@ -299,7 +299,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 variant="inherit"
               >
                 <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
                 >
                   g
                 </div>
diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index 4fd2f6a41bce..2b394a6786b4 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               C
             </div>
@@ -288,7 +288,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               C
             </div>
@@ -1199,7 +1199,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               C
             </div>
@@ -1823,7 +1823,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
               </div>
             </div>
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               C
             </div>
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
index 6b98173d3869..b8a02a46e7e5 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -15,7 +15,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             T
           </div>
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
index 8aa66556969a..f00635b4425a 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
@@ -15,7 +15,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             T
           </div>
@@ -51,7 +51,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               T
             </div>
@@ -76,7 +76,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               T
             </div>
@@ -131,7 +131,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
           class="mm-box mm-picker-network network-display mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-border-muted mm-box--border-width-0 box--border-style-solid box--border-width-1"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             T
           </div>
@@ -167,7 +167,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               T
             </div>
@@ -192,7 +192,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
             class="mm-box confirmation-network-switch__icon mm-box--display-block"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-network mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--margin-bottom-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               T
             </div>
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
index d0bb33c97be5..dcf41e47ee77 100644
--- a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -567,7 +567,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <img
                 alt="Custom Mainnet RPC logo"
@@ -654,7 +654,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <img
                 alt="Linea Mainnet logo"
@@ -741,7 +741,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               C
             </div>
@@ -824,7 +824,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               S
             </div>
@@ -907,7 +907,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <img
                 alt="Linea Sepolia logo"

From be4ed7d67529e7a150b632570d64da3c1bf9f97b Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Fri, 23 Aug 2024 15:08:32 -0700
Subject: [PATCH 21/23] chore: adding storybook for token-list moving avatar
 network updates to token list and replacing some css for style utility props

---
 .../app/import-token/token-list/index.scss    |  9 +--
 .../token-list/token-list.component.js        | 20 +++++-
 .../token-list/token-list.stories.tsx         | 67 +++++++++++++++++++
 .../avatar-network/avatar-network.scss        |  2 -
 4 files changed, 86 insertions(+), 12 deletions(-)
 create mode 100644 ui/components/app/import-token/token-list/token-list.stories.tsx

diff --git a/ui/components/app/import-token/token-list/index.scss b/ui/components/app/import-token/token-list/index.scss
index b4ad3120e1f6..3884eea0d22b 100644
--- a/ui/components/app/import-token/token-list/index.scss
+++ b/ui/components/app/import-token/token-list/index.scss
@@ -10,8 +10,6 @@
   }
 
   &__tokens-container {
-    display: flex;
-    flex-direction: column;
     overflow: auto;
     max-height: 214.5px;
 
@@ -21,13 +19,10 @@
   }
 
   &__token_component {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
     cursor: pointer;
 
-    &--selected {
-      background-color: var(--color-primary-muted);
+    &__network-badge {
+      box-sizing: content-box; // Prevents border effecting size of badge image
     }
 
     &--disabled {
diff --git a/ui/components/app/import-token/token-list/token-list.component.js b/ui/components/app/import-token/token-list/token-list.component.js
index 2a9ac9eb3b64..f63c8eaf34f1 100644
--- a/ui/components/app/import-token/token-list/token-list.component.js
+++ b/ui/components/app/import-token/token-list/token-list.component.js
@@ -17,6 +17,9 @@ import {
   TextColor,
   TextVariant,
   FontWeight,
+  FlexDirection,
+  FlexWrap,
+  BackgroundColor,
 } from '../../../../helpers/constants/design-system';
 import TokenListPlaceholder from './token-list-placeholder';
 
@@ -56,7 +59,11 @@ export default class TokenList extends Component {
             <TokenListPlaceholder />
           </Box>
         ) : (
-          <Box className="token-list__tokens-container">
+          <Box
+            className="token-list__tokens-container"
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+          >
             {Array(12)
               .fill(undefined)
               .map((_, i) => {
@@ -72,13 +79,19 @@ export default class TokenList extends Component {
                     <Box
                       key={address}
                       display={Display.Flex}
+                      alignItems={AlignItems.center}
+                      flexDirection={FlexDirection.Row}
+                      flexWrap={FlexWrap.NoWrap}
                       paddingLeft={4}
                       paddingRight={4}
                       paddingTop={2}
                       paddingBottom={2}
+                      backgroundColor={
+                        selectedTokens[address]
+                          ? BackgroundColor.primaryMuted
+                          : BackgroundColor.transparent
+                      }
                       className={classnames('token-list__token_component', {
-                        'token-list__token_component--selected':
-                          selectedTokens[address],
                         'token-list__token_component--disabled':
                           tokenAlreadyAdded,
                       })}
@@ -104,6 +117,7 @@ export default class TokenList extends Component {
                                 name={currentNetwork?.nickname}
                                 src={currentNetwork?.rpcPrefs?.imageUrl}
                                 backgroundColor={testNetworkBackgroundColor}
+                                className="token-list__token_component__network-badge"
                               />
                             }
                             marginRight={4}
diff --git a/ui/components/app/import-token/token-list/token-list.stories.tsx b/ui/components/app/import-token/token-list/token-list.stories.tsx
new file mode 100644
index 000000000000..5141e2442a4c
--- /dev/null
+++ b/ui/components/app/import-token/token-list/token-list.stories.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import TokenList from './token-list.component';
+
+export default {
+  title: 'Components/App/TokenList',
+  component: TokenList,
+  argTypes: {
+    tokens: {
+      control: 'array',
+    },
+    results: {
+      control: 'array',
+    },
+    selectedTokens: {
+      control: 'object',
+    },
+    onToggleToken: {
+      action: 'onToggleToken',
+    },
+    currentNetwork: {
+      control: 'object',
+    },
+    testNetworkBackgroundColor: {
+      control: 'object',
+    },
+  },
+} as Meta<typeof TokenList>;
+
+const Template = (args: any) => <TokenList {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  currentNetwork: {
+    name: 'Ethereum',
+    chainId: 1,
+    nickname: 'Ethereum',
+    rpcPrefs: {
+      imageUrl: './images/eth_logo.svg',
+    },
+  },
+  selectedTokens: {
+    '0x9f9d0248bc87bee3ef76f9bb46aaaa01d80cc339': true,
+  },
+  results: [
+    {
+      symbol: 'ETH',
+      name: 'Ethereum',
+      address: '0x9f9d0248bc87bee3ef76f9bb46aaaa01d80cc339',
+      iconUrl: './images/eth_logo.svg',
+    },
+    {
+      symbol: 'DAI',
+      name: 'Dai Stablecoin',
+      address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+      iconUrl: 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png',
+    },
+    {
+      symbol: 'XYZ',
+      name: 'XYZ Token',
+      address: '0x1234567890abcdef',
+      iconUrl: 'https://example.com/xyz.png',
+    },
+  ],
+};
+
+export const ShowTokenListPlaceholder = Template.bind({});
\ No newline at end of file
diff --git a/ui/components/component-library/avatar-network/avatar-network.scss b/ui/components/component-library/avatar-network/avatar-network.scss
index c2fb4a35802b..a71418b3e073 100644
--- a/ui/components/component-library/avatar-network/avatar-network.scss
+++ b/ui/components/component-library/avatar-network/avatar-network.scss
@@ -1,6 +1,4 @@
 .mm-avatar-network {
-  box-sizing: content-box;
-
   &--with-halo {
     position: relative;
   }

From 0d3d34eea89bd0f37de0665a1f4edd0b0bf6c7fd Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Fri, 23 Aug 2024 15:31:18 -0700
Subject: [PATCH 22/23] chore: moving border to outside of network badge in
 mutlichain token list item

---
 .../app/import-token/token-list/token-list.stories.tsx        | 2 +-
 ui/components/multichain/token-list-item/index.scss           | 4 ++++
 ui/components/multichain/token-list-item/token-list-item.js   | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/import-token/token-list/token-list.stories.tsx b/ui/components/app/import-token/token-list/token-list.stories.tsx
index 5141e2442a4c..7388abca3510 100644
--- a/ui/components/app/import-token/token-list/token-list.stories.tsx
+++ b/ui/components/app/import-token/token-list/token-list.stories.tsx
@@ -64,4 +64,4 @@ Default.args = {
   ],
 };
 
-export const ShowTokenListPlaceholder = Template.bind({});
\ No newline at end of file
+export const ShowTokenListPlaceholder = Template.bind({});
diff --git a/ui/components/multichain/token-list-item/index.scss b/ui/components/multichain/token-list-item/index.scss
index f40fcf5a1df6..d73591ddcdba 100644
--- a/ui/components/multichain/token-list-item/index.scss
+++ b/ui/components/multichain/token-list-item/index.scss
@@ -10,5 +10,9 @@
 
   &__badge {
     align-self: center;
+
+    &__avatar-network {
+      box-sizing: content-box;
+    }
   }
 }
diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index e1fac62e0af6..f28a53bcd075 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -227,6 +227,7 @@ export const TokenListItem = ({
               name={currentNetwork?.nickname}
               src={currentNetwork?.rpcPrefs?.imageUrl}
               backgroundColor={testNetworkBackgroundColor}
+              className="multichain-token-list-item__badge__avatar-network"
             />
           }
           marginRight={4}

From dae0ccf9143be2491e8e16baa8efddb786bb965c Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Fri, 23 Aug 2024 15:40:20 -0700
Subject: [PATCH 23/23] chore: updating snapshots

---
 .../assets/token-cell/__snapshots__/token-cell.test.js.snap | 2 +-
 .../__snapshots__/token-list-item.test.js.snap              | 2 +-
 .../asset/components/__snapshots__/asset-page.test.tsx.snap | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
index 5fe8fdcb8129..e40a15f69863 100644
--- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
@@ -27,7 +27,7 @@ exports[`Token Cell should match snapshot 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             ?
           </div>
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
index 28f15721f180..f1eea600fbc8 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -23,7 +23,7 @@ exports[`TokenListItem should render correctly 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <img
               alt="network logo"
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
index e9cba232d9ea..b1b1b47f8882 100644
--- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
+++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -189,7 +189,7 @@ exports[`AssetPage should render a native asset 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
               >
                 <img
                   alt="network logo"
@@ -473,7 +473,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
               >
                 <img
                   alt="network logo"
@@ -950,7 +950,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
               class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
             >
               <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
               >
                 <img
                   alt="network logo"