From cf0bc662c1e59ea69a2484238c61b5eaccba70a3 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Fri, 25 Mar 2022 10:59:22 -0700
Subject: [PATCH] Dark mdoe: token search icon (#14213)

---
 app/images/tokensearch.svg                    |  6 ---
 ui/components/ui/icon/icon-token-search.js    | 42 +++++++++++++++++++
 ui/components/ui/icon/icon.stories.js         |  9 +++-
 .../token-list-placeholder.component.js       |  3 +-
 4 files changed, 51 insertions(+), 9 deletions(-)
 delete mode 100644 app/images/tokensearch.svg
 create mode 100644 ui/components/ui/icon/icon-token-search.js

diff --git a/app/images/tokensearch.svg b/app/images/tokensearch.svg
deleted file mode 100644
index 89a839602..000000000
--- a/app/images/tokensearch.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg height="58" width="65" xmlns="http://www.w3.org/2000/svg">
-    <g fill="#b8bac1" fill-rule="evenodd">
-        <path d="M28.532 2.806c13.907 0 25.66 6.423 25.723 14.037-.062 7.616-11.816 14.04-25.723 14.04-13.907 0-25.66-6.423-25.723-14.039C2.872 9.23 14.625 2.806 28.532 2.806m0 33.923c-12.789 0-23.75-5.431-25.48-12.228 4.657 5.497 14.204 9.188 25.48 9.188 11.277 0 20.823-3.69 25.481-9.188-1.73 6.797-12.692 12.228-25.48 12.228m0 17.54c-12.79 0-23.752-5.431-25.481-12.227 4.657 5.496 14.204 9.187 25.48 9.187 4.692 0 9.076-.645 12.94-1.789.666-.196 1.055-.872.94-1.558a3.942 3.942 0 01-.02-.112c-.128-.81-.953-1.312-1.739-1.075-3.635 1.097-7.77 1.728-12.12 1.728-12.79 0-23.752-5.432-25.481-12.228 4.657 5.497 14.204 9.187 25.48 9.187 4.833 0 9.341-.684 13.29-1.891.454-.14.785-.515.92-.971l.011-.039c.322-1.073-.68-2.075-1.749-1.74-3.72 1.163-7.981 1.835-12.472 1.835-12.789 0-23.75-5.432-25.48-12.228 4.657 5.497 14.204 9.187 25.48 9.187 11.277 0 20.823-3.69 25.481-9.187v3.201c0 .836.677 1.513 1.513 1.513s1.512-.672 1.513-1.506c.008-7.066.026-16.63.026-16.65 0-.021-.003-.041-.003-.062 0-.02.003-.04.003-.061h-.005C56.95 7.363 44.462 0 28.532 0 12.602 0 .113 7.362.005 16.783H0c0 .02.003.04.003.061 0 .02-.003.04-.003.061l.01 5.724H0c0 .086.008.17.01.255.004 1.712.008 3.64.01 5.592H0c0 .174.013.346.02.52.004 1.833.008 3.663.01 5.327H0c0 .263.014.524.032.783l.01 5.064H0c0 .32.018.639.046.954l.004.08c.015.166.044.33.067.496.013.086.02.173.035.258.031.184.073.366.115.548.023.104.042.21.068.314.023.088.052.174.077.262C2 48.713 8.128 53.316 16.578 55.57l.07.018c.287.076.573.15.864.222 3.398.843 7.12 1.31 11.02 1.31 3.9 0 7.623-.467 11.02-1.31a46.525 46.525 0 00.935-.24c1.09-.291 2.138-.623 3.145-.991.836-.306 1.136-1.317.633-2.053l-.065-.097a1.383 1.383 0 00-1.635-.52c-4.065 1.486-8.903 2.36-14.033 2.36"/>
-        <path d="M64.323 54.4l-3.87-3.87c1-1.373 1.5-2.995 1.5-4.742.148-5.222-5.053-9.374-10.488-7.551-2.852.956-4.983 3.503-5.404 6.482a8.107 8.107 0 008.028 9.306c1.498 0 2.996-.5 4.118-1.248l3.87 3.868a1.588 1.588 0 002.246-2.246m-15.975-8.487c0-3.12 2.622-5.74 5.741-5.74s5.616 2.496 5.616 5.74a5.593 5.593 0 01-5.616 5.617c-3.244 0-5.74-2.496-5.74-5.617"/>
-    </g>
-</svg>
diff --git a/ui/components/ui/icon/icon-token-search.js b/ui/components/ui/icon/icon-token-search.js
new file mode 100644
index 000000000..2b4151a72
--- /dev/null
+++ b/ui/components/ui/icon/icon-token-search.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const IconTokenSearch = ({
+  size = 24,
+  color = 'currentColor',
+  ariaLabel,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    fill={color}
+    className={className}
+    aria-label={ariaLabel}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+  >
+    <path d="m233 103c82 0 151 40 152 88-1 47-70 87-152 87-83 0-152-40-152-87 0-48 69-88 152-88z m0 212c-76 0-141-34-151-76 28 34 84 57 151 57 66 0 123-23 150-57-10 42-75 76-150 76z m0 110c-76 0-141-34-151-77 28 35 84 58 151 58 27 0 53-4 76-12 4-1 6-5 6-9 0 0-1-1-1-1 0-5-5-8-10-7-21 7-46 11-71 11-76 0-141-34-151-76 28 34 84 57 151 57 28 0 55-4 78-12 3-1 5-3 6-6l0 0c1-7-4-13-11-11-22 7-47 12-73 12-76 0-141-34-151-77 28 34 84 58 151 58 66 0 123-24 150-58l0 20c0 5 4 10 9 10 5 0 9-5 9-10 0-44 0-104 0-104 0 0 0 0 0 0 0 0 0-1 0-1l0 0c-1-59-74-105-168-105-95 0-168 46-169 105l0 0c0 0 0 1 0 1 0 0 0 0 0 0l0 36 0 0c0 0 0 1 0 1 0 11 0 23 0 35l0 0c0 1 0 3 0 4 0 11 0 23 0 33l0 0c0 2 0 3 0 5l0 32 0 0c0 2 0 4 0 5l0 1c0 1 1 2 1 3 0 1 0 1 0 2 0 1 0 2 1 3 0 1 0 1 0 2 0 1 0 1 0 2 10 35 46 64 96 78l0 0c2 0 4 1 5 1 21 6 43 9 66 9 23 0 45-3 65-9 2 0 3-1 5-1 7-2 13-4 19-6 5-2 6-9 4-13l-1-1c-1-1-2-3-4-3-2-1-4-1-6 0-24 9-52 15-82 15m211 0l-23-24c6-8 9-18 9-29 1-33-30-59-62-48-17 6-29 22-32 41-1 7 0 15 1 22 2 7 6 13 10 19 5 5 10 10 17 13 6 3 13 4 20 4 8 0 17-3 24-8l23 25c1 0 2 1 3 2 1 0 2 0 3 0 2 0 3 0 4 0 1-1 2-2 3-2 1-1 2-2 2-4 1-1 1-2 1-3 0-2 0-3-1-4 0-1-1-3-2-4z m-94-53c0-19 15-35 34-35 18 0 33 15 33 35 0 5-1 10-3 14-1 4-4 8-7 11-3 4-7 6-11 8-4 2-8 3-12 3-20 0-34-16-34-36z" />
+  </svg>
+);
+
+IconTokenSearch.propTypes = {
+  /**
+   * The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
+   */
+  size: PropTypes.number,
+  /**
+   * The color of the icon accepts design token css variables
+   */
+  color: PropTypes.string,
+  /**
+   * An additional className to assign the Icon
+   */
+  className: PropTypes.string,
+  /**
+   * The aria-label of the icon for accessibility purposes
+   */
+  ariaLabel: PropTypes.string,
+};
+
+export default IconTokenSearch;
diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js
index 3439bcafe..2a2d5b3b6 100644
--- a/ui/components/ui/icon/icon.stories.js
+++ b/ui/components/ui/icon/icon.stories.js
@@ -37,6 +37,7 @@ import IconSpeechBubbles from './icon-speech-bubbles';
 import IconPlus from './icon-plus';
 import IconEye from './icon-eye';
 import IconEyeSlash from './icon-eye-slash';
+import IconTokenSearch from './icon-token-search';
 
 const validColors = [
   'var(--color-icon-default)',
@@ -100,8 +101,11 @@ export const DefaultStory = (args) => (
       Icons
     </Typography>
     <Typography variant={TYPOGRAPHY.Paragraph} boxProps={{ marginBottom: 4 }}>
-      If you are creating a new icon please use the ./icon-caret-left.js as the
-      template
+      To ensure correct licensing we suggest you use an icon from the
+      @fortawesome/fontawesome-free: ^5.13.0 package. If there is no icon to
+      suit your needs and you need to create a new one. Ensure that it has the
+      correct licensing or has been created in house from scratch. Please use
+      the ./icon-caret-left.js as the template.
     </Typography>
     <Box marginBottom={4}>
       <div
@@ -121,6 +125,7 @@ export const DefaultStory = (args) => (
         <IconItem Component={<IconConnect {...args} />} />
         <IconItem Component={<IconSpeechBubbles {...args} />} />
         <IconItem Component={<IconCog {...args} />} />
+        <IconItem Component={<IconTokenSearch {...args} />} />
       </div>
     </Box>
     <Typography
diff --git a/ui/pages/import-token/token-list/token-list-placeholder/token-list-placeholder.component.js b/ui/pages/import-token/token-list/token-list-placeholder/token-list-placeholder.component.js
index 75cef89d1..3ec1f8b8e 100644
--- a/ui/pages/import-token/token-list/token-list-placeholder/token-list-placeholder.component.js
+++ b/ui/pages/import-token/token-list/token-list-placeholder/token-list-placeholder.component.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../../../components/ui/button';
+import IconSearch from '../../../../components/ui/icon/icon-token-search';
 
 export default class TokenListPlaceholder extends Component {
   static contextTypes = {
@@ -10,7 +11,7 @@ export default class TokenListPlaceholder extends Component {
   render() {
     return (
       <div className="token-list-placeholder">
-        <img src="images/tokensearch.svg" alt="" width="65" height="58" />
+        <IconSearch size="64" color="var(--color-icon-muted)" />
         <div className="token-list-placeholder__text">
           {this.context.t('addAcquiredTokens')}
         </div>