From e850bcbc4af51dc08993a0f40da50998f9b99606 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Fri, 25 Mar 2022 07:30:22 -0700
Subject: [PATCH] Dark mode: advanded-gas-fee-input-subtext icons (#14197)

---
 app/images/down-arrow.svg                     |  3 --
 app/images/level-arrow.svg                    |  3 --
 app/images/up-arrow.svg                       |  1 -
 .../advanced-gas-fee-input-subtext.js         | 28 ++++++++++---------
 .../advanced-gas-fee-input-subtext.test.js    |  6 ++--
 .../advanced-gas-fee-input-subtext/index.scss |  2 +-
 6 files changed, 19 insertions(+), 24 deletions(-)
 delete mode 100644 app/images/down-arrow.svg
 delete mode 100644 app/images/level-arrow.svg
 delete mode 100644 app/images/up-arrow.svg

diff --git a/app/images/down-arrow.svg b/app/images/down-arrow.svg
deleted file mode 100644
index 9d367dfc9..000000000
--- a/app/images/down-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.66555 3.36981C8.38934 3.36981 8.19599 3.59078 8.18218 3.85319L8.26504 7.11251L4.30138 3.14884C4.10803 2.95549 3.83181 2.95549 3.63846 3.14884L3.19652 3.59078C3.01698 3.77032 3.00317 4.06035 3.19652 4.2537L7.16019 8.21736L3.92849 8.1345C3.65227 8.1345 3.44511 8.34166 3.4313 8.60406V9.21173C3.44511 9.47413 3.65227 9.68129 3.90087 9.68129H9.28703C9.53562 9.68129 9.74278 9.47413 9.74278 9.22554V3.83938C9.74278 3.59078 9.53562 3.38362 9.27322 3.36981H8.66555Z" fill="#D73A49"/>
-</svg>
diff --git a/app/images/level-arrow.svg b/app/images/level-arrow.svg
deleted file mode 100644
index 73101e560..000000000
--- a/app/images/level-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.12476 0.974243C3.92944 1.16956 3.94897 1.46252 4.12476 1.65784L6.48804 3.90393L0.882568 3.90393C0.609131 3.90393 0.413818 4.09924 0.413818 4.37268L0.413818 4.99768C0.413818 5.25159 0.609131 5.46643 0.882568 5.46643L6.48804 5.46643L4.14429 7.69299C3.94897 7.88831 3.94897 8.18127 4.12476 8.37659L4.55444 8.80627C4.74976 8.98206 5.04272 8.98206 5.21851 8.80627L9.0271 4.99768C9.20288 4.8219 9.20288 4.52893 9.0271 4.35315L5.21851 0.544555C5.04272 0.368774 4.74976 0.368774 4.55444 0.544555L4.12476 0.974243Z" fill="#BBC0C5"/>
-</svg>
diff --git a/app/images/up-arrow.svg b/app/images/up-arrow.svg
deleted file mode 100644
index 76449fe0d..000000000
--- a/app/images/up-arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.022 4.82c0 .275.22.469.483.482l3.26-.082L3.8 9.183a.451.451 0 0 0 0 .663l.442.442c.18.18.47.193.663 0l3.963-3.964-.082 3.232a.49.49 0 0 0 .47.497h.607a.484.484 0 0 0 .47-.47V4.199a.46.46 0 0 0-.456-.456H4.49a.484.484 0 0 0-.47.47v.607Z" fill="#219E37"/></svg>
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js
index 51739f704..ddc0fd1ad 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 import { isNullish } from '../../../../helpers/utils/util';
 import { formatGasFeeOrFeeRange } from '../../../../helpers/utils/gas';
@@ -11,21 +12,21 @@ function determineTrendInfo(trend, t) {
   switch (trend) {
     case 'up':
       return {
-        className: 'advanced-gas-fee-input-subtext__up',
-        imageSrc: '/images/up-arrow.svg',
-        imageAlt: t('upArrow'),
+        className: 'fa-arrow-up advanced-gas-fee-input-subtext__up',
+        color: 'var(--color-success-default)',
+        title: t('upArrow'),
       };
     case 'down':
       return {
-        className: 'advanced-gas-fee-input-subtext__down',
-        imageSrc: '/images/down-arrow.svg',
-        imageAlt: t('downArrow'),
+        className: 'fa-arrow-down advanced-gas-fee-input-subtext__down',
+        color: 'var(--color-error-default)',
+        title: t('downArrow'),
       };
     case 'level':
       return {
-        className: 'advanced-gas-fee-input-subtext__level',
-        imageSrc: '/images/level-arrow.svg',
-        imageAlt: t('levelArrow'),
+        className: 'fa-arrow-right advanced-gas-fee-input-subtext__level',
+        color: 'var(--color-icon-default)',
+        title: t('levelArrow'),
       };
     default:
       return null;
@@ -52,10 +53,11 @@ const AdvancedGasFeeInputSubtext = ({ latest, historical, trend }) => {
             {formatGasFeeOrFeeRange(latest)}
           </span>
           {trendInfo === null ? null : (
-            <span className={trendInfo.className}>
-              <img
-                src={trendInfo.imageSrc}
-                alt={trendInfo.imageAlt}
+            <span className="advanced-gas-fee-input-subtext__icon">
+              <i
+                className={classnames('fa', trendInfo.className)}
+                style={{ color: trendInfo.color }}
+                title={trendInfo.title}
                 data-testid="fee-arrow"
               />
             </span>
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js
index 5d779b669..fd9f3994d 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js
@@ -45,7 +45,7 @@ describe('AdvancedGasFeeInputSubtext', () => {
         },
       });
 
-      expect(screen.getByAltText('up arrow')).toBeInTheDocument();
+      expect(screen.getByTitle('up arrow')).toBeInTheDocument();
     });
 
     it('should render a fee trend arrow image if given "down" as the trend', () => {
@@ -56,7 +56,7 @@ describe('AdvancedGasFeeInputSubtext', () => {
         },
       });
 
-      expect(screen.getByAltText('down arrow')).toBeInTheDocument();
+      expect(screen.getByTitle('down arrow')).toBeInTheDocument();
     });
 
     it('should render a fee trend arrow image if given "level" as the trend', () => {
@@ -67,7 +67,7 @@ describe('AdvancedGasFeeInputSubtext', () => {
         },
       });
 
-      expect(screen.getByAltText('level arrow')).toBeInTheDocument();
+      expect(screen.getByTitle('level arrow')).toBeInTheDocument();
     });
 
     it('should not render a fee trend arrow image if given an invalid trend', () => {
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss
index 40240d88e..28ef01527 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss
@@ -21,7 +21,7 @@
     padding-top: 2px;
   }
 
-  img {
+  &__icon {
     margin-right: 8px;
   }
 }