Dark mode: add network times icon (#14202)

app/images/times.svg

@@ -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>

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>
         ))}

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';

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 {