From 7f8dc260b5906eacdc93128b64603daecaf4cf10 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Mon, 28 Mar 2022 07:42:09 -0700
Subject: [PATCH] Dark mode: onboarding icons and colors (#14209)

---
 app/images/icons/red-triangle-exclaim.svg        |   3 ---
 app/images/icons/yellow-bell.svg                 |   3 ---
 app/images/twitter-icon.png                      | Bin 584 -> 0 bytes
 app/images/warning-icon.png                      | Bin 1757 -> 0 bytes
 .../onboarding-flow/create-password/index.scss   |   1 +
 .../onboarding-flow/import-srp/import-srp.js     |   2 +-
 ui/pages/onboarding-flow/import-srp/index.scss   |   1 +
 ui/pages/onboarding-flow/index.scss              |   4 ++--
 ui/pages/onboarding-flow/onboarding-flow.js      |   2 +-
 .../secure-your-wallet/index.scss                |   7 +++++++
 .../skip-srp-backup-popover.js                   |   2 +-
 11 files changed, 14 insertions(+), 11 deletions(-)
 delete mode 100644 app/images/icons/red-triangle-exclaim.svg
 delete mode 100644 app/images/icons/yellow-bell.svg
 delete mode 100644 app/images/twitter-icon.png
 delete mode 100644 app/images/warning-icon.png

diff --git a/app/images/icons/red-triangle-exclaim.svg b/app/images/icons/red-triangle-exclaim.svg
deleted file mode 100644
index 064908c78..000000000
--- a/app/images/icons/red-triangle-exclaim.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0L0 16H16L8 0ZM8 3.36842L13.4764 14.3158H2.52364L8 3.36842ZM7.27273 6.73684V10.1053H8.72727V6.73684H7.27273ZM7.27273 11.7895V13.4737H8.72727V11.7895" fill="#D73A49"/>
-</svg>
diff --git a/app/images/icons/yellow-bell.svg b/app/images/icons/yellow-bell.svg
deleted file mode 100644
index f40e00194..000000000
--- a/app/images/icons/yellow-bell.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.7059 12H3.29412V6.8C3.29412 4.8 4.94118 3.2 7 3.2C9.05882 3.2 10.7059 4.8 10.7059 6.8V12ZM12.3529 11.2V6.8C12.3529 4.344 10.5906 2.288 8.23529 1.744V1.2C8.23529 0.88174 8.10515 0.576516 7.87349 0.351472C7.64182 0.126428 7.32762 0 7 0C6.67238 0 6.35818 0.126428 6.12651 0.351472C5.89485 0.576516 5.76471 0.88174 5.76471 1.2V1.744C3.40118 2.288 1.64706 4.344 1.64706 6.8V11.2L0 12.8V13.6H14V12.8L12.3529 11.2ZM7 16C7.43683 16 7.85576 15.8314 8.16465 15.5314C8.47353 15.2313 8.64706 14.8243 8.64706 14.4H5.35294C5.35294 14.8243 5.52647 15.2313 5.83535 15.5314C6.14424 15.8314 6.56317 16 7 16Z" fill="#FFD33D"/>
-</svg>
diff --git a/app/images/twitter-icon.png b/app/images/twitter-icon.png
deleted file mode 100644
index a71ad381f97a8d67f86646755ff5515e96468d15..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 584
zcmV-O0=NB%P)<h;3K|Lk000e1NJLTq000^Q000^Y1^@s6sY*=F00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0o_SNK~#7F?UOrb
zR6!Jm|1*<Zl{70Uvey^*00kkHg_S5421HTT6-i?oU5j)!7KtF(8DvS8bm9x*CfbOC
zf?5Q$6eUf_gEV=tAzLN8o1Hm12_es!&EBL*u^(K9nKS2nGu$&kjT);E_Q0cT?i_LP
z1RrP^PT!1;A*$#>|K#<aMEKd4)c$cURx*VF5M5bYWX>q4PfXmh7?@|hH;(2u<|wya
zb)^QTp8G^aQ|Q_xSxKTcOZ-*FLxHKkx;4is0&ycV9;f=J|F&oIr#6O?eH;+ceRyED
z*Xr2(*;dlES#I+~M3>i3L+=>K2B!3@7^nsqJpm6&qd9#m{%`AgoolmZ{nU^-Ewbaw
za|>>jp|z;%0fSjopmeNh#I^1em0><eb>->FM)+XN^<JQPSIGU3ET=_s7?I)MzKB!Q
zeJ9>2r+bNrSW@p1MI<fCTIv4`8btMsXA(`Xqltt?Dt{B-8B~e2_DQ9<SCqLOj>`kQ
z$V9K?iaAt-J2S~6Z+9hH=3u^%m!pm{*uRhQqB{|GU<bA}a4I`_9;EL{@k=somP#>a
zB4ffbxAi2$FQ@|NOL^Eg6Nfe}a*?}I@vKNs5@<m}Gx80>*f&E%;rE{%R7Q;&`<5k6
WA*OVndXhi@0000<MNUMnLSTXeCHeUP

diff --git a/app/images/warning-icon.png b/app/images/warning-icon.png
deleted file mode 100644
index 06b4be3327b4deeccec396a254491a4a17bd154d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1757
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

diff --git a/ui/pages/onboarding-flow/create-password/index.scss b/ui/pages/onboarding-flow/create-password/index.scss
index 16ddcdfe1..c56853aad 100644
--- a/ui/pages/onboarding-flow/create-password/index.scss
+++ b/ui/pages/onboarding-flow/create-password/index.scss
@@ -29,6 +29,7 @@
 
     &--password-button {
       background-color: transparent;
+      color: var(--color-text-default);
     }
 
     &--submit-button {
diff --git a/ui/pages/onboarding-flow/import-srp/import-srp.js b/ui/pages/onboarding-flow/import-srp/import-srp.js
index b3dc7bbad..58683b1e1 100644
--- a/ui/pages/onboarding-flow/import-srp/import-srp.js
+++ b/ui/pages/onboarding-flow/import-srp/import-srp.js
@@ -76,7 +76,7 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {
             <button onClick={() => setRevealSRP(!revealSRP)}>
               <i
                 className={`far fa-eye${revealSRP ? '-slash' : ''}`}
-                color="grey"
+                style={{ color: 'var(--color-icon-default' }}
               />
             </button>
             <textarea
diff --git a/ui/pages/onboarding-flow/import-srp/index.scss b/ui/pages/onboarding-flow/import-srp/index.scss
index dda3bcd73..bd42524ec 100644
--- a/ui/pages/onboarding-flow/import-srp/index.scss
+++ b/ui/pages/onboarding-flow/import-srp/index.scss
@@ -48,6 +48,7 @@
     border: 1px solid var(--color-border-muted);
     border-radius: 10px;
     background-color: var(--color-background-default);
+    color: var(--color-text-default);
     padding: 12px 24px 12px 12px;
     resize: none;
     width: 100%;
diff --git a/ui/pages/onboarding-flow/index.scss b/ui/pages/onboarding-flow/index.scss
index 8f4e41832..63b92cc34 100644
--- a/ui/pages/onboarding-flow/index.scss
+++ b/ui/pages/onboarding-flow/index.scss
@@ -28,8 +28,8 @@
     margin-bottom: 40px;
     vertical-align: middle;
 
-    img {
-      margin-left: 5px;
+    &__icon {
+      margin-left: 4px;
     }
   }
 }
diff --git a/ui/pages/onboarding-flow/onboarding-flow.js b/ui/pages/onboarding-flow/onboarding-flow.js
index 5b93f7f4f..8a3be4e28 100644
--- a/ui/pages/onboarding-flow/onboarding-flow.js
+++ b/ui/pages/onboarding-flow/onboarding-flow.js
@@ -178,7 +178,7 @@ export default function OnboardingFlow() {
           target="_blank"
         >
           <span>{t('followUsOnTwitter')}</span>
-          <img src="images/twitter-icon.png" />
+          <i className="fab fa-twitter onboarding-flow__twitter-button__icon" />
         </Button>
       )}
     </div>
diff --git a/ui/pages/onboarding-flow/secure-your-wallet/index.scss b/ui/pages/onboarding-flow/secure-your-wallet/index.scss
index 04cedf941..5fa4f5530 100644
--- a/ui/pages/onboarding-flow/secure-your-wallet/index.scss
+++ b/ui/pages/onboarding-flow/secure-your-wallet/index.scss
@@ -35,6 +35,13 @@
 .skip-srp-backup-popover {
   width: 365px;
 
+  &__icon {
+    color: var(--color-error-default);
+    display: block;
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+
   &__checkbox {
     margin: 8px 12px 0 0;
   }
diff --git a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
index 8bba66085..1557d5388 100644
--- a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
+++ b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
@@ -50,7 +50,7 @@ export default function SkipSRPBackup({ handleClose }) {
         justifyContent={JUSTIFY_CONTENT.CENTER}
         margin={4}
       >
-        <img src="./images/warning-icon.png" />
+        <i className="fa fa-exclamation-triangle fa-2x skip-srp-backup-popover__icon" />
         <Typography variant={TYPOGRAPHY.h3} fontWeight={FONT_WEIGHT.BOLD}>
           {t('skipAccountSecurity')}
         </Typography>