Send screen style updates. (#3234)

4 files changed, 52 insertions, 9 deletions

diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index 9459629b6..e043c1966 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -4,7 +4,7 @@
   border: 1px solid $alto;
   border-radius: 4px;
   background-color: $white;
-  color: $dusty-gray;
+  color: $scorpion;
   font-family: Roboto;
   font-size: 16px;
   font-weight: 300;
@@ -52,5 +52,6 @@
 
   &__currency-symbol {
     margin-top: 1px;
+    color: $scorpion;
   }
 }
\ 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 fd73275e0..bb17e53cd 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -557,6 +557,25 @@
 
   &__form-field {
     flex: 1 1 auto;
+
+    .currency-display {
+      color: $tundora;
+
+      &__currency-symbol {
+        color: $tundora;
+      }
+
+      &__converted-value,
+      &__converted-currency {
+        color: $tundora;
+      }
+    }
+
+    .account-list-item {
+      &__account-secondary-balance {
+        color: $tundora;
+      }
+    }
   }
 
   &__form-label {
@@ -565,6 +584,7 @@
     font-size: 16px;
     line-height: 22px;
     width: 88px;
+    font-weight: 400;
   }
 
   &__from-dropdown {
@@ -620,7 +640,7 @@
       border: 1px solid $alto;
       border-radius: 4px;
       background-color: $white;
-      color: $dusty-gray;
+      color: $tundora;
       padding: 10px;
       font-family: Roboto;
       font-size: 16px;
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 75f823320..9b3d7475b 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -82,8 +82,20 @@ input.large-input {
     display: flex;
     flex-flow: column;
     border-bottom: 1px solid $geyser;
-    padding: 1.6rem 1rem;
+    padding: 1.15rem 0.95rem;
     flex: 0 0 auto;
+    background: $alabaster;
+    position: relative;
+  }
+
+  &__header-close::after {
+    content: '\00D7';
+    font-size: 40px;
+    color: $tundora;
+    position: absolute;
+    top: 21.5px;
+    right: 28.5px;
+    cursor: pointer;
   }
 
   &__footer {
@@ -93,6 +105,11 @@ input.large-input {
     border-top: 1px solid $geyser;
     padding: 1.6rem;
     flex: 0 0 auto;
+
+    .btn-clear,
+    .btn-cancel {
+      font-size: 1rem;
+    }
   }
 
   &__footer-button {
@@ -101,6 +118,7 @@ input.large-input {
     font-size: 1rem;
     text-transform: uppercase;
     margin-right: 1rem;
+    border-radius: 2px;
 
     &:last-of-type {
       margin-right: 0;
@@ -108,7 +126,7 @@ input.large-input {
   }
 
   &__title {
-    color: $tundora;
+    color: $black;
     font-family: Roboto;
     font-size: 2rem;
     font-weight: 500;
@@ -119,6 +137,7 @@ input.large-input {
     padding-top: .5rem;
     line-height: initial;
     font-size: .9rem;
+    color: $gray;
   }
 
   &__tabs {
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index d4e15dfa8..1d67150e3 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -179,7 +179,7 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
 }
 
 SendTransactionScreen.prototype.renderHeader = function () {
-  const { selectedToken } = this.props
+  const { selectedToken, clearSend, goHome } = this.props
   const tokenText = selectedToken ? 'tokens' : 'ETH'
 
   return h('div.page-container__header', [
@@ -188,10 +188,13 @@ SendTransactionScreen.prototype.renderHeader = function () {
 
     h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`),
 
-    h(
-      'div.page-container__subtitle',
-      'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'
-    ),
+    h('div.page-container__header-close', {
+      onClick: () => {
+        clearSend()
+        goHome()
+      },
+    }),
+
   ])
 }