From 2cfd0f9bbdd8c1c40e42203cc1e7986820fe82e8 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 21 Feb 2023 09:49:16 -0600
Subject: [PATCH] Ux: Icon: Improve alignment of asset list chevron (#17791)

* Ux: Icon: Improve alignment of asset list chevron

* Update jest snapshot
---
 .../app/asset-list-item/asset-list-item.js    | 10 +++++----
 .../__snapshots__/token-cell.test.js.snap     | 22 +++++++++++--------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/ui/components/app/asset-list-item/asset-list-item.js b/ui/components/app/asset-list-item/asset-list-item.js
index f65c13545..66985c29c 100644
--- a/ui/components/app/asset-list-item/asset-list-item.js
+++ b/ui/components/app/asset-list-item/asset-list-item.js
@@ -16,7 +16,8 @@ import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
 import { EVENT } from '../../../../shared/constants/metametrics';
 import { AssetType } from '../../../../shared/constants/transaction';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import { Icon, ICON_NAMES } from '../../component-library';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import Box from '../../ui/box/box';
 
 const AssetListItem = ({
   className,
@@ -138,14 +139,15 @@ const AssetListItem = ({
       midContent={midContent}
       rightContent={
         !isERC721 && (
-          <>
+          <Box>
             <Icon
               name={ICON_NAMES.ARROW_RIGHT}
               color={Color.iconDefault}
-              className="asset-list-item__chevron-right"
+              size={ICON_SIZES.SM}
+              style={{ 'vertical-align': 'middle' }}
             />
             {sendTokenButton}
-          </>
+          </Box>
         )
       }
     />
diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
index ee1ea8df5..9a2af824b 100644
--- a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
@@ -81,16 +81,20 @@ exports[`Token Cell should match snapshot 1`] = `
       class="list-item__right-content"
     >
       <div
-        class="box asset-list-item__chevron-right mm-icon mm-icon--size-md box--flex-direction-row box--color-icon-default"
-        style="mask-image: url('./images/icons/arrow-right.svg');"
-      />
-      <a
-        class="button btn-link asset-list-item__send-token-button"
-        role="button"
-        tabindex="0"
+        class="box box--flex-direction-row"
       >
-        Send TEST
-      </a>
+        <div
+          class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
+          style="mask-image: url('./images/icons/arrow-right.svg'); vertical-align: middle;"
+        />
+        <a
+          class="button btn-link asset-list-item__send-token-button"
+          role="button"
+          tabindex="0"
+        >
+          Send TEST
+        </a>
+      </div>
     </div>
   </div>
 </div>