Dark mode: advanded-gas-fee-input-subtext icons (#14197)

app/images/down-arrow.svg

@@ -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>

app/images/level-arrow.svg

@@ -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>

app/images/up-arrow.svg

@@ -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>

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',
+        className: 'fa-arrow-up advanced-gas-fee-input-subtext__up',
-        imageSrc: '/images/up-arrow.svg',
+        color: 'var(--color-success-default)',
-        imageAlt: t('upArrow'),
+        title: t('upArrow'),
       };
     case 'down':
       return {
-        className: 'advanced-gas-fee-input-subtext__down',
+        className: 'fa-arrow-down advanced-gas-fee-input-subtext__down',
-        imageSrc: '/images/down-arrow.svg',
+        color: 'var(--color-error-default)',
-        imageAlt: t('downArrow'),
+        title: t('downArrow'),
       };
     case 'level':
       return {
-        className: 'advanced-gas-fee-input-subtext__level',
+        className: 'fa-arrow-right advanced-gas-fee-input-subtext__level',
-        imageSrc: '/images/level-arrow.svg',
+        color: 'var(--color-icon-default)',
-        imageAlt: t('levelArrow'),
+        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}>
+            <span className="advanced-gas-fee-input-subtext__icon">
-              <img
+              <i
-                src={trendInfo.imageSrc}
+                className={classnames('fa', trendInfo.className)}
-                alt={trendInfo.imageAlt}
+                style={{ color: trendInfo.color }}
+                title={trendInfo.title}
                 data-testid="fee-arrow"
               />
             </span>

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', () => {

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;
   }
 }