mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
UX: Multichain: Ensure percentage of account name always shown (#18976)
* 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
GitHub
parent
0e2d641813
commit
724c69ea7c
@ -3,10 +3,10 @@
|
||||
exports[`AccountListItem renders AccountListItem component and shows account name, address, and balance 1`] = `
|
||||
<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
|
||||
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
|
||||
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"
|
||||
>
|
||||
<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
|
||||
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
|
||||
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
|
||||
class="box mm-text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
|
||||
@ -71,29 +71,25 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
|
||||
</button>
|
||||
</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"
|
||||
class="currency-display-component"
|
||||
title="0.006 ETH"
|
||||
>
|
||||
<div
|
||||
class="currency-display-component"
|
||||
title="0.006 ETH"
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0.006
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
0.006
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -101,11 +97,15 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
|
||||
>
|
||||
<p
|
||||
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-row box--align-items-center"
|
||||
>
|
||||
0x0dc...e7bc
|
||||
</p>
|
||||
<p
|
||||
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
|
||||
>
|
||||
0x0dc...e7bc
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="box mm-text mm-text--body-sm mm-text--text-align-end box--flex-direction-row box--color-text-alternative"
|
||||
>
|
||||
|
||||
@ -93,10 +93,10 @@ export const AccountListItem = ({
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
padding={4}
|
||||
gap={2}
|
||||
backgroundColor={selected ? Color.primaryMuted : Color.transparent}
|
||||
className={classnames('multichain-account-list-item', {
|
||||
'multichain-account-list-item--selected': selected,
|
||||
'multichain-account-list-item--connected': Boolean(connectedAvatar),
|
||||
})}
|
||||
onClick={() => {
|
||||
// Without this check, the account will be selected after
|
||||
@ -122,6 +122,7 @@ export const AccountListItem = ({
|
||||
? AvatarAccountVariant.Blockies
|
||||
: AvatarAccountVariant.Jazzicon
|
||||
}
|
||||
marginInlineEnd={2}
|
||||
></AvatarAccount>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
@ -132,15 +133,19 @@ export const AccountListItem = ({
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
gap={2}
|
||||
>
|
||||
<Text ellipsis as="div">
|
||||
<Text
|
||||
ellipsis
|
||||
as="div"
|
||||
className="multichain-account-list-item__account-name"
|
||||
marginInlineEnd={2}
|
||||
>
|
||||
<ButtonLink
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClick();
|
||||
}}
|
||||
className="multichain-account-list-item__account-name"
|
||||
className="multichain-account-list-item__account-name__button"
|
||||
color={Color.textDefault}
|
||||
ellipsis
|
||||
>
|
||||
@ -157,36 +162,40 @@ export const AccountListItem = ({
|
||||
)}
|
||||
</ButtonLink>
|
||||
</Text>
|
||||
<Box
|
||||
<Text
|
||||
as="div"
|
||||
className="multichain-account-list-item__asset"
|
||||
display={DISPLAY.FLEX}
|
||||
flexDirection={FLEX_DIRECTION.ROW}
|
||||
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
|
||||
ethNumberOfDecimals={MAXIMUM_CURRENCY_DECIMALS}
|
||||
value={identity.balance}
|
||||
type={SECONDARY}
|
||||
/>
|
||||
</Text>
|
||||
</Box>
|
||||
<UserPreferencedCurrencyDisplay
|
||||
ethNumberOfDecimals={MAXIMUM_CURRENCY_DECIMALS}
|
||||
value={identity.balance}
|
||||
type={SECONDARY}
|
||||
/>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<Text variant={TextVariant.bodySm} color={Color.textAlternative}>
|
||||
{shortenAddress(identity.address)}
|
||||
</Text>
|
||||
<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}>
|
||||
{shortenAddress(identity.address)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text
|
||||
variant={TextVariant.bodySm}
|
||||
color={Color.textAlternative}
|
||||
|
||||
@ -11,12 +11,35 @@
|
||||
}
|
||||
|
||||
&__account-name {
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
max-width: 160px;
|
||||
min-width: 80px;
|
||||
|
||||
/* Prevent the normal hover effect on Buttons */
|
||||
&__button {
|
||||
&:hover,
|
||||
&:focus {
|
||||
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 {
|
||||
width: 4px;
|
||||
height: calc(100% - 8px);
|
||||
@ -30,11 +53,21 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.currency-display-component {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
&__tooltip {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.currency-display-component {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: inline;
|
||||
|
||||
&__prefix {
|
||||
padding-right: unset;
|
||||
}
|
||||
|
||||
&__suffix {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user