From 59a5566958157800bc04e1a710961554c8c81665 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 21 Mar 2022 08:55:01 -0500
Subject: [PATCH] Dark Mode: Send flow inputs (#14006)

---
 ui/components/ui/unit-input/index.scss |  19 +--
 ui/css/itcss/components/send.scss      | 184 ++++++++++++-------------
 2 files changed, 94 insertions(+), 109 deletions(-)

diff --git a/ui/components/ui/unit-input/index.scss b/ui/components/ui/unit-input/index.scss
index e1f01eb03..a6b29a267 100644
--- a/ui/components/ui/unit-input/index.scss
+++ b/ui/components/ui/unit-input/index.scss
@@ -5,10 +5,10 @@
   flex-flow: row nowrap;
   align-items: center;
   min-height: 54px;
-  border: 1px solid #dedede;
+  border: 1px solid var(--color-border-default);
   border-radius: 4px;
-  background-color: #fff;
-  color: #4d4d4d;
+  background-color: var(--color-background-default);
+  color: var(--color-text-default);
   padding: 8px 10px;
   position: relative;
 
@@ -37,16 +37,13 @@
   &__input {
     @include Paragraph;
 
-    color: #4d4d4d;
+    color: var(--color-text-default);
+    background: transparent;
     border: none;
     max-width: 15ch;
     overflow: hidden;
     text-overflow: ellipsis;
     height: 16px;
-
-    &__disabled {
-      background-color: rgb(222, 222, 222);
-    }
   }
 
   &__input-container {
@@ -62,10 +59,6 @@
   }
 
   &--error {
-    border-color: var(--red);
-  }
-
-  &__disabled {
-    background-color: #f2f3f4;
+    border-color: var(--color-error-default);
   }
 }
diff --git a/ui/css/itcss/components/send.scss b/ui/css/itcss/components/send.scss
index 90b4743a0..41f7677eb 100644
--- a/ui/css/itcss/components/send.scss
+++ b/ui/css/itcss/components/send.scss
@@ -14,7 +14,7 @@
 }
 
 .send-screen-card {
-  background-color: #fff;
+  background-color: var(--color-background-default);
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
   padding: 46px 40.5px 26px;
   position: relative;
@@ -48,13 +48,13 @@
   border-radius: 50%;
   width: 70px;
   height: 70px;
-  border: 1px solid var(--alto);
+  border: 1px solid var(--color-border-muted);
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
   position: absolute;
   top: -35px;
   z-index: 25;
   padding: 4px;
-  background-color: var(--white);
+  background-color: var(--color-background-default);
 
   @media screen and (max-width: $break-small) {
     position: relative;
@@ -73,7 +73,7 @@
   .large-input {
     @include Paragraph;
 
-    border: 1px solid var(--dusty-gray);
+    border: 1px solid var(--color-border-default);
     border-radius: 4px;
     margin: 4px 0 20px;
   }
@@ -89,7 +89,7 @@
   &--error {
     input,
     .send-screen-gas-input {
-      border-color: var(--red) !important;
+      border-color: var(--color-error-default) !important;
     }
 
     .send-screen-input-wrapper__error-message {
@@ -99,7 +99,7 @@
       position: absolute;
       bottom: 4px;
       left: 8px;
-      color: var(--red);
+      color: var(--color-error-default);
     }
   }
 
@@ -110,7 +110,7 @@
     position: absolute;
     bottom: 4px;
     left: 8px;
-    color: var(--red);
+    color: var(--color-error-default);
   }
 }
 
@@ -124,7 +124,7 @@
   width: 100%;
   height: 41px;
   border-radius: 3px;
-  background-color: #f3f3f3;
+  background-color: var(--color-background-default);
   border-width: 0;
   border-style: none;
   display: flex;
@@ -132,7 +132,7 @@
   align-items: center;
   padding-left: 10px;
   padding-right: 12px;
-  color: var(--scorpion);
+  color: var(--color-text-alternative);
 }
 
 .send-screen-amount-labels {
@@ -149,11 +149,11 @@
 
 .currency-toggle {
   &__item {
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
     cursor: pointer;
 
     &--selected {
-      color: var(--black);
+      color: var(--color-text-default);
       cursor: default;
     }
   }
@@ -162,7 +162,7 @@
 .send-screen-gas-input-customize {
   @include H7;
 
-  color: var(--primary-blue);
+  color: var(--color-primary-default);
   cursor: pointer;
 }
 
@@ -182,7 +182,7 @@
   bottom: 50px;
   width: 237px;
   height: 307px;
-  background-color: var(--white);
+  background-color: var(--color-background-default);
   opacity: 1;
   box-shadow: var(--alto) 0 0 5px;
   z-index: 1050;
@@ -195,7 +195,7 @@
   height: 25px;
   width: 25px;
   z-index: 1200;
-  background: var(--white);
+  background: var(--color-background-default);
   position: absolute;
   transform: rotate(45deg);
   left: 107px;
@@ -225,7 +225,7 @@
 .gas-tooltip-label {
   @include Paragraph;
 
-  color: var(--tundora);
+  color: var(--color-text-alternative);
 }
 
 .gas-tooltip-header {
@@ -237,7 +237,7 @@
 }
 
 .gas-tooltip-input-label i {
-  color: var(--silver-chalice);
+  color: var(--color-icon-muted);
   margin-left: 6px;
 }
 
@@ -246,8 +246,8 @@
 
   width: 178px;
   height: 28px;
-  border: 1px solid var(--alto);
-  color: var(--nile-blue);
+  border: 1px solid var(--color-border-muted);
+  color: var(--color-text-default);
   padding-left: 8px;
 }
 
@@ -261,7 +261,7 @@
   position: absolute;
   top: 4px;
   right: 26px;
-  color: var(--silver-chalice);
+  color: var(--color-text-muted);
 }
 
 .gas-tooltip-input-arrows {
@@ -272,11 +272,11 @@
   right: 4px;
   width: 17px;
   height: 28px;
-  border: 1px solid #dadada;
+  border: 1px solid var(--color-icon-muted);
   border-left: 0;
   display: flex;
   flex-direction: column;
-  color: #9b9b9b;
+  color: var(--color-text-muted);
   padding: 1px 4px;
   cursor: pointer;
 }
@@ -296,7 +296,7 @@
   &__title {
     @include H4;
 
-    color: var(--scorpion);
+    color: var(--color-text-alternative);
   }
 
   &__subtitle {
@@ -325,7 +325,7 @@
   &__content {
     width: 498px;
     height: 605px;
-    background-color: #fff;
+    background-color: var(--color-background-default);
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     padding: 46px 40.5px 26px;
     position: relative;
@@ -357,7 +357,7 @@
   &__title {
     @include H4;
 
-    color: var(--scorpion);
+    color: var(--color-text-alternative);
   }
 
   &__description,
@@ -405,7 +405,7 @@
   &__container {
     width: 380px;
     border-radius: 8px;
-    background-color: var(--white);
+    background-color: var(--color-background-default);
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     display: flex;
     flex-flow: column nowrap;
@@ -434,16 +434,16 @@
     border-radius: 50%;
     width: 48px;
     height: 48px;
-    border: 1px solid var(--alto);
+    border: 1px solid var(--color-border-muted);
     z-index: 25;
     padding: 4px;
-    background-color: var(--white);
+    background-color: var(--color-background-default);
   }
 
   &__send-arrow-icon {
     @include H4;
 
-    color: #f28930;
+    color: var(--color-secondary-default);
     transform: rotate(-45deg);
     position: absolute;
     top: -2px;
@@ -451,7 +451,7 @@
   }
 
   &__arrow-background {
-    background-color: var(--white);
+    background-color: var(--color-background-default);
     height: 14px;
     width: 14px;
     position: absolute;
@@ -468,7 +468,7 @@
   &__header {
     height: 88px;
     width: 380px;
-    background-color: var(--athens-grey);
+    background-color: var(--color-background-alternative);
     position: relative;
     display: flex;
     justify-content: center;
@@ -483,7 +483,7 @@
   &__header-tip {
     height: 25px;
     width: 25px;
-    background: var(--athens-grey);
+    background-color: var(--color-background-alternative);
     position: absolute;
     transform: rotate(45deg);
     left: 178px;
@@ -500,7 +500,7 @@
   &__title {
     @include H3;
 
-    color: var(--scorpion);
+    color: var(--color-text-alternative);
     text-align: center;
     margin-top: 25px;
   }
@@ -508,7 +508,7 @@
   &__copy {
     @include H6;
 
-    color: var(--gray);
+    color: var(--color-text-alternative);
     text-align: center;
     margin-top: 10px;
     width: 287px;
@@ -518,7 +518,7 @@
     @include H7;
 
     left: 8px;
-    color: var(--red);
+    color: var(--color-error-default);
   }
 
   &__error-amount {
@@ -529,11 +529,11 @@
     @include H7;
 
     left: 8px;
-    color: var(--orange);
+    color: var(--color-secondary-default);
   }
 
   &__error-border {
-    color: var(--red);
+    color: var(--color-error-default);
   }
 
   &__form {
@@ -572,21 +572,21 @@
     min-width: 0;
 
     .currency-display {
-      color: var(--tundora);
+      color: var(--color-text-alternative);
 
       &__currency-symbol {
-        color: var(--tundora);
+        color: var(--color-text-alternative);
       }
 
       &__converted-value,
       &__converted-currency {
-        color: var(--tundora);
+        color: var(--color-text-alternative);
       }
     }
 
     .account-list-item {
       &__account-secondary-balance {
-        color: var(--tundora);
+        color: var(--color-text-alternative);
       }
     }
   }
@@ -594,7 +594,7 @@
   &__form-label {
     @include Paragraph;
 
-    color: var(--scorpion);
+    color: var(--color-text-alternative);
     width: 95px;
     flex: 0 0 auto;
   }
@@ -604,10 +604,10 @@
     @include H7;
 
     width: 100%;
-    border: 1px solid var(--alto);
+    border: 1px solid var(--color-border-muted);
     border-radius: 4px;
-    background-color: var(--white);
-    color: var(--tundora);
+    background-color: var(--color-background-default);
+    color: var(--color-text-default);
     position: relative;
 
     &__close-area {
@@ -624,9 +624,9 @@
       position: absolute;
       height: 220px;
       width: 100%;
-      border: 1px solid var(--geyser);
+      border: 1px solid var(--color-border-muted);
       border-radius: 4px;
-      background-color: var(--white);
+      background-color: var(--color-background-default);
       box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11);
       margin-top: 11px;
       margin-left: -1px;
@@ -648,14 +648,10 @@
       flex-flow: row nowrap;
       align-items: center;
       padding: 8px 8px;
-
-      &:hover {
-        background-color: rgba($alto, 0.2);
-      }
     }
 
     &__caret {
-      color: var(--silver);
+      color: var(--color-text-muted);
       padding: 0 10px;
     }
 
@@ -665,15 +661,11 @@
       align-items: center;
       padding: 0 8px;
       cursor: pointer;
-
-      &:hover {
-        background-color: rgba($alto, 0.2);
-      }
     }
 
     &__asset-icon {
       .identicon {
-        border: 1px solid var(--alto);
+        border: 1px solid var(--color-border-muted);
       }
     }
 
@@ -720,9 +712,9 @@
       position: absolute;
       height: 220px;
       width: 100%;
-      border: 1px solid var(--geyser);
+      border: 1px solid var(--color-border-muted);
       border-radius: 4px;
-      background-color: var(--white);
+      background-color: var(--color-background-default);
       box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11);
       top: 65px;
       left: 0;
@@ -737,7 +729,7 @@
     }
 
     &__input-wrapper {
-      border: 1px solid var(--alto);
+      border: 1px solid var(--color-border-muted);
       border-radius: 4px;
       height: 100%;
 
@@ -750,7 +742,7 @@
         height: 100%;
 
         &:hover {
-          background-color: var(--white);
+          background-color: var(--color-background-default);
         }
       }
     }
@@ -764,8 +756,8 @@
       width: 100%;
       border: none;
       border-radius: 4px;
-      background-color: var(--white);
-      color: var(--tundora);
+      background-color: var(--color-background-default);
+      color: var(--color-text-alternative);
       padding: 10px;
     }
   }
@@ -779,10 +771,10 @@
       position: relative;
       height: 54px;
       width: 100%;
-      border: 1px solid var(--alto);
+      border: 1px solid var(--color-border-muted);
       border-radius: 4px;
-      background-color: var(--white);
-      color: var(--tundora);
+      background-color: var(--color-background-default);
+      color: var(--color-text-alternative);
       padding: 10px;
     }
   }
@@ -801,7 +793,7 @@
       width: 56px;
       height: 20px;
       position: absolute;
-      border: 1px solid #b0d7f2;
+      border: 1px solid var(--color-primary-default);
       border-radius: 100px;
       cursor: pointer;
       top: 0;
@@ -811,19 +803,19 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #2f9ae0;
-      background: #fff;
+      color: var(--color-primary-default);
+      background: var(--color-background-default);
 
       &__disabled {
-        color: #b0d7f2;
+        opacity: 0.5;
         cursor: auto;
       }
     }
 
     input:checked + &__button {
-      background-color: var(--primary-blue);
-      border: 1px solid var(--primary-blue);
-      color: #fff;
+      background-color: var(--color-primary-default);
+      border: 1px solid var(--color-primary-default);
+      color: var(--color-primary-inverse);
     }
   }
 
@@ -852,9 +844,9 @@
     justify-content: center;
     height: 24px;
     width: 24px;
-    border: 1px solid var(--primary-blue);
+    border: 1px solid var(--color-primary-default);
     border-radius: 4px;
-    background-color: var(--white);
+    background-color: var(--color-background-default);
     position: absolute;
     right: 15px;
     top: 14px;
@@ -862,7 +854,7 @@
   }
 
   &__sliders-icon {
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
   }
 
   &__memo-text-area {
@@ -877,8 +869,8 @@
     display: flex;
     justify-content: space-evenly;
     align-items: center;
-    border-top: 1px solid var(--alto);
-    background: var(--white);
+    border-top: 1px solid var(--color-border-muted);
+    background: var(--color-background-default);
     padding: 0 12px;
     flex-shrink: 0;
   }
@@ -890,9 +882,9 @@
   }
 
   &__customize-gas {
-    border: 1px solid #d8d8d8;
+    border: 1px solid var(--color-border-muted);
     border-radius: 4px;
-    background-color: #fff;
+    background-color: var(--color-background-default);
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
     display: flex;
     flex-flow: column;
@@ -906,7 +898,7 @@
       @include H3;
 
       height: 52px;
-      border-bottom: 1px solid var(--alto);
+      border-bottom: 1px solid var(--color-border-muted);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -923,7 +915,7 @@
     &__close::after {
       content: '\00D7';
       font-size: 1.8em;
-      color: var(--dusty-gray);
+      color: var(--color-icon-default);
       cursor: pointer;
       margin-right: 19.25px;
     }
@@ -948,7 +940,7 @@
       @include H3;
 
       height: 75px;
-      border-top: 1px solid var(--alto);
+      border-top: 1px solid var(--color-border-muted);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -979,7 +971,7 @@
     &__revert {
       @include Paragraph;
 
-      color: var(--silver-chalice);
+      color: var(--color-text-muted);
       margin-left: 21.25px;
     }
 
@@ -1002,7 +994,7 @@
       position: absolute;
       top: -18px;
       right: 0;
-      color: var(--red);
+      color: var(--color-error-default);
       width: 100%;
       text-align: center;
     }
@@ -1023,7 +1015,7 @@
       @include H4;
 
       height: 26px;
-      color: var(--tundora);
+      color: var(--color-text-alternative);
       margin-top: 17px;
     }
 
@@ -1032,7 +1024,7 @@
 
       height: 38px;
       width: 314px;
-      color: var(--tundora);
+      color: var(--color-text-alternative);
       margin-top: 17px;
     }
 
@@ -1043,8 +1035,8 @@
     .customize-gas-input {
       height: 54px;
       width: 315px;
-      border: 1px solid var(--geyser);
-      background-color: var(--white);
+      border: 1px solid var(--color-border-muted);
+      background-color: var(--color-background-default);
       padding-left: 15px;
     }
 
@@ -1053,8 +1045,8 @@
 
       width: 32px;
       height: 54px;
-      border-left: 1px solid #dadada;
-      color: var(--tundora);
+      border-left: 1px solid var(--color-border-muted);
+      color: var(--color-text-alternative);
       right: 0;
       padding: 0;
       display: flex;
@@ -1088,7 +1080,7 @@
 
   display: flex;
   justify-content: flex-end;
-  color: #2f9ae0;
+  color: var(--color-primary-default);
   cursor: pointer;
   margin-top: 5px;
 }
@@ -1101,9 +1093,9 @@
   justify-content: center;
   height: 24px;
   width: 24px;
-  border: 1px solid var(--primary-blue);
+  border: 1px solid var(--color-primary-default);
   border-radius: 4px;
-  background-color: var(--white);
+  background-color: var(--color-background-default);
   position: absolute;
   right: 15px;
   top: 14px;
@@ -1118,14 +1110,14 @@
   justify-content: center;
   height: 24px;
   border-radius: 4px;
-  background-color: #fff;
+  background-color: var(--color-background-default);
   position: absolute;
   right: 12px;
   top: 14px;
   cursor: pointer;
-  color: #2f9ae0;
+  color: var(--color-primary-default);
 }
 
 .sliders-icon {
-  color: var(--primary-blue);
+  color: var(--color-primary-default);
 }