From 74007e054b3eac9ce9763ff051383540f12a1961 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Thu, 14 May 2020 09:49:50 -0300
Subject: [PATCH] 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.
---
 .../app/asset-list-item/asset-list-item.js    |  2 +-
 .../app/asset-list-item/asset-list-item.scss  |  5 ++---
 .../components/app/asset-list/asset-list.scss |  9 ++++++---
 .../components/app/token-cell/token-cell.scss | 20 +++++++------------
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/ui/app/components/app/asset-list-item/asset-list-item.js b/ui/app/components/app/asset-list-item/asset-list-item.js
index bada9aaa9..d15b8cfe5 100644
--- a/ui/app/components/app/asset-list-item/asset-list-item.js
+++ b/ui/app/components/app/asset-list-item/asset-list-item.js
@@ -25,7 +25,7 @@ const AssetListItem = ({
     >
       <Identicon
         className={iconClassName}
-        diameter={50}
+        diameter={32}
         address={tokenAddress}
         image={tokenImage}
       />
diff --git a/ui/app/components/app/asset-list-item/asset-list-item.scss b/ui/app/components/app/asset-list-item/asset-list-item.scss
index 847b0adba..1959bfc32 100644
--- a/ui/app/components/app/asset-list-item/asset-list-item.scss
+++ b/ui/app/components/app/asset-list-item/asset-list-item.scss
@@ -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;
     }
   }
 
diff --git a/ui/app/components/app/asset-list/asset-list.scss b/ui/app/components/app/asset-list/asset-list.scss
index 82ca6798d..1fb806da8 100644
--- a/ui/app/components/app/asset-list/asset-list.scss
+++ b/ui/app/components/app/asset-list/asset-list.scss
@@ -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;
   }
 }
diff --git a/ui/app/components/app/token-cell/token-cell.scss b/ui/app/components/app/token-cell/token-cell.scss
index 6ba02a08a..0498353fd 100644
--- a/ui/app/components/app/token-cell/token-cell.scss
+++ b/ui/app/components/app/token-cell/token-cell.scss
@@ -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 {