From 729e89015ff03ac74c4c382db778a940b5922923 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Fri, 25 Mar 2022 07:22:56 -0700
Subject: [PATCH] Dark mode: search icon (#14201)

---
 app/images/search-black.svg                   |  6 ---
 app/images/search.svg                         |  3 --
 .../token-search/token-search.component.js    |  5 ++-
 .../searchable-item-list.test.js.snap         |  7 +---
 .../list-item-search.component.js             |  5 ++-
 .../list-item-search.stories.js               | 37 +++++++++++++++++++
 6 files changed, 47 insertions(+), 16 deletions(-)
 delete mode 100644 app/images/search-black.svg
 delete mode 100644 app/images/search.svg
 create mode 100644 ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.stories.js

diff --git a/app/images/search-black.svg b/app/images/search-black.svg
deleted file mode 100644
index a6d230f4a..000000000
--- a/app/images/search-black.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg fill="none" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
-    <g clip-rule="evenodd" fill="#000" fill-rule="evenodd">
-        <path d="M9.167 3.333a5.833 5.833 0 100 11.667 5.833 5.833 0 000-11.667zm-7.5 5.834a7.5 7.5 0 1115 0 7.5 7.5 0 01-15 0z"/>
-        <path d="M13.286 13.286a.833.833 0 011.178 0l3.625 3.625a.833.833 0 11-1.178 1.178l-3.625-3.625a.833.833 0 010-1.178z"/>
-    </g>
-</svg>
diff --git a/app/images/search.svg b/app/images/search.svg
deleted file mode 100644
index de1f38e0c..000000000
--- a/app/images/search.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg height="17" width="17" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2.019 6.906c0-2.656 2.231-4.887 4.887-4.887s4.782 2.125 4.782 4.887a4.761 4.761 0 01-4.782 4.782c-2.762 0-4.887-2.126-4.887-4.782zm14.556 8.181l-4.25-4.25C13.175 9.67 13.6 8.288 13.6 6.8 13.706 3.081 10.625 0 6.906 0 3.081 0 0 3.081 0 6.906s3.081 6.907 6.906 6.907c1.275 0 2.55-.426 3.507-1.063l4.25 4.25z" fill="#9b9b9b"/>
-</svg>
diff --git a/ui/pages/import-token/token-search/token-search.component.js b/ui/pages/import-token/token-search/token-search.component.js
index 84085b46b..d5f88a826 100644
--- a/ui/pages/import-token/token-search/token-search.component.js
+++ b/ui/pages/import-token/token-search/token-search.component.js
@@ -59,7 +59,10 @@ export default class TokenSearch extends Component {
   renderAdornment() {
     return (
       <InputAdornment position="start" style={{ marginRight: '12px' }}>
-        <img src="images/search.svg" width="17" height="17" alt="" />
+        <i
+          className="fa fa-search"
+          style={{ color: 'var(--color-icon-muted)' }}
+        />
       </InputAdornment>
     );
   }
diff --git a/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap b/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
index 6f46e9f58..b0ea92102 100644
--- a/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
+++ b/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
@@ -11,11 +11,8 @@ exports[`SearchableItemList renders the component with initial props 1`] = `
       class="MuiInputAdornment-root MuiInputAdornment-positionStart"
       style="margin-right: 12px;"
     >
-      <img
-        alt=""
-        height="17"
-        src="images/search.svg"
-        width="17"
+      <i
+        class="fa fa-search fa-lg"
       />
     </div>
     <input
diff --git a/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js b/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js
index beca49fa6..afab74664 100644
--- a/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js
+++ b/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js
@@ -12,7 +12,10 @@ import { getCurrentChainId } from '../../../../selectors/selectors';
 
 const renderAdornment = () => (
   <InputAdornment position="start" style={{ marginRight: '12px' }}>
-    <img src="images/search.svg" width="17" height="17" alt="" />
+    <i
+      className="fa fa-search fa-lg"
+      style={{ color: 'var(--color-icon-muted)' }}
+    />
   </InputAdornment>
 );
 
diff --git a/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.stories.js b/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.stories.js
new file mode 100644
index 000000000..a9ff654e6
--- /dev/null
+++ b/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.stories.js
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import ListItemSearch from '.';
+
+export default {
+  title: 'Pages/Swaps/SearchableItemList/ListItemSearch',
+  id: __filename,
+  argTypes: {
+    onSearch: {
+      action: 'onSearch',
+    },
+    error: {
+      control: 'text',
+    },
+    listToSearch: {
+      control: 'select',
+    },
+    fuseSearchKeys: {
+      control: 'select',
+    },
+    searchPlaceholderText: {
+      control: 'text',
+    },
+    defaultToAll: {
+      control: 'boolean',
+    },
+    shouldSearchForImports: {
+      control: 'boolean',
+    },
+  },
+};
+
+export const DefaultStory = (args) => {
+  return <ListItemSearch {...args} />;
+};
+
+DefaultStory.storyName = 'Default';