Dark mode: Updating currency input icon (#14152)

app/images/icons/swap.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

ui/components/app/currency-input/currency-input.js

@@ -160,7 +160,9 @@ export default function CurrencyInput({
       onChange={handleChange}
       value={decimalValue}
       actionComponent={
-        <div className="currency-input__swap-component" onClick={swap} />
+        <button className="currency-input__swap-component" onClick={swap}>
+          <i className="fa fa-retweet fa-lg" />
+        </button>
       }
     >
       {renderConversionComponent()}

ui/components/app/currency-input/currency-input.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import CurrencyInput from '.';
+
+export default {
+  title: 'Components/App/CurrencyInput',
+  id: __filename,
+  argTypes: {
+    hexValue: {
+      control: 'text',
+    },
+    featureSecondary: {
+      control: 'boolean',
+    },
+    onChange: {
+      action: 'onChange',
+    },
+    onPreferenceToggle: {
+      action: 'onPreferenceToggle',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <CurrencyInput {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/app/currency-input/index.scss

@@ -7,20 +7,12 @@
 
   &__swap-component {
     flex: 0 0 auto;
-    height: 24px;
+    display: flex;
-    width: 24px;
+    align-items: center;
-    background-image: url("images/icons/swap.svg");
+    justify-content: center;
-    background-size: contain;
+    color: var(--color-icon-default);
-    background-repeat: no-repeat;
     cursor: pointer;
-    opacity: 0.4;
+    background: none;
-
+    border: none;
-    &:hover {
-      opacity: 0.3;
-    }
-
-    &:active {
-      opacity: 0.5;
-    }
   }
 }