m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +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" class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
> >
<div <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 <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 Test Account
</span>
</button> </button>
</div> </div>
<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 <div
class="currency-display-component" class="currency-display-component"

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

@ -12,7 +12,6 @@ import {
Box, Box,
AvatarFavicon, AvatarFavicon,
Tag, Tag,
ButtonLink,
ButtonIcon, ButtonIcon,
IconName, IconName,
IconSize, IconSize,
@ -30,6 +29,8 @@ import {
Size, Size,
BorderColor, BorderColor,
Display, Display,
BackgroundColor,
BlockSize,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { HardwareKeyringNames } from '../../../../shared/constants/hardware-wallets'; import { HardwareKeyringNames } from '../../../../shared/constants/hardware-wallets';
import { KeyringType } from '../../../../shared/constants/keyring'; import { KeyringType } from '../../../../shared/constants/keyring';
@ -138,19 +139,22 @@ export const AccountListItem = ({
display={Display.Flex} display={Display.Flex}
justifyContent={JustifyContent.spaceBetween} justifyContent={JustifyContent.spaceBetween}
> >
<Text <Box
ellipsis
as="div"
className="multichain-account-list-item__account-name" className="multichain-account-list-item__account-name"
marginInlineEnd={2} marginInlineEnd={2}
> >
<ButtonLink <Text
as="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onClick(); onClick();
}} }}
variant={TextVariant.bodyMdMedium}
className="multichain-account-list-item__account-name__button" className="multichain-account-list-item__account-name__button"
color={Color.textDefault} padding={0}
backgroundColor={BackgroundColor.transparent}
width={BlockSize.Full}
textAlign={TextAlign.Left}
ellipsis ellipsis
> >
{identity.name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? ( {identity.name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
@ -164,14 +168,15 @@ export const AccountListItem = ({
) : ( ) : (
identity.name identity.name
)} )}
</ButtonLink>
</Text> </Text>
</Box>
<Text <Text
as="div" as="div"
className="multichain-account-list-item__asset" className="multichain-account-list-item__asset"
display={Display.Flex} display={Display.Flex}
flexDirection={FlexDirection.Row} flexDirection={FlexDirection.Row}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.flexEnd}
ellipsis ellipsis
textAlign={TextAlign.End} textAlign={TextAlign.End}
> >