(Feature) Etherscan button icon (#331)

* (add) new open on etherscan button icon

* (remove) unused asset

* (fix) icon background
This commit is contained in:
Gabriel Rodríguez Alsina 2019-12-11 06:29:47 -03:00 committed by Mikhail Mikheev
parent edf49ffc96
commit a0a8ef5079
4 changed files with 2311 additions and 221 deletions

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path fill="#B2B5B2" fill-rule="nonzero" d="M17 17v-2a1 1 0 0 1 2 0v2a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2a1 1 0 1 1 0 2H7v10h10z"/>
<path fill="#B2B5B2" d="M15.586 7H13a1 1 0 0 1 0-2h5a.997.997 0 0 1 1 1v5a1 1 0 0 1-2 0V8.414l-6.243 6.243a1 1 0 1 1-1.414-1.414L15.586 7z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 442 B

View File

@ -3,17 +3,18 @@ import React from 'react'
import Tooltip from '@material-ui/core/Tooltip' import Tooltip from '@material-ui/core/Tooltip'
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import Img from '~/components/layout/Img' import Img from '~/components/layout/Img'
import EtherscanOpenIcon from './img/etherscan-open.svg'
import { getEtherScanLink } from '~/logic/wallets/getWeb3' import { getEtherScanLink } from '~/logic/wallets/getWeb3'
import { xs } from '~/theme/variables' import { xs } from '~/theme/variables'
import SearchIcon from './search.svg'
const useStyles = makeStyles({ const useStyles = makeStyles({
container: { container: {
alignItems: 'center',
borderRadius: '50%',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center',
margin: `0 ${xs}`, margin: `0 ${xs}`,
borderRadius: '50%', padding: '0',
transition: 'background-color .2s ease-in-out', transition: 'background-color .2s ease-in-out',
'&:hover': { '&:hover': {
backgroundColor: '#F0EFEE', backgroundColor: '#F0EFEE',
@ -37,13 +38,13 @@ const EtherscanBtn = ({ type, value, increaseZindex = false }: EtherscanBtnProps
return ( return (
<Tooltip title="Show details on Etherscan" placement="top" classes={customClasses}> <Tooltip title="Show details on Etherscan" placement="top" classes={customClasses}>
<a <a
aria-label="Show details on Etherscan"
className={classes.container} className={classes.container}
href={getEtherScanLink(type, value)} href={getEtherScanLink(type, value)}
target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label="Show details on Etherscan" target="_blank"
> >
<Img src={SearchIcon} height={20} alt="Etherscan" /> <Img src={EtherscanOpenIcon} height={20} alt="Show on Etherscan" />
</a> </a>
</Tooltip> </Tooltip>
) )

View File

@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path fill="#B2B5B2" fill-rule="nonzero" d="M18.671 17.085a1.119 1.119 0 0 1-.002 1.587 1.126 1.126 0 0 1-1.586.003l-2.68-2.68a6.6 6.6 0 1 1 .862-10.061 6.603 6.603 0 0 1 .727 8.471l2.68 2.68zm-4.923-3.335a4.455 4.455 0 0 0-6.298-6.3 4.456 4.456 0 0 0 0 6.3 4.452 4.452 0 0 0 6.298 0z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 436 B

2508
yarn.lock

File diff suppressed because it is too large Load Diff