From 02b8edc8c2f113cd25ad727c8d68090a5fcaa6c5 Mon Sep 17 00:00:00 2001
From: Garrett Bear <gwhisten@gmail.com>
Date: Mon, 24 Jul 2023 15:26:22 -0700
Subject: [PATCH] Fix hover on account menu (#20153)

* Fix hover on account menu

* remove excessive color prop
---
 .../account-list-item.test.js.snap            | 12 ++++-------
 .../account-list-item/account-list-item.js    | 21 ++++++++++++-------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
index 248a913dc..e2bb2b4a6 100644
--- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
+++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -58,20 +58,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
         >
           <div
-            class="mm-box mm-text multichain-account-list-item__account-name mm-text--body-md mm-text--ellipsis mm-box--margin-inline-end-2 mm-box--color-text-default"
+            class="mm-box multichain-account-list-item__account-name mm-box--margin-inline-end-2"
           >
             <button
-              class="mm-box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent"
+              class="mm-box mm-text multichain-account-list-item__account-name__button mm-text--body-md-medium mm-text--ellipsis mm-text--text-align-left mm-box--padding-0 mm-box--width-full mm-box--color-text-default mm-box--background-color-transparent"
             >
-              <span
-                class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
-              >
-                Test Account
-              </span>
+              Test Account
             </button>
           </div>
           <div
-            class="mm-box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center mm-box--color-text-default"
+            class="mm-box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-flex-end mm-box--align-items-center mm-box--color-text-default"
           >
             <div
               class="currency-display-component"
diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js
index 1939e0d41..ca16f2e8a 100644
--- a/ui/components/multichain/account-list-item/account-list-item.js
+++ b/ui/components/multichain/account-list-item/account-list-item.js
@@ -12,7 +12,6 @@ import {
   Box,
   AvatarFavicon,
   Tag,
-  ButtonLink,
   ButtonIcon,
   IconName,
   IconSize,
@@ -30,6 +29,8 @@ import {
   Size,
   BorderColor,
   Display,
+  BackgroundColor,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 import { HardwareKeyringNames } from '../../../../shared/constants/hardware-wallets';
 import { KeyringType } from '../../../../shared/constants/keyring';
@@ -138,19 +139,22 @@ export const AccountListItem = ({
             display={Display.Flex}
             justifyContent={JustifyContent.spaceBetween}
           >
-            <Text
-              ellipsis
-              as="div"
+            <Box
               className="multichain-account-list-item__account-name"
               marginInlineEnd={2}
             >
-              <ButtonLink
+              <Text
+                as="button"
                 onClick={(e) => {
                   e.stopPropagation();
                   onClick();
                 }}
+                variant={TextVariant.bodyMdMedium}
                 className="multichain-account-list-item__account-name__button"
-                color={Color.textDefault}
+                padding={0}
+                backgroundColor={BackgroundColor.transparent}
+                width={BlockSize.Full}
+                textAlign={TextAlign.Left}
                 ellipsis
               >
                 {identity.name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
@@ -164,14 +168,15 @@ export const AccountListItem = ({
                 ) : (
                   identity.name
                 )}
-              </ButtonLink>
-            </Text>
+              </Text>
+            </Box>
             <Text
               as="div"
               className="multichain-account-list-item__asset"
               display={Display.Flex}
               flexDirection={FlexDirection.Row}
               alignItems={AlignItems.center}
+              justifyContent={JustifyContent.flexEnd}
               ellipsis
               textAlign={TextAlign.End}
             >