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

app/images/icons/3dots.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 0 2 0C0.89543 0 0 0.89543 0 2C0 3.10457 0.89543 4 2 4Z" fill="#6A737D"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 4C11.1046 4 12 3.10457 12 2C12 0.89543 11.1046 0 10 0C8.89543 0 8 0.89543 8 2C8 3.10457 8.89543 4 10 4Z" fill="#6A737D"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 4C19.1046 4 20 3.10457 20 2C20 0.89543 19.1046 0 18 0C16.8954 0 16 0.89543 16 2C16 3.10457 16.8954 4 18 4Z" fill="#6A737D"/>
+</svg>

app/images/icons/caret-down.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1 1L5.57143 5.57143L10.1407 1.0022" stroke="#545556"/>
+</svg>

app/images/icons/hamburger.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="hamburger">
+    <rect id="Rectangle 3" width="20" height="3" rx="1.5" fill="#6A737D"/>
+    <rect id="Rectangle 3_2" y="6" width="20" height="3" rx="1.5" fill="#6A737D"/>
+    <rect id="Rectangle 3_3" y="12" width="20" height="3" rx="1.5" fill="#6A737D"/>
+  </g>
+</svg>

app/images/logo/metamask-fox.svg

@@ -1,128 +1,31 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 318.6 318.6"
-	 style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#161616;stroke:#161616;}
-	.st1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;}
-	.st2{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;}
-	.st3{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;}
-	.st4{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;}
-	.st5{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;}
-	.st6{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;}
-	.st7{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;}
-	.st8{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;}
-	.st9{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;}
-	.st10{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;}
-</style>
-<polygon class="st0" points="277.3,145.6 272.3,142 280.3,134.7 274.2,129.9 282.2,123.8 276.9,119.8 285.3,79 272.7,41.1 
-	191.6,71.4 124.1,71.4 43,41.1 30.4,79 38.9,119.8 33.5,123.8 41.5,129.9 35.4,134.7 43.4,142 38.4,145.6 49.9,159.1 32.5,213.3 
-	48.6,268.6 105.3,253 116.3,262 138.7,277.5 177,277.5 199.4,262 210.4,253 267.1,268.6 283.3,213.3 265.8,159.1 "/>
-<g>
-	<polygon class="st1" points="105.3,253 48.6,268.6 32.5,213.3 	"/>
-	<polygon class="st1" points="283.3,213.3 267.1,268.6 210.4,253 	"/>
-	<polygon class="st2" points="265.8,159.1 213.5,143.8 231.8,139 	"/>
-	<polygon class="st2" points="49.9,159.1 84,139 102.2,143.8 	"/>
-	<polygon class="st2" points="43.4,142 41.5,129.9 84,139 	"/>
-	<polygon class="st2" points="272.3,142 231.8,139 274.2,129.9 	"/>
-	<polygon class="st2" points="272.3,142 265.8,159.1 231.8,139 	"/>
-	<polygon class="st2" points="43.4,142 84,139 49.9,159.1 	"/>
-	<polygon class="st2" points="231.8,139 276.9,119.8 274.2,129.9 	"/>
-	<polygon class="st2" points="84,139 41.5,129.9 38.9,119.8 	"/>
-	<polygon class="st3" points="124.1,71.4 191.6,71.4 176.5,112.5 	"/>
-	<polygon class="st3" points="176.5,112.5 139.2,112.5 124.1,71.4 	"/>
-	<polygon class="st2" points="276.9,119.8 231.8,139 231,87.4 	"/>
-	<polygon class="st2" points="102.2,143.8 84,139 84.7,87.4 	"/>
-	<polygon class="st2" points="84.7,87.4 84,139 38.9,119.8 	"/>
-	<polygon class="st2" points="231,87.4 231.8,139 213.5,143.8 	"/>
-	<polygon class="st1" points="139.2,112.5 43,41.1 124.1,71.4 	"/>
-	<polygon class="st4" points="272.7,41.1 176.5,112.5 191.6,71.4 	"/>
-	<polygon class="st1" points="210.4,253 236.9,213.3 283.3,213.3 	"/>
-	<polygon class="st1" points="32.5,213.3 78.9,213.3 105.3,253 	"/>
-	<polygon class="st3" points="229.3,167.7 283.3,213.3 236.9,213.3 	"/>
-	<polygon class="st3" points="86.4,167.7 32.5,213.3 49.9,159.1 	"/>
-	<polygon class="st3" points="78.9,213.3 32.5,213.3 86.4,167.7 	"/>
-	<polygon class="st3" points="229.3,167.7 265.8,159.1 283.3,213.3 	"/>
-	<polygon class="st2" points="84.7,87.4 139.2,112.5 102.2,143.8 	"/>
-	<polygon class="st2" points="213.5,143.8 176.5,112.5 231,87.4 	"/>
-	<polygon class="st2" points="265.8,159.1 272.3,142 277.3,145.6 	"/>
-	<polygon class="st2" points="49.9,159.1 38.4,145.6 43.4,142 	"/>
-	<polygon class="st2" points="272.3,142 274.2,129.9 280.3,134.7 	"/>
-	<polygon class="st2" points="43.4,142 35.4,134.7 41.5,129.9 	"/>
-	<polygon class="st2" points="33.5,123.8 38.9,119.8 41.5,129.9 	"/>
-	<polygon class="st2" points="282.2,123.8 274.2,129.9 276.9,119.8 	"/>
-	<polygon class="st3" points="49.9,159.1 102.2,143.8 86.4,167.7 	"/>
-	<polygon class="st3" points="265.8,159.1 229.3,167.7 213.5,143.8 	"/>
-	<polygon class="st2" points="38.9,119.8 30.4,79 84.7,87.4 	"/>
-	<polygon class="st2" points="231,87.4 285.3,79 276.9,119.8 	"/>
-	<polygon class="st1" points="102.2,143.8 139.2,112.5 142.6,170.2 	"/>
-	<polygon class="st1" points="213.5,143.8 229.3,167.7 173.1,170.2 	"/>
-	<polygon class="st1" points="173.1,170.2 176.5,112.5 213.5,143.8 	"/>
-	<polygon class="st1" points="142.6,170.2 86.4,167.7 102.2,143.8 	"/>
-	<polygon class="st2" points="272.7,41.1 285.3,79 231,87.4 	"/>
-	<polygon class="st2" points="43,41.1 139.2,112.5 84.7,87.4 	"/>
-	<polygon class="st2" points="231,87.4 176.5,112.5 272.7,41.1 	"/>
-	<polygon class="st2" points="84.7,87.4 30.4,79 43,41.1 	"/>
-	<polygon class="st5" points="105.3,253 78.9,213.3 110,213.7 	"/>
-	<polygon class="st5" points="210.4,253 205.7,213.7 236.9,213.3 	"/>
-	<polygon class="st3" points="173.1,170.2 142.6,170.2 139.2,112.5 	"/>
-	<polygon class="st3" points="139.2,112.5 176.5,112.5 173.1,170.2 	"/>
-	<polygon class="st6" points="116.3,262 105.3,253 136.8,267.9 	"/>
-	<polygon class="st6" points="178.9,267.9 210.4,253 199.4,262 	"/>
-	<polygon class="st7" points="136.6,258.6 136.8,267.9 105.3,253 	"/>
-	<polygon class="st7" points="179.2,258.6 210.4,253 178.9,267.9 	"/>
-	<polygon class="st3" points="86.4,167.7 110,213.7 78.9,213.3 	"/>
-	<polygon class="st3" points="236.9,213.3 205.7,213.7 229.3,167.7 	"/>
-	<polygon class="st8" points="86.4,167.7 109.2,190.8 110,213.7 	"/>
-	<polygon class="st8" points="229.3,167.7 205.7,213.7 206.6,190.8 	"/>
-	<polygon class="st7" points="105.3,253 139.2,236.5 136.6,258.6 	"/>
-	<polygon class="st7" points="210.4,253 179.2,258.6 176.5,236.5 	"/>
-	<polygon class="st1" points="139.2,236.5 105.3,253 110,213.7 	"/>
-	<polygon class="st1" points="176.5,236.5 205.7,213.7 210.4,253 	"/>
-	<polygon class="st5" points="173.1,170.2 229.3,167.7 206.6,190.8 	"/>
-	<polygon class="st5" points="109.2,190.8 86.4,167.7 142.6,170.2 	"/>
-	<polygon class="st5" points="142.6,170.2 129.1,181.7 109.2,190.8 	"/>
-	<polygon class="st5" points="206.6,190.8 186.6,181.7 173.1,170.2 	"/>
-	<polygon class="st3" points="205.7,213.7 178.3,199.1 206.6,190.8 	"/>
-	<polygon class="st3" points="110,213.7 109.2,190.8 137.4,199.1 	"/>
-	<polygon class="st9" points="137.4,199.1 109.2,190.8 129.1,181.7 	"/>
-	<polygon class="st9" points="178.3,199.1 186.6,181.7 206.6,190.8 	"/>
-	<polygon class="st5" points="186.6,181.7 178.3,199.1 173.1,170.2 	"/>
-	<polygon class="st5" points="129.1,181.7 142.6,170.2 137.4,199.1 	"/>
-	<polygon class="st6" points="199.4,262 177,277.5 178.9,267.9 	"/>
-	<polygon class="st6" points="136.8,267.9 138.7,277.5 116.3,262 	"/>
-	<polygon class="st4" points="178.3,199.1 171.8,188.4 173.1,170.2 	"/>
-	<polygon class="st8" points="137.4,199.1 142.6,170.2 143.9,188.4 	"/>
-	<polygon class="st3" points="173.1,170.2 171.8,188.4 143.9,188.4 	"/>
-	<polygon class="st3" points="143.9,188.4 142.6,170.2 173.1,170.2 	"/>
-	<polygon class="st3" points="178.3,199.1 205.7,213.7 176.5,236.5 	"/>
-	<polygon class="st3" points="139.2,236.5 110,213.7 137.4,199.1 	"/>
-	<polygon class="st3" points="137.4,199.1 144,233.2 139.2,236.5 	"/>
-	<polygon class="st3" points="176.5,236.5 171.7,233.2 178.3,199.1 	"/>
-	<polygon class="st8" points="171.8,188.4 178.3,199.1 171.7,233.2 	"/>
-	<polygon class="st8" points="143.9,188.4 144,233.2 137.4,199.1 	"/>
-	<polygon class="st3" points="143.9,188.4 171.8,188.4 171.7,233.2 	"/>
-	<polygon class="st3" points="171.7,233.2 144,233.2 143.9,188.4 	"/>
-	<polygon class="st6" points="179.2,258.6 178.9,267.9 177,277.5 	"/>
-	<polygon class="st6" points="138.7,277.5 136.8,267.9 136.6,258.6 	"/>
-	<polygon class="st6" points="136.6,258.6 139,256.4 138.7,277.5 	"/>
-	<polygon class="st6" points="177,277.5 176.7,256.4 179.2,258.6 	"/>
-	<polygon class="st6" points="138.7,277.5 139,256.4 176.7,256.4 	"/>
-	<polygon class="st6" points="176.7,256.4 177,277.5 138.7,277.5 	"/>
-	<polygon class="st10" points="176.5,236.5 179.2,258.6 176.7,256.4 	"/>
-	<polygon class="st10" points="139,256.4 136.6,258.6 139.2,236.5 	"/>
-	<polygon class="st10" points="139.2,236.5 140.7,241.2 139,256.4 	"/>
-	<polygon class="st10" points="176.7,256.4 175,241.2 176.5,236.5 	"/>
-	<polygon class="st10" points="143.7,237.7 140.7,241.2 139.2,236.5 	"/>
-	<polygon class="st10" points="176.5,236.5 175,241.2 172,237.7 	"/>
-	<polygon class="st10" points="172,237.7 171.7,233.2 176.5,236.5 	"/>
-	<polygon class="st10" points="139.2,236.5 144,233.2 143.7,237.7 	"/>
-	<polygon class="st10" points="171.7,233.2 172,237.7 143.7,237.7 	"/>
-	<polygon class="st10" points="143.7,237.7 144,233.2 171.7,233.2 	"/>
-	<polygon class="st10" points="140.7,241.2 175,241.2 176.7,256.4 	"/>
-	<polygon class="st10" points="176.7,256.4 139,256.4 140.7,241.2 	"/>
-	<polygon class="st10" points="140.7,241.2 143.7,237.7 172,237.7 	"/>
-	<polygon class="st10" points="172,237.7 175,241.2 140.7,241.2 	"/>
-</g>
+<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M32.9582 1L19.8241 10.7183L22.2665 4.99099L32.9582 1Z" fill="#E17726" stroke="#E17726" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M2.66296 1L15.6801 10.809L13.3547 4.99098L2.66296 1Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M28.2295 23.5335L24.7348 28.8721L32.2177 30.9324L34.3613 23.6501L28.2295 23.5335Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M1.27281 23.6501L3.40336 30.9324L10.8733 28.8721L7.39164 23.5335L1.27281 23.6501Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.4706 14.5149L8.392 17.6507L15.797 17.9876L15.5501 10.0186L10.4706 14.5149Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M25.1505 14.5149L19.993 9.92786L19.8242 17.9876L27.2291 17.6507L25.1505 14.5149Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.8733 28.8721L15.3552 26.7082L11.4969 23.702L10.8733 28.8721Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.2659 26.7082L24.7348 28.8721L24.1243 23.702L20.2659 26.7082Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M24.7348 28.8721L20.2658 26.7082L20.6296 29.6107L20.5906 30.8417L24.7348 28.8721Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.8732 28.8721L15.0304 30.8417L15.0044 29.6107L15.3552 26.7082L10.8732 28.8721Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15.1084 21.7842L11.3929 20.6958L14.0172 19.4907L15.1084 21.7842Z" fill="#233447" stroke="#233447" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.5126 21.7842L21.6039 19.4907L24.2411 20.6958L20.5126 21.7842Z" fill="#233447" stroke="#233447" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.8733 28.8721L11.5228 23.5335L7.39163 23.6502L10.8733 28.8721Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M24.0982 23.5335L24.7348 28.8721L28.2294 23.6502L24.0982 23.5335Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M27.2291 17.6507L19.8241 17.9876L20.5126 21.7842L21.6039 19.4907L24.2411 20.6958L27.2291 17.6507Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M11.3929 20.6958L14.0171 19.4907L15.1084 21.7842L15.7969 17.9876L8.39195 17.6507L11.3929 20.6958Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.392 17.6507L11.4969 23.702L11.393 20.6958L8.392 17.6507Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M24.2412 20.6958L24.1243 23.702L27.2292 17.6507L24.2412 20.6958Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15.797 17.9876L15.1084 21.7843L15.9788 26.2676L16.1737 20.3589L15.797 17.9876Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19.8242 17.9876L19.4604 20.346L19.6423 26.2676L20.5127 21.7843L19.8242 17.9876Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.5127 21.7842L19.6423 26.2676L20.2659 26.7082L24.1243 23.702L24.2412 20.6958L20.5127 21.7842Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M11.3929 20.6958L11.4969 23.702L15.3552 26.7082L15.9788 26.2676L15.1084 21.7842L11.3929 20.6958Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.5906 30.8417L20.6296 29.6107L20.2918 29.3256H15.3292L15.0044 29.6107L15.0304 30.8417L10.8732 28.8721L12.3283 30.0642L15.2772 32.0986H20.3308L23.2928 30.0642L24.7348 28.8721L20.5906 30.8417Z" fill="#C0AC9D" stroke="#C0AC9D" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.2659 26.7082L19.6423 26.2676H15.9788L15.3552 26.7082L15.0044 29.6107L15.3292 29.3256H20.2918L20.6296 29.6107L20.2659 26.7082Z" fill="#161616" stroke="#161616" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M33.5168 11.3532L34.6211 5.98873L32.9582 1L20.2659 10.3944L25.1505 14.5149L32.0488 16.5234L33.5688 14.7482L32.9062 14.2687L33.9585 13.3099L33.1531 12.6879L34.2054 11.8845L33.5168 11.3532Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M1 5.98873L2.11724 11.3532L1.40273 11.8845L2.468 12.6879L1.66255 13.3099L2.71483 14.2687L2.05228 14.7482L3.57225 16.5234L10.4706 14.5149L15.3552 10.3944L2.66287 1L1 5.98873Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M32.0489 16.5234L25.1506 14.5149L27.2292 17.6507L24.1243 23.702L28.2295 23.6501H34.3613L32.0489 16.5234Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.4705 14.5149L3.57222 16.5234L1.27278 23.6501H7.39161L11.4968 23.702L8.39193 17.6507L10.4705 14.5149Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19.8241 17.9876L20.2658 10.3944L22.2665 4.991H13.3546L15.3552 10.3944L15.7969 17.9876L15.9658 20.3718L15.9788 26.2676H19.6423L19.6553 20.3718L19.8241 17.9876Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

ui/app/components/app/account-menu/index.scss

@@ -21,7 +21,7 @@
   }
 
   &__icon {
-    margin-left: 20px;
+    margin-left: 1rem;
     cursor: pointer;
 
     &--disabled {

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">

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;
       }

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;
   }
 }

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: {

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'),
             ])
         }
       })(),

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;
 

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;
     }
   }
 

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

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) {

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 {

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 {

ui/app/components/ui/currency-display/index.scss

@@ -6,6 +6,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
   }
 
   &__suffix {

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 {

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;
+
+