m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Fix hover on account menu (#20153)

Browse Source 
* Fix hover on account menu

* remove excessive color prop
This commit is contained in:
Garrett Bear 2023-07-24 15:26:22 -07:00 committed by GitHub
parent edbc728014
commit 02b8edc8c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
View File

@ -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"
>
<span
class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
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"
>
Test Account
</span>
</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"

19
ui/components/multichain/account-list-item/account-list-item.js
View File

@ -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>
</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}
>