fix: vertically align asset image

MetaMask · Jul 19, 2024 · 229405f · 229405f
1 parent ee1dfe4
commit 229405f
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 50 deletions.
diff --git a/...ents/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap b/...ents/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
@@ -13,29 +13,33 @@ exports[`AssetPicker matches snapshot 1`] = `
         class="mm-box mm-box--display-flex mm-box--gap-3 mm-box--align-items-center"
       >
         <div
-          class="mm-box mm-badge-wrapper mm-box--display-inline-block"
+          class="mm-box mm-box--display-flex"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo 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"
-          >
-            <img
-              aria-hidden="true"
-              class="mm-avatar-token__token-image--blurred"
-              src="./images/eth_logo.svg"
-            />
-            <img
-              alt="NATIVE TICKER logo"
-              class="mm-avatar-token__token-image--size-reduced"
-              src="./images/eth_logo.svg"
-            />
-          </div>
-          <div
-            class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
+            class="mm-box mm-badge-wrapper mm-box--display-inline-block"
           >
             <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-md mm-avatar-token mm-avatar-token--with-halo 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"
+            >
+              <img
+                aria-hidden="true"
+                class="mm-avatar-token__token-image--blurred"
+                src="./images/eth_logo.svg"
+              />
+              <img
+                alt="NATIVE TICKER logo"
+                class="mm-avatar-token__token-image--size-reduced"
+                src="./images/eth_logo.svg"
+              />
+            </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"
+              >
+                ?
+              </div>
             </div>
           </div>
         </div>
@@ -80,20 +84,24 @@ exports[`AssetPicker render if disabled 1`] = `
         class="mm-box mm-box--display-flex mm-box--gap-3 mm-box--align-items-center"
       >
         <div
-          class="mm-box mm-badge-wrapper mm-box--display-inline-block"
+          class="mm-box mm-box--display-flex"
         >
           <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo 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"
-          >
-            s
-          </div>
-          <div
-            class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
+            class="mm-box mm-badge-wrapper mm-box--display-inline-block"
           >
             <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-md mm-avatar-token mm-avatar-token--with-halo 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"
+            >
+              s
+            </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-default box--border-style-solid box--border-width-1"
+              >
+                ?
+              </div>
             </div>
           </div>
         </div>

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
@@ -179,30 +179,32 @@ export function AssetPicker({
         title={handleAssetPickerTitle()}
       >
         <Box display={Display.Flex} alignItems={AlignItems.center} gap={3}>
-          <BadgeWrapper
-            badge={
-              <AvatarNetwork
-                size={AvatarNetworkSize.Xs}
-                name={currentNetwork?.nickname}
-                src={currentNetwork?.rpcPrefs?.imageUrl}
-                backgroundColor={testNetworkBackgroundColor}
-                borderColor={
-                  primaryTokenImage
-                    ? BorderColor.borderMuted
-                    : BorderColor.borderDefault
-                }
+          <Box display={Display.Flex}>
+            <BadgeWrapper
+              badge={
+                <AvatarNetwork
+                  size={AvatarNetworkSize.Xs}
+                  name={currentNetwork?.nickname}
+                  src={currentNetwork?.rpcPrefs?.imageUrl}
+                  backgroundColor={testNetworkBackgroundColor}
+                  borderColor={
+                    primaryTokenImage
+                      ? BorderColor.borderMuted
+                      : BorderColor.borderDefault
+                  }
+                />
+              }
+            >
+              <AvatarToken
+                borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
+                src={primaryTokenImage}
+                size={AvatarTokenSize.Md}
+                showHalo={!isNFT}
+                name={symbol}
+                {...(isNFT && { backgroundColor: BackgroundColor.transparent })}
               />
-            }
-          >
-            <AvatarToken
-              borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
-              src={primaryTokenImage}
-              size={AvatarTokenSize.Md}
-              showHalo={!isNFT}
-              name={symbol}
-              {...(isNFT && { backgroundColor: BackgroundColor.transparent })}
-            />
-          </BadgeWrapper>
+            </BadgeWrapper>
+          </Box>
 
           <Tooltip disabled={!isSymbolLong} title={symbol} position="bottom">
             <Text className="asset-picker__symbol" variant={TextVariant.bodyMd}>