1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Update asset list styles (#8591)

The asset list has been updated to more closely match the new designs.
There are still a few major differences (e.g. the selection state, the
token menu) that can't be implemented until the asset screen has been
implemented.

The background color of the selected asset has been lightened, so that
it's less jarring until we remove it.
This commit is contained in:
Mark Stacey 2020-05-14 09:49:50 -03:00 committed by GitHub
parent 890bc25e28
commit 74007e054b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 20 deletions

View File

@ -25,7 +25,7 @@ const AssetListItem = ({
>
<Identicon
className={iconClassName}
diameter={50}
diameter={32}
address={tokenAddress}
image={tokenImage}
/>

View File

@ -1,12 +1,11 @@
.asset-list-item {
&__container {
display: flex;
padding: 20px 25px;
padding: 24px 16px;
align-items: center;
&--active {
background: $manatee;
color: $white;
background: #D9D7DA;
}
}

View File

@ -1,10 +1,13 @@
.asset-list {
&__primary-amount {
font-size: 1.5rem;
color: $Black-100;
font-size: 16px;
height: 16px;
}
&__secondary-amount {
margin-top: .25%;
font-size: 105%;
color: $Grey-500;
margin-top: 6px;
font-size: 14px;
}
}

View File

@ -2,7 +2,6 @@ $wallet-balance-breakpoint: 890px;
$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
.token-cell {
cursor: pointer;
position: relative;
&__token-balance {
@ -15,23 +14,18 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
}
&__token-balance, &__token-symbol {
font-size: 1.5rem;
font-size: 16px;
flex: 0 0 auto;
@media #{$wallet-balance-breakpoint-range} {
font-size: 95%;
}
height: 16px;
color: $Black-100;
}
&__fiat-amount {
margin-top: .25%;
font-size: 105%;
margin-top: 6px;
font-size: 14px;
width: 100%;
text-transform: uppercase;
@media #{$wallet-balance-breakpoint-range} {
font-size: 95%;
}
color: $Grey-500;
}
&--outdated &__icon {
@ -42,7 +36,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
}
&__ellipsis {
line-height: 45px;
line-height: 38px;
}
&__balance-wrapper {