Replace logo and main theme

5 files changed, 143 insertions, 28 deletions

diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 3e016a5b..0fe46752 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;
 }
 
@@ -31,19 +31,23 @@
     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;
@@ -55,9 +59,11 @@
     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;
     }
@@ -70,19 +76,23 @@
     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;
@@ -93,36 +103,44 @@
     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;
     }
@@ -177,6 +195,7 @@
   border: 1px solid $silver;
   border-radius: 4px;
   font-family: Roboto;
+
   button {
     cursor: pointer;
   }
@@ -188,6 +207,7 @@
   top: 13px;
   left: 17px;
   cursor: pointer;
+
   &__text {
     margin-top: 2px;
     font-family: Roboto;
@@ -221,9 +241,11 @@
     margin-top: 9px;
     font-size: 20px;
   }
+
   .qr-wrapper {
     margin-top: 5px;
   }
+
   .ellip-address-wrapper {
     display: flex;
     justify-content: center;
@@ -233,6 +255,7 @@
     margin-top: 7px;
     width: 286px;
   }
+
   .account-modal__button {
     margin-top: 17px;
     padding: 10px 22px;
@@ -459,16 +482,19 @@
   min-height: 250.72px;
   border-radius: 4px;
   background-color: $dark-gray;
-  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .5);
+  box-shadow: 0 1px 7px 0 rgba(0, 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;
@@ -477,6 +503,7 @@
     text-align: center;
     margin-bottom: 7.5px;
   }
+
   &__title {
     height: 30px;
     width: 271.28px;
@@ -487,6 +514,7 @@
     text-align: center;
     margin-bottom: 10.5px;
   }
+
   &__copy {
     height: 41px;
     width: 318px;
@@ -496,6 +524,7 @@
     line-height: 18px;
     text-align: center;
   }
+
   &__buttons {
     display: flex;
     flex-direction: row;
@@ -503,6 +532,7 @@
     margin-top: 15px;
     width: 100%;
   }
+
   &__button {
     width: 141px;
     margin: 0 5px;
@@ -521,6 +551,7 @@
     box-shadow: 0 0 2px 2px $alto;
     font-family: Roboto;
   }
+
   &__header {
     background: $wild-sand;
     width: 100%;
@@ -530,6 +561,7 @@
     font-size: 22px;
     color: $nile-blue;
   }
+
   &__message {
     padding: 20px;
     width: 100%;
@@ -538,16 +570,19 @@
     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;
   }
@@ -560,6 +595,7 @@
   display: flex;
   flex-flow: column;
   height: 100%;
+
   &__header {
     width: 100%;
     border-radius: 8px 8px 0 0;
@@ -569,17 +605,20 @@
     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;
@@ -590,6 +629,7 @@
       cursor: pointer;
     }
   }
+
   &__buy-rows {
     width: 100%;
     padding: 0 30px;
@@ -597,21 +637,25 @@
     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 {
         border-radius: 8px;
-        background-color: rgba(0, 0, 0, .05);
+        background-color: rgba(0, 0, 0, 0.05);
         padding: 17px 15px;
         margin-bottom: 10px;
+
         &__caret {
           width: auto;
           flex: 1;
@@ -619,6 +663,7 @@
       }
     }
   }
+
   &__logo {
     height: 60px;
     background-repeat: no-repeat;
@@ -629,27 +674,32 @@
     justify-content: center;
     align-items: center;
   }
+
   &__buy-row {
-    border-bottom: 1px solid $alto;
+    border-bottom: 1px solid $geyser;
     display: flex;
     justify-content: space-between;
     align-items: center;
     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;
+
       @media screen and (max-width: 575px) {
         display: flex;
         justify-content: space-between;
@@ -663,61 +713,76 @@
         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;
+      color: $white;
       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 {
     width: 257px;
   }
+
   .shapeshift-form-wrapper {
     display: flex;
     flex-flow: column;
@@ -725,20 +790,24 @@
     align-items: center;
     margin-top: 28px;
     flex: 1 0 auto;
+
     .shapeshift-form,
     .modal-shapeshift-form {
       border-radius: 8px;
-      background-color: rgba(0, 0, 0, .05);
+      background-color: rgba(0, 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;
@@ -751,6 +820,7 @@
     line-height: 44px;
     font-family: Montserrat Light;
   }
+
   .simple-dropdown__selected {
     text-align: center;
   }
@@ -789,4 +859,4 @@
   justify-content: center;
   font-size: 17px;
   color: $nile-blue;
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 1b3db8d0..8ae2fba9 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -1,6 +1,6 @@
 .network-component--disabled {
   // border-color: transparent !important;
-  cursor: not-allowed;
+  cursor: default;
 
   .fa-caret-down {
     opacity: 0;
@@ -13,17 +13,13 @@
   padding: 7px 3px;
   flex: 0 0 auto;
   display: flex;
-  &.ethereum-network .menu-icon-circle div {
-    background-color: rgba(3, 135, 137, .7) !important;
-  }
-  &.ropsten-test-network .menu-icon-circle div {
-    background-color: rgba(233, 21, 80, .7) !important;
-  }
-  &.kovan-test-network .menu-icon-circle div {
-    background-color: rgba(105, 4, 150, .7) !important;
+
+  &.dexon-network .menu-icon-circle div {
+    background-color: rgba(149, 74, 151, 0.7) !important;
   }
-  &.rinkeby-test-network .menu-icon-circle div {
-    background-color: rgba(235, 179, 63, .7) !important;
+
+  &.dexon-test-network .menu-icon-circle div {
+    background-color: rgba(174, 174, 174, 0.7) !important;
   }
 }
 
@@ -38,6 +34,7 @@
   display: flex;
   align-items: center;
   font-size: .6em;
+
   .fa-caret-down {
     line-height: 15px;
     font-size: 12px;
@@ -65,12 +62,15 @@
 
 .network-droppo {
   right: 2px;
+
   @media screen and (min-width: 576px) {
     right: calc(((100% - 85vw) / 2) + 2px);
   }
+
   @media screen and (min-width: 769px) {
     right: calc(((100% - 80vw) / 2) + 2px);
   }
+
   @media screen and (min-width: 1281px) {
     right: calc(((100% - 65vw) / 2) + 2px);
   }
@@ -109,7 +109,7 @@
 
 .menu-icon-circle--active {
   border: 1px solid $white;
-  background: rgba(100, 100, 100, .4);
+  background: rgba(100, 100, 100, 0.4);
 }
 
 .menu-icon-circle div,
@@ -158,4 +158,5 @@
 
 .network-caret {
   margin: 0 8px 2px;
-}
\ No newline at end of file
+  color: $dexon-purple;
+}
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 688fbdf2..9dc11042 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -1,11 +1,13 @@
 $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: $muddy-gray;
+
 // Main container
 .main-container {
   // position: absolute;
@@ -42,21 +44,26 @@ $wallet-view-bg: $muddy-gray;
   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;
@@ -66,6 +73,7 @@ $wallet-view-bg: $muddy-gray;
     padding: 17px 20px 0;
     box-sizing: border-box;
   }
+
   &__details-button {
     font-size: 10px;
     border-radius: 17px;
@@ -74,12 +82,14 @@ $wallet-view-bg: $muddy-gray;
     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;
@@ -89,10 +99,12 @@ $wallet-view-bg: $muddy-gray;
     padding: 4px 12px;
     cursor: pointer;
     flex: 0 0 auto;
+
     &__pressed {
-      background-color: $manatee,
+      background-color: ($manatee,);
     }
   }
+
   &__sidebar-close {
     @media screen and (max-width: 575px) {
       &::after {
@@ -106,12 +118,14 @@ $wallet-view-bg: $muddy-gray;
       }
     }
   }
+
   &__add-token-button {
     flex: 0 0 auto;
     margin: 36px auto;
     background: none;
     transition: border-color .3s ease;
     width: 150px;
+
     &:hover {
       border-color: $white;
     }
@@ -138,7 +152,7 @@ $wallet-view-bg: $muddy-gray;
 
 .wallet-view.sidebar-right {
   flex: 1 0 230px;
-  background: rgb(250, 250, 250);
+  background: $muddy-gray;
   z-index: $sidebar-z-index;
   position: fixed;
   top: 66px;
@@ -149,7 +163,7 @@ $wallet-view-bg: $muddy-gray;
   visibility: visible;
   will-change: transform;
   overflow-y: auto;
-  box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
+  box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px;
   width: 85%;
   height: calc(100% - 56px);
 }
@@ -159,9 +173,11 @@ $wallet-view-bg: $muddy-gray;
   .lap-visible {
     display: flex;
   }
+
   .phone-visible {
     display: none;
   }
+
   .main-container {
     // margin-top: 6.9vh;
     width: 85vw;
@@ -191,9 +207,11 @@ $wallet-view-bg: $muddy-gray;
   .lap-visible {
     display: none;
   }
+
   .phone-visible {
     display: flex;
   }
+
   .main-container {
     // margin-top: 41px;
     height: 100%;
@@ -201,6 +219,7 @@ $wallet-view-bg: $muddy-gray;
     overflow-y: auto;
     background-color: $dark-gray;
   }
+
   .main-container-wrapper {
     flex: 1;
     min-height: 0;
@@ -242,15 +261,19 @@ $wallet-view-bg: $muddy-gray;
   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;
   }
@@ -263,7 +286,7 @@ $wallet-view-bg: $muddy-gray;
   justify-content: center;
   align-items: center;
   flex: 1 0 auto;
-  background: #f7f7f7;
+  background: $dark-gray;
   width: 100%;
 }
 
@@ -282,4 +305,4 @@ $wallet-view-bg: $muddy-gray;
   justify-content: center;
   padding: 0 10px;
   background: white;
-}
\ 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 9737e717..235f551b 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -1,5 +1,6 @@
 $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;
@@ -11,6 +12,7 @@ $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;
@@ -19,48 +21,59 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     min-width: 0;
     max-width: 100%;
   }
+
   &__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: $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;
@@ -75,9 +88,11 @@ $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;
@@ -87,16 +102,19 @@ $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;
@@ -104,4 +122,4 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     line-height: 21px;
     text-align: center;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 3ff5979c..3b5e2411 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -4,11 +4,12 @@
 
 // Base Colors
 $white: #fff;
-$white-transparent: unquote('#ffffff88');
+$white-transparent: unquote("#ffffff88");
 $black: #000;
 $orange: #ffa500;
 $red: #f00;
 $gray: #808080;
+
 /*
   Colors
   http://chir.ag/projects/name-that-color
@@ -63,6 +64,7 @@ $mischka: #dddee9;
 $dexon-purple: #954A97;
 $dark-gray: #222222;
 $muddy-gray: #303030;
+
 /*
   Z-Indicies
  */
@@ -76,6 +78,7 @@ $main-container-z-index: 18;
 $send-card-z-index: 20;
 $sidebar-z-index: 26;
 $sidebar-overlay-z-index: 25;
+
 /*
   Z Indicies - Current
   app - 11
@@ -92,4 +95,4 @@ $sidebar-overlay-z-index: 25;
 $break-small: 575px;
 $break-midpoint: 780px;
 $break-large: 576px;
-$primary-font-type: Roboto;
\ No newline at end of file
+$primary-font-type: Roboto;