chore: Polish multichain token list styles

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

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"
           >
             ?
           </div>

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;
 

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"
         >
           <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"
         >
           <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"
         >
           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"
         >
           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"
         >
           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"
         >
           <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"
         >
           <img
             alt="Linea Sepolia logo"

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"
     data-testid="avatar-network"
   >
     <img

ui/components/component-library/avatar-network/avatar-network.scss

@@ -1,4 +1,7 @@
 .mm-avatar-network {
+  outline: solid 2px;
+  outline-color: var(--color-background-default);
+
   &--with-halo {
     position: relative;
   }

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';
@@ -21,8 +20,7 @@ export const AvatarNetwork: AvatarNetworkComponent = React.forwardRef(
       src,
       showHalo,
       color = TextColor.textDefault,
-      backgroundColor = BackgroundColor.backgroundAlternative,
-      borderColor = BorderColor.transparent,
+      backgroundColor = BackgroundColor.backgroundDefault,
       className = '',
       ...props
     }: AvatarNetworkProps<C>,
@@ -54,7 +52,6 @@ export const AvatarNetwork: AvatarNetworkComponent = React.forwardRef(
         )}
         {...{
           backgroundColor,
-          borderColor,
           color,
           ...(props as AvatarBaseProps<C>),
         }}

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"
     >
       I
     </div>

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;
+  }
 }

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}

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"
             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"
             role="img"
           >
             C

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 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-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 box--border-style-solid box--border-width-1"
               >
                 ?
               </div>

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"
     >
       <img
         alt="Polygon logo"

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,11 @@
     .multichain-network-list-item__delete {
       visibility: visible;
     }
+
+    .mm-avatar-network {
+      outline: solid 2px;
+      outline-color: transparent;
+    }
   }
 
   &__network-name {