From 853002bc0b7370ae1983f4d9b0b344114cff7ea7 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Fri, 25 Mar 2022 07:33:53 -0700
Subject: [PATCH] Dark mode: add network times icon (#14202)

---
 app/images/times.svg                          |  3 -
 ui/components/app/add-network/add-network.js  |  7 +-
 .../app/add-network/add-network.stories.js    | 99 +++++++++++--------
 ui/components/app/add-network/index.scss      |  3 +-
 4 files changed, 60 insertions(+), 52 deletions(-)
 delete mode 100644 app/images/times.svg

diff --git a/app/images/times.svg b/app/images/times.svg
deleted file mode 100644
index 5aa9be3a5..000000000
--- a/app/images/times.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.42237 13.347C9.42237 13.5827 9.33819 13.7847 9.16983 13.9531C9.00147 14.1214 8.79944 14.2056 8.56374 14.2056L6.84648 14.2056C6.61078 14.2056 6.40875 14.1214 6.24039 13.9531C6.07203 13.7847 5.98785 13.5827 5.98785 13.347L5.98785 9.63466L2.27554 9.63466C2.03984 9.63466 1.83781 9.55048 1.66945 9.38212C1.50109 9.21377 1.41691 9.01174 1.41691 8.77603L1.41691 7.05877C1.41691 6.82307 1.50109 6.62104 1.66945 6.45268C1.83781 6.28432 2.03984 6.20014 2.27554 6.20014L5.98785 6.20014V2.48783C5.98785 2.25213 6.07203 2.0501 6.24039 1.88174C6.40875 1.71338 6.61078 1.6292 6.84648 1.6292H8.56374C8.79944 1.6292 9.00147 1.71338 9.16983 1.88174C9.33819 2.0501 9.42237 2.25213 9.42237 2.48783L9.42237 6.20014H13.1347C13.3704 6.20014 13.5724 6.28432 13.7408 6.45268C13.9091 6.62104 13.9933 6.82307 13.9933 7.05877V8.77603C13.9933 9.01173 13.9091 9.21377 13.7408 9.38212C13.5724 9.55048 13.3704 9.63466 13.1347 9.63466H9.42237L9.42237 13.347Z" fill="#6A737D"/>
-</svg>
diff --git a/ui/components/app/add-network/add-network.js b/ui/components/app/add-network/add-network.js
index 0bc911fed..2e81abaa0 100644
--- a/ui/components/app/add-network/add-network.js
+++ b/ui/components/app/add-network/add-network.js
@@ -80,11 +80,10 @@ const AddNetwork = ({
             <Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_DEFAULT}>
               {item.ticker}
             </Typography>
-            <img
-              className="add-network__add-icon"
-              src="./images/times.svg"
-              alt={`${t('add')} ${item.ticker}`}
+            <i
+              className="fa fa-plus add-network__add-icon"
               onClick={onAddNetworkClick}
+              title={`${t('add')} ${item.ticker}`}
             />
           </Box>
         ))}
diff --git a/ui/components/app/add-network/add-network.stories.js b/ui/components/app/add-network/add-network.stories.js
index 5dbcc6bee..1617ea820 100644
--- a/ui/components/app/add-network/add-network.stories.js
+++ b/ui/components/app/add-network/add-network.stories.js
@@ -1,53 +1,66 @@
 import React from 'react';
 import AddNetwork from '.';
 
+const MATIC_TOKEN_IMAGE_URL = './images/matic-token.png';
+const ARBITRUM_IMAGE_URL = './images/arbitrum.svg';
+const OPTIMISM_IMAGE_URL = './images/optimism.svg';
+
 export default {
   title: 'Components/APP/AddNetwork',
   id: __filename,
+  argTypes: {
+    onBackClick: {
+      action: 'onBackClick',
+    },
+    onAddNetworkClick: {
+      action: 'onAddNetworkClick',
+    },
+    onAddNetworkManuallyClick: {
+      action: 'onAddNetworkManuallyClick',
+    },
+    featuredRPCS: {
+      control: 'array',
+    },
+  },
+  args: {
+    featuredRPCS: [
+      {
+        chainId: '0x89',
+        nickname: 'Polygon Mumbai',
+        rpcUrl:
+          'https://polygon-mainnet.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
+        ticker: 'MATIC',
+        rpcPrefs: {
+          blockExplorerUrl: 'https://mumbai.polygonscan.com/',
+          imageUrl: MATIC_TOKEN_IMAGE_URL,
+        },
+      },
+      {
+        chainId: '0x99',
+        nickname: 'Optimism Testnet ',
+        rpcUrl:
+          'https://optimism-kovan.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
+        ticker: 'KOR',
+        rpcPrefs: {
+          blockExplorerUrl: 'https://kovan-optimistic.etherscan.io/',
+          imageUrl: OPTIMISM_IMAGE_URL,
+        },
+      },
+      {
+        chainId: '0x66eeb',
+        nickname: 'Arbitrum Testnet',
+        rpcUrl:
+          'https://arbitrum-rinkeby.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
+        ticker: 'ARETH',
+        rpcPrefs: {
+          blockExplorerUrl: 'https://testnet.arbiscan.io/',
+          imageUrl: ARBITRUM_IMAGE_URL,
+        },
+      },
+    ],
+  },
 };
 
-export const DefaultStory = () => {
-  const MATIC_TOKEN_IMAGE_URL = './images/matic-token.png';
-  const ARBITRUM_IMAGE_URL = './images/arbitrum.svg';
-  const OPTIMISM_IMAGE_URL = './images/optimism.svg';
-
-  const FEATURED_RPCS = [
-    {
-      chainId: '0x89',
-      nickname: 'Polygon Mumbai',
-      rpcUrl:
-        'https://polygon-mainnet.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
-      ticker: 'MATIC',
-      rpcPrefs: {
-        blockExplorerUrl: 'https://mumbai.polygonscan.com/',
-        imageUrl: MATIC_TOKEN_IMAGE_URL,
-      },
-    },
-    {
-      chainId: '0x99',
-      nickname: 'Optimism Testnet ',
-      rpcUrl:
-        'https://optimism-kovan.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
-      ticker: 'KOR',
-      rpcPrefs: {
-        blockExplorerUrl: 'https://kovan-optimistic.etherscan.io/',
-        imageUrl: OPTIMISM_IMAGE_URL,
-      },
-    },
-    {
-      chainId: '0x66eeb',
-      nickname: 'Arbitrum Testnet',
-      rpcUrl:
-        'https://arbitrum-rinkeby.infura.io/v3/2b6d4a83d89a438eb1b5d036788ab29c',
-      ticker: 'ARETH',
-      rpcPrefs: {
-        blockExplorerUrl: 'https://testnet.arbiscan.io/',
-        imageUrl: ARBITRUM_IMAGE_URL,
-      },
-    },
-  ];
-
-  return <AddNetwork featuredRPCS={FEATURED_RPCS} />;
-};
+export const DefaultStory = (args) => <AddNetwork {...args} />;
 
 DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/add-network/index.scss b/ui/components/app/add-network/index.scss
index 9c0dfd169..2260c78c3 100644
--- a/ui/components/app/add-network/index.scss
+++ b/ui/components/app/add-network/index.scss
@@ -15,11 +15,10 @@
   }
 
   &__add-icon {
-    height: 16px;
-    width: 12px;
     color: var(--color-text-alternative);
     margin-left: auto;
     margin-right: 0;
+    cursor: pointer;
   }
 
   &__footer {