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

UX: Multichain: Ensure percentage of account name always shown (#18976)

Browse Source 
* UX: Multichain: Ensure percentage of account name always shown

* Remove extra spacing between value and menu, use proposed widths

* Setup widths via storybook and props

* Remove spacing between avatar and asset value

* WIP: Setup customization for Sara, update hard-coded font sizes

* Implement final widths

* Cleanup CSS
This commit is contained in:
David Walsh 2023-05-17 11:53:54 -05:00 committed by GitHub
parent 0e2d641813
commit 724c69ea7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 101 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,10 @@
exports[`AccountListItem renders AccountListItem component and shows account name, address, and balance 1`] = ` exports[`AccountListItem renders AccountListItem component and shows account name, address, and balance 1`] = `
<div> <div>
<div <div
class="box multichain-account-list-item box--padding-4 box--display-flex box--gap-2 box--flex-direction-row box--background-color-transparent" class="box multichain-account-list-item box--padding-4 box--display-flex box--flex-direction-row box--background-color-transparent"
> >
<div <div
class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1" class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--margin-inline-end-2 box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
> >
<div <div
class="mm-avatar-account__jazzicon" class="mm-avatar-account__jazzicon"
@ -55,13 +55,13 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="box box--display-flex box--flex-direction-column" class="box box--display-flex box--flex-direction-column"
> >
<div <div
class="box box--display-flex box--gap-2 box--flex-direction-row box--justify-content-space-between" class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
> >
<div <div
class="box mm-text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default" class="box mm-text multichain-account-list-item__account-name mm-text--body-md mm-text--ellipsis box--margin-inline-end-2 box--flex-direction-row box--color-text-default"
> >
<button <button
class="box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent" class="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 mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
> >
<span <span
class="box mm-text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default" class="box mm-text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
@ -71,10 +71,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
</button> </button>
</div> </div>
<div <div
class="box box--display-flex box--flex-direction-row box--align-items-center" class="box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
>
<div
class="box mm-text mm-text--body-md mm-text--text-align-end box--flex-direction-row box--color-text-default"
> >
<div <div
class="currency-display-component" class="currency-display-component"
@ -97,15 +94,18 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="box box--display-flex box--flex-direction-row box--justify-content-space-between" class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
>
<div
class="box box--display-flex box--flex-direction-row box--align-items-center"
> >
<p <p
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative" class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
> >
0x0dc...e7bc 0x0dc...e7bc
</p> </p>
</div>
<div <div
class="box mm-text mm-text--body-sm mm-text--text-align-end box--flex-direction-row box--color-text-alternative" class="box mm-text mm-text--body-sm mm-text--text-align-end box--flex-direction-row box--color-text-alternative"
> >

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

@ -93,10 +93,10 @@ export const AccountListItem = ({
<Box <Box
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
padding={4} padding={4}
gap={2}
backgroundColor={selected ? Color.primaryMuted : Color.transparent} backgroundColor={selected ? Color.primaryMuted : Color.transparent}
className={classnames('multichain-account-list-item', { className={classnames('multichain-account-list-item', {
'multichain-account-list-item--selected': selected, 'multichain-account-list-item--selected': selected,
'multichain-account-list-item--connected': Boolean(connectedAvatar),
})} })}
onClick={() => { onClick={() => {
// Without this check, the account will be selected after // Without this check, the account will be selected after
@ -122,6 +122,7 @@ export const AccountListItem = ({
? AvatarAccountVariant.Blockies ? AvatarAccountVariant.Blockies
: AvatarAccountVariant.Jazzicon : AvatarAccountVariant.Jazzicon
} }
marginInlineEnd={2}
></AvatarAccount> ></AvatarAccount>
<Box <Box
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
@ -132,15 +133,19 @@ export const AccountListItem = ({
<Box <Box
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
justifyContent={JustifyContent.spaceBetween} justifyContent={JustifyContent.spaceBetween}
gap={2}
> >
<Text ellipsis as="div"> <Text
ellipsis
as="div"
className="multichain-account-list-item__account-name"
marginInlineEnd={2}
>
<ButtonLink <ButtonLink
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onClick(); onClick();
}} }}
className="multichain-account-list-item__account-name" className="multichain-account-list-item__account-name__button"
color={Color.textDefault} color={Color.textDefault}
ellipsis ellipsis
> >
@ -157,20 +162,15 @@ export const AccountListItem = ({
)} )}
</ButtonLink> </ButtonLink>
</Text> </Text>
<Box <Text
as="div"
className="multichain-account-list-item__asset"
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW} flexDirection={FLEX_DIRECTION.ROW}
alignItems={AlignItems.center} alignItems={AlignItems.center}
ellipsis
textAlign={TextAlign.End}
> >
{connectedAvatar ? (
<AvatarFavicon
size={Size.XS}
src={connectedAvatar}
name={connectedAvatarName}
marginInlineEnd={2}
/>
) : null}
<Text textAlign={TextAlign.End} as="div">
<UserPreferencedCurrencyDisplay <UserPreferencedCurrencyDisplay
ethNumberOfDecimals={MAXIMUM_CURRENCY_DECIMALS} ethNumberOfDecimals={MAXIMUM_CURRENCY_DECIMALS}
value={identity.balance} value={identity.balance}
@ -179,14 +179,23 @@ export const AccountListItem = ({
</Text> </Text>
</Box> </Box>
</Box> </Box>
</Box>
<Box <Box
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
justifyContent={JustifyContent.spaceBetween} justifyContent={JustifyContent.spaceBetween}
> >
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
{connectedAvatar ? (
<AvatarFavicon
size={Size.XS}
src={connectedAvatar}
name={connectedAvatarName}
className="multichain-account-list-item__avatar"
/>
) : null}
<Text variant={TextVariant.bodySm} color={Color.textAlternative}> <Text variant={TextVariant.bodySm} color={Color.textAlternative}>
{shortenAddress(identity.address)} {shortenAddress(identity.address)}
</Text> </Text>
</Box>
<Text <Text
variant={TextVariant.bodySm} variant={TextVariant.bodySm}
color={Color.textAlternative} color={Color.textAlternative}

41
ui/components/multichain/account-list-item/index.scss
View File

@ -11,11 +11,34 @@
} }
&__account-name { &__account-name {
max-width: 160px;
min-width: 80px;
/* Prevent the normal hover effect on Buttons */
&__button {
&:hover, &:hover,
&:focus { &:focus {
opacity: 1; opacity: 1;
} }
} }
}
&__asset {
max-width: 130px;
min-width: 60px;
align-self: self-end;
}
/* Prevent font-size resizing to avoid conflcits for long asset and token names */
&__account-name button,
&__asset,
&__tooltip {
font-size: 14px !important;
}
&__avatar {
margin-inline-end: 2px;
}
&__selected-indicator { &__selected-indicator {
width: 4px; width: 4px;
@ -30,11 +53,21 @@
flex: 1; flex: 1;
} }
.currency-display-component {
flex-wrap: nowrap;
}
&__tooltip { &__tooltip {
display: inline; display: inline;
} }
.currency-display-component {
text-overflow: ellipsis;
overflow: hidden;
display: inline;
&__prefix {
padding-right: unset;
}
&__suffix {
font-size: 12px !important;
}
}
} }