From 64d35458b05bfad27c27db15dd9f4335debb986a Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Sat, 19 Mar 2022 01:43:33 +0100
Subject: [PATCH] Dark Mode : Onboarding flow (#14020)

---
 .../create-new-vault/create-new-vault.scss    |  2 +-
 ui/components/app/srp-input/srp-input.js      |  3 +-
 .../app/step-progress-bar/index.scss          | 34 +++++++++----------
 ui/components/ui/check-box/index.scss         | 10 +++---
 .../first-time-flow/end-of-flow/index.scss    |  2 +-
 ui/pages/first-time-flow/index.scss           | 18 +++++-----
 .../metametrics-opt-in/index.scss             | 12 +++----
 .../confirm-seed-phrase/index.scss            |  6 ++--
 .../first-time-flow/seed-phrase/index.scss    |  2 +-
 .../seed-phrase/reveal-seed-phrase/index.scss |  6 ++--
 .../first-time-flow/select-action/index.scss  | 10 +++---
 ui/pages/first-time-flow/welcome/index.scss   |  4 +--
 .../create-password/index.scss                | 10 +++---
 .../onboarding-flow/import-srp/index.scss     | 12 +++----
 ui/pages/onboarding-flow/index.scss           |  4 +--
 .../onboarding-app-header/index.scss          |  2 +-
 .../onboarding-flow/pin-extension/index.scss  |  4 +--
 .../recovery-phrase/index.scss                | 10 +++---
 .../secure-your-wallet/index.scss             |  2 +-
 ui/pages/onboarding-flow/welcome/index.scss   |  9 ++---
 20 files changed, 82 insertions(+), 80 deletions(-)

diff --git a/ui/components/app/create-new-vault/create-new-vault.scss b/ui/components/app/create-new-vault/create-new-vault.scss
index 305861f39..e24ac7337 100644
--- a/ui/components/app/create-new-vault/create-new-vault.scss
+++ b/ui/components/app/create-new-vault/create-new-vault.scss
@@ -20,7 +20,7 @@
   }
 
   &__terms-link {
-    color: var(--primary-1);
+    color: var(--color-primary-default);
   }
 
   &__submit-button#{&}__submit-button {
diff --git a/ui/components/app/srp-input/srp-input.js b/ui/components/app/srp-input/srp-input.js
index 0192ba1b8..9ef216f7f 100644
--- a/ui/components/app/srp-input/srp-input.js
+++ b/ui/components/app/srp-input/srp-input.js
@@ -7,6 +7,7 @@ import { clearClipboard } from '../../../helpers/utils/util';
 import CheckBox from '../../ui/check-box';
 import Typography from '../../ui/typography';
 import { COLORS } from '../../../helpers/constants/design-system';
+import Textarea from '../../ui/textarea';
 import { parseSecretRecoveryPhrase } from './parse-secret-recovery-phrase';
 
 const { isValidMnemonic } = ethers.utils;
@@ -50,7 +51,7 @@ export default function SrpInput({ onChange }) {
         <Typography>{t('secretRecoveryPhrase')}</Typography>
       </label>
       {showSrp ? (
-        <textarea
+        <Textarea
           id="import-srp__srp"
           className="import-srp__srp-shown"
           onChange={onSrpChange}
diff --git a/ui/components/app/step-progress-bar/index.scss b/ui/components/app/step-progress-bar/index.scss
index 3e5b12645..7d37e2fae 100644
--- a/ui/components/app/step-progress-bar/index.scss
+++ b/ui/components/app/step-progress-bar/index.scss
@@ -17,7 +17,7 @@ ul.two-steps {
   font-size: 12px;
   position: relative;
   text-align: center;
-  color: #7d7d7d;
+  color: var(--color-text-alternative);
   z-index: 2;
 }
 
@@ -27,12 +27,12 @@ ul.two-steps {
   content: counter(step);
   counter-increment: step;
   line-height: 30px;
-  border: 2px solid #d6d9dc;
+  border: 2px solid var(--color-border-muted);
   display: block;
   text-align: center;
   margin: 0 auto 10px auto;
   border-radius: 50%;
-  background-color: white;
+  background-color: var(--color-background-default);
   z-index: -1;
 }
 
@@ -41,7 +41,7 @@ ul.two-steps {
   height: 2px;
   content: '';
   position: absolute;
-  background-color: #d6d9dc;
+  background-color: var(--color-background-alternative);
   top: 15px;
   right: 77px;
   z-index: -1;
@@ -51,7 +51,7 @@ ul.two-steps {
     height: 2px;
     content: '';
     position: absolute;
-    background-color: #d6d9dc;
+    background-color: var(--color-background-alternative);
     right: 77px;
     z-index: -1;
   }
@@ -66,40 +66,40 @@ ul.two-steps {
 }
 
 .progressbar li.active {
-  color: var(--primary-blue);
+  color: var(--color-primary-default);
 
   [dir='rtl'] & {
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
   }
 }
 
 .progressbar li.active::before {
-  border-color: var(--primary-blue);
+  border-color: var(--color-primary-default);
   z-index: 1;
 
   [dir='rtl'] & {
-    border-color: var(--primary-blue);
+    border-color: var(--color-primary-default);
     z-index: 1;
   }
 }
 
 .progressbar li.complete + li::after {
-  background-color: var(--primary-blue);
+  background-color: var(--color-primary-default);
   z-index: -1;
 
   [dir='rtl'] & {
-    background-color: var(--primary-blue);
+    background-color: var(--color-primary-default);
     z-index: -1;
   }
 }
 
 .progressbar li.complete::before {
-  background-color: var(--primary-blue);
-  color: var(--ui-white);
+  background-color: var(--color-primary-default);
+  color: var(--color-primary-inverse);
 
   [dir='rtl'] & {
-    background-color: var(--primary-blue);
-    color: var(--ui-white);
+    background-color: var(--color-primary-default);
+    color: var(--color-primary-inverse);
   }
 }
 
@@ -108,7 +108,7 @@ ul.two-steps {
   height: 2px;
   content: '';
   position: absolute;
-  background-color: #d6d9dc;
+  background-color: var(--color-background-alternative);
   top: 15px;
   right: 75px;
   z-index: -1;
@@ -118,7 +118,7 @@ ul.two-steps {
     height: 2px;
     content: '';
     position: absolute;
-    background-color: #d6d9dc;
+    background-color: var(--color-background-alternative);
     right: 75px;
     z-index: -1;
   }
diff --git a/ui/components/ui/check-box/index.scss b/ui/components/ui/check-box/index.scss
index 067dfb53e..a366d9136 100644
--- a/ui/components/ui/check-box/index.scss
+++ b/ui/components/ui/check-box/index.scss
@@ -1,8 +1,8 @@
 .check-box {
   -webkit-appearance: none;
   appearance: none;
-  background: var(--white);
-  color: var(--Grey-100);
+  background: var(--color-background-default);
+  color: var(--color-icon-muted);
   width: 18px;
   height: 18px;
   font-size: 21px;
@@ -12,12 +12,12 @@
 
   &__checked,
   &__indeterminate {
-    color: var(--primary-blue);
-    border-color: var(--primary-blue);
+    color: var(--color-primary-default);
+    border-color: var(--color-primary-default);
   }
 
   &:disabled {
-    color: var(--Grey-100);
+    color: var(--color-icon-muted);
     cursor: not-allowed;
   }
 }
diff --git a/ui/pages/first-time-flow/end-of-flow/index.scss b/ui/pages/first-time-flow/end-of-flow/index.scss
index d8788048b..94aa971ef 100644
--- a/ui/pages/first-time-flow/end-of-flow/index.scss
+++ b/ui/pages/first-time-flow/end-of-flow/index.scss
@@ -1,5 +1,5 @@
 .end-of-flow {
-  color: black;
+  color: var(--color-text-default);
   font-style: normal;
 
   .app-header__logo-container {
diff --git a/ui/pages/first-time-flow/index.scss b/ui/pages/first-time-flow/index.scss
index 93c52fbde..4ed5ae444 100644
--- a/ui/pages/first-time-flow/index.scss
+++ b/ui/pages/first-time-flow/index.scss
@@ -7,7 +7,7 @@
 
 .first-time-flow {
   width: 100%;
-  background-color: var(--white);
+  background-color: var(--color-background-default);
   display: flex;
   justify-content: center;
 
@@ -43,7 +43,7 @@
     @include H1;
 
     margin-bottom: 24px;
-    color: black;
+    color: var(--color-text-default);
   }
 
   &__input {
@@ -52,7 +52,7 @@
 
   &__text-block {
     margin-bottom: 24px;
-    color: black;
+    color: var(--color-text-default);
 
     @media screen and (max-width: $break-small) {
       @include H6;
@@ -74,8 +74,8 @@
   }
 
   &__checkbox {
-    background: #fff;
-    border: 1px solid #cdcdcd;
+    background: var(--color-background-default);
+    border: 1px solid var(--color-border-muted);
     box-sizing: border-box;
     height: 34px;
     width: 34px;
@@ -84,23 +84,23 @@
     align-items: center;
 
     &:hover {
-      border: 1.5px solid #2f9ae0;
+      border: 1.5px solid var(--color-primary-alternative);
     }
 
     .fa-check {
-      color: #2f9ae0;
+      color: var(--color-primary-default);
     }
   }
 
   &__checkbox-label {
     @include H4;
 
-    color: #939090;
+    color: var(--color-text-alternative);
     margin-left: 18px;
   }
 
   &__link-text {
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
   }
 }
 
diff --git a/ui/pages/first-time-flow/metametrics-opt-in/index.scss b/ui/pages/first-time-flow/metametrics-opt-in/index.scss
index 69695129b..de905adae 100644
--- a/ui/pages/first-time-flow/metametrics-opt-in/index.scss
+++ b/ui/pages/first-time-flow/metametrics-opt-in/index.scss
@@ -3,7 +3,7 @@
   width: 100%;
 
   a {
-    color: #2f9ae0bf;
+    color: var(--color-primary-default);
   }
 
   &__main {
@@ -11,7 +11,7 @@
     flex-direction: column;
     margin-left: 26.26%;
     margin-right: 28%;
-    color: black;
+    color: var(--color-text-default);
 
     @media screen and (max-width: $break-small) {
       justify-content: center;
@@ -35,7 +35,7 @@
     margin-top: 25px;
 
     .fa-bar-chart {
-      color: #c4c4c4;
+      color: var(--color-icon-default);
     }
   }
 
@@ -61,12 +61,12 @@
 
     .fa-check {
       margin-right: 12px;
-      color: #1acc56;
+      color: var(--color-success-default);
     }
 
     .fa-times {
       margin-right: 12px;
-      color: #d0021b;
+      color: var(--color-error-default);
     }
   }
 
@@ -93,7 +93,7 @@
 
   &__bottom-text {
     margin-top: 10px;
-    color: #9a9a9a;
+    color: var(--color-text-alternative);
   }
 
   &__content {
diff --git a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
index 96e1b7ee7..32922fa11 100644
--- a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
+++ b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
@@ -26,7 +26,7 @@
     }
 
     &--selected {
-      color: var(--white);
+      color: var(--color-overlay-inverse);
     }
 
     &--dragging {
@@ -71,9 +71,9 @@
     flex-flow: row wrap;
     min-height: 161px;
     max-width: $break-small;
-    border: 1px solid #cdcdcd;
+    border: 1px solid var(--color-border-muted);
     border-radius: 6px;
-    background-color: var(--white);
+    background-color: var(--color-background-default);
     margin: 24px 0 36px;
     padding: 12px;
 
diff --git a/ui/pages/first-time-flow/seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/index.scss
index 15f801632..4bb2b8255 100644
--- a/ui/pages/first-time-flow/seed-phrase/index.scss
+++ b/ui/pages/first-time-flow/seed-phrase/index.scss
@@ -33,7 +33,7 @@
     }
 
     .first-time-flow__text-block {
-      color: #5a5a5a;
+      color: var(--color-text-default);
     }
   }
 }
diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
index 35b6f9163..d79b3bf3d 100644
--- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
+++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
@@ -11,9 +11,9 @@
     position: relative;
     display: flex;
     justify-content: center;
-    border: 1px solid #cdcdcd;
+    border: 1px solid var(--color-border-default);
     border-radius: 6px;
-    background-color: var(--white);
+    background-color: var(--color-background-default);
     padding: 18px;
     margin-top: 36px;
     max-width: 350px;
@@ -36,7 +36,7 @@
     bottom: 0;
     height: 100%;
     width: 100%;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: var(--color-overlay-default);
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
diff --git a/ui/pages/first-time-flow/select-action/index.scss b/ui/pages/first-time-flow/select-action/index.scss
index 8c8fe939a..2690889fb 100644
--- a/ui/pages/first-time-flow/select-action/index.scss
+++ b/ui/pages/first-time-flow/select-action/index.scss
@@ -15,7 +15,7 @@
 
     text-align: center;
     margin-top: 65px;
-    color: black;
+    color: var(--color-text-default);
   }
 
   &__select-buttons {
@@ -32,7 +32,7 @@
     justify-content: space-evenly;
     width: 388px;
     height: 278px;
-    border: 1px solid #d8d8d8;
+    border: 1px solid var(--color-border-muted);
     box-sizing: border-box;
     border-radius: 10px;
     padding: 8px;
@@ -44,7 +44,7 @@
   }
 
   &__button-symbol {
-    color: #c4c4c4;
+    color: var(--color-icon-default);
     margin-top: 41px;
   }
 
@@ -59,7 +59,7 @@
   &__button-text-big {
     @include H4;
 
-    color: #000;
+    color: var(--color-text-default);
     margin-top: 12px;
     text-align: center;
   }
@@ -67,7 +67,7 @@
   &__button-text-small {
     @include H6;
 
-    color: #7a7a7b;
+    color: var(--color-text-alternative);
     margin-top: 10px;
     text-align: center;
   }
diff --git a/ui/pages/first-time-flow/welcome/index.scss b/ui/pages/first-time-flow/welcome/index.scss
index 185572491..69f0f0a9c 100644
--- a/ui/pages/first-time-flow/welcome/index.scss
+++ b/ui/pages/first-time-flow/welcome/index.scss
@@ -5,7 +5,7 @@
   align-items: center;
   max-width: 442px;
   padding: 0 18px;
-  color: black;
+  color: var(--color-text-default);
 
   &__wrapper {
     display: flex;
@@ -35,7 +35,7 @@
     }
 
     a {
-      color: var(--primary-1);
+      color: var(--color-primary-default);
     }
 
     @media screen and (max-width: $break-small) {
diff --git a/ui/pages/onboarding-flow/create-password/index.scss b/ui/pages/onboarding-flow/create-password/index.scss
index b97a2a66e..16ddcdfe1 100644
--- a/ui/pages/onboarding-flow/create-password/index.scss
+++ b/ui/pages/onboarding-flow/create-password/index.scss
@@ -1,14 +1,14 @@
 .create-password {
   &__weak {
-    color: var(--error-1);
+    color: var(--color-error-default);
   }
 
   &__average {
-    color: var(--secondary-3);;
+    color: var(--color-warning-alternative);
   }
 
   &__strong {
-    color: var(--success-3);
+    color: var(--color-success-alternative);
   }
 
   &__wrapper {
@@ -21,7 +21,7 @@
   }
 
   &__link-text {
-    color: var(--primary-1);
+    color: var(--color-primary-default);
   }
 
   &__form {
@@ -37,7 +37,7 @@
 
     &--checkmark {
       i {
-        color: var(--success-1);
+        color: var(--color-success-default);
       }
     }
 
diff --git a/ui/pages/onboarding-flow/import-srp/index.scss b/ui/pages/onboarding-flow/import-srp/index.scss
index 5804089f9..dda3bcd73 100644
--- a/ui/pages/onboarding-flow/import-srp/index.scss
+++ b/ui/pages/onboarding-flow/import-srp/index.scss
@@ -10,11 +10,11 @@
     max-width: 500px;
 
     a {
-      color: var(--Blue-500);
+      color: var(--color-primary-default);
 
       &:hover {
         cursor: pointer;
-        color: var(--Blue-300);
+        color: var(--color-primary-default);
       }
     }
   }
@@ -45,9 +45,9 @@
   &__textarea {
     @include Paragraph;
 
-    border: 1px solid #cdcdcd;
+    border: 1px solid var(--color-border-muted);
     border-radius: 10px;
-    background-color: #fff;
+    background-color: var(--color-background-default);
     padding: 12px 24px 12px 12px;
     resize: none;
     width: 100%;
@@ -59,13 +59,13 @@
     }
 
     &--error {
-      border: 1px solid var(--error-1);
+      border: 1px solid var(--color-error-default);
     }
 
     &__error-message {
       @include H7;
 
-      color: var(--error-1);
+      color: var(--color-error-default);
     }
   }
 
diff --git a/ui/pages/onboarding-flow/index.scss b/ui/pages/onboarding-flow/index.scss
index 4e97f5ac5..8f4e41832 100644
--- a/ui/pages/onboarding-flow/index.scss
+++ b/ui/pages/onboarding-flow/index.scss
@@ -11,7 +11,7 @@
 
 .onboarding-flow {
   width: 100%;
-  background-color: var(--white);
+  background-color: var(--color-background-default);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -20,7 +20,7 @@
   &__wrapper {
     margin-top: 40px;
     padding: 32px;
-    border: 1px solid var(--Grey-100);
+    border: 1px solid var(--color-border-muted);
     border-radius: 20px;
   }
 
diff --git a/ui/pages/onboarding-flow/onboarding-app-header/index.scss b/ui/pages/onboarding-flow/onboarding-app-header/index.scss
index 1c8c92740..567d8bfe1 100644
--- a/ui/pages/onboarding-flow/onboarding-app-header/index.scss
+++ b/ui/pages/onboarding-flow/onboarding-app-header/index.scss
@@ -1,6 +1,6 @@
 .onboarding-app-header {
   align-items: center;
-  background: var(--white);
+  background: var(--color-background-default);
   position: relative;
   z-index: $header-z-index;
   display: flex;
diff --git a/ui/pages/onboarding-flow/pin-extension/index.scss b/ui/pages/onboarding-flow/pin-extension/index.scss
index 3bc6bd174..0ff5f9c0f 100644
--- a/ui/pages/onboarding-flow/pin-extension/index.scss
+++ b/ui/pages/onboarding-flow/pin-extension/index.scss
@@ -2,11 +2,11 @@
   max-width: 800px;
 
   .control-dots .dot {
-    background: var(--ui-2);
+    background: var(--color-icon-muted);
     box-shadow: none;
 
     &.selected {
-      background: var(--ui-4);
+      background: var(--color-icon-default);
     }
   }
 
diff --git a/ui/pages/onboarding-flow/recovery-phrase/index.scss b/ui/pages/onboarding-flow/recovery-phrase/index.scss
index 3168e6f72..d55ec5e82 100644
--- a/ui/pages/onboarding-flow/recovery-phrase/index.scss
+++ b/ui/pages/onboarding-flow/recovery-phrase/index.scss
@@ -32,14 +32,14 @@
     bottom: 0;
     height: 100%;
     width: 100%;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: var(--color-overlay-alternative);
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
     justify-content: center;
     padding: 8px 0 18px;
     border-radius: 4px;
-    color: var(--ui-white);
+    color: var(--color-overlay-inverse);
 
     &--text {
       margin-top: 32px;
@@ -86,7 +86,7 @@
         background-color: transparent;
         border: none;
         width: 32%;
-        color: var(--primary-blue);
+        color: var(--color-primary-default);
         cursor: pointer;
         margin-bottom: 24px;
         padding-left: 0;
@@ -105,7 +105,7 @@
         }
 
         &:active {
-          color: var(--ui-black);
+          color: var(--color-text-default);
           background-color: transparent;
           border: none;
           transform: scale(0.97);
@@ -122,7 +122,7 @@
 
     &--with-input {
       width: 120px;
-      box-shadow: 0 3px 4px -3px var(--Grey-800);
+      box-shadow: 0 3px 4px -3px rgba(0, 0, 0, 0.15);
       border-width: 2px;
       border-radius: 13px;
       height: 32px;
diff --git a/ui/pages/onboarding-flow/secure-your-wallet/index.scss b/ui/pages/onboarding-flow/secure-your-wallet/index.scss
index cfaebae19..04cedf941 100644
--- a/ui/pages/onboarding-flow/secure-your-wallet/index.scss
+++ b/ui/pages/onboarding-flow/secure-your-wallet/index.scss
@@ -26,7 +26,7 @@
   }
 
   &__highlighted {
-    background-color: var(--primary-2);
+    background-color: var(--color-primary-muted);
     padding: 12px;
     border-radius: 10px;
   }
diff --git a/ui/pages/onboarding-flow/welcome/index.scss b/ui/pages/onboarding-flow/welcome/index.scss
index eecb1f30a..603b44a1e 100644
--- a/ui/pages/onboarding-flow/welcome/index.scss
+++ b/ui/pages/onboarding-flow/welcome/index.scss
@@ -4,25 +4,26 @@
   width: 600px;
 
   .control-dots .dot {
-    background: var(--ui-2);
+    background: var(--color-icon-muted);
     box-shadow: none;
 
     &.selected {
-      background: var(--ui-4);
+      background: var(--color-icon-default);
     }
   }
 
   /* next and previous arrow colors */
   .carousel.carousel-slider .control-arrow {
     opacity: 1;
+    color: var(--color-icon-default);
   }
 
   .carousel .control-next.control-arrow::before {
-    border-left-color: var(--ui-3);
+    border-left-color: var(--color-icon-default);
   }
 
   .carousel .control-prev.control-arrow::before {
-    border-right-color: var(--ui-3);
+    border-right-color: var(--color-icon-default);
   }
 
   .carousel.carousel-slider .control-arrow:hover {