chore: Polish multichain token list styles

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

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,14 +19,10 @@
   }
 
   &__token_component {
-    display: flex;
-    flex-flow: row nowrap;
-    padding: 16px;
-    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 {

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,9 +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,
                       })}
@@ -100,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}

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({});

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/token-list-item/__snapshots__/token-list-item.test.js.snap

@@ -7,23 +7,23 @@ 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"
+          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>
         <div
           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-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <img
               alt="network logo"

ui/components/multichain/token-list-item/token-list-item.js

@@ -8,7 +8,6 @@ import {
   AlignItems,
   BackgroundColor,
   BlockSize,
-  BorderColor,
   Display,
   FlexDirection,
   FontWeight,
@@ -46,7 +45,6 @@ import {
   getMultichainCurrentChainId,
   getMultichainCurrentNetwork,
   getMultichainIsEvm,
-  getMultichainNativeCurrencyImage,
 } from '../../../selectors/multichain';
 import Tooltip from '../../ui/tooltip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -82,7 +80,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);
@@ -128,11 +125,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 +155,13 @@ export const TokenListItem = ({
       }}
     >
       <Text as="span">•</Text>
-      <Text as="span" color={TextColor.primaryDefault}>
+      <Text
+        as="span"
+        color={TextColor.primaryDefault}
+        paddingInlineStart={1}
+        paddingInlineEnd={1}
+        fontWeight={FontWeight.Medium}
+      >
         {t('stake')}
       </Text>
       <Icon
@@ -189,7 +191,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',
@@ -222,21 +227,12 @@ export const TokenListItem = ({
               name={currentNetwork?.nickname}
               src={currentNetwork?.rpcPrefs?.imageUrl}
               backgroundColor={testNetworkBackgroundColor}
-              borderColor={
-                primaryTokenImage
-                  ? BorderColor.borderMuted
-                  : BorderColor.borderDefault
-              }
             />
           }
-          marginRight={3}
+          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"