From 208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 10 Jan 2018 21:09:09 -0800
Subject: Update main view styling

---
 ui/app/app.js                                     | 14 +++--------
 ui/app/components/balance-component.js            |  2 +-
 ui/app/components/token-cell.js                   |  2 +-
 ui/app/components/tx-view.js                      | 14 +++--------
 ui/app/css/itcss/components/header.scss           |  8 +++---
 ui/app/css/itcss/components/hero-balance.scss     | 30 ++++++++++++++---------
 ui/app/css/itcss/components/newui-sections.scss   | 29 +++++++++++-----------
 ui/app/css/itcss/components/token-list.scss       |  6 +++--
 ui/app/css/itcss/components/transaction-list.scss |  6 +----
 ui/app/css/itcss/components/wallet-balance.scss   | 20 +++++++++------
 ui/app/css/itcss/settings/variables.scss          |  1 +
 11 files changed, 64 insertions(+), 68 deletions(-)

(limited to 'ui')

diff --git a/ui/app/app.js b/ui/app/app.js
index c6fce0e47..73e5c06db 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -253,19 +253,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/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 e42a20c85..7bddbbef4 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.hero-balance-button', {
           onClick: () => showModal({
             name: 'BUY',
           }),
         }, 'DEPOSIT'),
 
-        h('button.btn-clear', {
+        h('button.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.hero-balance-button', {
           onClick: showSendTokenPage,
         }, 'SEND'),
       ])
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index a6332f819..2a1f7abc7 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -53,7 +53,7 @@
   }
 
   @media screen and (min-width: 1281px) {
-    width: 65vw;
+    width: 62vw;
   }
 }
 
@@ -61,8 +61,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..643363f95 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 {
@@ -42,8 +42,9 @@
       text-align: center;
 
       .token-amount {
-        font-size: 175%;
-        margin-top: 12.5%;
+        font-size: 1.75rem;
+        margin-top: 1rem;
+        font-weight: 400;
       }
 
       .fiat-amount {
@@ -54,12 +55,13 @@
     }
 
     @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;
+        font-weight: 400;
       }
 
       .fiat-amount {
@@ -69,13 +71,6 @@
     }
   }
 
-  .balance-icon {
-    border-radius: 25px;
-    width: 45px;
-    height: 45px;
-    border: 1px solid $alto;
-  }
-
   .hero-balance-buttons {
 
     @media screen and (max-width: $break-small) {
@@ -112,3 +107,14 @@
     }
   }
 }
+
+.hero-balance-button {
+  text-align: center;
+  padding: .9rem 1rem;
+  color: $white;
+  background: $curious-blue;
+  border-radius: 2px;
+  font-size: .85rem;
+  width: 6rem;
+  font-weight: 300;
+}
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 61dfbd176..3ae47cb35 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,21 @@ $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,12 +120,12 @@ $wallet-view-bg: $wild-sand;
 
   &__add-token-button {
     flex: 0 0 auto;
-    color: $dusty-gray;
+    color: $curious-blue;
     font-size: 14px;
     line-height: 19px;
     text-align: center;
     margin: 36px auto;
-    border: 1px solid $dusty-gray;
+    border: 1px solid $curious-blue;
     border-radius: 2px;
     font-weight: 300;
     background: none;
@@ -199,7 +198,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 +207,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 +216,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);
   }
@@ -252,11 +251,11 @@ $wallet-view-bg: $wild-sand;
 // wallet view
 .account-name {
   font-size: 24px;
-  font-weight: 300;
+  font-weight: 400;
   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/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index d4add71b1..5cd5b3807 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -12,7 +12,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   position: relative;
 
   &__token-balance {
-    font-size: 130%;
+    font-size: 1.5rem;
+    font-weight: 400;
 
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 105%;
@@ -34,7 +35,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 a5d508f11..0ff0b3dda 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..44f405e08 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,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     align-items: flex-start;
 
     .token-amount {
-      font-size: 135%;
+      font-size: 1.5rem;
+      font-weight: 400;
     }
 
     .fiat-amount {
@@ -61,11 +63,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 387d14b5f..7e723966b 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -42,6 +42,7 @@ $malibu-blue: #7ac9fd;
 $athens-grey: #e9edf0;
 $jaffa: #f28930;
 $geyser: #d2d8dd;
+$manatee: #93949d;
 
 /*
   Z-Indicies
-- 
cgit v1.2.3