Fix: use info-circle.svg instead of fa-info-circle

yqrashawn · Apr 16, 2020 · 7c10daa · 7c10daa
1 parent 1c47538
commit 7c10daa
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 20 deletions.
diff --git a/app/images/info-circle.svg b/app/images/info-circle.svg
diff --git a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
@@ -8,6 +8,7 @@ import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display
 import { SEND_ROUTE } from '../../../helpers/constants/routes'
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
 import Tooltip from '../../ui/tooltip-v2'
+import InfoCircle from '../../ui/info-circle'
 
 export default class TransactionViewBalance extends PureComponent {
   static contextTypes = {
@@ -77,18 +78,10 @@ export default class TransactionViewBalance extends PureComponent {
               <div
                 style={{
                   display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
+                  marginLeft: '4px',
                 }}
               >
-                <i
-                  className="fa fa-info-circle"
-                  style={{
-                    marginLeft: '6px',
-                    fontSize: '80%',
-                    color: '#fbdc5e',
-                  }}
-                />
+                <InfoCircle width="16" />
               </div>
             </Tooltip>
             {balanceIsCached ? (

diff --git a/ui/app/components/ui/balance/balance.component.js b/ui/app/components/ui/balance/balance.component.js
@@ -6,6 +6,7 @@ import UserPreferencedCurrencyDisplay from '../../app/user-preferenced-currency-
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
 import { formatBalance } from '../../../helpers/utils/util'
 import Tooltip from '../tooltip-v2'
+import InfoCircle from '../info-circle'
 
 export default class Balance extends PureComponent {
   static contextTypes = {
@@ -20,15 +21,23 @@ export default class Balance extends PureComponent {
     network: PropTypes.string,
     showFiat: PropTypes.bool,
     token: PropTypes.object,
+    selectedTokenAddress: PropTypes.string,
   }
 
   static defaultProps = {
     needsParse: true,
     showFiat: true,
+    selectedTokenAddress: null,
   }
 
   renderBalance () {
-    const { account, nativeCurrency, needsParse, showFiat } = this.props
+    const {
+      account,
+      nativeCurrency,
+      needsParse,
+      showFiat,
+      selectedTokenAddress,
+    } = this.props
     const { t } = this.context
     const balanceValue = account && account.balance
     const formattedBalance = balanceValue
@@ -62,17 +71,12 @@ export default class Balance extends PureComponent {
           <div
             style={{
               display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
+              marginLeft: '4px',
             }}
           >
-            <i
-              className="fa fa-info-circle"
-              style={{
-                marginLeft: '6px',
-                fontSize: '80%',
-                color: '#fbdc5e',
-              }}
+            <InfoCircle
+              color={selectedTokenAddress ? '#ffffff' : undefined}
+              width="16"
             />
           </div>
         </Tooltip>

diff --git a/ui/app/components/ui/balance/balance.container.js b/ui/app/components/ui/balance/balance.container.js
@@ -27,6 +27,7 @@ const mapStateToProps = (state) => {
     currentCurrency: getCurrentCurrency(state),
     assetImages: getAssetImages(state),
     showFiat: isMainnet || !!showFiatInTestnets,
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
   }
 }
 

diff --git a/ui/app/components/ui/info-circle/index.js b/ui/app/components/ui/info-circle/index.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+InfoCircle.propTypes = {
+  color: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  viewBox: PropTypes.string,
+}
+
+InfoCircle.defaultProps = {
+  color: '#848C96',
+  width: '22',
+  height: '22',
+  viewBox: '0 0 22 22',
+}
+
+export default function InfoCircle ({
+  color = '#848C96',
+  width = '22',
+  height = '22',
+  viewBox = '0 0 22 22',
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 2C15.9706 2 20 6.02944 20 11C20 15.9706 15.9706 20 11 20C6.02944 20 2 15.9706 2 11C2 6.02944 6.02944 2 11 2ZM22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22C17.0751 22 22 17.0751 22 11Z"
+        fill={color}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 10C10.4477 10 10 10.4477 10 11V15C10 15.5523 10.4477 16 11 16C11.5523 16 12 15.5523 12 15V11C12 10.4477 11.5523 10 11 10Z"
+        fill={color}
+      />
+      <path
+        d="M10 7C10 7.55228 10.4477 8 11 8C11.5523 8 12 7.55228 12 7C12 6.44772 11.5523 6 11 6C10.4477 6 10 6.44772 10 7Z"
+        fill={color}
+      />
+    </svg>
+  )
+}