MetaMorph - Spacing and Typeface on Extension Main view (#6584)

* wip

* Style Update: Mobile App Header

* wip

* Style Update: mobile menu-bar

* Style Update: Primary and Secondary balance on mobile main view

* Style Update: Spacing for transaction-list and transaction-list-item

* Address PR Comments

* Fix full-width view

* line-height fixes

15 files changed, 97 insertions, 44 deletions

diff --git a/ui/app/components/app/account-menu/index.scss b/ui/app/components/app/account-menu/index.scss
index 9a61bf887..435dd6b2a 100644
--- a/ui/app/components/app/account-menu/index.scss
+++ b/ui/app/components/app/account-menu/index.scss
@@ -21,7 +21,7 @@
   }
 
   &__icon {
-    margin-left: 20px;
+    margin-left: 1rem;
     cursor: pointer;
 
     &--disabled {
diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js
index 343e0daab..171a3499f 100644
--- a/ui/app/components/app/app-header/app-header.component.js
+++ b/ui/app/components/app/app-header/app-header.component.js
@@ -101,8 +101,6 @@ export default class AppHeader extends PureComponent {
             <img
               className="app-header__metafox-logo app-header__metafox-logo--icon"
               src="/images/logo/metamask-fox.svg"
-              height={42}
-              width={42}
             />
           </div>
           <div className="app-header__account-menu-container">
diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss
index d46b16f25..d3f37b7a2 100644
--- a/ui/app/components/app/app-header/index.scss
+++ b/ui/app/components/app/app-header/index.scss
@@ -1,6 +1,6 @@
 .app-header {
   align-items: center;
-  background: $gallery;
+  background: $Grey-000;
   position: relative;
   z-index: $header-z-index;
   display: flex;
@@ -9,7 +9,7 @@
   flex: 0 0 auto;
 
   @media screen and (max-width: 575px) {
-    padding: 12px;
+    padding: 1rem;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
     z-index: $mobile-header-z-index;
   }
@@ -34,6 +34,7 @@
     cursor: pointer;
 
     &--icon {
+      height: 32px;
       @media screen and (min-width: $break-large) {
         display: none;
       }
diff --git a/ui/app/components/app/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss
index f699f4090..eaa50619c 100644
--- a/ui/app/components/app/menu-bar/index.scss
+++ b/ui/app/components/app/menu-bar/index.scss
@@ -5,19 +5,28 @@
   align-items: center;
   flex: 0 0 auto;
   margin-bottom: 16px;
-  padding: 5px;
-  border-bottom: 1px solid #e5e5e5;
+  padding: 0 22px;
+  border-bottom: 1px solid $Grey-100;
 
   &__sidebar-button {
-    font-size: 1.25rem;
+    width: 20px;
+    height: 20px;
+    background-image: url(/images/icons/hamburger.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
     cursor: pointer;
-    padding: 10px;
   }
 
   &__open-in-browser {
+    width: 20px;
+    height: 20px;
+    background-image: url(/images/icons/3dots.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
     cursor: pointer;
     display: flex;
     justify-content: center;
-    padding: 10px;
   }
 }
diff --git a/ui/app/components/app/menu-bar/menu-bar.component.js b/ui/app/components/app/menu-bar/menu-bar.component.js
index e37fddda4..c830d8a19 100644
--- a/ui/app/components/app/menu-bar/menu-bar.component.js
+++ b/ui/app/components/app/menu-bar/menu-bar.component.js
@@ -30,7 +30,7 @@ export default class MenuBar extends PureComponent {
           position="bottom"
         >
           <div
-            className="fa fa-bars menu-bar__sidebar-button"
+            className="menu-bar__sidebar-button"
             onClick={() => {
               this.context.metricsEvent({
                 eventOpts: {
@@ -50,7 +50,7 @@ export default class MenuBar extends PureComponent {
           position="bottom"
         >
           <div
-            className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
+            className="menu-bar__open-in-browser"
             onClick={() => {
               this.context.metricsEvent({
                 eventOpts: {
diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js
index 9ee0a1e17..e778700cd 100644
--- a/ui/app/components/app/network.js
+++ b/ui/app/components/app/network.js
@@ -82,7 +82,7 @@ Network.prototype.render = function () {
                 loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('mainnet')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
           case 'ropsten-test-network':
             return h('.network-indicator', [
@@ -92,7 +92,7 @@ Network.prototype.render = function () {
                 loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('ropsten')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
           case 'kovan-test-network':
             return h('.network-indicator', [
@@ -102,7 +102,7 @@ Network.prototype.render = function () {
                 loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('kovan')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
           case 'rinkeby-test-network':
             return h('.network-indicator', [
@@ -112,7 +112,7 @@ Network.prototype.render = function () {
                 loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('rinkeby')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
           case 'goerli-test-network':
             return h('.network-indicator', [
@@ -122,7 +122,7 @@ Network.prototype.render = function () {
                 loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('goerli')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
           default:
             return h('.network-indicator', [
@@ -142,7 +142,7 @@ Network.prototype.render = function () {
               }),
 
               h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+              h('.network-indicator__down-arrow'),
             ])
         }
       })(),
diff --git a/ui/app/components/app/selected-account/index.scss b/ui/app/components/app/selected-account/index.scss
index 5339a228b..fa3079d77 100644
--- a/ui/app/components/app/selected-account/index.scss
+++ b/ui/app/components/app/selected-account/index.scss
@@ -7,15 +7,21 @@
 
   &__name {
     max-width: 200px;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 19px;
+    color: $black;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     text-align: center;
+    margin-bottom: 4px;
   }
 
   &__address {
     font-size: .75rem;
-    color: $silver-chalice;
+    line-height: .75rem;
+    color: #989a9b;
   }
 
   &__clickable {
@@ -23,7 +29,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 5px 15px;
+    margin: 4px 0;
+    padding: 6px 15px;
     border-radius: 10px;
     cursor: pointer;
 
diff --git a/ui/app/components/app/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss
index 9e73a546c..4dba4b2c3 100644
--- a/ui/app/components/app/transaction-list-item/index.scss
+++ b/ui/app/components/app/transaction-list-item/index.scss
@@ -1,7 +1,7 @@
 .transaction-list-item {
   box-sizing: border-box;
   min-height: 74px;
-  border-bottom: 1px solid $geyser;
+  border-bottom: 1px solid $Grey-100;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -19,7 +19,7 @@
       "identicon nonce status secondary-amount";
 
     @media screen and (max-width: $break-small) {
-      padding: 8px 20px 12px;
+      padding: .5rem 1rem;
       grid-template-columns: 45px 5fr 3fr;
       grid-template-areas:
         "nonce nonce nonce"
@@ -44,12 +44,13 @@
 
   &__action {
     text-transform: capitalize;
-    padding: 0 8px 2px 0;
+    padding: 0 0 4px 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     grid-area: action;
-    align-self: end;
+    color: $Grey-800;
+    line-height: 20px;
   }
 
   &__status {
@@ -72,7 +73,8 @@
     align-self: start;
 
     @media screen and (max-width: $break-small) {
-      padding-bottom: 4px;
+      padding-bottom: 8px;
+      line-height: 12px;
     }
   }
 
@@ -88,19 +90,22 @@
       grid-area: primary-amount;
       align-self: end;
       justify-self: end;
+      line-height: 20px;
 
       @media screen and (max-width: $break-small) {
-        padding-bottom: 2px;
+        padding-bottom: 4px;
+        height: 100%;
+        color: $Grey-800;
       }
     }
 
     &--secondary {
       text-align: end;
       font-size: .75rem;
-      color: #5e6064;
       grid-area: secondary-amount;
       align-self: start;
       justify-self: end;
+      color: $Grey-500;
     }
   }
 
diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
index 0d4127b4f..80b26469b 100644
--- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
@@ -179,7 +179,7 @@ export default class TransactionListItem extends PureComponent {
           <Identicon
             className="transaction-list-item__identicon"
             address={toAddress}
-            diameter={34}
+            diameter={36}
             image={assetImages[toAddress]}
           />
           <TransactionAction
diff --git a/ui/app/components/app/transaction-list/index.scss b/ui/app/components/app/transaction-list/index.scss
index a486f4112..42eddd31e 100644
--- a/ui/app/components/app/transaction-list/index.scss
+++ b/ui/app/components/app/transaction-list/index.scss
@@ -12,9 +12,10 @@
 
   &__header {
     flex: 0 0 auto;
-    font-size: .875rem;
-    color: $dusty-gray;
-    border-bottom: 1px solid $geyser;
+    font-size: 14px;
+    line-height: 20px;
+    color: $Grey-400;
+    border-bottom: 1px solid $Grey-100;
     padding: 8px 0 8px 20px;
 
     @media screen and (max-width: $break-small) {
diff --git a/ui/app/components/app/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss
index e7daafeef..024cbf2a1 100644
--- a/ui/app/components/app/transaction-status/index.scss
+++ b/ui/app/components/app/transaction-status/index.scss
@@ -12,8 +12,9 @@
 
   @media screen and (max-width: $break-small) {
     height: 16px;
-    width: 72px;
-    font-size: .5rem;
+    min-width: 72px;
+    font-size: 10px;
+    padding: 0 12px;
   }
 
   &--confirmed {
diff --git a/ui/app/components/app/transaction-view-balance/index.scss b/ui/app/components/app/transaction-view-balance/index.scss
index bdcd536b0..cdb09db8a 100644
--- a/ui/app/components/app/transaction-view-balance/index.scss
+++ b/ui/app/components/app/transaction-view-balance/index.scss
@@ -33,11 +33,14 @@
 
   &__primary-balance {
     font-size: 1.5rem;
+    color: $black;
 
     @media screen and (max-width: $break-small) {
-      font-size: 1.75rem;
+      font-size: 32px;
+      line-height: 45px;
       width: 100%;
       justify-content: center;
+
     }
   }
 
@@ -51,12 +54,15 @@
 
   &__cached-secondary-balance {
     color: rgba(220, 153, 18, 0.6901960784313725);
-    font-size: 1.15rem;
+    font-size: 16px;
+    line-height: 23px;
   }
 
   &__secondary-balance {
-    font-size: 1.15rem;
-    color: #a0a0a0;
+    font-size: 16px;
+    line-height: 23px;
+    font-weight: 400;
+    color: $Grey-400;
   }
 
   &__balance-container {
diff --git a/ui/app/components/ui/currency-display/index.scss b/ui/app/components/ui/currency-display/index.scss
index 313c932b8..6d069eb05 100644
--- a/ui/app/components/ui/currency-display/index.scss
+++ b/ui/app/components/ui/currency-display/index.scss
@@ -6,6 +6,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
   }
 
   &__suffix {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index da90b7910..4275ffe92 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -8,9 +8,9 @@
 }
 
 .network-component.pointer {
-  border: 2px solid $silver;
+  border: 2px solid $Grey-200;
   border-radius: 82px;
-  padding: 7px 3px;
+  padding: 6px 3px;
   flex: 0 0 auto;
   display: flex;
 
@@ -47,11 +47,15 @@
   align-items: center;
   font-size: .6em;
 
-  .fa-caret-down {
-    line-height: 15px;
-    font-size: 12px;
-    padding: 0 4px;
-    flex: 0 0 auto;
+  &__down-arrow {
+    height: 8px;
+    width: 12px;
+    display: block;
+    background-image: url(/images/icons/caret-down.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    margin: 0 8px;
   }
 
   .fa-question-circle {
@@ -65,12 +69,14 @@
   padding: 0 4px;
   font-family: Roboto;
   font-size: 12px;
+  line-height: 14px;
   flex: 1 1 auto;
   color: $tundora;
   font-weight: 500;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  height: 16px;
 }
 
 .dropdown-menu-item .fa.delete {
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index f7003b1f4..c02be0d98 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -99,7 +99,11 @@ $Blue-500: #037DD6;
 $Blue-600: #0260a4;
 
 $Grey-000: #f2f3f4;
+$Grey-100: #D6D9DC;
+$Grey-200: #bbc0c5;
+$Grey-400: #848c96;
 $Grey-500: #6A737D;
+$Grey-800: #24272a;
 
 $Red-000: #fcf2f3;
 $Red-500: #D73A49;
@@ -109,3 +113,17 @@ $Orange-000: #fef5ef;
 $Orange-500: #F66A0A;
 
 
+/*
+  Spacing Variables
+*/
+$no-spacing: 0px;
+$xxs-spacing: 4px;
+$xs-spacing: 8px;
+$s-spacing: 16px;
+$base-spacing: 24px;
+$medium-spacing: 32px;
+$large-spacing: 40px;
+$xlarge-spacing: 48px;
+$xxlarge-spacing: 64px;
+
+