Refine style

21 files changed, 166 insertions, 532 deletions

diff --git a/ui/app/components/app-header/index.scss b/ui/app/components/app-header/index.scss
index e87fa188..5e39e13e 100644
--- a/ui/app/components/app-header/index.scss
+++ b/ui/app/components/app-header/index.scss
@@ -21,7 +21,7 @@
         position: absolute;
         width: 100%;
         height: 32px;
-        background: $gallery;
+        background: $black;
         bottom: -32px;
       }
     }
diff --git a/ui/app/components/modal/index.scss b/ui/app/components/modal/index.scss
index 2beb1463..9d9a127d 100644
--- a/ui/app/components/modal/index.scss
+++ b/ui/app/components/modal/index.scss
@@ -1,5 +1,4 @@
 @import './modal-content/index';
-
 .modal-container {
   width: 100%;
   height: 100%;
@@ -7,31 +6,26 @@
   display: flex;
   flex-flow: column;
   border-radius: 8px;
-
   @media screen and (max-width: 575px) {
     max-height: 450px;
   }
-
   &__content {
     overflow-y: auto;
     flex: 1;
     padding: 16px 32px;
-
     @media screen and (max-width: 575px) {
       justify-content: center;
       padding: 28px 20px;
     }
   }
-
   &__header {
     position: relative;
     display: flex;
     padding: 12px;
     justify-content: center;
-    border-bottom: 1px solid #d2d8dd;
+    border-bottom: 1px solid $geyser;
     flex: 0 0 auto;
   }
-
   &__header-close::after {
     content: '\00D7';
     font-size: 40px;
@@ -41,22 +35,19 @@
     right: 10px;
     cursor: pointer;
   }
-
   &__footer {
     display: flex;
     flex-flow: row;
     justify-content: center;
-    border-top: 1px solid #d2d8dd;
+    border-top: 1px solid $geyser;
     padding: 16px;
     flex: 0 0 auto;
-
     &-button {
       min-width: 0;
       margin-right: 16px;
-
       &:last-of-type {
         margin-right: 0;
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 6fc97820..c929f61f 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -1,6 +1,6 @@
 .page-container {
   width: 408px;
-  background-color: $white;
+  background-color: $dark-gray;
   box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   z-index: 25;
   display: flex;
@@ -15,12 +15,10 @@
     padding: 16px;
     flex: 0 0 auto;
     position: relative;
-
     &--no-padding-bottom {
       padding-bottom: 0;
     }
   }
-
   &__header-close {
     color: $tundora;
     position: absolute;
@@ -28,32 +26,27 @@
     right: 16px;
     cursor: pointer;
     overflow: hidden;
-
     &::after {
       content: '\00D7';
       font-size: 40px;
       line-height: 20px;
     }
   }
-
   &__header-row {
     padding-bottom: 10px;
     display: flex;
     justify-content: space-between;
   }
-
   &__footer {
     display: flex;
     flex-flow: column;
     justify-content: center;
     border-top: 1px solid $geyser;
     flex: 0 0 auto;
-
     .btn-default,
     .btn-confirm {
       font-size: 1rem;
     }
-
     header {
       display: flex;
       flex-flow: row;
@@ -61,15 +54,14 @@
       padding: 16px;
       flex: 0 0 auto;
     }
-
     footer {
       display: flex;
       flex-flow: row;
       justify-content: space-around;
       padding: 0 16px 16px;
       flex: 0 0 auto;
-
-      a, a:hover {
+      a,
+      a:hover {
         text-decoration: none;
         cursor: pointer;
         font-size: 0.75rem;
@@ -78,25 +70,21 @@
       }
     }
   }
-
   &__footer-button {
     height: 55px;
     font-size: 1rem;
     text-transform: uppercase;
     margin-right: 16px;
-
     &:last-of-type {
       margin-right: 0;
     }
   }
-
   &__back-button {
     color: #2f9ae0;
     font-size: 1rem;
     cursor: pointer;
     font-weight: 400;
   }
-
   &__title {
     color: $black;
     font-size: 2rem;
@@ -104,19 +92,16 @@
     line-height: 2rem;
     margin-right: 1.5rem;
   }
-
   &__subtitle {
     padding-top: .5rem;
     line-height: initial;
     font-size: .9rem;
     color: $gray;
   }
-
   &__tabs {
     display: flex;
     margin-top: 16px;
   }
-
   &__tab {
     min-width: 5rem;
     padding: 8px;
@@ -127,47 +112,38 @@
     cursor: pointer;
     border-bottom: none;
     margin-right: 16px;
-
     &:last-of-type {
       margin-right: 0;
     }
-
     &--selected {
       color: $curious-blue;
       border-bottom: 2px solid $curious-blue;
     }
   }
-
   &--full-width {
     width: 100% !important;
   }
-
   &--full-height {
     height: 100% !important;
     max-height: initial !important;
     min-height: initial !important;
   }
-
   &__content {
     overflow-y: auto;
     flex: 1;
   }
-
   &__warning-container {
     background: $linen;
     padding: 20px;
     display: flex;
     align-items: start;
   }
-
   &__warning-message {
     padding-left: 15px;
   }
-
   &__warning-title {
     font-weight: 500;
   }
-
   &__warning-icon {
     padding-top: 5px;
   }
@@ -178,12 +154,10 @@
     &__footer {
       flex-flow: column-reverse;
     }
-
     &__footer-button {
       width: 100%;
       margin-bottom: 1rem;
       margin-right: 0;
-
       &:first-of-type {
         margin-bottom: 0;
       }
@@ -195,7 +169,7 @@
   .page-container {
     height: 100%;
     width: 100%;
-    background-color: $white;
+    background-color: $dark-gray;
     border-radius: 0;
     flex: 1;
     overflow-y: auto;
@@ -210,4 +184,4 @@
     margin-right: auto;
     margin-left: auto;
   }
-}
+}
\ No newline at end of file
diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/components/pages/unlock-page/index.scss
index 654c8a4a..ebc58a0a 100644
--- a/ui/app/components/pages/unlock-page/index.scss
+++ b/ui/app/components/pages/unlock-page/index.scss
@@ -13,7 +13,7 @@
     align-self: stretch;
     justify-content: center;
     flex: 1 0 auto;
-    height: 100vh;
+    height: calc(100vh - 75px);
   }
   &__mascot-container {
     margin-top: 24px;
diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js
index 9a0a4cb8..90c72098 100644
--- a/ui/app/components/pages/unlock-page/unlock-page.component.js
+++ b/ui/app/components/pages/unlock-page/unlock-page.component.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import Button from '@material-ui/core/Button'
+import Button from '../../button'
 import TextField from '../../text-field'
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
@@ -81,26 +81,13 @@ export default class UnlockPage extends Component {
   }
 
   renderSubmitButton () {
-    const style = {
-      backgroundColor: '#954a97',
-      color: 'white',
-      marginTop: '20px',
-      height: '60px',
-      fontWeight: '400',
-      boxShadow: 'none',
-      borderRadius: '4px',
-    }
-
     return (
       <Button
-        type="submit"
-        style={style}
+        type="primary"
+        large
         disabled={!this.state.password}
         fullWidth
-        variant="raised"
-        size="large"
         onClick={event => this.handleSubmit(event)}
-        disableRipple
       >
         { this.context.t('login') }
       </Button>
diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js
index 4326c78a..97086565 100644
--- a/ui/app/components/text-field/text-field.component.js
+++ b/ui/app/components/text-field/text-field.component.js
@@ -59,7 +59,7 @@ const styles = {
     display: 'flex',
     alignItems: 'center',
     '&$inputFocused': {
-      border: '1px solid #d2d8dd',
+      border: '1px solid #4a4a4a',
     },
   },
   input: {
diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss
index ba7ffd87..ab36b5b8 100644
--- a/ui/app/components/transaction-list/index.scss
+++ b/ui/app/components/transaction-list/index.scss
@@ -1,46 +1,50 @@
 .transaction-list {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  margin-top: 8px;
-
-  &__completed-transactions {
     display: flex;
     flex-direction: column;
     flex: 1;
-  }
+    overflow-y: hidden;
+    margin-top: 8px;
+    border-top: 1px solid $geyser;
+
+    &__completed-transactions {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+    }
 
-  &__header {
-    flex: 0 0 auto;
-    font-size: .875rem;
-    color: $dusty-gray;
-    border-bottom: 1px solid $geyser;
-    padding: 8px 0 8px 20px;
+    &__header {
+        flex: 0 0 auto;
+        font-size: .875rem;
+        text-align: center;
+        color: $white;
+        border-bottom: 1px solid $geyser;
+        padding: 8px 0 8px 20px;
 
-    @media screen and (max-width: $break-small) {
-      padding: 8px 0 8px 16px;
+        @media screen and (max-width: $break-small) {
+            padding: 8px 0 8px 16px;
+        }
     }
-  }
 
-  &__transactions {
-    flex: 1;
-  }
+    &__transactions {
+        flex: 1;
+        overflow-y: auto;
+    }
 
-  &__pending-transactions {
-    margin-bottom: 16px;
-  }
+    &__pending-transactions {
+        margin-bottom: 16px;
+    }
 
-  &__empty {
-    flex: 1;
-    display: grid;
-    grid-template-rows: 35% 1fr;
-    padding-top: 8px;
-  }
+    &__empty {
+        flex: 1;
+        display: grid;
+        grid-template-rows: 35% 1fr;
+        padding-top: 8px;
+    }
 
-  &__empty-text {
-    grid-row-start: 2;
-    display: flex;
-    justify-content: center;
-    color: $silver;
-  }
+    &__empty-text {
+        grid-row-start: 2;
+        display: flex;
+        justify-content: center;
+        color: $geyser;
+    }
 }
diff --git a/ui/app/components/transaction-view/index.scss b/ui/app/components/transaction-view/index.scss
index 13187f0e..80b2e206 100644
--- a/ui/app/components/transaction-view/index.scss
+++ b/ui/app/components/transaction-view/index.scss
@@ -1,11 +1,9 @@
 .transaction-view {
   flex: 1 1 66.5%;
-  background: $white;
+  background: $dark-gray;
   min-width: 0;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
-
   &__balance-wrapper {
     @media screen and (max-width: $break-small) {
       display: flex;
@@ -15,7 +13,6 @@
       flex: 0 0 auto;
       padding-top: 16px;
     }
-
     @media screen and (min-width: $break-large) {
       display: flex;
       flex-direction: row;
@@ -25,4 +22,4 @@
       flex: 0 0 auto;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 23ba1bb5..4ae95151 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -31,10 +31,10 @@
   color: $white;
   background: $dexon-purple;
   border: 2px solid $dexon-purple;
-  &:active {
-    border-color: $white;
-  }
   &:hover {
+    border-color: $white-transparent;
+  }
+  &:active {
     border-color: $white;
   }
 }
@@ -55,10 +55,10 @@
   color: $white;
   border: 2px solid $dusty-gray;
   background: $dusty-gray;
-  &:active {
-    border-color: $white;
-  }
   &:hover {
+    border-color: $white-transparent;
+  }
+  &:active {
     border-color: $white;
   }
 }
@@ -92,14 +92,14 @@
   background: $white;
   text-align: center;
   padding: .8rem 1rem;
-  color: $curious-blue;
-  border: 2px solid $spindle;
+  color: $white;
+  border: 2px solid $dexon-purple;
   border-radius: 4px;
   font-size: .85rem;
   font-weight: 400;
   transition: border-color .3s ease;
   &:hover {
-    border-color: $curious-blue;
+    border-color: $white;
   }
   &--disabled,
   &[disabled] {
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 44cfcf87..db59339a 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -7,12 +7,10 @@
   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) {
     // top: -26px;
   }
@@ -20,7 +18,6 @@
 
 .notification {
   .confirm-screen-wrapper {
-
     @media screen and (max-width: $break-small) {
       height: calc(100vh - 85px);
     }
@@ -30,7 +27,7 @@
 .confirm-screen-wrapper {
   height: 100%;
   width: 380px;
-  background-color: $white;
+  background-color: $dark-gray;
   display: flex;
   flex-flow: column nowrap;
   z-index: 25;
@@ -41,7 +38,6 @@
   overflow-x: hidden;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-
   @media screen and (max-width: $break-small) {
     width: 100%;
     overflow-x: hidden;
@@ -54,12 +50,12 @@
   }
 }
 
-.confirm-screen-wrapper > .confirm-screen-total-box {
+.confirm-screen-wrapper>.confirm-screen-total-box {
   margin-left: 10px;
   margin-right: 10px;
 }
 
-.confirm-screen-wrapper > .confirm-memo-wrapper {
+.confirm-screen-wrapper>.confirm-memo-wrapper {
   margin: 0;
 }
 
@@ -75,7 +71,6 @@
   width: 100%;
   padding: 25px 0;
   flex: 0 0 auto;
-
   @media screen and (max-width: $break-small) {
     font-size: 20px;
   }
@@ -95,7 +90,6 @@
 
 .confirm-screen-title {
   line-height: 27px;
-
   @media screen and (max-width: $break-small) {
     margin-left: 22px;
     margin-right: 8px;
@@ -150,12 +144,10 @@
 .confirm-screen-identicons {
   margin-top: 24px;
   flex: 0 0 auto;
-
   i.fa-arrow-right {
     align-self: start;
     margin: 42px 14px 0;
   }
-
   i.fa-file-text-o {
     font-size: 60px;
     margin: 16px 8px 0 8px;
@@ -234,7 +226,6 @@ section .confirm-screen-account-number,
   padding-left: 35px;
   font-size: 16px;
   line-height: 22px;
-
   &:not(:last-of-type) {
     border-bottom: 1px solid $alto;
   }
@@ -245,11 +236,9 @@ section .confirm-screen-account-number,
     span.confirm-screen-section-column {
       flex: 0.4;
     }
-
     div.confirm-screen-section-column {
       flex: 0.6;
     }
-
     .currency-display__input {
       font-size: 14px;
     }
@@ -265,20 +254,16 @@ section .confirm-screen-account-number,
 .confirm-screen-total-box {
   background-color: $wild-sand;
   position: relative;
-
   .confirm-screen-label {
     line-height: 21px;
   }
-
   .confirm-screen-row-detail {
     color: $scorpion;
   }
-
   &__subtitle {
     font-size: 12px;
     line-height: 16px;
   }
-
   .confirm-screen-row-info {
     font-size: 16px;
     font-weight: 500;
@@ -312,7 +297,6 @@ section .confirm-screen-account-number,
 
 .confirm-screen-form {
   position: relative;
-
   .confirm-screen-error {
     right: 0;
     width: 100%;
@@ -351,4 +335,4 @@ section .confirm-screen-account-number,
   cursor: pointer;
   flex: 1 0 auto;
   margin: 0 5px;
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index b1a74dce..8442799c 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -2,17 +2,15 @@
   height: 54px;
   border: 1px solid $alto;
   border-radius: 4px;
-  background-color: $white;
+  background-color: $dark-gray;
   color: $scorpion;
   font-family: Roboto;
   font-size: 16px;
   padding: 8px 10px;
   position: relative;
-
   &__primary-row {
     display: flex;
   }
-
   &__input {
     color: $scorpion;
     font-family: Roboto;
@@ -22,7 +20,6 @@
     outline: 0 !important;
     max-width: 22ch;
   }
-
   &__primary-currency {
     color: $scorpion;
     font-weight: 400;
@@ -30,11 +27,9 @@
     font-size: 16px;
     line-height: 22px;
   }
-
   &__converted-row {
     display: flex;
   }
-
   &__converted-value,
   &__converted-currency {
     color: $dusty-gray;
@@ -42,46 +37,39 @@
     font-size: 12px;
     line-height: 12px;
   }
-
   &__input-wrapper {
     position: relative;
     display: flex;
     flex: 1;
     max-width: 100%;
-
     input[type="number"] {
       -moz-appearance: textfield;
     }
-
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
       -moz-appearance: none;
       display: none;
     }
-
     input[type="number"]:hover::-webkit-inner-spin-button {
       -webkit-appearance: none;
       -moz-appearance: none;
       display: none;
     }
   }
-
   &__currency-symbol {
     margin-top: 1px;
     color: $scorpion;
   }
-
   .react-numeric-input {
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
       -moz-appearance: none;
       display: none;
     }
-
     input[type="number"]:hover::-webkit-inner-spin-button {
       -webkit-appearance: none;
       -moz-appearance: none;
       display: none;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 42ef7ae0..3e016a5b 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -1,4 +1,4 @@
-.modal > div:focus {
+.modal>div:focus {
   outline: none !important;
 }
 
@@ -17,7 +17,8 @@
   color: #5B5D67;
 }
 
-.qr-ellip-address, .ellip-address {
+.qr-ellip-address,
+.ellip-address {
   width: 247px;
   border: none;
   font-family: Roboto;
@@ -30,23 +31,19 @@
     width: 100%;
     height: 100px;
   }
-
   .buy-modal-content-title {
     font-size: 26px;
     margin-top: 15px;
   }
-
   .buy-modal-content-options {
     flex-direction: column;
     padding: 5% 33%;
   }
-
   .buy-modal-content-footer {
     text-transform: uppercase;
     width: 100%;
     height: 50px;
   }
-
   div.buy-modal-content-option {
     display: flex;
     flex-direction: column;
@@ -58,11 +55,9 @@
     border: 1px solid $black;
     padding: 0% 7%;
     justify-content: center;
-
     div.buy-modal-content-option-title {
       font-size: 20px;
     }
-
     div.buy-modal-content-option-subtitle {
       font-size: 16px;
     }
@@ -75,23 +70,19 @@
     width: 100%;
     height: 110px;
   }
-
   .buy-modal-content-title {
     font-size: 26px;
     margin-top: 15px;
   }
-
   .buy-modal-content-footer {
     text-transform: uppercase;
     width: 100%;
     height: 50px;
   }
-
   .buy-modal-content-options {
     flex-direction: row;
     margin: 20px 0 60px;
   }
-
   div.buy-modal-content-option {
     display: flex;
     flex-direction: column;
@@ -102,44 +93,36 @@
     border: 1px solid $black;
     margin: 0 8px;
     padding: 18px 0;
-
     div.buy-modal-content-option-title {
       font-size: 20px;
       margin-bottom: 12px;
-
       @media screen and (max-width: 679px) {
         font-size: 14px;
       }
-
       @media screen and (min-width: 1281px) {
         font-size: 20px;
       }
     }
-
     div.buy-modal-content-option-subtitle {
       font-size: 16px;
       padding: 0 10px;
       height: 25%;
-
       @media screen and (max-width: 679px) {
         font-size: 10px;
         padding: 0 10px;
         margin-bottom: 5px;
         line-height: 15px;
       }
-
       @media screen and (min-width: 680px) {
         font-size: 14px;
         padding: 0 4px;
         margin-bottom: 2px;
       }
-
       @media screen and (min-width: 1281px) {
         font-size: 16px;
         padding: 0;
       }
     }
-
     div.buy-modal-content-footer {
       margin-top: 8vh;
     }
@@ -194,7 +177,6 @@
   border: 1px solid $silver;
   border-radius: 4px;
   font-family: Roboto;
-
   button {
     cursor: pointer;
   }
@@ -206,7 +188,6 @@
   top: 13px;
   left: 17px;
   cursor: pointer;
-
   &__text {
     margin-top: 2px;
     font-family: Roboto;
@@ -234,20 +215,15 @@
   margin-bottom: -32px;
 }
 
-
 // Account Details Modal
-
 .account-modal-container {
-
   .qr-header {
     margin-top: 9px;
     font-size: 20px;
   }
-
   .qr-wrapper {
     margin-top: 5px;
   }
-
   .ellip-address-wrapper {
     display: flex;
     justify-content: center;
@@ -257,7 +233,6 @@
     margin-top: 7px;
     width: 286px;
   }
-
   .account-modal__button {
     margin-top: 17px;
     padding: 10px 22px;
@@ -273,7 +248,6 @@
 }
 
 // Export Private Key Modal
-
 .account-modal-container .account-name {
   margin-top: 9px;
   font-size: 20px;
@@ -295,7 +269,8 @@
   flex-direction: column;
 }
 
-.private-key-password-label, .private-key-password-error {
+.private-key-password-label,
+.private-key-password-error {
   color: $scorpion;
   font-size: 14px;
   line-height: 18px;
@@ -370,7 +345,6 @@
   text-transform: uppercase;
 }
 
-
 // New Account Modal
 .new-account-modal-wrapper {
   display: flex;
@@ -481,24 +455,20 @@
 }
 
 // Hide token confirmation
-
 .hide-token-confirmation {
   min-height: 250.72px;
   border-radius: 4px;
-  background-color: $white;
+  background-color: $dark-gray;
   box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .5);
-
   &__container {
     padding: 24px 27px 21px;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
-
   &__identicon {
     margin-bottom: 10px;
   }
-
   &__symbol {
     color: $tundora;
     font-family: Roboto;
@@ -507,7 +477,6 @@
     text-align: center;
     margin-bottom: 7.5px;
   }
-
   &__title {
     height: 30px;
     width: 271.28px;
@@ -518,7 +487,6 @@
     text-align: center;
     margin-bottom: 10.5px;
   }
-
   &__copy {
     height: 41px;
     width: 318px;
@@ -528,7 +496,6 @@
     line-height: 18px;
     text-align: center;
   }
-
   &__buttons {
     display: flex;
     flex-direction: row;
@@ -536,7 +503,6 @@
     margin-top: 15px;
     width: 100%;
   }
-
   &__button {
     width: 141px;
     margin: 0 5px;
@@ -544,9 +510,7 @@
 }
 
 //Notification Modal
-
 .notification-modal {
-
   &__wrapper {
     display: flex;
     flex-direction: column;
@@ -557,7 +521,6 @@
     box-shadow: 0 0 2px 2px $alto;
     font-family: Roboto;
   }
-
   &__header {
     background: $wild-sand;
     width: 100%;
@@ -567,7 +530,6 @@
     font-size: 22px;
     color: $nile-blue;
   }
-
   &__message {
     padding: 20px;
     width: 100%;
@@ -576,19 +538,16 @@
     font-size: 17px;
     color: $nile-blue;
   }
-
   &__buttons {
     display: flex;
     justify-content: space-evenly;
     width: 100%;
     margin-bottom: 24px;
     padding: 0px 42px;
-
     &__btn {
       cursor: pointer;
     }
   }
-
   &__link {
     color: $curious-blue;
   }
@@ -601,7 +560,6 @@
   display: flex;
   flex-flow: column;
   height: 100%;
-
   &__header {
     width: 100%;
     border-radius: 8px 8px 0 0;
@@ -611,20 +569,17 @@
     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;
@@ -635,7 +590,6 @@
       cursor: pointer;
     }
   }
-
   &__buy-rows {
     width: 100%;
     padding: 0 30px;
@@ -643,24 +597,21 @@
     flex-flow: column nowrap;
     flex: 1;
     align-items: center;
-
     @media screen and (max-width: 575px) {
       height: 0;
     }
-
     .shapeshift-form-wrapper {
       display: flex;
       flex-flow: column;
       justify-content: center;
       align-items: center;
       flex: 1 0 auto;
-
-      .shapeshift-form, .modal-shapeshift-form {
+      .shapeshift-form,
+      .modal-shapeshift-form {
         border-radius: 8px;
         background-color: rgba(0, 0, 0, .05);
         padding: 17px 15px;
         margin-bottom: 10px;
-
         &__caret {
           width: auto;
           flex: 1;
@@ -668,7 +619,6 @@
       }
     }
   }
-
   &__logo {
     height: 60px;
     background-repeat: no-repeat;
@@ -679,7 +629,6 @@
     justify-content: center;
     align-items: center;
   }
-
   &__buy-row {
     border-bottom: 1px solid $alto;
     display: flex;
@@ -688,19 +637,16 @@
     flex: 1 0 auto;
     padding: 30px 0 20px;
     min-height: 170px;
-
     @media screen and (max-width: 575px) {
       min-height: 270px;
       flex-flow: column;
       justify-content: flex-start;
     }
-
     &__back {
       position: absolute;
       top: 10px;
       left: 0px;
     }
-
     &__shapeshift-buy {
       padding-top: 25px;
       position: relative;
@@ -717,75 +663,61 @@
         border: none;
       }
     }
-
     &__logo-container {
       display: flex;
       justify-content: center;
       flex: 0 0 auto;
       padding: 0 20px;
-
       @media screen and (min-width: 576px) {
         width: 12rem;
       }
-
       @media screen and (max-width: 575px) {
         width: 100%;
         max-height: 6rem;
         padding-bottom: 20px;
       }
     }
-
     &__coinbase-logo {
       height: 40px;
     }
-
     &__shapeshift-logo {
       height: 60px;
     }
-
     &__right {
       display: flex;
     }
-
     &__description {
       color: $cape-cod;
       padding-bottom: 20px;
       align-self: flex-start;
-
       @media screen and (min-width: 575px) {
         width: 15rem;
       }
-
       &__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 {
+  &__deposit-button,
+  .shapeshift-form__shapeshift-buy-btn {
     width: 257px;
   }
-
   .shapeshift-form-wrapper {
     display: flex;
     flex-flow: column;
@@ -793,23 +725,20 @@
     align-items: center;
     margin-top: 28px;
     flex: 1 0 auto;
-
-    .shapeshift-form, .modal-shapeshift-form {
+    .shapeshift-form,
+    .modal-shapeshift-form {
       border-radius: 8px;
       background-color: rgba(0, 0, 0, .05);
       padding: 17px 15px;
-
       &__caret {
         width: auto;
         flex: 1;
       }
     }
   }
-
   .shapeshift-form__shapeshift-buy-btn {
     margin-top: 10px;
   }
-
   .simple-dropdown {
     color: #5B5D67;
     font-size: 16px;
@@ -822,14 +751,12 @@
     line-height: 44px;
     font-family: Montserrat Light;
   }
-
   .simple-dropdown__selected {
     text-align: center;
   }
 }
 
 //Notification Modal
-
 .notification-modal-wrapper {
   display: flex;
   flex-direction: column;
@@ -862,4 +789,4 @@
   justify-content: center;
   font-size: 17px;
   color: $nile-blue;
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 7bfa2d44..ace2c73b 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -1,16 +1,13 @@
 .new-account {
   width: 375px;
   background-color: #FFFFFF;
-  box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
   z-index: 25;
-  height: 100%;
-
   &__header {
     display: flex;
     flex-flow: column;
     border-bottom: 1px solid $geyser;
   }
-
   &__title {
     color: $tundora;
     font-family: Roboto;
@@ -20,12 +17,10 @@
     margin-top: 22px;
     margin-left: 29px;
   }
-
   &__tabs {
     margin-left: 22px;
     display: flex;
     margin-top: 10px;
-
     &__tab {
       height: 54px;
       padding: 15px 10px;
@@ -36,12 +31,10 @@
       text-align: center;
       cursor: pointer;
     }
-
     &__tab:hover {
       color: $black;
       border-bottom: none;
     }
-
     &__selected {
       color: $curious-blue;
       border-bottom: 3px solid $curious-blue;
@@ -65,7 +58,6 @@
   flex-flow: column;
   align-items: center;
   padding: 0 30px 30px;
-
   &__select-section {
     display: flex;
     justify-content: space-between;
@@ -73,14 +65,12 @@
     margin-top: 29px;
     width: 100%;
   }
-
   &__select-label {
     color: $scorpion;
     font-family: Roboto;
     font-size: 16px;
     line-height: 21px;
   }
-
   &__select {
     height: 54px;
     width: 210px;
@@ -89,27 +79,23 @@
     background-color: #FFFFFF;
     display: flex;
     align-items: center;
-
     .Select-control,
     .Select-control:hover {
       height: 100%;
       border: none;
       box-shadow: none;
-
       .Select-value {
         display: flex;
         align-items: center;
       }
     }
   }
-
   &__private-key-password-container {
     display: flex;
     flex-flow: column;
     align-items: center;
     width: 100%;
   }
-
   &__instruction {
     color: $scorpion;
     font-family: Roboto;
@@ -117,34 +103,30 @@
     line-height: 21px;
     align-self: flex-start;
   }
-
   &__private-key {
     display: flex;
     flex-flow: column;
     align-items: flex-start;
     margin-top: 34px;
   }
-
   &__input-password {
     height: 54px;
     width: 315px;
     border: 1px solid $geyser;
     border-radius: 4px;
-    background-color: $white;
+    background-color: $dark-gray;
     margin-top: 16px;
     color: $scorpion;
     font-family: Roboto;
     font-size: 16px;
     padding: 0px 20px;
   }
-
   &__json {
     display: flex;
     flex-flow: column;
     align-items: center;
     margin-top: 29px;
   }
-
   &__buttons {
     margin-top: 39px;
     display: flex;
@@ -164,14 +146,12 @@
 
 .hw-connect {
   width: 100%;
-
   &__header {
     &__title {
       margin-top: 5px;
       margin-bottom: 15px;
       font-size: 22px;
     }
-
     &__msg {
       font-size: 14px;
       color: #9b9b9b;
@@ -179,23 +159,19 @@
       margin-bottom: 20px;
     }
   }
-
   &__btn-wrapper {
     flex: 1;
     flex-direction: row;
     display: flex;
   }
-
   &__connect-btn {
     width: 315px;
     margin: 20px;
   }
-
   &__connect-btn.disabled {
     cursor: not-allowed;
     opacity: .5;
   }
-
   &__btn {
     background: #fbfbfb;
     border: 1px solid #e5e5e5;
@@ -206,45 +182,37 @@
     align-items: center;
     justify-content: center;
     border-radius: 5px;
-
     &__img {
       width: 95px;
     }
   }
-
   &__btn.selected {
     border: 2px solid #00a8ee;
     width: 149px;
   }
-
   &__btn:first-child {
     margin-right: 15px;
     margin-left: 20px;
   }
-
   &__btn:last-child {
     margin-right: 20px;
   }
-
   &__hdPath {
     display: flex;
     flex-direction: row;
     margin-top: 15px;
     margin-bottom: 30px;
     font-size: 14px;
-
     &__title {
       display: flex;
       margin-top: 10px;
       margin-right: 15px;
     }
-
     &__select {
       display: flex;
       flex: 1;
     }
   }
-
   &__learn-more {
     margin-top: 15px;
     font-size: 14px;
@@ -252,7 +220,6 @@
     line-height: 19px;
     text-align: center;
     cursor: pointer;
-
     &__arrow {
       transform: rotate(90deg);
       display: block;
@@ -261,31 +228,26 @@
       margin: 0px auto 10px;
     }
   }
-
   &__title {
     padding-top: 10px;
     font-weight: 400;
     font-size: 18px;
   }
-
   &__unlock-title {
     padding-top: 10px;
     font-weight: 400;
     font-size: 22px;
     margin-bottom: 15px;
   }
-
   &__msg {
     font-size: 14px;
     color: #9b9b9b;
     margin-top: 10px;
     margin-bottom: 15px;
   }
-
   &__link {
     color: #2f9ae0;
   }
-
   &__footer {
     &__title {
       padding-top: 15px;
@@ -294,7 +256,6 @@
       font-size: 18px;
       text-align: center;
     }
-
     &__msg {
       font-size: 14px;
       color: #9b9b9b;
@@ -304,23 +265,19 @@
       display: block;
       margin-left: 20px;
     }
-
     &__link {
       color: #2f9ae0;
       margin-left: 5px;
     }
   }
-
   &__get-hw {
     width: 100%;
     padding-bottom: 10px;
     padding-top: 10px;
-
     &__msg {
       font-size: 14px;
       color: #9b9b9b;
     }
-
     &__link {
       font-size: 14px;
       text-align: center;
@@ -328,7 +285,6 @@
       cursor: pointer;
     }
   }
-
   &__step-asset {
     margin: 0px auto 20px;
     display: flex;
@@ -340,13 +296,11 @@
   flex: 1;
   flex-flow: column;
   width: 100%;
-
   &__title_wrapper {
     display: flex;
     flex-direction: row;
     flex: 1;
   }
-
   &__title {
     margin-bottom: 23px;
     align-self: flex-start;
@@ -358,7 +312,6 @@
     display: flex;
     flex: 1;
   }
-
   &__device {
     margin-bottom: 23px;
     align-self: flex-end;
@@ -369,7 +322,6 @@
     font-weight: normal;
     display: flex;
   }
-
   &__item {
     font-size: 15px;
     flex-direction: row;
@@ -377,34 +329,27 @@
     padding-left: 10px;
     padding-right: 10px;
   }
-
   &__item:nth-of-type(even) {
     background-color: #fbfbfb;
   }
-
   &__item:nth-of-type(odd) {
     background: rgba(0, 0, 0, 0.03);
   }
-
   &__item:hover {
     background-color: rgba(0, 0, 0, 0.06);
   }
-
   &__item__index {
     display: flex;
     width: 24px;
   }
-
   &__item__radio {
     display: flex;
     flex: 1;
-
     input {
       padding: 10px;
       margin-top: 13px;
     }
   }
-
   &__item__label {
     display: flex;
     flex: 1;
@@ -412,18 +357,15 @@
     padding-top: 10px;
     padding-bottom: 10px;
   }
-
   &__item__balance {
     display: flex;
     flex: 1;
     justify-content: center;
   }
-
   &__item__link {
     display: flex;
     margin-top: 13px;
   }
-
   &__item__link img {
     width: 15px;
     height: 15px;
@@ -434,7 +376,6 @@
   display: flex;
   align-self: flex-end;
   margin-top: 10px;
-
   &__button {
     background: #fff;
     height: 19px;
@@ -459,26 +400,40 @@
   padding: 15px 30px 0;
   height: 710px;
   overflow: auto;
-
   &.unsupported-browser {
     height: 210px;
   }
-
   &.account-list {
     height: auto;
     padding-left: 20px;
     padding-right: 20px;
   }
-
   &__buttons {
     margin-top: 39px;
     display: flex;
     width: 100%;
     justify-content: space-between;
   }
-
-  &__button:not(:last-child) {
-    margin-right: 16px;
+  &__button {
+    width: 150px;
+    min-width: initial;
+  }
+  .btn-primary {
+    background-color: #259DE5;
+    color: #FFFFFF;
+    border: none;
+    width: 100%;
+    min-height: 54px;
+    font-weight: 300;
+    font-size: 14px;
+    margin-bottom: 20px
+  }
+  &__button.unlock {
+    width: 50%;
+  }
+  &__button.btn-primary--disabled {
+    cursor: not-allowed;
+    opacity: .5;
   }
 }
 
@@ -487,7 +442,6 @@
   flex-flow: column;
   align-items: center;
   padding: 22px;
-
   a {
     color: #2f9ae0;
     font-size: 14px;
@@ -500,7 +454,6 @@
   flex-flow: column;
   align-items: center;
   padding: 30px;
-
   &__input-label {
     color: $scorpion;
     font-family: Roboto;
@@ -508,13 +461,12 @@
     line-height: 21px;
     align-self: flex-start;
   }
-
   &__input {
     height: 54px;
     width: 315.84px;
     border: 1px solid $geyser;
     border-radius: 4px;
-    background-color: $white;
+    background-color: $dark-gray;
     color: $scorpion;
     font-family: Roboto;
     font-size: 16px;
@@ -522,16 +474,14 @@
     margin-top: 15px;
     padding: 0px 20px;
   }
-
   &__buttons {
     margin-top: 39px;
     display: flex;
     width: 100%;
     justify-content: space-between;
   }
-
   &__button {
     width: 150px;
     min-width: initial;
   }
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index a016fdce..688fbdf2 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -1,13 +1,11 @@
 $sub-mid-size-breakpoint: 667px;
 $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})";
-
 /*
   NewUI Container Elements
  */
 
 // Component Colors
-$wallet-view-bg: $alabaster;
-
+$wallet-view-bg: $muddy-gray;
 // Main container
 .main-container {
   // position: absolute;
@@ -36,7 +34,6 @@ $wallet-view-bg: $alabaster;
 }
 
 // wallet view and sidebar
-
 .wallet-view {
   display: flex;
   flex-direction: column;
@@ -45,26 +42,21 @@ $wallet-view-bg: $alabaster;
   background: $wallet-view-bg;
   z-index: 200;
   position: relative;
-
   @media screen and (min-width: 576px) {
     overflow-y: scroll;
     overflow-x: hidden;
   }
-
   @media #{$sub-mid-size-breakpoint-range} {
     min-width: 160px;
   }
-
   .wallet-view-account-details {
     flex: 0 0 auto;
   }
-
   &__name-container {
     flex: 0 0 auto;
     cursor: pointer;
     width: 100%;
   }
-
   &__keyring-label {
     height: 50px;
     color: $dusty-gray;
@@ -74,7 +66,6 @@ $wallet-view-bg: $alabaster;
     padding: 17px 20px 0;
     box-sizing: border-box;
   }
-
   &__details-button {
     font-size: 10px;
     border-radius: 17px;
@@ -83,14 +74,12 @@ $wallet-view-bg: $alabaster;
     padding: 4px 12px;
     flex: 0 0 auto;
   }
-
   &__tooltip {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 24px;
   }
-
   &__address {
     border-radius: 3px;
     background-color: $alto;
@@ -100,14 +89,11 @@ $wallet-view-bg: $alabaster;
     padding: 4px 12px;
     cursor: pointer;
     flex: 0 0 auto;
-
     &__pressed {
       background-color: $manatee,
     }
   }
-
   &__sidebar-close {
-
     @media screen and (max-width: 575px) {
       &::after {
         content: '\00D7';
@@ -120,6 +106,16 @@ $wallet-view-bg: $alabaster;
       }
     }
   }
+  &__add-token-button {
+    flex: 0 0 auto;
+    margin: 36px auto;
+    background: none;
+    transition: border-color .3s ease;
+    width: 150px;
+    &:hover {
+      border-color: $white;
+    }
+  }
 }
 
 @media screen and (min-width: 576px) {
@@ -134,9 +130,7 @@ $wallet-view-bg: $alabaster;
 
 .wallet-view-title {
   margin-left: 15px;
-  font-size: 16px;
-
-  // No title on mobile
+  font-size: 16px; // No title on mobile
   @media screen and (max-width: 575px) {
     display: none;
   }
@@ -161,21 +155,19 @@ $wallet-view-bg: $alabaster;
 }
 
 // main-container media queries
-
 @media screen and (min-width: 576px) {
   .lap-visible {
     display: flex;
   }
-
   .phone-visible {
     display: none;
   }
-
   .main-container {
     // margin-top: 6.9vh;
     width: 85vw;
     height: 90vh;
-    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+    border: 2px solid $geyser;
+    border-radius: 4px;
   }
 }
 
@@ -184,7 +176,6 @@ $wallet-view-bg: $alabaster;
     // margin-top: 6.9vh;
     width: 80vw;
     height: 82vh;
-    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
 }
 
@@ -193,7 +184,6 @@ $wallet-view-bg: $alabaster;
     // margin-top: 6.9vh;
     width: 62vw;
     height: 82vh;
-    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
 }
 
@@ -201,19 +191,16 @@ $wallet-view-bg: $alabaster;
   .lap-visible {
     display: none;
   }
-
   .phone-visible {
     display: flex;
   }
-
   .main-container {
     // margin-top: 41px;
     height: 100%;
     width: 100%;
     overflow-y: auto;
-    background-color: $white;
+    background-color: $dark-gray;
   }
-
   .main-container-wrapper {
     flex: 1;
     min-height: 0;
@@ -224,7 +211,7 @@ $wallet-view-bg: $alabaster;
 // wallet view
 .account-name {
   font-size: 24px;
-  color: $black;
+  color: $white;
   margin-top: 8px;
   margin-bottom: .9rem;
   white-space: nowrap;
@@ -255,19 +242,15 @@ $wallet-view-bg: $alabaster;
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
-
   @media screen and (max-width: 575px) {
     height: 100%;
   }
-
   @media screen and (min-width: 576px) {
     width: 85vw;
   }
-
   @media screen and (min-width: 769px) {
     width: 80vw;
   }
-
   @media screen and (min-width: 1281px) {
     width: 62vw;
   }
@@ -299,4 +282,4 @@ $wallet-view-bg: $alabaster;
   justify-content: center;
   padding: 0 10px;
   background: white;
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index 6c950d84..45a4a812 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -2,8 +2,8 @@
   &__container {
     width: 380px;
     border-radius: 8px;
-    background-color: $white;
-    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
+    background-color: $dark-gray;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     display: flex;
     flex-flow: column nowrap;
     z-index: 25;
@@ -11,37 +11,30 @@
     font-family: Roboto;
     position: relative;
     height: 100%;
-
     @media screen and (max-width: $break-small) {
       width: 100%;
       top: 0;
       box-shadow: none;
     }
-
     @media screen and (min-width: $break-large) {
       height: 620px;
     }
   }
-
   &__typed-container {
     padding: 17px;
-
     h1 {
       font-weight: 900;
       margin-bottom: 5px;
     }
-
     * {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-
-    > div {
+    >div {
       margin-bottom: 10px;
     }
   }
-
   &__header {
     height: 64px;
     width: 100%;
@@ -52,7 +45,6 @@
     align-items: center;
     flex: 0 0 auto;
   }
-
   &__header-background {
     position: absolute;
     background-color: $athens-grey;
@@ -60,7 +52,6 @@
     width: 100%;
     height: 100%;
   }
-
   &__header__text {
     color: #5B5D67;
     font-family: Roboto;
@@ -68,13 +59,11 @@
     line-height: 29px;
     z-index: 3;
   }
-
   &__header__tip-container {
     width: 100%;
     display: flex;
     justify-content: center;
   }
-
   &__header__tip {
     height: 25px;
     width: 25px;
@@ -84,43 +73,35 @@
     bottom: -8px;
     z-index: 1;
   }
-
   &__account-info {
     display: flex;
     justify-content: space-between;
     margin-top: 18px;
     margin-bottom: 20px;
   }
-
   &__account {
     color: $dusty-gray;
     margin-left: 17px;
   }
-
   &__account-text {
     font-size: 14px;
   }
-
   &__balance {
     color: $dusty-gray;
     margin-right: 17px;
     width: 124px;
   }
-
   &__balance-text {
     text-align: right;
     font-size: 14px;
   }
-
   &__balance-value {
     text-align: right;
     margin-top: 2.5px;
   }
-
   &__request-icon {
     margin-top: 25px;
   }
-
   &__body {
     width: 100%;
     height: 100%;
@@ -129,12 +110,10 @@
     flex: 1 1 auto;
     height: 0;
   }
-
   &__request-info {
     display: flex;
     justify-content: center;
   }
-
   &__headline {
     height: 48px;
     width: 240px;
@@ -145,7 +124,6 @@
     text-align: center;
     margin-top: 20px;
   }
-
   &__notice,
   &__warning {
     font-family: "Avenir Next";
@@ -156,15 +134,12 @@
     margin-bottom: 11px;
     width: 100%;
   }
-
   &__notice {
     color: $dusty-gray;
   }
-
   &__warning {
     color: $crimson;
   }
-
   &__rows {
     height: 100%;
     overflow-y: scroll;
@@ -173,13 +148,11 @@
     display: flex;
     flex-flow: column;
   }
-
   &__row {
     display: flex;
     flex-flow: column;
     flex: 1 0 auto;
   }
-
   &__row-title {
     width: 80px;
     color: $dusty-gray;
@@ -190,7 +163,6 @@
     margin-left: 18px;
     width: 100%;
   }
-
   &__row-value {
     color: $scorpion;
     font-family: Roboto;
@@ -198,17 +170,15 @@
     line-height: 19px;
     width: 100%;
     overflow-wrap: break-word;
-    border-bottom: 1px solid #d2d8dd;
+    border-bottom: 1px solid $geyser;
     padding: 6px 18px 15px;
     white-space: pre-line;
   }
-
   &__help-link {
     cursor: pointer;
     text-decoration: underline;
     color: $curious-blue;
   }
-
   &__footer {
     width: 100%;
     display: flex;
@@ -219,13 +189,11 @@
     flex: 0 0 auto;
     border-top: 1px solid $geyser;
     padding: 1.6rem;
-
     button {
       width: 165px;
     }
-
     &__cancel-button {
       margin-right: 1.2rem;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 19e84009..9feef1b3 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -3,12 +3,10 @@
   flex-flow: column nowrap;
   z-index: 25;
   font-family: Roboto;
-
   @media screen and (max-width: $break-small) {
     width: 100%;
     overflow-y: auto;
   }
-
   section {
     flex: 0 0 auto;
   }
@@ -18,14 +16,12 @@
   background-color: #fff;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
   padding: 46px 40.5px 26px;
-  position: relative;
-  // top: -26px;
+  position: relative; // top: -26px;
   align-items: center;
   display: flex;
   flex-flow: column nowrap;
   width: 498px;
   flex: 1 0 auto;
-
   @media screen and (max-width: $break-small) {
     top: 0;
     width: 100%;
@@ -56,7 +52,6 @@
   z-index: 25;
   padding: 4px;
   background-color: $white;
-
   @media screen and (max-width: $break-small) {
     position: relative;
     top: 0;
@@ -66,11 +61,9 @@
 .send-screen-input-wrapper {
   width: 95%;
   position: relative;
-
   .fa-bolt {
     padding-right: 4px;
   }
-
   .large-input {
     border: 1px solid $dusty-gray;
     border-radius: 4px;
@@ -79,21 +72,17 @@
     line-height: 22.4px;
     font-family: Roboto;
   }
-
   .send-screen-gas-input {
     border: 1px solid transparent;
   }
-
   &__error-message {
     display: none;
   }
-
   &--error {
     input,
     .send-screen-gas-input {
       border-color: $red !important;
     }
-
     .send-screen-input-wrapper__error-message {
       display: block;
       position: absolute;
@@ -104,7 +93,6 @@
       color: $red;
     }
   }
-
   .send-screen-input-wrapper__error-message {
     display: block;
     position: absolute;
@@ -152,7 +140,6 @@
   &__item {
     color: $curious-blue;
     cursor: pointer;
-
     &--selected {
       color: $black;
       cursor: default;
@@ -180,7 +167,7 @@
   bottom: 50px;
   width: 237px;
   height: 307px;
-  background-color: $white;
+  background-color: $dark-gray;
   opacity: 1;
   box-shadow: $alto 0 0 5px;
   z-index: 1050;
@@ -282,7 +269,6 @@
     display: inline-block;
     margin-right: 4px;
   }
-
   &__symbol {
     display: inline-block;
   }
@@ -294,19 +280,16 @@
     font-size: 18px;
     line-height: 29px;
   }
-
   &__subtitle {
     margin: 10px 0 20px;
     font-size: 14px;
     line-height: 24px;
   }
-
   &__send-button,
   &__cancel-button {
     width: 163px;
     text-align: center;
   }
-
   &__send-button__disabled {
     opacity: .5;
     cursor: auto;
@@ -318,20 +301,17 @@
   flex-flow: column nowrap;
   z-index: 25;
   font-family: Roboto;
-
   &__content {
     width: 498px;
     height: 605px;
     background-color: #fff;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
     padding: 46px 40.5px 26px;
-    position: relative;
-    // top: -26px;
+    position: relative; // top: -26px;
     align-items: center;
     display: flex;
     flex-flow: column nowrap;
     flex: 1 0 auto;
-
     @media screen and (max-width: $break-small) {
       top: 0;
       width: 100%;
@@ -339,25 +319,21 @@
       padding: 12px;
     }
   }
-
   .identicon {
     position: absolute;
     top: -35px;
     z-index: 25;
-
     @media screen and (max-width: $break-small) {
       position: relative;
       top: 0;
       flex: 0 0 auto;
     }
   }
-
   &__title {
     color: $scorpion;
     font-size: 18px;
     line-height: 29px;
   }
-
   &__description,
   &__balance-text,
   &__token-symbol {
@@ -366,27 +342,22 @@
     line-height: 24px;
     text-align: center;
   }
-
   &__token-balance {
     font-size: 40px;
     line-height: 40px;
     margin-top: 13px;
-
     .token-balance__amount {
       padding-right: 12px;
     }
   }
-
   &__button-group {
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
     flex: 0 0 auto;
-
     @media screen and (max-width: $break-small) {
       margin-top: 24px;
     }
-
     button {
       width: 163px;
     }
@@ -404,7 +375,7 @@
     // height: 701px;
     width: 380px;
     border-radius: 8px;
-    background-color: $white;
+    background-color: $dark-gray;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
     display: flex;
     flex-flow: column nowrap;
@@ -412,7 +383,6 @@
     align-items: center;
     font-family: Roboto;
     position: relative;
-
     @media screen and (max-width: $break-small) {
       width: 100%;
       top: 0;
@@ -420,16 +390,13 @@
       flex: 1 1 auto;
     }
   }
-
   &__send-header-icon-container {
     z-index: 25;
-
     @media screen and (max-width: $break-small) {
       position: relative;
       top: 0;
     }
   }
-
   &__send-header-icon {
     border-radius: 50%;
     width: 48px;
@@ -439,7 +406,6 @@
     padding: 4px;
     background-color: $white;
   }
-
   &__send-arrow-icon {
     color: #f28930;
     transform: rotate(-45deg);
@@ -448,7 +414,6 @@
     left: 0;
     font-size: 1.12em;
   }
-
   &__arrow-background {
     background-color: $white;
     height: 14px;
@@ -458,12 +423,10 @@
     left: 199px;
     border-radius: 50%;
     z-index: 100;
-
     @media screen and (max-width: $break-small) {
       top: 36px;
     }
   }
-
   &__header {
     height: 88px;
     width: 380px;
@@ -472,13 +435,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
     @media screen and (max-width: $break-small) {
       height: 59px;
       width: 100vw;
     }
   }
-
   &__header-tip {
     height: 25px;
     width: 25px;
@@ -487,7 +448,6 @@
     transform: rotate(45deg);
     left: 178px;
     top: 75px;
-
     @media screen and (max-width: $break-small) {
       top: 46px;
       left: 0;
@@ -495,7 +455,6 @@
       margin: 0 auto;
     }
   }
-
   &__title {
     color: $scorpion;
     font-size: 22px;
@@ -503,7 +462,6 @@
     text-align: center;
     margin-top: 25px;
   }
-
   &__copy {
     color: $gray;
     font-size: 14px;
@@ -512,27 +470,22 @@
     margin-top: 10px;
     width: 287px;
   }
-
   &__error {
     font-size: 12px;
     line-height: 12px;
     left: 8px;
     color: $red;
   }
-
   &__error-border {
     color: $red;
   }
-
   &__form {
     padding: 10px 0 25px;
-
     @media screen and (max-width: $break-small) {
       margin: 0;
       flex: 1 1 auto;
     }
   }
-
   &__form-header,
   &__form-header-copy {
     width: 100%;
@@ -540,7 +493,6 @@
     flex-flow: column;
     align-items: center;
   }
-
   &__form-row {
     margin: 14.5px 18px 0px;
     position: relative;
@@ -549,31 +501,24 @@
     flex: 1 0 auto;
     justify-content: space-between;
   }
-
   &__form-field {
     flex: 1 1 auto;
-    min-width: 0;
-
     .currency-display {
       color: $tundora;
-
       &__currency-symbol {
         color: $tundora;
       }
-
       &__converted-value,
       &__converted-currency {
         color: $tundora;
       }
     }
-
     .account-list-item {
       &__account-secondary-balance {
         color: $tundora;
       }
     }
   }
-
   &__form-label {
     color: $scorpion;
     font-family: Roboto;
@@ -583,19 +528,17 @@
     font-weight: 400;
     flex: 0 0 auto;
   }
-
   &__from-dropdown {
     height: 73px;
     width: 100%;
     border: 1px solid $alto;
     border-radius: 4px;
-    background-color: $white;
+    background-color: $dark-gray;
     font-family: Roboto;
     line-height: 16px;
     font-size: 12px;
     color: $tundora;
     position: relative;
-
     &__close-area {
       position: fixed;
       top: 0;
@@ -604,7 +547,6 @@
       width: 100%;
       height: 100%;
     }
-
     &__list {
       z-index: 1050;
       position: absolute;
@@ -613,23 +555,20 @@
       border: 1px solid $geyser;
       border-radius: 4px;
       background-color: $white;
-      box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
+      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11);
       margin-top: 11px;
       margin-left: -1px;
       overflow-y: scroll;
     }
   }
-
   &__to-autocomplete {
     position: relative;
-
     &__down-caret {
       z-index: 1026;
       position: absolute;
       top: 18px;
       right: 12px;
     }
-
     &__qr-code {
       z-index: 1026;
       position: absolute;
@@ -639,17 +578,16 @@
       padding: 8px 5px 5px;
       border-radius: 4px;
     }
-
     &__qr-code:hover {
       background: #f1f1f1;
     }
-
     &__input.with-qr {
       padding-right: 65px;
     }
   }
-
-  &__to-autocomplete, &__memo-text-area, &__hex-data {
+  &__to-autocomplete,
+  &__memo-text-area,
+  &__hex-data {
     &__input {
       z-index: 1025;
       position: relative;
@@ -665,7 +603,6 @@
       line-height: 21px;
     }
   }
-
   &__amount-max {
     color: $curious-blue;
     font-family: Roboto;
@@ -674,11 +611,9 @@
     border: none;
     cursor: pointer;
   }
-
   &__gas-fee-display {
     width: 100%;
     position: relative;
-
     .currency-display--message {
       padding: 8px 38px 8px 10px;
       display: flex;
@@ -686,7 +621,6 @@
     }
 
   }
-
   &__sliders-icon-container {
     display: flex;
     align-items: center;
@@ -702,17 +636,14 @@
     cursor: pointer;
     font-size: 1em;
   }
-
   &__sliders-icon {
     color: $curious-blue;
   }
-
   &__memo-text-area {
     &__input {
       padding: 6px 10px;
     }
   }
-
   &__footer {
     height: 92px;
     width: 100%;
@@ -724,27 +655,23 @@
     padding: 0 12px;
     flex-shrink: 0;
   }
-
   &__next-btn,
   &__cancel-btn {
     width: 163px;
     margin: 0 4px;
   }
-
   &__customize-gas {
     border: 1px solid #D8D8D8;
     border-radius: 4px;
     background-color: #FFFFFF;
-    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
     font-family: Roboto;
     display: flex;
     flex-flow: column;
-
     @media screen and (max-width: $break-small) {
       width: 100vw;
       height: 100vh;
     }
-
     &__header {
       height: 52px;
       border-bottom: 1px solid $alto;
@@ -752,16 +679,13 @@
       align-items: center;
       justify-content: space-between;
       font-size: 22px;
-
       @media screen and (max-width: $break-small) {
         flex: 0 0 auto;
       }
     }
-
     &__title {
       margin-left: 19.25px;
     }
-
     &__close::after {
       content: '\00D7';
       font-size: 1.8em;
@@ -770,23 +694,19 @@
       cursor: pointer;
       margin-right: 19.25px;
     }
-
     &__content {
       display: flex;
       flex-flow: column nowrap;
       height: 100%;
     }
-
     &__body {
       display: flex;
       margin-bottom: 24px;
-
       @media screen and (max-width: $break-small) {
         flex-flow: column;
         flex: 1 1 auto;
       }
     }
-
     &__footer {
       height: 75px;
       border-top: 1px solid $alto;
@@ -795,42 +715,40 @@
       justify-content: space-between;
       font-size: 22px;
       position: relative;
-
       @media screen and (max-width: $break-small) {
         flex: 0 0 auto;
       }
     }
-
     &__buttons {
       display: flex;
       justify-content: space-between;
       margin-right: 21.25px;
     }
-
-    &__revert, &__cancel, &__save, &__save__error {
+    &__revert,
+    &__cancel,
+    &__save,
+    &__save__error {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 0 3px;
       cursor: pointer;
     }
-
     &__revert {
       color: $silver-chalice;
       font-size: 16px;
       margin-left: 21.25px;
     }
-
-    &__cancel, &__save, &__save__error {
+    &__cancel,
+    &__save,
+    &__save__error {
       width: 85.74px;
       min-width: initial;
     }
-
     &__save__error {
       opacity: 0.5;
       cursor: auto;
     }
-
     &__error-message {
       display: block;
       position: absolute;
@@ -842,19 +760,16 @@
       width: 100%;
       text-align: center;
     }
-
     &__cancel {
       margin-right: 10px;
     }
   }
-
   &__gas-modal-card {
     width: 360px;
     display: flex;
     flex-flow: column;
     align-items: flex-start;
     padding-left: 20px;
-
     &__title {
       height: 26px;
       color: $tundora;
@@ -863,7 +778,6 @@
       line-height: 26px;
       margin-top: 17px;
     }
-
     &__copy {
       height: 38px;
       width: 314px;
@@ -873,11 +787,9 @@
       line-height: 19px;
       margin-top: 17px;
     }
-
     .customize-gas-input-wrapper {
       margin-top: 17px;
     }
-
     .customize-gas-input {
       height: 54px;
       width: 315px;
@@ -885,7 +797,6 @@
       background-color: $white;
       padding-left: 15px;
     }
-
     .gas-tooltip-input-arrows {
       width: 32px;
       height: 54px;
@@ -898,7 +809,6 @@
       justify-content: space-around;
       align-items: center;
     }
-
     .gas-tooltip-input-arrow-wrapper {
       align-items: center;
       align-self: stretch;
@@ -907,12 +817,10 @@
       flex-grow: 1;
       justify-content: center;
     }
-
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
       display: none;
     }
-
     input[type="number"]:hover::-webkit-inner-spin-button {
       -webkit-appearance: none;
       display: none;
@@ -937,7 +845,7 @@
   width: 24px;
   border: 1px solid $curious-blue;
   border-radius: 4px;
-  background-color: $white;
+  background-color: $dark-gray;
   position: absolute;
   right: 15px;
   top: 14px;
@@ -964,4 +872,4 @@
 
 .sliders-icon {
   color: $curious-blue;
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/simple-dropdown.scss b/ui/app/css/itcss/components/simple-dropdown.scss
index a21095a3..1a7b2ca2 100644
--- a/ui/app/css/itcss/components/simple-dropdown.scss
+++ b/ui/app/css/itcss/components/simple-dropdown.scss
@@ -5,9 +5,9 @@
   align-items: center;
   border: 1px solid $alto;
   border-radius: 4px;
-  background-color: $white;
+  background-color: $dark-gray;
   font-size: 16px;
-  color: #4d4d4d;
+  color: $geyser;
   cursor: pointer;
   position: relative;
 }
@@ -27,9 +27,9 @@
   position: absolute;
   height: 220px;
   width: 100%;
-  border: 1px solid #d2d8dd;
+  border: 1px solid $geyser;
   border-radius: 4px;
-  background-color: #fff;
+  background-color: $dark-gray;
   -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11);
   margin-top: 10px;
@@ -40,7 +40,6 @@
 
 .simple-dropdown__option {
   padding: 10px;
-
   &:hover {
     background-color: $gallery;
   }
@@ -48,7 +47,6 @@
 
 .simple-dropdown__option--selected {
   background-color: $alto;
-
   &:hover {
     background-color: $alto;
     cursor: default;
@@ -62,4 +60,4 @@
   z-index: 1000;
   width: 100%;
   height: 100%;
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index 49d0c290..9737e717 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -1,6 +1,5 @@
 $wallet-balance-breakpoint: 890px;
 $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
-
 .token-list-item {
   display: flex;
   flex-flow: row nowrap;
@@ -12,7 +11,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   position: relative;
   flex: 1;
   min-width: 0;
-
   &__token-balance {
     margin-right: 4px;
     white-space: nowrap;
@@ -21,58 +19,48 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     min-width: 0;
     max-width: 100%;
   }
-
-  &__token-balance, &__token-symbol {
+  &__token-balance,
+  &__token-symbol {
     font-size: 1.5rem;
     flex: 0 0 auto;
-
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 95%;
     }
   }
-
   &__fiat-amount {
     margin-top: .25%;
     font-size: 105%;
     width: 100%;
     text-transform: uppercase;
-
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 95%;
     }
   }
-
   @media #{$wallet-balance-breakpoint-range} {
     padding: 10% 4%;
   }
-
   &--active {
-    background-color: $manatee;
+    background-color: $geyser;
     color: $white;
   }
-
   &__identicon {
     margin-right: 15px;
     border: '1px solid #dedede';
     min-width: 50px;
-
     @media #{$wallet-balance-breakpoint-range} {
       margin-right: 4%;
     }
   }
-
   &__balance-ellipsis {
     display: flex;
     align-items: center;
     min-width: 0;
     flex: 1;
   }
-
   &__ellipsis {
     line-height: 45px;
     margin-left: 5px;
   }
-
   &__balance-wrapper {
     flex: 1;
     flex-flow: row wrap;
@@ -87,11 +75,9 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   top: 52px;
   right: 25px;
   z-index: 2000;
-
   @media #{$wallet-balance-breakpoint-range} {
     right: 18px;
   }
-
   &__close-area {
     position: fixed;
     top: 0;
@@ -101,19 +87,16 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     height: 100%;
     cursor: default;
   }
-
   &__container {
     padding: 16px;
     z-index: 2200;
     position: relative;
   }
-
   &__options {
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
-
   &__option {
     color: $white;
     font-family: Roboto;
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
index 3c3349ae..5e7de8c4 100644
--- a/ui/app/css/itcss/components/wallet-balance.scss
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -1,14 +1,12 @@
-$wallet-balance-bg: #e7e7e7;
+$wallet-balance-bg: #4a4a4a;
 $wallet-balance-breakpoint: 890px;
 $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
-
 .wallet-balance-wrapper {
   flex: 0 0 auto;
   transition: linear 200ms;
   background: rgba($wallet-balance-bg, 0);
-
   &--active {
-    background: $manatee;
+    background: $geyser;
     color: $white;
   }
 }
@@ -22,40 +20,33 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   flex: 0 0 auto;
   cursor: pointer;
   border-top: 1px solid $wallet-balance-bg;
-
   .balance-container {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     margin: 20px 24px;
     flex-direction: row;
-    min-width: 0;
-
+    flex-grow: 3;
     @media #{$wallet-balance-breakpoint-range} {
       margin: 10% 4%;
     }
   }
-
   .balance-display {
     margin-left: 15px;
-    min-width: 0;
-
+    justify-content: flex-start;
+    align-items: flex-start;
     .token-amount {
       font-size: 1.5rem;
     }
-
     .fiat-amount {
       margin-top: .25%;
       font-size: 105%;
     }
-
     @media #{$wallet-balance-breakpoint-range} {
       margin-left: 4%;
-
       .token-amount {
         font-size: 105%;
       }
-
       .fiat-amount {
         font-size: 95%;
       }
@@ -70,4 +61,4 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   border: 1px solid $alto;
   padding: 5px;
   background: $white;
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 2682741d..a1b02b55 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -49,7 +49,7 @@ textarea:focus {
   display: flex;
   flex-direction: column;
   @media screen and (max-width: $break-small) {
-    background-color: $white;
+    background-color: $dark-gray;
   }
 }
 
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index f91455ea..3ff5979c 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -4,6 +4,7 @@
 
 // Base Colors
 $white: #fff;
+$white-transparent: unquote('#ffffff88');
 $black: #000;
 $orange: #ffa500;
 $red: #f00;
@@ -22,7 +23,7 @@ $alabaster: #f7f7f7;
 $shark: #22232c;
 $wild-sand: #f6f6f6;
 $white: #fff;
-$dusty-gray: #9b9b9b;
+$dusty-gray: #777777;
 $alto: #dedede;
 $alabaster: #fafafa;
 $silver-chalice: #aeaeae;
@@ -41,7 +42,7 @@ $tulip-tree: #ebb33f;
 $malibu-blue: #7ac9fd;
 $athens-grey: #e9edf0;
 $jaffa: #f28930;
-$geyser: #d2d8dd;
+$geyser: #4a4a4a;
 $manatee: #93949d;
 $spindle: #c7ddec;
 $mid-gray: #5b5d67;
@@ -61,7 +62,7 @@ $blizzard-blue: #bfdef3;
 $mischka: #dddee9;
 $dexon-purple: #954A97;
 $dark-gray: #222222;
-
+$muddy-gray: #303030;
 /*
   Z-Indicies
  */