From ffda954add95fc17049cd0f5386952dabfc4168b Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 30 Apr 2018 18:28:34 -0700
Subject: Fix styling of the app spinner

---
 ui/app/css/itcss/components/loading-overlay.scss | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
index a92fffec5..c18b7fa59 100644
--- a/ui/app/css/itcss/components/loading-overlay.scss
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -26,4 +26,25 @@
     width: 100vw;
     margin-top: 0;
   }
+
+  &__container {
+    position: absolute;
+    top: 33%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__message {
+    margin-top: 32px;
+    font-weight: 400;
+    font-size: 20px;
+    color: $manatee;
+  }
+}
+
+.spinner {
+  height: 58px;
+  width: 58px;
 }
-- 
cgit 


From d5759cf4a8041d1a7cfd55a7d55d8b7ecb29caca Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 3 May 2018 10:51:15 -0700
Subject: Add storybook integration

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

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 04e1ed96e..86daf60d8 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -18,6 +18,7 @@
   padding: 0 20px;
   min-width: 140px;
   text-transform: uppercase;
+  outline: none;
 }
 
 .btn-primary,
-- 
cgit 


From fff7f52074299482c616dfa58d00d4b4e9b8898f Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sat, 5 May 2018 15:12:41 -0700
Subject: Change font weight from 300 to 400

---
 ui/app/css/itcss/components/account-dropdown.scss  | 3 +--
 ui/app/css/itcss/components/account-menu.scss      | 3 ---
 ui/app/css/itcss/components/add-token.scss         | 1 -
 ui/app/css/itcss/components/confirm.scss           | 4 ----
 ui/app/css/itcss/components/currency-display.scss  | 1 -
 ui/app/css/itcss/components/menu.scss              | 1 -
 ui/app/css/itcss/components/modal.scss             | 2 --
 ui/app/css/itcss/components/newui-sections.scss    | 2 --
 ui/app/css/itcss/components/request-signature.scss | 2 --
 ui/app/css/itcss/components/send.scss              | 3 ---
 10 files changed, 1 insertion(+), 21 deletions(-)

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
index 725da9d39..b29afdc8c 100644
--- a/ui/app/css/itcss/components/account-dropdown.scss
+++ b/ui/app/css/itcss/components/account-dropdown.scss
@@ -33,7 +33,7 @@
     margin-top: 4px;
     position: relative;
   }
-  
+
   &__account-name {
     font-size: 16px;
     margin-left: 8px;
@@ -50,7 +50,6 @@
     font-family: Roboto;
     line-height: 16px;
     font-size: 12px;
-    font-weight: 300;
   }
 
   &__account-primary-balance {
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index c4037d862..824b2ddb6 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -40,7 +40,6 @@
     font-size: 12px;
     line-height: 23px;
     padding: 0 24px;
-    font-weight: 300;
   }
 
   &__item-icon {
@@ -113,7 +112,6 @@
   &__name {
     color: $white;
     font-size: 18px;
-    font-weight: 300;
   }
 
   &__balance {
@@ -124,7 +122,6 @@
   &__action {
     font-size: 16px;
     line-height: 18px;
-    font-weight: 300;
     cursor: pointer;
   }
 }
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
index 01579c27c..a3ea0d85b 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -377,7 +377,6 @@
       &__amount {
         color: $scorpion;
         font-size: 43px;
-        font-weight: 300;
         line-height: 43px;
         margin-right: 8px;
       }
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 47762e8de..44cfcf870 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -175,7 +175,6 @@
   margin-top: 12px;
   text-align: center;
   font-size: 40px;
-  font-weight: 300;
   line-height: 53px;
   flex: 0 0 auto;
 }
@@ -235,7 +234,6 @@ section .confirm-screen-account-number,
   padding-left: 35px;
   font-size: 16px;
   line-height: 22px;
-  font-weight: 300;
 
   &:not(:last-of-type) {
     border-bottom: 1px solid $alto;
@@ -336,7 +334,6 @@ section .confirm-screen-account-number,
   border-width: 0;
   box-shadow: none;
   flex: 1 0 auto;
-  font-weight: 300;
   margin: 0 5px;
 }
 
@@ -353,6 +350,5 @@ section .confirm-screen-account-number,
   box-shadow: none;
   cursor: pointer;
   flex: 1 0 auto;
-  font-weight: 300;
   margin: 0 5px;
 }
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index e043c1966..36d843c79 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -7,7 +7,6 @@
   color: $scorpion;
   font-family: Roboto;
   font-size: 16px;
-  font-weight: 300;
   padding: 8px 10px;
   position: relative;
 
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index eb92a1b70..6409ad545 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -11,7 +11,6 @@
     flex-flow: row nowrap;
     align-items: center;
     position: relative;
-    font-weight: 300;
     z-index: 201;
 
     @media screen and (max-width: 575px) {
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 9ae3ea7fa..f972c0f7a 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -368,7 +368,6 @@
   resize: none;
   padding: 9px 13px 8px;
   text-transform: uppercase;
-  font-weight: 300;
 }
 
 
@@ -796,7 +795,6 @@
   .simple-dropdown {
     color: #5B5D67;
     font-size: 16px;
-    font-weight: 300;
     line-height: 21px;
     border: 1px solid #D8D8D8;
     background-color: #FFFFFF;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 777a82318..2903e07b4 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -117,7 +117,6 @@ $wallet-view-bg: $alabaster;
     font-size: 14px;
     line-height: 12px;
     padding: 4px 12px;
-    font-weight: 300;
     cursor: pointer;
     flex: 0 0 auto;
 
@@ -264,7 +263,6 @@ $wallet-view-bg: $alabaster;
 // wallet view
 .account-name {
   font-size: 24px;
-  font-weight: 300;
   color: $black;
   margin-top: 8px;
   margin-bottom: .9rem;
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index 083481b8f..8bba6c98e 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -48,7 +48,6 @@
     color: #5B5D67;
     font-family: Roboto;
     font-size: 22px;
-    font-weight: 300;
     line-height: 29px;
     z-index: 3;
   }
@@ -125,7 +124,6 @@
     color: $tundora;
     font-family: Roboto;
     font-size: 18px;
-    font-weight: 300;
     line-height: 24px;
     text-align: center;
     margin-top: 20px;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 362feeec8..c168242cf 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -507,7 +507,6 @@
   &__copy {
     color: $gray;
     font-size: 14px;
-    font-weight: 300;
     line-height: 19px;
     text-align: center;
     margin-top: 10px;
@@ -641,7 +640,6 @@
       font-family: Roboto;
       font-size: 16px;
       line-height: 21px;
-      font-weight: 300;
     }
   }
 
@@ -832,7 +830,6 @@
       color: $tundora;
       font-family: Roboto;
       font-size: 20px;
-      font-weight: 300;
       line-height: 26px;
       margin-top: 17px;
     }
-- 
cgit 


From 2381c0e0f461304265279155176fa655e2eb97b4 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 10 May 2018 16:51:26 -0700
Subject: Add new unlock screen design

---
 ui/app/css/itcss/components/header.scss       | 118 +++++++++++++-------------
 ui/app/css/itcss/components/pages/index.scss  |   4 +-
 ui/app/css/itcss/components/pages/unlock.scss |   9 --
 ui/app/css/itcss/components/sections.scss     |  41 ---------
 ui/app/css/itcss/components/settings.scss     |   4 +-
 5 files changed, 61 insertions(+), 115 deletions(-)
 delete mode 100644 ui/app/css/itcss/components/pages/unlock.scss

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index eeed9ee06..cef61d0e2 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -1,15 +1,15 @@
 .app-header {
   align-items: center;
-  visibility: visible;
   background: $gallery;
   position: relative;
   z-index: $header-z-index;
   display: flex;
   flex-flow: column nowrap;
+  width: 100%;
+  flex: 0 0 auto;
 
   @media screen and (max-width: 575px) {
     padding: 12px;
-    width: 100%;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
     z-index: $mobile-header-z-index;
   }
@@ -17,48 +17,75 @@
   @media screen and (min-width: 576px) {
     height: 75px;
     justify-content: center;
+
+    &--back-drop {
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 32px;
+        background: $gallery;
+        bottom: -32px;
+      }
+    }
   }
 
-  .metafox-icon {
+  &__metafox {
     cursor: pointer;
   }
-}
-
-.app-header--initialized {
 
-  @media screen and (min-width: 576px) {
-    &::after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 32px;
-      background: $gallery;
-      bottom: -32px;
+  &__beta-label {
+    font-family: Roboto;
+    text-transform: uppercase;
+    font-weight: 500;
+    font-size: .8rem;
+    color: $buttercup;
+    margin-left: 5px;
+    line-height: initial;
+
+    @media screen and (max-width: 575px) {
+      display: none;
     }
   }
-}
 
-.app-header-contents {
-  display: flex;
-  justify-content: space-between;
-  flex-flow: row nowrap;
-  width: 100%;
-  height: 6.9vh;
+  &__contents {
+    display: flex;
+    justify-content: space-between;
+    flex-flow: row nowrap;
+    width: 100%;
 
-  @media screen and (max-width: 575px) {
-    height: 100%;
-  }
+    @media screen and (max-width: 575px) {
+      height: 100%;
+    }
 
-  @media screen and (min-width: 576px) {
-    width: 85vw;
+    @media screen and (min-width: 576px) {
+      width: 85vw;
+    }
+
+    @media screen and (min-width: 769px) {
+      width: 80vw;
+    }
+
+    @media screen and (min-width: 1281px) {
+      width: 62vw;
+    }
   }
 
-  @media screen and (min-width: 769px) {
-    width: 80vw;
+  &__logo-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
   }
 
-  @media screen and (min-width: 1281px) {
-    width: 62vw;
+  &__account-menu-container {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+
+    .identicon {
+      cursor: pointer;
+    }
   }
 }
 
@@ -76,20 +103,6 @@
   }
 }
 
-.beta-label {
-  font-family: Roboto;
-  text-transform: uppercase;
-  font-weight: 500;
-  font-size: .8rem;
-  color: $buttercup;
-  margin-left: 5px;
-  line-height: initial;
-
-  @media screen and (max-width: 575px) {
-    display: none;
-  }
-}
-
 h2.page-subtitle {
   text-transform: uppercase;
   color: #aeaeae;
@@ -102,20 +115,3 @@ h2.page-subtitle {
   flex-direction: row;
   align-items: center;
 }
-
-.left-menu-wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-}
-
-.header__right-actions {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-
-  .identicon {
-    cursor: pointer;
-  }
-}
diff --git a/ui/app/css/itcss/components/pages/index.scss b/ui/app/css/itcss/components/pages/index.scss
index d0b59da53..195185fff 100644
--- a/ui/app/css/itcss/components/pages/index.scss
+++ b/ui/app/css/itcss/components/pages/index.scss
@@ -1,3 +1,3 @@
-@import './unlock.scss';
-
 @import './reveal-seed.scss';
+
+@import '../../../../components/pages/unlock-page/unlock-page.scss';
diff --git a/ui/app/css/itcss/components/pages/unlock.scss b/ui/app/css/itcss/components/pages/unlock.scss
deleted file mode 100644
index 5d438377b..000000000
--- a/ui/app/css/itcss/components/pages/unlock.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.unlock-page {
-  box-shadow: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: rgb(247, 247, 247);
-  width: 100%;
-}
diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss
index ace46bd8a..feec71c89 100644
--- a/ui/app/css/itcss/components/sections.scss
+++ b/ui/app/css/itcss/components/sections.scss
@@ -95,19 +95,6 @@ textarea.twelve-word-phrase {
   margin: -2px 8px 0px -8px;
 }
 
-.unlock-screen #metamask-mascot-container {
-  margin-top: 24px;
-}
-
-.unlock-screen h1 {
-  margin-top: -28px;
-  margin-bottom: 42px;
-}
-
-.unlock-screen input[type=password] {
-  width: 260px;
-}
-
 .sizing-input {
   font-size: 14px;
   height: 30px;
@@ -118,34 +105,6 @@ textarea.twelve-word-phrase {
   display: flex;
 }
 
-/* Webkit */
-
-.unlock-screen input::-webkit-input-placeholder {
-  text-align: center;
-  font-size: 1.2em;
-}
-
-/* Firefox 18- */
-
-.unlock-screen input:-moz-placeholder {
-  text-align: center;
-  font-size: 1.2em;
-}
-
-/* Firefox 19+ */
-
-.unlock-screen input::-moz-placeholder {
-  text-align: center;
-  font-size: 1.2em;
-}
-
-/* IE */
-
-.unlock-screen input:-ms-input-placeholder {
-  text-align: center;
-  font-size: 1.2em;
-}
-
 /* accounts */
 
 .accounts-section {
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
index dcc9b98d5..0dd61ac5e 100644
--- a/ui/app/css/itcss/components/settings.scss
+++ b/ui/app/css/itcss/components/settings.scss
@@ -3,8 +3,6 @@
   background: $white;
   display: flex;
   flex-flow: column nowrap;
-  height: auto;
-  overflow: auto;
 }
 
 .settings__header {
@@ -29,6 +27,8 @@
 
 .settings__content {
   padding: 0 25px;
+  height: auto;
+  overflow: auto;
 }
 
 .settings__content-row {
-- 
cgit 


From 0bcfbc15446b01b3b87233715cd3ead42d2730e4 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sat, 12 May 2018 20:53:40 -0700
Subject: Add error message when passwords don't match in first time flow.
 Change input field styling in first time flow

---
 ui/app/css/itcss/components/welcome-screen.scss | 97 +++++++++++++------------
 1 file changed, 49 insertions(+), 48 deletions(-)

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss
index bfd174ad9..af1d67398 100644
--- a/ui/app/css/itcss/components/welcome-screen.scss
+++ b/ui/app/css/itcss/components/welcome-screen.scss
@@ -1,59 +1,60 @@
 .welcome-screen {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  font-family: Roboto;
+  font-weight: 400;
+  width: 100%;
+  flex: 1 0 auto;
+  padding: 70px 0;
+  background: $white;
+
+  @media screen and (max-width: 575px) {
+    padding: 0;
+  }
+
+  &__info {
     display: flex;
     flex-flow: column;
-    justify-content: center;
-    align-items: center;
-    font-family: Roboto;
-    font-weight: 400;
     width: 100%;
-    flex: 1 0 auto;
-    padding: 70px 0;
-    background: $white;
-
-    @media screen and (max-width: 575px) {
-      padding: 0;
-    }
-
-    &__info {
-        display: flex;
-        flex-flow: column;
-        width: 100%;
-        height: 100%;
-        align-items: center;
-
-        &__header {
-            font-size: 1.65em;
-            margin-bottom: 14px;
-
-            @media screen and (max-width: 575px) {
-              font-size: 1.5em;
-            }
-        }
+    height: 100%;
+    align-items: center;
+    justify-content: center;
 
-        &__copy {
-            font-size: 1em;
-            width: 400px;
-            max-width: 90vw;
-            text-align: center;
+    &__header {
+      font-size: 1.65em;
+      margin-bottom: 14px;
 
-            @media screen and (max-width: 575px) {
-              font-size: 0.9em;
-            }
-        }
+      @media screen and (max-width: 575px) {
+        font-size: 1.5em;
+      }
     }
 
-    &__button {
-      height: 54px;
-      width: 198px;
-      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
-      color: #FFFFFF;
-      font-size: 20px;
-      font-weight: 500;
-      line-height: 26px;
+    &__copy {
+      font-size: 1em;
+      width: 400px;
+      max-width: 90vw;
       text-align: center;
-      text-transform: uppercase;
-      margin: 35px 0 14px;
-      transition: 200ms ease-in-out;
-      background-color: rgba(247, 134, 28, 0.9);
+
+      @media screen and (max-width: 575px) {
+        font-size: .9em;
+      }
     }
+  }
+
+  &__button {
+    height: 54px;
+    width: 198px;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
+    color: #fff;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 26px;
+    text-align: center;
+    text-transform: uppercase;
+    margin: 35px 0 14px;
+    transition: 200ms ease-in-out;
+    background-color: rgba(247, 134, 28, .9);
+  }
 }
-- 
cgit 


From 5561937773b4e59e3df9df385693680e17e6b8c0 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 14 May 2018 14:34:10 -0700
Subject: Fix account and network dropdowns in confirm screen

---
 ui/app/css/itcss/components/account-menu.scss | 4 ++++
 ui/app/css/itcss/components/header.scss       | 4 ----
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 824b2ddb6..657760ab5 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -23,6 +23,10 @@
   &__icon {
     margin-left: 20px;
     cursor: pointer;
+
+    &--disabled {
+      cursor: initial;
+    }
   }
 
   &__header {
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index cef61d0e2..3ccfd5c15 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -82,10 +82,6 @@
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-
-    .identicon {
-      cursor: pointer;
-    }
   }
 }
 
-- 
cgit 


From b0dcdc30faf0304047b78d0a22f6b77a3e6706ee Mon Sep 17 00:00:00 2001
From: Bruno <brunobar79@gmail.com>
Date: Wed, 16 May 2018 18:51:55 -0400
Subject: remove fix header height

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

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index f972c0f7a..74658f656 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -566,7 +566,6 @@
     padding: 30px;
     font-size: 22px;
     color: $nile-blue;
-    height: 79px;
   }
 
   &__message {
@@ -832,7 +831,6 @@
   padding: 30px;
   font-size: 22px;
   color: $nile-blue;
-  height: 79px;
 }
 
 .notification-modal-message {
-- 
cgit 


From 4f6b53c1aa383c05fa3c356adb332fcc6dbf45e9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sat, 19 May 2018 23:04:19 -0700
Subject: Update designs for Add Token screen

---
 ui/app/css/itcss/components/add-token.scss      | 461 ------------------------
 ui/app/css/itcss/components/buttons.scss        |   5 +-
 ui/app/css/itcss/components/index.scss          |   4 +-
 ui/app/css/itcss/components/newui-sections.scss |   2 +-
 ui/app/css/itcss/components/pages/index.scss    |   2 -
 5 files changed, 6 insertions(+), 468 deletions(-)
 delete mode 100644 ui/app/css/itcss/components/add-token.scss

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
deleted file mode 100644
index a3ea0d85b..000000000
--- a/ui/app/css/itcss/components/add-token.scss
+++ /dev/null
@@ -1,461 +0,0 @@
-.add-token {
-  width: 498px;
-  max-height: 805px;
-  display: flex;
-  flex-flow: column nowrap;
-  position: relative;
-  z-index: 12;
-  font-family: 'Roboto';
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
-
-  &__wrapper {
-    background-color: $white;
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: center;
-    flex: 0 0 auto;
-  }
-
-  &__header {
-    display: flex;
-    flex-flow: column nowrap;
-    padding: 20px 20px 0px;
-    border-bottom: 1px solid $geyser;
-    flex: 0 0 auto;
-
-    &__cancel {
-      color: $dodger-blue;
-      display: flex;
-      align-items: center;
-
-      span {
-        font-family: Roboto;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 21px;
-        margin-left: 8px;
-        cursor:pointer;
-      }
-    }
-
-    &__title {
-      color: $tundora;
-      font-size: 32px;
-      font-weight: 500;
-      margin-top: 4px;
-    }
-
-    &__subtitle {
-      font-weight: 400;
-      margin-top: 15px;
-      margin-bottom: 21px;
-    }
-
-    &__tabs {
-      display: flex;
-
-      &__tab {
-        height: 54px;
-        padding: 15px 10px;
-        color: $dusty-gray;
-        font-family: Roboto;
-        font-size: 18px;
-        font-weight: 400;
-        line-height: 24px;
-        text-align: center;
-      }
-
-      &__tab:first-of-type {
-        margin-right: 20px;
-      }
-
-      &__unselected:hover {
-        color: $black;
-        border-bottom: none;
-        cursor: pointer;
-      }
-
-      &__selected {
-        color: $curious-blue;
-        border-bottom: 3px solid $curious-blue;
-      }
-    }
-  }
-
-  &__info-box {
-    height: 96px;
-    margin: 20px 20px 0px;
-    border-radius: 4px;
-    background-color: $alabaster;
-    position: relative;
-    padding-left: 18px;
-    display: flex;
-    flex-flow: column;
-
-    &__close::after {
-      content: '\00D7';
-      font-size: 29px;
-      font-weight: 200;
-      color: $dusty-gray;
-      position: absolute;
-      right: 17px;
-      cursor: pointer;
-    }
-
-    &__title {
-      color: $mid-gray;
-      font-family: Roboto;
-      font-size: 14px;
-      font-weight: 400;
-      margin-top: 15px;
-      margin-bottom: 9px;
-    }
-
-    &__copy,
-    &__copy--blue {
-      color: $mid-gray;
-      font-family: Roboto;
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 18px;
-    }
-
-    &__copy--blue {
-      color: $curious-blue;
-    }
-  }
-
-  &__description {
-    text-align: center;
-  }
-
-  &__description + &__description {
-    margin-top: 24px;
-  }
-
-  &__confirmation-description {
-    font-weight: 400;
-    margin: 20px 0 40px 0;
-  }
-
-  &__content-container {
-    width: 100%;
-  }
-
-  &__input-container {
-    display: flex;
-    position: relative;
-  }
-
-  &__search-input-error-message {
-    position: absolute;
-    bottom: -10px;
-    left: 22px;
-    font-size: 12px;
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    color: $red;
-  }
-
-  &__input,
-  &__add-custom-input {
-    height: 54px;
-    padding: 0px 20px;
-    border: 1px solid $geyser;
-    border-radius: 4px;
-    margin: 22px 24px;
-    position: relative;
-    flex: 1 0 auto;
-    color: $scorpion;
-    font-family: Roboto;
-    font-size: 16px;
-
-    &::placeholder {
-      color: $scorpion;
-      font-family: Roboto;
-      font-size: 16px;
-      line-height: 21px;
-    }
-  }
-
-  &__footers {
-    width: 100%;
-  }
-
-  &__add-custom {
-    color: $scorpion;
-    font-size: 18px;
-    line-height: 24px;
-    text-align: center;
-    padding: 12px 0;
-    font-weight: 600;
-    cursor: pointer;
-    position: relative;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, .05);
-    }
-
-    &:active {
-      background-color: rgba(0, 0, 0, .1);
-    }
-
-    .fa {
-      position: absolute;
-      right: 24px;
-      font-size: 24px;
-      line-height: 24px;
-    }
-  }
-
-  &__add-custom-form {
-    display: flex;
-    flex-flow: column nowrap;
-    margin: 40px 0 30px;
-  }
-
-  &__add-custom-field {
-    position: relative;
-    display: flex;
-    flex-flow: column;
-    flex: 1 0 auto;
-
-    &--error {
-      .add-token__add-custom-input {
-        border-color: $red;
-      }
-    }
-  }
-
-  &__add-custom-error-message {
-    position: absolute;
-    bottom: 1px;
-    left: 22px;
-    font-size: 12px;
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    color: $red;
-  }
-
-  &__add-custom-label {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 21px;
-    margin-left: 22px;
-    color: $scorpion;
-  }
-
-  &__add-custom-input {
-    margin-top: 6px;
-    font-size: 16px;
-
-    &::placeholder {
-      color: $silver;
-      font-size: 16px;
-    }
-  }
-
-  &__add-custom-field + &__add-custom-field {
-    margin-top: 6px;
-  }
-
-  &__buttons {
-    display: flex;
-    flex-flow: row nowrap;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    padding-bottom: 30px;
-    padding-top: 20px;
-  }
-
-  &__confirm-button,
-  &__cancel-button {
-    margin: 0 12px;
-    padding: 10px 13px;
-    height: 54px;
-    width: 133px;
-    margin-right: 1.2rem;
-  }
-
-  &__token-icons-title {
-    color: #5B5D67;
-    font-family: Roboto;
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 24px;
-    margin-left: 24px;
-    margin-top: 8px;
-    margin-bottom: 20px;
-  }
-
-  &__token-icons-container {
-    display: flex;
-    flex-flow: row wrap;
-  }
-
-  &__token-wrapper {
-    transition: 200ms ease-in-out;
-    display: flex;
-    flex-flow: row nowrap;
-    flex: 0 0 42.5%;
-    align-items: center;
-    padding: 12px;
-    margin: 0% 2.5% 1.5%;
-    box-sizing: border-box;
-    border-radius: 10px;
-    cursor: pointer;
-    border: 2px solid transparent;
-    position: relative;
-
-    &:hover {
-      border: 2px solid rgba($malibu-blue, .5);
-    }
-
-    &--selected {
-      border: 2px solid $malibu-blue !important;
-    }
-
-    &--disabled {
-      opacity: .4;
-      pointer-events: none;
-    }
-  }
-
-  &__token-data {
-    align-self: flex-start;
-  }
-
-  &__token-name {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 19px;
-  }
-
-  &__token-symbol {
-    font-size: 22px;
-    line-height: 29px;
-    font-weight: 600;
-  }
-
-  &__token-icon {
-    width: 60px;
-    height: 60px;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-    border-radius: 50%;
-    background-color: $white;
-    box-shadow: 0 2px 4px 0 rgba($black, .24);
-    margin-right: 12px;
-    flex: 0 0 auto;
-  }
-
-  &__token-message {
-    position: absolute;
-    color: $caribbean-green;
-    font-size: 11px;
-    bottom: 0;
-    left: 85px;
-  }
-
-  &__confirmation-token-list {
-    display: flex;
-    flex-flow: column nowrap;
-
-    .token-balance {
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: flex-start;
-
-      &__amount {
-        color: $scorpion;
-        font-size: 43px;
-        line-height: 43px;
-        margin-right: 8px;
-      }
-
-      &__symbol {
-        color: $scorpion;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 24px;
-      }
-    }
-  }
-
-  &__confirmation-title {
-    padding: 30px 120px 12px;
-
-    @media screen and (max-width: $break-small) {
-      padding: 20px 0;
-      width: 100%;
-    }
-  }
-
-  &__confirmation-content {
-    padding-bottom: 60px;
-  }
-
-  &__confirmation-token-list-item {
-    display: flex;
-    flex-flow: row nowrap;
-    margin: 0 auto;
-    align-items: center;
-  }
-
-  &__confirmation-token-list-item + &__confirmation-token-list-item {
-    margin-top: 30px;
-  }
-
-  &__confirmation-token-icon {
-    margin-right: 18px;
-  }
-
-  @media screen and (max-width: $break-small) {
-    top: 0;
-    width: 100%;
-    overflow: hidden;
-    flex: 1 0 auto;
-
-    &__wrapper {
-      box-shadow: none !important;
-      flex: 1 1 auto;
-      width: 100%;
-      overflow-y: scroll;
-      height: 400px;
-    }
-
-    &__footers {
-      border-bottom: 1px solid $gallery;
-    }
-
-    &__token-icon {
-      width: 50px;
-      height: 50px;
-    }
-
-    &__token-symbol {
-      font-size: 18px;
-      line-height: 24px;
-    }
-
-    &__token-name {
-      font-size: 12px;
-      line-height: 16px;
-    }
-
-    &__buttons {
-      padding: 1rem;
-      margin: 0;
-      border-top: 1px solid $gallery;
-      width: 100%;
-    }
-  }
-}
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 86daf60d8..4cbed6093 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -15,8 +15,9 @@
   font-size: 14px;
   font-weight: 500;
   transition: border-color .3s ease;
-  padding: 0 20px;
+  padding: 0 16px;
   min-width: 140px;
+  width: 100%;
   text-transform: uppercase;
   outline: none;
 }
@@ -110,6 +111,7 @@
   font-size: .85rem;
   font-weight: 400;
   transition: border-color .3s ease;
+  width: 100%;
 
   &:hover {
     border-color: $scorpion;
@@ -126,6 +128,7 @@
   font-size: .85rem;
   font-weight: 400;
   transition: border-color .3s ease;
+  width: 100%;
 }
 
 // No longer used in flat design, remove when modal buttons done
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 1c544e162..1d87b8004 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -30,8 +30,6 @@
 
 @import './token-list.scss';
 
-@import './add-token.scss';
-
 @import './currency-display.scss';
 
 @import './account-menu.scss';
@@ -62,4 +60,4 @@
 
 @import './sender-to-recipient.scss';
 
-@import '../../../components/export-text-container/export-text-container.scss';
+@import '../../../components/index';
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 2903e07b4..bbe0ee661 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -144,8 +144,8 @@ $wallet-view-bg: $alabaster;
     flex: 0 0 auto;
     margin: 36px auto;
     background: none;
-    padding: .7rem 2rem;
     transition: border-color .3s ease;
+    width: 150px;
 
     &:hover {
       border-color: $curious-blue;
diff --git a/ui/app/css/itcss/components/pages/index.scss b/ui/app/css/itcss/components/pages/index.scss
index 195185fff..709f8baf6 100644
--- a/ui/app/css/itcss/components/pages/index.scss
+++ b/ui/app/css/itcss/components/pages/index.scss
@@ -1,3 +1 @@
 @import './reveal-seed.scss';
-
-@import '../../../../components/pages/unlock-page/unlock-page.scss';
-- 
cgit 


From 646545551c81ed1b8cc795aee7bf7e4b4bd8b159 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sun, 20 May 2018 13:01:31 -0700
Subject: Fix signature request header text

---
 ui/app/css/itcss/components/request-signature.scss | 2 --
 1 file changed, 2 deletions(-)

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index 8bba6c98e..e6916c418 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -43,8 +43,6 @@
   }
 
   &__header__text {
-    height: 29px;
-    width: 179px;
     color: #5B5D67;
     font-family: Roboto;
     font-size: 22px;
-- 
cgit 


From 389346913bf076fde6190a61afc4e3e4cd210afc Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Wed, 30 May 2018 10:38:53 -0700
Subject: Prevent loading screen from overlaying the app bar (#4417)

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

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
index c18b7fa59..b07d6af17 100644
--- a/ui/app/css/itcss/components/loading-overlay.scss
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -11,8 +11,8 @@
   background: rgba(255, 255, 255, .8);
 
   @media screen and (max-width: 575px) {
-    margin-top: 56px;
-    height: calc(100% - 56px);
+    margin-top: 66px;
+    height: calc(100% - 66px);
   }
 
   @media screen and (min-width: 576px) {
-- 
cgit