Remove duplicated Question icon component

purefinance · Nov 15, 2021 · 1d068e5 · 1d068e5
1 parent b16a956
commit 1d068e5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 16 deletions.
diff --git a/site/components/payment-streams/StreamsTable.js b/site/components/payment-streams/StreamsTable.js
@@ -9,22 +9,10 @@ import { updateStreamInfo } from '../../utils/streams'
 import Button from '../../components/Button'
 import WithTooltip from '../../components/WithTooltip'
 import { EtherscanLink } from '../../components/EtherscanLink'
+import SvgContainer from '../svg/SvgContainer'
 import PaymentStreamsLibContext from './PaymentStreamsLib'
 import TransactionsContext from '../context/Transactions'
 
-const QuestionmarkIcon = () => (
-  <svg
-    fill="white"
-    height="20"
-    viewBox="0 0 26 20"
-    width="20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" />
-  </svg>
-)
-
 const StreamsTable = function () {
   const { active, account } = useWeb3React()
   const { t } = useTranslation('payment-streams')
@@ -485,7 +473,9 @@ const StreamsTable = function () {
                           width="w-28"
                         >
                           <span className="mr-2">{t('claim')}</span>
-                          {canClaim(id) ? null : <QuestionmarkIcon />}
+                          {canClaim(id) ? null : (
+                            <SvgContainer fill="white" name="questionmark" />
+                          )}
                         </Button>
                       </WithTooltip>
                     )}

diff --git a/site/components/svg/Questionmark.js b/site/components/svg/Questionmark.js
@@ -1,8 +1,8 @@
 import React from 'react'
 
-const QuestionmarkIcon = props => (
+const QuestionmarkIcon = ({ fill = 'rgba(63, 200, 216)', ...props }) => (
   <svg
-    fill="rgba(63, 200, 216)"
+    fill={fill}
     height="20"
     viewBox="0 0 26 20"
     width="20"

diff --git a/site/components/svg/index.js b/site/components/svg/index.js
@@ -5,6 +5,7 @@ import coinbasewallet from './CoinbaseWallet'
 import cross from './Cross'
 import loading from './Loading'
 import metamask from './Metamask'
+import questionmark from './Questionmark'
 import walletconnect from './WalletConnect'
 
 const icons = {
@@ -15,6 +16,7 @@ const icons = {
   cross,
   loading,
   metamask,
+  questionmark,
   walletconnect
 }