From ade1c404bdf26bd299bc54f83b82ad3906451eab Mon Sep 17 00:00:00 2001
From: kumavis <aaron@kumavis.me>
Date: Mon, 8 Jan 2018 09:44:11 -0800
Subject: ui - fix font path name

---
 ui/app/css/itcss/settings/typography.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss
index 58e2d444e..ac8c41336 100644
--- a/ui/app/css/itcss/settings/typography.scss
+++ b/ui/app/css/itcss/settings/typography.scss
@@ -51,14 +51,14 @@
 
 @font-face {
   font-family: 'DIN NEXT';
-  src: url('/fonts/DIN NEXT/DIN NEXT W01 Regular.otf') format('opentype');
+  src: url('/fonts/DIN Next/DIN Next W01 Regular.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DIN NEXT Light';
-  src: url('/fonts/DIN NEXT/DIN NEXT W10 Light.otf') format('opentype');
+  src: url('/fonts/DIN Next/DIN Next W10 Light.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
 }
-- 
cgit 


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/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 +
 7 files changed, 55 insertions(+), 45 deletions(-)

(limited to 'ui/app/css')

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 


From 7c97b2f37c0226daef734bae3392b6ade2b2956f Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 11 Jan 2018 13:51:41 -0330
Subject: Fix padding of a hovered tx-list-item (#2859)

---
 ui/app/css/itcss/components/transaction-list.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index a5d508f11..fb09fd800 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -210,7 +210,7 @@
   }
 
   @media screen and (min-width: $break-large) {
-    margin: 0 2.37em;
+    padding: 0 2.37em;
   }
 
   &:last-of-type {
-- 
cgit 


From 376e1365727a97344d70d627ae27e8e70830a17a Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 11 Jan 2018 16:30:07 -0800
Subject: Update styling for buttons, font weights

---
 ui/app/css/itcss/components/buttons.scss        | 38 +++++++++++++++++++++++--
 ui/app/css/itcss/components/confirm.scss        |  9 ++----
 ui/app/css/itcss/components/hero-balance.scss   | 31 +-------------------
 ui/app/css/itcss/components/modal.scss          | 29 +++++++------------
 ui/app/css/itcss/components/newui-sections.scss | 27 +++++-------------
 ui/app/css/itcss/components/send.scss           | 34 ++++------------------
 ui/app/css/itcss/components/token-list.scss     |  1 -
 ui/app/css/itcss/components/wallet-balance.scss |  1 -
 ui/app/css/itcss/settings/variables.scss        |  1 +
 9 files changed, 62 insertions(+), 109 deletions(-)

(limited to 'ui/app/css')

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/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 643363f95..a7a883909 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -37,6 +37,7 @@
   }
 
   .balance-display {
+    color: $black;
 
     @media screen and (max-width: $break-small) {
       text-align: center;
@@ -44,7 +45,6 @@
       .token-amount {
         font-size: 1.75rem;
         margin-top: 1rem;
-        font-weight: 400;
       }
 
       .fiat-amount {
@@ -61,7 +61,6 @@
 
       .token-amount {
         font-size: 1.5rem;
-        font-weight: 400;
       }
 
       .fiat-amount {
@@ -84,37 +83,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 {
-  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/modal.scss b/ui/app/css/itcss/components/modal.scss
index 9b64564d6..307401666 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/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 3ae47cb35..af1a6974c 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -79,10 +79,7 @@ $wallet-view-bg: $alabaster;
   }
 
   &__details-button {
-    color: $curious-blue;
     font-size: 10px;
-    text-align: center;
-    border: 1px solid $curious-blue;
     border-radius: 17px;
     background-color: transparent;
     margin: 0 auto;
@@ -120,16 +117,14 @@ $wallet-view-bg: $alabaster;
 
   &__add-token-button {
     flex: 0 0 auto;
-    color: $curious-blue;
-    font-size: 14px;
-    line-height: 19px;
-    text-align: center;
     margin: 36px auto;
-    border: 1px solid $curious-blue;
-    border-radius: 2px;
-    font-weight: 300;
     background: none;
-    padding: 9px 30px;
+    padding: .7rem 2rem;
+    transition: border-color .3s ease;
+
+    &:hover {
+      border-color: $curious-blue;
+    }
   }
 }
 
@@ -238,20 +233,12 @@ $wallet-view-bg: $alabaster;
     overflow-y: auto;
     background-color: $white;
   }
-
-  button.btn-clear {
-    width: 93px;
-    height: 50px;
-    font-size: .7em;
-    background: $white;
-    border: 1px solid;
-  }
 }
 
 // wallet view
 .account-name {
   font-size: 24px;
-  font-weight: 400;
+  font-weight: 300;
   line-height: 20px;
   color: $black;
   margin-top: 8px;
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 5cd5b3807..bdd26099a 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -13,7 +13,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 
   &__token-balance {
     font-size: 1.5rem;
-    font-weight: 400;
 
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 105%;
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
index 44f405e08..293771550 100644
--- a/ui/app/css/itcss/components/wallet-balance.scss
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -43,7 +43,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 
     .token-amount {
       font-size: 1.5rem;
-      font-weight: 400;
     }
 
     .fiat-amount {
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 7e723966b..8bd1ad20d 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -43,6 +43,7 @@ $athens-grey: #e9edf0;
 $jaffa: #f28930;
 $geyser: #d2d8dd;
 $manatee: #93949d;
+$spindle: #c7ddec;
 
 /*
   Z-Indicies
-- 
cgit 


From b0a6bfdeece8a5afb860bc47f01373d08a0895b8 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 11 Jan 2018 16:59:00 -0800
Subject: Change styling for network dropdown

---
 ui/app/css/itcss/components/network.scss | 42 ++++++++++++--------------------
 1 file changed, 15 insertions(+), 27 deletions(-)

(limited to 'ui/app/css')

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


From 0f4bfcb02e3a04f044a571e01a4977dae2afec8e Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 11 Jan 2018 17:12:58 -0800
Subject: Fix token balance color

---
 ui/app/css/itcss/components/hero-balance.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index a7a883909..99fd2a96d 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -37,7 +37,9 @@
   }
 
   .balance-display {
-    color: $black;
+    .token-amount {
+      color: $black;
+    }
 
     @media screen and (max-width: $break-small) {
       text-align: center;
-- 
cgit 


From 5c1dcf3e9bdb317dd8b42aadb18657eb4bfa2e0f Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Fri, 12 Jan 2018 16:18:18 -0330
Subject: [NewUI-flat] New deposit ether modal UI. (#2642)

* New deposit ether modal.

* New deposit modal full screen on mobile, and other style fixes.

* Hide shapeshift option from deposit modal for now.

* Add shapeshift form to new deposit modal.

* Store recipient address for shapeshift tx in background.

* Use Simpledropdown to achieve desired styling in coin selector.

* Lint fix

* Fix typos and remove dead code.

* Remove storage of shapeshift receiving address from background.

* Fix typos
---
 ui/app/css/itcss/components/modal.scss   | 254 ++++++++++++++++++++++++++++++-
 ui/app/css/itcss/settings/variables.scss |   2 +
 2 files changed, 255 insertions(+), 1 deletion(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 9b64564d6..2431e2f63 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -598,4 +598,256 @@
   justify-content: center;
   font-size: 17px;
   color: $nile-blue;
-}
\ No newline at end of file
+}
+
+// Deposit Ether Modal
+.deposit-ether-modal {
+  border-radius: 8px;
+  font-family: Roboto;
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+
+  &__header {
+    width: 100%;
+    border-radius: 8px 8px 0 0;
+    background-color: $mid-gray;
+    display: flex;
+    position: relative;
+    padding: 25px;
+    flex-flow: column;
+    align-items: flex-start;
+
+    &__title {
+      color: $white;
+      font-size: 24px;
+      line-height: 32px;
+    }
+
+    &__description {
+      color: $white;
+      font-size: 16px;
+      line-height: 22px;
+      margin-top: 10px;
+    }
+
+    &__close::after {
+      content: '\00D7';
+      font-size: 2em;
+      color: $white;
+      position: absolute;
+      top: 20.8px;
+      right: 28px;
+      cursor: pointer;
+    }
+  }
+
+  &__buy-rows {
+    width: 100%;
+    padding: 33px;
+    padding-top: 0px;
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1;
+    overflow-y: auto;
+
+    @media screen and (max-width: 575px) {
+      height: 0;
+    }
+  }
+
+  &__buy-row {
+    border-bottom: 1px solid $alto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    padding-bottom: 25px;
+    padding-top: 25px;
+
+    @media screen and (max-width: 575px) {
+      min-height: 360px;
+      flex-flow: column;
+      justify-content: center;
+      padding-top: 45px;
+    }
+
+    &__back {
+      position: absolute;
+      top: 10px;
+      left: 0px;
+    }
+
+    &__shapeshift-buy {
+      padding-top: 25px;
+      position: relative;
+      @media screen and (max-width: 575px) {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex: 1;
+        padding-bottom: 25px;
+        flex-flow: column;
+        justify-content: center;
+        padding-top: 20px;
+        min-height: 240px;
+        border: none;
+      }
+    }
+
+    &__logo {
+      display: flex;
+      justify-content: center;
+      flex: 0.3 1 auto;
+
+      @media screen and (min-width: 575px) {
+        min-width: 215px;
+      }
+    }
+
+    &__coinbase-logo {
+      height: 40px;
+      width: 180px;
+    }
+
+    &__shapeshift-logo {
+      height: 60px;
+      width: 174px;
+    }
+
+    &__eth-logo {
+      border-radius: 50%;
+      width: 68px;
+      height: 68px;
+      border: 3px solid $tundora;
+      z-index: 25;
+      padding: 4px;
+      background-color: #fff;
+    }
+
+    &__right {
+      display: flex;
+    }
+
+    &__description {
+      color: $cape-cod;
+      flex: 0.5 1 auto;
+
+      @media screen and (min-width: 575px) {
+        min-width: 315px;
+      }
+
+      &__title {
+        font-size: 20px;
+        line-height: 30px;
+      }
+
+      &__text {
+        font-size: 14px;
+        line-height: 22px;
+        margin-top: 7px;
+      }
+    }
+
+    &__button {
+      display: flex;
+      justify-content: flex-end;
+
+      @media screen and (min-width: 575px) {
+        min-width: 300px;
+      }
+    }
+  }
+
+  &__buy-row:last-of-type {
+    border-bottom: 0px;
+  }
+
+  &__deposit-button, .shapeshift-form__shapeshift-buy-btn {
+    height: 54px;
+    width: 257px;
+    border: 1px solid $curious-blue;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    color: $curious-blue;
+    background-color: $white;
+  }
+
+  .shapeshift-form-wrapper {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 28px;
+    flex: 1 0 auto;
+
+    .shapeshift-form {
+      width: auto;
+
+      &__caret {
+        width: auto;
+        flex: 1;
+      }
+    }
+  }
+
+  .shapeshift-form__shapeshift-buy-btn {
+    margin-top: 10px;
+  }
+
+  .simple-dropdown {
+    color: #5B5D67;
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 21px;
+    border: 1px solid #D8D8D8;
+    background-color: #FFFFFF;
+    text-align: center;
+    width: 100%;
+    height: 45px;
+    line-height: 44px;
+    font-family: Montserrat Light;
+  }
+
+  .simple-dropdown__selected {
+    text-align: center;
+  }
+}
+
+//Notification Modal
+
+.notification-modal-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  border: 1px solid $alto;
+  box-shadow: 0 0 2px 2px $alto;
+  font-family: Roboto;
+}
+
+.notification-modal-header {
+  background: $wild-sand;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 30px;
+  font-size: 22px;
+  color: $nile-blue;
+  height: 79px;
+}
+
+.notification-modal-message {
+  padding: 20px;
+}
+
+.notification-modal-message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  font-size: 17px;
+  color: $nile-blue;
+}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 387d14b5f..edc376c17 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;
+$mid-gray: #5b5d67;
+$cape-cod: #38393a;
 
 /*
   Z-Indicies
-- 
cgit 


From bdcee058dc278c46c828f376476f121417481385 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 9 Jan 2018 16:45:39 -0800
Subject: Fix styling in initialization

---
 ui/app/css/itcss/components/header.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index a6332f819..e27444084 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -17,7 +17,16 @@
   @media screen and (min-width: 576px) {
     height: 75px;
     justify-content: center;
+  }
+
+  .metafox-icon {
+    cursor: pointer;
+  }
+}
 
+.app-header--initialized {
+
+  @media screen and (min-width: 576px) {
     &::after {
       content: '';
       position: absolute;
@@ -27,10 +36,6 @@
       bottom: -32px;
     }
   }
-
-  .metafox-icon {
-    cursor: pointer;
-  }
 }
 
 .app-header-contents {
-- 
cgit 


From 980e1bfcf82361185f6d1b22abd9593ba166825e Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 10 Jan 2018 14:55:38 -0330
Subject: New add account page with create and import options.

---
 ui/app/css/itcss/components/index.scss       |   2 +
 ui/app/css/itcss/components/new-account.scss | 181 +++++++++++++++++++++++++++
 2 files changed, 183 insertions(+)
 create mode 100644 ui/app/css/itcss/components/new-account.scss

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index dfb4f23f0..d1b9b6277 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -51,3 +51,5 @@
 @import './account-dropdown-mini.scss';
 
 @import './editable-label.scss';
+
+@import './new-account.scss';
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
new file mode 100644
index 000000000..e14f567e1
--- /dev/null
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -0,0 +1,181 @@
+.new-account {
+  width: 376px;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+  z-index: 25;
+  padding-bottom: 31px;
+
+  &__header {
+    display: flex;
+    flex-flow: column;
+    border-bottom: 1px solid $geyser;
+  }
+
+  &__title {
+    color: $tundora;
+    font-family: Roboto;
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 43px;
+    margin-top: 22px;
+    margin-left: 29px;
+  }
+
+  &__tabs {
+    margin-left: 22px;
+    display: flex;
+    margin-top: 10px;
+
+    &__tab {
+      height: 54px;
+      width: 75px;
+      padding: 15px 10px;
+      color: $dusty-gray;
+      font-family: Roboto;
+      font-size: 18px;
+      line-height: 24px;
+      text-align: center;
+    }
+
+    &__tab:first-of-type {
+      margin-right: 20px;
+    }
+
+    &__unselected:hover {
+      color: $black;
+      border-bottom: none;
+    }
+
+    &__selected {
+      color: $curious-blue;
+      border-bottom: 3px solid $curious-blue;
+    }
+  }
+
+}
+
+.new-account-import-form {
+  &__select-section {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    margin-top: 29px;
+  }
+
+  &__select-label {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+  }
+
+  &__select {
+    height: 54px;
+    width: 210px;
+    border: 1px solid #D2D8DD;
+    border-radius: 4px;
+    background-color: #FFFFFF;
+    display: flex;
+    align-items: center;
+
+    .Select-control,
+    .Select-control:hover {
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  &__instruction {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    align-self: flex-start;
+    margin-left: 30px;
+  }
+
+  &__private-key {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    margin-top: 34px;
+  }
+
+  &__input-password {
+    height: 54px;
+    width: 315px;
+    border: 1px solid $geyser;
+    border-radius: 4px;
+    background-color: $white;
+    margin-top: 16px;
+  }
+
+  &__json {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    margin-top: 29px;
+  }
+}
+
+.new-account-create-form {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+
+  &__input-label {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    margin-top: 29px;
+    align-self: flex-start;
+    margin-left: 30px;
+  }
+
+  &__input {
+    height: 54px;
+    width: 315.84px;
+    border: 1px solid $geyser;
+    border-radius: 4px;
+    background-color: $white;
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    margin-top: 15px;
+  }
+
+  &__buttons {
+    margin-top: 39px;
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+  }
+
+  &__button-cancel,
+  &__button-create {
+    height: 55px;
+    width: 150px;
+    border-radius: 2px;
+    background-color: #FFFFFF;
+  }
+
+  &__button-cancel {
+    border: 1px solid $dusty-gray;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+  }
+
+  &__button-create {
+    border: 1px solid $curious-blue;
+    color: $curious-blue;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+  }
+}
\ No newline at end of file
-- 
cgit 


From 2bc85ea72f2b53f763149dafd3a7787de9016635 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 12 Jan 2018 13:59:43 -0330
Subject: Fix input box padding and select highlight in new account create and
 import page.

---
 ui/app/css/itcss/components/new-account.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index e14f567e1..c5e4ea761 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -80,8 +80,14 @@
 
     .Select-control,
     .Select-control:hover {
+      height: 100%;
       border: none;
       box-shadow: none;
+
+      .Select-value {
+        display: flex;
+        align-items: center;
+      }
     }
   }
 
@@ -108,6 +114,10 @@
     border-radius: 4px;
     background-color: $white;
     margin-top: 16px;
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    padding: 0px 20px;
   }
 
   &__json {
@@ -144,6 +154,7 @@
     font-size: 16px;
     line-height: 21px;
     margin-top: 15px;
+    padding: 0px 20px;
   }
 
   &__buttons {
-- 
cgit 


From dce6dcf437ecb7769d45ee38f1d2227a74f09ca6 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 12 Jan 2018 16:16:28 -0800
Subject: Fix Add Token button order, styling

---
 ui/app/css/itcss/components/add-token.scss | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
index 5f6d0fcff..13020f62f 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -94,6 +94,7 @@
     padding: 12px 0;
     font-weight: 600;
     cursor: pointer;
+    position: relative;
 
     &:hover {
       background-color: rgba(0, 0, 0, .05);
@@ -164,9 +165,18 @@
 
   &__buttons {
     display: flex;
-    flex-flow: column nowrap;
+    flex-flow: row nowrap;
     margin: 30px 0 51px;
     flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__button {
+    flex: 1 0 141px;
+    margin: 0 12px;
+    padding: 10px 22px;
+    height: 54px;
   }
 
   &__token-icons-container {
@@ -324,18 +334,10 @@
     }
 
     &__buttons {
-      flex-flow: row nowrap;
-      width: 100%;
-      align-items: center;
-      justify-content: center;
       padding: 12px 0;
       margin: 0;
       border-top: 1px solid $gallery;
-
-      button {
-        flex: 1 0 auto;
-        margin: 0 12px;
-      }
+      width: 100%;
     }
   }
 }
-- 
cgit 


From 644adeccf6b5365ef2c8c9a5ba69b90fdaa1f2ec Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sat, 13 Jan 2018 14:59:16 -0800
Subject: Fix Hide Token modal styling, popup positioning

---
 ui/app/css/itcss/components/modal.scss          | 24 +++++++-----------------
 ui/app/css/itcss/components/newui-sections.scss |  2 +-
 ui/app/css/itcss/components/token-list.scss     | 10 +++++-----
 3 files changed, 13 insertions(+), 23 deletions(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 7a2ec35a4..501351700 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -486,10 +486,9 @@
 
 .hide-token-confirmation {
   min-height: 250.72px;
-  width: 374.49px;
   border-radius: 4px;
-  background-color: #FFFFFF;
-  box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5);
+  background-color: $white;
+  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .5);
 
   &__container {
     padding: 24px 27px 21px;
@@ -499,7 +498,7 @@
   }
 
   &__identicon {
-    margin-bottom: 10px
+    margin-bottom: 10px;
   }
 
   &__symbol {
@@ -538,20 +537,11 @@
     justify-content: center;
     margin-top: 15px;
     width: 100%;
+  }
 
-    button {
-      height: 44px;
-      width: 113px;
-      border: 1px solid $scorpion;
-      border-radius: 2px;
-      color: $tundora;
-      font-family: Roboto;
-      font-size: 14px;
-      line-height: 20px;
-      text-align: center;
-      margin-left: 4px;
-      margin-right: 4px;
-    }
+  &__button {
+    width: 141px;
+    margin: 0 5px;
   }
 }
 
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index af1a6974c..c9a06a2cc 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -153,7 +153,7 @@ $wallet-view-bg: $alabaster;
   background: rgb(250, 250, 250);
   z-index: $sidebar-z-index;
   position: fixed;
-  top: 56px;
+  top: 66px;
   left: 0;
   right: 0;
   bottom: 0;
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index bdd26099a..e24bf812b 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -63,11 +63,11 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   height: 55px;
   width: 191px;
   border-radius: 4px;
-  background-color: rgba(0,0,0,0.82);
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
-  position: fixed;
-  margin-top: 20px;
-  margin-left: 105px;
+  background-color: rgba(0, 0, 0, .82);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
+  position: absolute;
+  top: 60px;
+  right: 25px;
   z-index: 2000;
 
   &__close-area {
-- 
cgit 


From 668aab11d1aa94111252fee3d2abd20c207be71b Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 16 Jan 2018 16:45:18 -0330
Subject: Vertically centers the text of the new ui modal header. (#2987)

---
 ui/app/css/itcss/components/modal.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 501351700..5bca4a07d 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -815,6 +815,7 @@
   width: 100%;
   display: flex;
   justify-content: center;
+  align-items: center;
   padding: 30px;
   font-size: 22px;
   color: $nile-blue;
-- 
cgit 


From 40e58d31326cc4e759991d15e7e84140e483a791 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 16 Jan 2018 11:58:02 -0800
Subject: Fix tx-list, confirmation screen styling

---
 ui/app/css/itcss/components/confirm.scss          | 17 +++++++++--------
 ui/app/css/itcss/components/hero-balance.scss     |  1 +
 ui/app/css/itcss/components/transaction-list.scss |  4 ++++
 3 files changed, 14 insertions(+), 8 deletions(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index e75a827f9..255f66e66 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -2,13 +2,15 @@
   position: relative;
   align-items: center;
   font-family: Roboto;
-  flex: 0 0 auto;
+  flex: 1 0 auto;
   flex-flow: column nowrap;
   box-shadow: 0 2px 4px 0 rgba($black, .08);
   border-radius: 8px;
+  display: flex;
 
   @media screen and (max-width: 575px) {
     width: 100%;
+    box-shadow: initial;
   }
 
   @media screen and (min-width: 576px) {
@@ -272,8 +274,8 @@ section .confirm-screen-account-number,
 }
 
 .confirm-screen-confirm-button {
-  height: 62px;
-  border-radius: 2px;
+  height: 50px;
+  border-radius: 4px;
   background-color: #02c9b1;
   font-size: 16px;
   color: $white;
@@ -285,11 +287,11 @@ section .confirm-screen-account-number,
   box-shadow: none;
   flex: 1 0 auto;
   font-weight: 300;
-  margin: 0 8px;
+  margin: 0 5px;
 }
 
 .btn-light.confirm-screen-cancel-button {
-  height: 62px;
+  height: 50px;
   background: none;
   border: none;
   opacity: 1;
@@ -298,12 +300,11 @@ section .confirm-screen-account-number,
   padding-top: 15px;
   padding-bottom: 15px;
   font-size: 16px;
-  line-height: 32px;
   box-shadow: none;
   cursor: pointer;
   flex: 1 0 auto;
   font-weight: 300;
-  margin: 0 8px;
+  margin: 0 5px;
 }
 
 #pending-tx-form {
@@ -312,7 +313,7 @@ section .confirm-screen-account-number,
   display: flex;
   flex-flow: row nowrap;
   background-color: $white;
-  padding: 12px 18px;
+  padding: 12px;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
   width: 100%;
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 99fd2a96d..ccc9a0118 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -17,6 +17,7 @@
     justify-content: flex-start;
     align-items: center;
     margin: 2.3em 2.37em .8em;
+    flex: 0 0 auto;
   }
 
   .balance-container {
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 19dadc69a..29001a842 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -6,6 +6,10 @@
   }
 }
 
+.tx-list-header-wrapper {
+  flex: 0 0 auto;
+}
+
 .tx-list-header {
   text-transform: capitalize;
 }
-- 
cgit 


From f8bf8cb527ae0e24ccf9d1c9f2f6baa457f2e659 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 17 Jan 2018 17:37:18 -0800
Subject: Update popout to fullscreen icon

---
 ui/app/css/itcss/components/newui-sections.scss | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index c9a06a2cc..1c26882b5 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -40,6 +40,8 @@ $wallet-view-bg: $alabaster;
 
 .open-in-browser {
   cursor: pointer;
+  display: flex;
+  justify-content: center;
 }
 
 // wallet view and sidebar
-- 
cgit 


From 4fae461a672b89a16c496d09321f11f86b873e32 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 18 Jan 2018 01:17:01 -0330
Subject: [NewUI] Send screen gas loading fixes (#3027)

* Allow entering amount, but disable validation of amount, opening of gas customizer or clicking of next, when gas loading in send.

* Fix variable name.
---
 ui/app/css/itcss/components/send.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index beb3e519c..7a6e2823b 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -652,11 +652,11 @@
     border: 1px solid $curious-blue;
     border-radius: 4px;
     background-color: $white;
-    padding: 5px;
     position: absolute;
     right: 15px;
     top: 14px;
     cursor: pointer;
+    font-size: 1em;
   }
 
   &__sliders-icon {
-- 
cgit 


From b05d21b1ba308bdb5b758d53dd79593a7a2bf26e Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 17 Jan 2018 20:08:29 -0800
Subject: Fix transaction list font sizes, padding

---
 ui/app/css/itcss/components/transaction-list.scss | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 29001a842..c3df493df 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -73,7 +73,7 @@
   }
 
   @media screen and (min-width: $break-large) {
-    padding-bottom: 12px;
+    padding-bottom: 8px;
   }
 }
 
@@ -91,21 +91,13 @@
 }
 
 .tx-list-date-wrapper {
+  margin-top: 6px;
   flex: 1 1 auto;
-
-  @media screen and (max-width: $break-small) {
-    margin-top: 6px;
-  }
-
-  @media screen and (min-width: $break-large) {
-    margin-top: 12px;
-  }
 }
 
 .tx-list-content-wrapper {
   align-items: stretch;
   margin-bottom: 4px;
-  margin-top: 2px;
   flex: 1 0 auto;
   width: 100%;
   display: flex;
@@ -115,7 +107,7 @@
     font-size: 12px;
 
     .tx-list-status {
-      font-size: 14px !important;
+      font-size: 12px !important;
     }
 
     .tx-list-account {
@@ -129,7 +121,7 @@
 
     .tx-list-fiat-value {
       font-size: 12px;
-      line-height: 16px;
+      line-height: 22px;
     }
   }
 }
@@ -259,6 +251,8 @@
 }
 
 .tx-list-fiat-value {
+  font-size: 12px;
+  line-height: initial;
   text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
-- 
cgit