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

Update asset list styles (#8591)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/app/asset-list-item/asset-list-item.js
View File

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

5
ui/app/components/app/asset-list-item/asset-list-item.scss
View File

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

9
ui/app/components/app/asset-list/asset-list.scss
View File

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

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