Merge pull request #2928 from alextsg/cb-388

[NewUI] Update main view styling

24 files changed, 284 insertions, 234 deletions

diff --git a/app/images/metamask-fox.svg b/app/images/metamask-fox.svg
new file mode 100644
index 000000000..f3c24f79e
--- /dev/null
+++ b/app/images/metamask-fox.svg
@@ -0,0 +1,128 @@
+<?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>
diff --git a/ui/app/app.js b/ui/app/app.js
index 3fca8ccc1..e24ab7109 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -257,19 +257,13 @@ App.prototype.renderAppBar = function () {
           }, [
             // mini logo
             h('img.metafox-icon', {
-              height: 29,
-              width: 29,
-              src: '/images/icon-128.png',
+              height: 42,
+              width: 42,
+              src: '/images/metamask-fox.svg',
             }),
 
             // metamask name
-            h('h1', {
-              style: {
-                position: 'relative',
-                paddingLeft: '9px',
-                color: '#5B5D67',
-              },
-            }, 'MetaMask'),
+            h('h1', 'MetaMask'),
 
           ]),
 
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index 50007ce14..d591ab455 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -40,7 +40,7 @@ BalanceComponent.prototype.render = function () {
     //   style: {},
     // }),
     h(Identicon, {
-      diameter: 45,
+      diameter: 50,
       address: token && token.address,
       network,
     }),
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 4bf671834..c1f7a3236 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -62,12 +62,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('button.btn-clear', {
+      h('button.btn-clear.account-modal__button', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, 'View account on Etherscan'),
 
       // Holding on redesign for Export Private Key functionality
-      h('button.btn-clear', {
+      h('button.btn-clear.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
       }, 'Export private key'),
 
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 193755df5..422f23f44 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -79,11 +79,15 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
 
 ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
   return h('div.export-private-key-buttons', {}, [
-    !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'),
+    !privateKey && this.renderButton(
+      'btn-cancel export-private-key__button export-private-key__button--cancel',
+      () => hideModal(),
+      'Cancel'
+    ),
 
     (privateKey
-      ? this.renderButton('btn-clear', () => hideModal(), 'Done')
-      : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show')
+      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done')
+      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm')
     ),
 
   ])
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 5a8d0763d..3f147159b 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -39,7 +39,6 @@ Network.prototype.render = function () {
         },
         src: 'images/loading.svg',
       }),
-      h('i.fa.fa-caret-down.network-caret'),
     ])
   } else if (providerName === 'mainnet') {
     hoverText = 'Main Ethereum Network'
@@ -85,12 +84,8 @@ Network.prototype.render = function () {
                 backgroundColor: '#038789', // $blue-lagoon
                 nonSelectBackgroundColor: '#15afb2',
               }),
-              h('.network-name', {
-                style: {
-                  color: '#039396',
-                }},
-              'Main Network'),
-              h('i.fa.fa-caret-down.fa-lg.network-caret'),
+              h('.network-name', 'Main Network'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'ropsten-test-network':
             return h('.network-indicator', [
@@ -98,12 +93,8 @@ Network.prototype.render = function () {
                 backgroundColor: '#e91550', // $crimson
                 nonSelectBackgroundColor: '#ec2c50',
               }),
-              h('.network-name', {
-                style: {
-                  color: '#ff6666',
-                }},
-              'Ropsten Test Net'),
-              h('i.fa.fa-caret-down.fa-lg.network-caret'),
+              h('.network-name', 'Ropsten Test Net'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'kovan-test-network':
             return h('.network-indicator', [
@@ -111,12 +102,8 @@ Network.prototype.render = function () {
                 backgroundColor: '#690496', // $purple
                 nonSelectBackgroundColor: '#b039f3',
               }),
-              h('.network-name', {
-                style: {
-                  color: '#690496',
-                }},
-              'Kovan Test Net'),
-              h('i.fa.fa-caret-down.fa-lg.network-caret'),
+              h('.network-name', 'Kovan Test Net'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'rinkeby-test-network':
             return h('.network-indicator', [
@@ -124,12 +111,8 @@ Network.prototype.render = function () {
                 backgroundColor: '#ebb33f', // $tulip-tree
                 nonSelectBackgroundColor: '#ecb23e',
               }),
-              h('.network-name', {
-                style: {
-                  color: '#e7a218',
-                }},
-              'Rinkeby Test Net'),
-              h('i.fa.fa-caret-down.fa-lg.network-caret'),
+              h('.network-name', 'Rinkeby Test Net'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           default:
             return h('.network-indicator', [
@@ -140,12 +123,8 @@ Network.prototype.render = function () {
                 },
               }),
 
-              h('.network-name', {
-                style: {
-                  color: '#AEAEAE',
-                }},
-              'Private Network'),
-              h('i.fa.fa-caret-down.fa-lg.network-caret'),
+              h('.network-name', 'Private Network'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
         }
       })(),
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 566224864..652300c94 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -219,7 +219,7 @@ ConfirmSendEther.prototype.render = function () {
       // Main Send token Card
       h('div.confirm-screen-wrapper.flex-column.flex-grow', [
         h('h3.flex-center.confirm-screen-header', [
-          h('button.confirm-screen-back-button', {
+          h('button.btn-clear.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
           }, 'EDIT'),
           h('div.confirm-screen-title', 'Confirm Transaction'),
@@ -422,7 +422,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
 ConfirmSendEther.prototype.cancel = function (event, txMeta) {
   event.preventDefault()
   const { cancelTransaction } = this.props
-  
+
   cancelTransaction(txMeta)
 }
 
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index aa4f29fb0..ad489c3e9 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -314,7 +314,7 @@ ConfirmSendToken.prototype.render = function () {
       // Main Send token Card
       h('div.confirm-screen-wrapper.flex-column.flex-grow', [
         h('h3.flex-center.confirm-screen-header', [
-          h('button.confirm-screen-back-button', {
+          h('button.btn-clear.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
           }, 'EDIT'),
           h('div.confirm-screen-title', 'Confirm Transaction'),
@@ -415,7 +415,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
 ConfirmSendToken.prototype.cancel = function (event, txMeta) {
   event.preventDefault()
   const { cancelTransaction } = this.props
-  
+
   cancelTransaction(txMeta)
 }
 
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 677b66830..59552f4a0 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -106,7 +106,7 @@ TokenCell.prototype.render = function () {
 
       h(Identicon, {
         className: 'token-list-item__identicon',
-        diameter: 45,
+        diameter: 50,
         address,
         network,
       }),
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 949d91f6f..0148b32a5 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -68,18 +68,14 @@ TxView.prototype.renderButtons = function () {
   return !selectedToken
     ? (
       h('div.flex-row.flex-center.hero-balance-buttons', [
-        h('button.btn-clear', {
-          style: {
-            textAlign: 'center',
-          },
+        h('button.btn-clear.hero-balance-button', {
           onClick: () => showModal({
             name: 'DEPOSIT_ETHER',
           }),
         }, 'DEPOSIT'),
 
-        h('button.btn-clear', {
+        h('button.btn-clear.hero-balance-button', {
           style: {
-            textAlign: 'center',
             marginLeft: '0.8em',
           },
           onClick: showSendPage,
@@ -88,11 +84,7 @@ TxView.prototype.renderButtons = function () {
     )
     : (
       h('div.flex-row.flex-center.hero-balance-buttons', [
-        h('button.btn-clear', {
-          style: {
-            textAlign: 'center',
-            marginLeft: '0.8em',
-          },
+        h('button.btn-clear.hero-balance-button', {
           onClick: showSendTokenPage,
         }, 'SEND'),
       ])
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 3cb7a8b76..b1ef83cee 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -130,7 +130,7 @@ WalletView.prototype.render = function () {
           selectedIdentity.name,
         ]),
 
-        h('button.wallet-view__details-button', 'DETAILS'),
+        h('button.btn-clear.wallet-view__details-button', 'DETAILS'),
       ]),
     ]),
 
@@ -151,7 +151,7 @@ WalletView.prototype.render = function () {
 
     h(TokenList),
 
-    h('button.wallet-view__add-token-button', {
+    h('button.btn-clear.wallet-view__add-token-button', {
       onClick: () => {
         showAddTokenPage()
         hideSidebar()
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 8ba084b4a..1450b71cc 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -6,9 +6,43 @@
   background-color: #02c9b1; // TODO: reusable color in colors.css
 }
 
-button.btn-clear {
+.btn-clear {
   background: $white;
-  border: 1px solid;
+  text-align: center;
+  padding: .8rem 1rem;
+  color: $curious-blue;
+  border: 2px solid $spindle;
+  border-radius: 4px;
+  font-size: .85rem;
+  font-weight: 400;
+  transition: border-color .3s ease;
+
+  &:hover {
+    border-color: $curious-blue;
+  }
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: .5;
+    pointer-events: none;
+  }
+}
+
+.btn-cancel {
+  background: $white;
+  text-align: center;
+  padding: .9rem 1rem;
+  color: $scorpion;
+  border: 2px solid $dusty-gray;
+  border-radius: 4px;
+  font-size: .85rem;
+  font-weight: 400;
+  transition: border-color .3s ease;
+
+  &:hover {
+    border-color: $scorpion;
+  }
 }
 
 // No longer used in flat design, remove when modal buttons done
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 4a8232e39..e75a827f9 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -102,15 +102,10 @@
 
 .confirm-screen-back-button {
   background: transparent;
-  border: 1px solid $curious-blue;
   left: 24px;
   position: absolute;
-  text-align: center;
-  color: $curious-blue;
-  padding: 6px 13px 7px 12px;
-  border-radius: 2px;
-  height: 30px;
-  width: 54px;
+  padding: 6px 12px;
+  font-size: .7rem;
 
   @media screen and (max-width: $break-small) {
     margin-right: 12px;
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index e27444084..ac2cecf7e 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -58,7 +58,7 @@
   }
 
   @media screen and (min-width: 1281px) {
-    width: 65vw;
+    width: 62vw;
   }
 }
 
@@ -66,8 +66,10 @@
   font-family: Roboto;
   text-transform: uppercase;
   font-weight: 400;
-  color: #22232c; // $shark
-  line-height: 29px;
+  font-size: 1.1rem;
+  position: relative;
+  padding-left: 15px;
+  color: #5b5d67;
 
   @media screen and (max-width: 575px) {
     display: none;
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index bdbdd2645..99fd2a96d 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -16,7 +16,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    margin: 2.8em 2.37em .8em;
+    margin: 2.3em 2.37em .8em;
   }
 
   .balance-container {
@@ -37,13 +37,16 @@
   }
 
   .balance-display {
+    .token-amount {
+      color: $black;
+    }
 
     @media screen and (max-width: $break-small) {
       text-align: center;
 
       .token-amount {
-        font-size: 175%;
-        margin-top: 12.5%;
+        font-size: 1.75rem;
+        margin-top: 1rem;
       }
 
       .fiat-amount {
@@ -54,12 +57,12 @@
     }
 
     @media screen and (min-width: $break-large) {
-      margin-left: 3%;
+      margin-left: .8em;
       justify-content: flex-start;
       align-items: flex-start;
 
       .token-amount {
-        font-size: 135%;
+        font-size: 1.5rem;
       }
 
       .fiat-amount {
@@ -69,13 +72,6 @@
     }
   }
 
-  .balance-icon {
-    border-radius: 25px;
-    width: 45px;
-    height: 45px;
-    border: 1px solid $alto;
-  }
-
   .hero-balance-buttons {
 
     @media screen and (max-width: $break-small) {
@@ -89,26 +85,9 @@
       flex-grow: 2;
       justify-content: flex-end;
     }
-
-    button.btn-clear {
-      background: $white;
-      border: 1px solid;
-      border-radius: 2px;
-      font-size: 12px;
-
-      @media screen and (max-width: $break-small) {
-        border-color: $curious-blue;
-        color: $curious-blue;
-        height: 36px;
-      }
-
-      @media screen and (min-width: $break-large) {
-        border-color: $curious-blue;
-        color: $curious-blue;
-        padding: 0;
-        width: 85px;
-        height: 34px;
-      }
-    }
   }
 }
+
+.hero-balance-button {
+  width: 6rem;
+}
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 2431e2f63..7a2ec35a4 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -258,19 +258,10 @@
     width: 286px;
   }
 
-  .btn-clear {
-    min-height: 28px;
-    font-size: 14px;
-    border-color: $curious-blue;
-    color: $curious-blue;
-    border-radius: 2px;
-    flex-basis: 100%;
-    width: 75%;
+  .account-modal__button {
     margin-top: 17px;
     padding: 10px 22px;
-    height: 44px;
     width: 235px;
-    font-family: Roboto;
   }
 }
 
@@ -346,17 +337,17 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+}
 
-  .btn-clear {
-    width: 141px;
-    height: 54px;
-  }
+.export-private-key__button {
+  margin-top: 17px;
+  padding: 10px 22px;
+  width: 141px;
+  height: 54px;
+}
 
-  .btn-cancel {
-    margin-right: 15px;
-    border-color: $dusty-gray;
-    color: $scorpion;
-  }
+.export-private-key__button--cancel {
+  margin-right: 15px;
 }
 
 .private-key-password-display-wrapper {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 98dbdffb2..d9a39b8d5 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -8,41 +8,25 @@
 }
 
 .network-component.pointer {
-  border: 1px solid $shark;
+  border: 2px solid $silver;
   border-radius: 82px;
-  padding: 6px;
+  padding: 3px;
   flex: 0 0 auto;
 
-  &.ethereum-network {
-    border-color: rgb(3, 135, 137);
-
-    .menu-icon-circle div {
-      background-color: rgba(3, 135, 137, .7) !important;
-    }
+  &.ethereum-network .menu-icon-circle div {
+    background-color: rgba(3, 135, 137, .7) !important;
   }
 
-  &.ropsten-test-network {
-    border-color: rgb(233, 21, 80);
-
-    .menu-icon-circle div {
-      background-color: rgba(233, 21, 80, .7) !important;
-    }
+  &.ropsten-test-network .menu-icon-circle div {
+    background-color: rgba(233, 21, 80, .7) !important;
   }
 
-  &.kovan-test-network {
-    border-color: rgb(105, 4, 150);
-
-    .menu-icon-circle div {
-      background-color: rgba(105, 4, 150, .7) !important;
-    }
+  &.kovan-test-network .menu-icon-circle div {
+    background-color: rgba(105, 4, 150, .7) !important;
   }
 
-  &.rinkeby-test-network {
-    border-color: rgb(235, 179, 63);
-
-    .menu-icon-circle div {
-      background-color: rgba(235, 179, 63, .7) !important;
-    }
+  &.rinkeby-test-network .menu-icon-circle div {
+    background-color: rgba(235, 179, 63, .7) !important;
   }
 }
 
@@ -66,11 +50,12 @@
 }
 
 .network-name {
-  line-height: 15px;
   padding: 0 4px;
   font-family: Roboto;
   font-size: 12px;
   flex: 1 0 auto;
+  color: $tundora;
+  font-weight: 500;
 }
 
 .network-droppo {
@@ -167,3 +152,6 @@
   line-height: 18px;
 }
 
+.network-caret {
+  margin: 0 8px 2px;
+}
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 61dfbd176..af1a6974c 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -4,7 +4,7 @@
 
 // Component Colors
 $tx-view-bg: $white;
-$wallet-view-bg: $wild-sand;
+$wallet-view-bg: $alabaster;
 
 // Main container
 .main-container {
@@ -47,7 +47,7 @@ $wallet-view-bg: $wild-sand;
 .wallet-view {
   display: flex;
   flex-direction: column;
-  flex: 33.5 1 33.5%;
+  flex: 32 1 32%;
   width: 0;
   background: $wallet-view-bg;
   z-index: 200;
@@ -69,22 +69,18 @@ $wallet-view-bg: $wild-sand;
   }
 
   &__keyring-label {
-    height: 40px;
+    height: 50px;
     color: $dusty-gray;
     font-family: Roboto;
     font-size: 10px;
-    line-height: 40px;
     text-align: right;
-    padding: 0 20px;
+    padding: 17px 20px 0;
+    box-sizing: border-box;
   }
 
   &__details-button {
-    color: $curious-blue;
     font-size: 10px;
-    line-height: 13px;
-    text-align: center;
-    border: 1px solid $curious-blue;
-    border-radius: 10.5px;
+    border-radius: 17px;
     background-color: transparent;
     margin: 0 auto;
     padding: 4px 12px;
@@ -121,16 +117,14 @@ $wallet-view-bg: $wild-sand;
 
   &__add-token-button {
     flex: 0 0 auto;
-    color: $dusty-gray;
-    font-size: 14px;
-    line-height: 19px;
-    text-align: center;
     margin: 36px auto;
-    border: 1px solid $dusty-gray;
-    border-radius: 2px;
-    font-weight: 300;
     background: none;
-    padding: 9px 30px;
+    padding: .7rem 2rem;
+    transition: border-color .3s ease;
+
+    &:hover {
+      border-color: $curious-blue;
+    }
   }
 }
 
@@ -199,7 +193,7 @@ $wallet-view-bg: $wild-sand;
 
   .main-container {
     // margin-top: 6.9vh;
-    width: 85%;
+    width: 85vw;
     height: 90vh;
     box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
@@ -208,7 +202,7 @@ $wallet-view-bg: $wild-sand;
 @media screen and (min-width: 769px) {
   .main-container {
     // margin-top: 6.9vh;
-    width: 80%;
+    width: 80vw;
     height: 82vh;
     box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
@@ -217,7 +211,7 @@ $wallet-view-bg: $wild-sand;
 @media screen and (min-width: 1281px) {
   .main-container {
     // margin-top: 6.9vh;
-    width: 65%;
+    width: 62vw;
     height: 82vh;
     box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
@@ -239,14 +233,6 @@ $wallet-view-bg: $wild-sand;
     overflow-y: auto;
     background-color: $white;
   }
-
-  button.btn-clear {
-    width: 93px;
-    height: 50px;
-    font-size: .7em;
-    background: $white;
-    border: 1px solid;
-  }
 }
 
 // wallet view
@@ -254,9 +240,9 @@ $wallet-view-bg: $wild-sand;
   font-size: 24px;
   font-weight: 300;
   line-height: 20px;
-  color: $scorpion;
+  color: $black;
   margin-top: 8px;
-  margin-bottom: 24px;
+  margin-bottom: .9rem;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 2bd192788..beb3e519c 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -526,8 +526,9 @@
   }
 
   &__form {
-    margin: 13px 0;
+    padding: 13px 0;
     width: 100%;
+    overflow-y: auto;
 
     @media screen and (max-width: $break-small) {
       padding: 13px 0;
@@ -587,7 +588,7 @@
       width: 100%;
       height: 100%;
     }
-    
+
     &__list {
       z-index: 1050;
       position: absolute;
@@ -677,40 +678,15 @@
     border-top: 1px solid $alto;
     background: $white;
     padding: 0 12px;
+    flex-shrink: 0;
   }
 
   &__next-btn,
-  &__cancel-btn,
-  &__next-btn__disabled {
+  &__cancel-btn {
     width: 163px;
-    text-align: center;
-    height: 55px;
-    border-radius: 2px;
-    background-color: $white;
-    font-family: Roboto;
-    font-size: 16px;
-    font-weight: 300;
-    line-height: 21px;
-    border: 1px solid;
     margin: 0 4px;
   }
 
-  &__next-btn,
-  &__next-btn__disabled {
-    color: $curious-blue;
-    border-color: $curious-blue;
-  }
-
-  &__next-btn__disabled {
-    opacity: .5;
-    cursor: auto;
-  }
-
-  &__cancel-btn {
-    color: $dusty-gray;
-    border-color: $dusty-gray;
-  }
-
   &__customize-gas {
     border: 1px solid #D8D8D8;
     border-radius: 4px;
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index d4add71b1..bdd26099a 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -12,7 +12,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   position: relative;
 
   &__token-balance {
-    font-size: 130%;
+    font-size: 1.5rem;
 
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 105%;
@@ -34,7 +34,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   }
 
   &--active {
-    background-color: rgba($wallet-balance-bg, 1);
+    background-color: $manatee;
+    color: $white;
   }
 
   &__identicon {
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index fb09fd800..19dadc69a 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -32,13 +32,9 @@
 }
 
 @media screen and (min-width: $break-large) {
-  .tx-list-header-wrapper {
-    flex: 0 0 55px;
-  }
-
   .tx-list-header {
     font-size: 16px;
-    margin: 1.5em 2.37em;
+    margin: 1.1em 2.37em .8em;
   }
 
   .tx-list-container::-webkit-scrollbar {
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
index 64b291b89..293771550 100644
--- a/ui/app/css/itcss/components/wallet-balance.scss
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -8,7 +8,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   background: rgba($wallet-balance-bg, 0);
 
   &--active {
-    background: rgba($wallet-balance-bg, 1);
+    background: $manatee;
+    color: $white;
   }
 }
 
@@ -41,7 +42,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     align-items: flex-start;
 
     .token-amount {
-      font-size: 135%;
+      font-size: 1.5rem;
     }
 
     .fiat-amount {
@@ -61,11 +62,13 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
       }
     }
   }
+}
 
-  .balance-icon {
-    border-radius: 25px;
-    width: 45px;
-    height: 45px;
-    border: 1px solid $alto;
-  }
+.balance-icon {
+  border-radius: 25px;
+  width: 50px;
+  height: 50px;
+  border: 1px solid $alto;
+  padding: 5px;
+  background: $white;
 }
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index edc376c17..4c0972527 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -42,6 +42,8 @@ $malibu-blue: #7ac9fd;
 $athens-grey: #e9edf0;
 $jaffa: #f28930;
 $geyser: #d2d8dd;
+$manatee: #93949d;
+$spindle: #c7ddec;
 $mid-gray: #5b5d67;
 $cape-cod: #38393a;
 
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 7c9b6dbc6..ca73fa5ea 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -516,16 +516,16 @@ SendTransactionScreen.prototype.renderFooter = function () {
   } = this.props
 
   const noErrors = !amountError && toError === null
-  const errorClass = noErrors ? '' : '__disabled'
 
   return h('div.send-v2__footer', [
-    h('button.send-v2__cancel-btn', {
+    h('button.btn-cancel.send-v2__cancel-btn', {
       onClick: () => {
         clearSend()
         goHome()
       },
     }, 'Cancel'),
-    h(`button.send-v2__next-btn${errorClass}`, {
+    h('button.btn-clear.send-v2__next-btn', {
+      disabled: !noErrors,
       onClick: event => this.onSubmit(event),
     }, 'Next'),
   ])