Dark mode: user preferenced currency eth logo (#14210)

app/images/eth.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.9 30L7.5 22.7 19.9 40l12.4-17.3zm.2-30L7.7 20.4l12.4 7.3 12.4-7.2z" fill="#38393a"/>
-</svg>

ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js

@@ -44,7 +44,7 @@ const ConfirmDetailRow = (props) => {
             type={PRIMARY}
             value={value}
             showEthLogo
-            ethLogoHeight="18"
+            ethLogoHeight={18}
             style={{ color: primaryValueTextColor }}
             hideLabel
           />

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js

@@ -6,7 +6,7 @@ import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCur
 
 export default function UserPreferencedCurrencyDisplay({
   'data-testid': dataTestId,
-  ethLogoHeight = 12,
+  ethLogoHeight = 14,
   ethNumberOfDecimals,
   fiatNumberOfDecimals,
   numberOfDecimals: propsNumberOfDecimals,
@@ -23,7 +23,13 @@ export default function UserPreferencedCurrencyDisplay({
     return (
       currency === ETH &&
       showEthLogo && (
-        <img src="./images/eth.svg" height={ethLogoHeight} alt="" />
+        <i
+          className="fab fa-ethereum"
+          style={{
+            color: 'var(--color-icon-default)',
+            fontSize: ethLogoHeight,
+          }}
+        />
       )
     );
   }, [currency, showEthLogo, ethLogoHeight]);
@@ -49,7 +55,7 @@ UserPreferencedCurrencyDisplay.propTypes = {
   hideTitle: PropTypes.bool,
   style: PropTypes.object,
   showEthLogo: PropTypes.bool,
-  ethLogoHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  ethLogoHeight: PropTypes.number,
   type: PropTypes.oneOf([PRIMARY, SECONDARY]),
   ethNumberOfDecimals: PropTypes.oneOfType([
     PropTypes.string,

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.stories.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { PRIMARY, SECONDARY, ETH } from '../../../helpers/constants/common';
+
+import UserPreferencedCurrencyDisplay from '.';
+
+export default {
+  title: 'Components/App/UserPreferencedCurrencyDisplay',
+  id: __filename,
+  argTypes: {
+    className: {
+      control: 'text',
+    },
+    'data-testid': {
+      control: 'text',
+    },
+    prefix: {
+      control: 'text',
+    },
+    value: {
+      control: 'text',
+    },
+    numberOfDecimals: {
+      control: 'number',
+    },
+    hideLabel: {
+      control: 'boolean',
+    },
+    hideTitle: {
+      control: 'boolean',
+    },
+    style: {
+      control: 'object',
+    },
+    showEthLogo: {
+      control: 'boolean',
+    },
+    ethLogoHeight: {
+      control: 'number',
+    },
+    type: {
+      control: 'select',
+      options: [PRIMARY, SECONDARY],
+    },
+    ethNumberOfDecimals: {
+      control: 'number',
+    },
+    fiatNumberOfDecimals: {
+      control: 'number',
+    },
+  },
+  args: {
+    type: ETH,
+  },
+};
+
+export const DefaultStory = (args) => (
+  <UserPreferencedCurrencyDisplay {...args} />
+);
+
+DefaultStory.storyName = 'Default';

ui/components/ui/currency-display/currency-display.component.js

@@ -35,7 +35,9 @@ export default function CurrencyDisplay({
       style={style}
       title={(!hideTitle && title) || null}
     >
+      <span className="currency-display-component__prefix">
         {prefixComponent}
+      </span>
       <span className="currency-display-component__text">
         {parts.prefix}
         {parts.value}

ui/components/ui/currency-display/index.scss

@@ -10,6 +10,10 @@
     text-overflow: ellipsis;
   }
 
+  &__prefix {
+    padding-right: 4px;
+  }
+
   &__suffix {
     padding-left: 4px;
   }

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -873,7 +873,7 @@ export default class ConfirmTransactionBase extends Component {
         value={hexTransactionAmount}
         type={PRIMARY}
         showEthLogo
-        ethLogoHeight="28"
+        ethLogoHeight={24}
         hideLabel
       />
     );