1 files changed, 126 insertions, 30 deletions

diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 9feef1b3..f3f90f0c 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -3,10 +3,12 @@
   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;
   }
@@ -14,7 +16,7 @@
 
 .send-screen-card {
   background-color: #fff;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
   padding: 46px 40.5px 26px;
   position: relative; // top: -26px;
   align-items: center;
@@ -22,6 +24,7 @@
   flex-flow: column nowrap;
   width: 498px;
   flex: 1 0 auto;
+
   @media screen and (max-width: $break-small) {
     top: 0;
     width: 100%;
@@ -46,12 +49,13 @@
   width: 70px;
   height: 70px;
   border: 1px solid $alto;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2);
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
   position: absolute;
   top: -35px;
   z-index: 25;
   padding: 4px;
   background-color: $white;
+
   @media screen and (max-width: $break-small) {
     position: relative;
     top: 0;
@@ -61,9 +65,11 @@
 .send-screen-input-wrapper {
   width: 95%;
   position: relative;
+
   .fa-bolt {
     padding-right: 4px;
   }
+
   .large-input {
     border: 1px solid $dusty-gray;
     border-radius: 4px;
@@ -72,17 +78,21 @@
     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;
@@ -93,6 +103,7 @@
       color: $red;
     }
   }
+
   .send-screen-input-wrapper__error-message {
     display: block;
     position: absolute;
@@ -138,8 +149,9 @@
 
 .currency-toggle {
   &__item {
-    color: $curious-blue;
+    color: $dexon-purple;
     cursor: pointer;
+
     &--selected {
       color: $black;
       cursor: default;
@@ -148,7 +160,7 @@
 }
 
 .send-screen-gas-input-customize {
-  color: $curious-blue;
+  color: $dexon-purple;
   font-size: 12px;
   cursor: pointer;
 }
@@ -269,6 +281,7 @@
     display: inline-block;
     margin-right: 4px;
   }
+
   &__symbol {
     display: inline-block;
   }
@@ -280,16 +293,19 @@
     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;
@@ -301,17 +317,19 @@
   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);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     padding: 46px 40.5px 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%;
@@ -319,21 +337,25 @@
       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 {
@@ -342,22 +364,27 @@
     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;
     }
@@ -376,13 +403,14 @@
     width: 380px;
     border-radius: 8px;
     background-color: $dark-gray;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     display: flex;
     flex-flow: column nowrap;
     z-index: 25;
     align-items: center;
     font-family: Roboto;
     position: relative;
+
     @media screen and (max-width: $break-small) {
       width: 100%;
       top: 0;
@@ -390,13 +418,16 @@
       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;
@@ -406,14 +437,16 @@
     padding: 4px;
     background-color: $white;
   }
+
   &__send-arrow-icon {
-    color: #f28930;
+    color: #954A97;
     transform: rotate(-45deg);
     position: absolute;
     top: -2px;
     left: 0;
     font-size: 1.12em;
   }
+
   &__arrow-background {
     background-color: $white;
     height: 14px;
@@ -423,10 +456,12 @@
     left: 199px;
     border-radius: 50%;
     z-index: 100;
+
     @media screen and (max-width: $break-small) {
       top: 36px;
     }
   }
+
   &__header {
     height: 88px;
     width: 380px;
@@ -435,11 +470,13 @@
     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;
@@ -448,6 +485,7 @@
     transform: rotate(45deg);
     left: 178px;
     top: 75px;
+
     @media screen and (max-width: $break-small) {
       top: 46px;
       left: 0;
@@ -455,6 +493,7 @@
       margin: 0 auto;
     }
   }
+
   &__title {
     color: $scorpion;
     font-size: 22px;
@@ -462,6 +501,7 @@
     text-align: center;
     margin-top: 25px;
   }
+
   &__copy {
     color: $gray;
     font-size: 14px;
@@ -470,22 +510,27 @@
     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%;
@@ -493,6 +538,7 @@
     flex-flow: column;
     align-items: center;
   }
+
   &__form-row {
     margin: 14.5px 18px 0px;
     position: relative;
@@ -501,26 +547,32 @@
     flex: 1 0 auto;
     justify-content: space-between;
   }
+
   &__form-field {
     flex: 1 1 auto;
+
     .currency-display {
-      color: $tundora;
+      color: $dim-gray;
+
       &__currency-symbol {
-        color: $tundora;
+        color: $dim-gray;
       }
+
       &__converted-value,
       &__converted-currency {
-        color: $tundora;
+        color: $dim-gray;
       }
     }
+
     .account-list-item {
       &__account-secondary-balance {
-        color: $tundora;
+        color: $dim-gray;
       }
     }
   }
+
   &__form-label {
-    color: $scorpion;
+    color: $white;
     font-family: Roboto;
     font-size: 16px;
     line-height: 22px;
@@ -528,17 +580,19 @@
     font-weight: 400;
     flex: 0 0 auto;
   }
+
   &__from-dropdown {
     height: 73px;
     width: 100%;
-    border: 1px solid $alto;
+    border: 1px solid $geyser;
     border-radius: 4px;
     background-color: $dark-gray;
     font-family: Roboto;
     line-height: 16px;
     font-size: 12px;
-    color: $tundora;
+    color: $white;
     position: relative;
+
     &__close-area {
       position: fixed;
       top: 0;
@@ -547,6 +601,7 @@
       width: 100%;
       height: 100%;
     }
+
     &__list {
       z-index: 1050;
       position: absolute;
@@ -554,21 +609,24 @@
       width: 100%;
       border: 1px solid $geyser;
       border-radius: 4px;
-      background-color: $white;
-      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11);
+      background-color: $dark-gray;
+      box-shadow: 0 3px 6px 0 rgba(0, 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;
@@ -578,13 +636,16 @@
       padding: 8px 5px 5px;
       border-radius: 4px;
     }
+
     &__qr-code:hover {
-      background: #f1f1f1;
+      background: $geyser;
     }
+
     &__input.with-qr {
       padding-right: 65px;
     }
   }
+
   &__to-autocomplete,
   &__memo-text-area,
   &__hex-data {
@@ -593,27 +654,30 @@
       position: relative;
       height: 54px;
       width: 100%;
-      border: 1px solid $alto;
+      border: 1px solid $geyser;
       border-radius: 4px;
-      background-color: $white;
-      color: $tundora;
+      background-color: $dark-gray;
+      color: $white;
       padding: 10px;
       font-family: Roboto;
       font-size: 16px;
       line-height: 21px;
     }
   }
+
   &__amount-max {
-    color: $curious-blue;
+    color: $dexon-purple;
     font-family: Roboto;
     font-size: 12px;
     left: 8px;
     border: none;
     cursor: pointer;
   }
+
   &__gas-fee-display {
     width: 100%;
     position: relative;
+
     .currency-display--message {
       padding: 8px 38px 8px 10px;
       display: flex;
@@ -621,57 +685,65 @@
     }
 
   }
+
   &__sliders-icon-container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 24px;
     width: 24px;
-    border: 1px solid $curious-blue;
+    border: 1px solid $dexon-purple;
     border-radius: 4px;
-    background-color: $white;
+    background-color: $dark-gray;
     position: absolute;
     right: 15px;
     top: 14px;
     cursor: pointer;
     font-size: 1em;
   }
+
   &__sliders-icon {
-    color: $curious-blue;
+    color: $dexon-purple;
   }
+
   &__memo-text-area {
     &__input {
       padding: 6px 10px;
     }
   }
+
   &__footer {
     height: 92px;
     width: 100%;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
-    border-top: 1px solid $alto;
+    border-top: 1px solid $geyser;
     background: $white;
     padding: 0 12px;
     flex-shrink: 0;
   }
+
   &__next-btn,
   &__cancel-btn {
     width: 163px;
     margin: 0 4px;
   }
+
   &__customize-gas {
-    border: 1px solid #D8D8D8;
+    border: 1px solid $geyser;
     border-radius: 4px;
-    background-color: #FFFFFF;
+    background-color: $dark-gray;
     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;
@@ -679,13 +751,16 @@
       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;
@@ -694,19 +769,23 @@
       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;
@@ -715,15 +794,18 @@
       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,
@@ -734,21 +816,25 @@
       padding: 0 3px;
       cursor: pointer;
     }
+
     &__revert {
       color: $silver-chalice;
       font-size: 16px;
       margin-left: 21.25px;
     }
+
     &__cancel,
     &__save,
     &__save__error {
       width: 85.74px;
       min-width: initial;
     }
+
     &__save__error {
       opacity: 0.5;
       cursor: auto;
     }
+
     &__error-message {
       display: block;
       position: absolute;
@@ -760,16 +846,19 @@
       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;
@@ -778,6 +867,7 @@
       line-height: 26px;
       margin-top: 17px;
     }
+
     &__copy {
       height: 38px;
       width: 314px;
@@ -787,9 +877,11 @@
       line-height: 19px;
       margin-top: 17px;
     }
+
     .customize-gas-input-wrapper {
       margin-top: 17px;
     }
+
     .customize-gas-input {
       height: 54px;
       width: 315px;
@@ -797,6 +889,7 @@
       background-color: $white;
       padding-left: 15px;
     }
+
     .gas-tooltip-input-arrows {
       width: 32px;
       height: 54px;
@@ -809,6 +902,7 @@
       justify-content: space-around;
       align-items: center;
     }
+
     .gas-tooltip-input-arrow-wrapper {
       align-items: center;
       align-self: stretch;
@@ -817,10 +911,12 @@
       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;
@@ -843,7 +939,7 @@
   justify-content: center;
   height: 24px;
   width: 24px;
-  border: 1px solid $curious-blue;
+  border: 1px solid $dexon-purple;
   border-radius: 4px;
   background-color: $dark-gray;
   position: absolute;
@@ -871,5 +967,5 @@
 }
 
 .sliders-icon {
-  color: $curious-blue;
-}
\ No newline at end of file
+  color: $dexon-purple;
+}