Using dots in Header's UserDetails component for referencing status
This commit is contained in:
parent
7f1336dd60
commit
a2d10c6da8
|
@ -1,6 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<g fill="none" fill-rule="nonzero">
|
||||
<circle cx="8" cy="8" r="8" fill="#FFC05F"/>
|
||||
<path fill="#FFF" d="M8 12l1.667-2.133A2.85 2.85 0 0 0 8 9.333c-.625 0-1.204.2-1.667.534L8 12zm0-8a8.529 8.529 0 0 0-5 1.6l.833 1.067A7.104 7.104 0 0 1 8 5.333c1.565 0 3.01.498 4.167 1.334L13 5.6A8.529 8.529 0 0 0 8 4zm0 2.667a5.68 5.68 0 0 0-3.333 1.066L5.5 8.8C6.194 8.298 7.06 8 8 8s1.806.298 2.5.8l.833-1.067A5.68 5.68 0 0 0 8 6.667z"/>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 542 B |
|
@ -1,6 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<g fill="none" fill-rule="nonzero">
|
||||
<circle cx="8" cy="8" r="8" fill="#467EE5"/>
|
||||
<path fill="#FFF" d="M8 12l1.667-2.133A2.85 2.85 0 0 0 8 9.333c-.625 0-1.204.2-1.667.534L8 12zm0-8a8.529 8.529 0 0 0-5 1.6l.833 1.067A7.104 7.104 0 0 1 8 5.333c1.565 0 3.01.498 4.167 1.334L13 5.6A8.529 8.529 0 0 0 8 4zm0 2.667a5.68 5.68 0 0 0-3.333 1.066L5.5 8.8C6.194 8.298 7.06 8 8 8s1.806.298 2.5.8l.833-1.067A5.68 5.68 0 0 0 8 6.667z"/>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 542 B |
|
@ -1,5 +1,6 @@
|
|||
// @flow
|
||||
import * as React from 'react'
|
||||
import classNames from 'classnames'
|
||||
import OpenInNew from '@material-ui/icons/OpenInNew'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Paragraph from '~/components/layout/Paragraph'
|
||||
|
@ -12,15 +13,13 @@ import Img from '~/components/layout/Img'
|
|||
import Row from '~/components/layout/Row'
|
||||
import Block from '~/components/layout/Block'
|
||||
import Spacer from '~/components/Spacer'
|
||||
import { xs, sm, md, lg, background, secondary, warning } from '~/theme/variables'
|
||||
import { xs, sm, md, lg, background, secondary, warning, connected as connectedBg } from '~/theme/variables'
|
||||
import { upperFirst } from '~/utils/css'
|
||||
import { shortVersionOf } from '~/logic/wallets/ethAddresses'
|
||||
import { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
|
||||
import CircleDot from '~/components/Header/component/CircleDot'
|
||||
|
||||
const metamask = require('../../assets/metamask.svg')
|
||||
const connectedLogo = require('../../assets/connected.svg')
|
||||
const connectedWarning = require('../../assets/connected-error.svg')
|
||||
const dot = require('../../assets/dotRinkeby.svg')
|
||||
|
||||
type Props = {
|
||||
|
@ -79,12 +78,17 @@ const styles = () => ({
|
|||
logo: {
|
||||
margin: `0px ${xs}`,
|
||||
},
|
||||
warning: {
|
||||
dot: {
|
||||
marginRight: xs,
|
||||
color: warning,
|
||||
height: '15px',
|
||||
width: '15px',
|
||||
},
|
||||
warning: {
|
||||
color: warning,
|
||||
},
|
||||
connected: {
|
||||
color: connectedBg,
|
||||
},
|
||||
})
|
||||
|
||||
const UserDetails = ({
|
||||
|
@ -93,7 +97,6 @@ const UserDetails = ({
|
|||
const status = connected ? 'Connected' : 'Connection error'
|
||||
const address = userAddress ? shortVersionOf(userAddress, 6) : 'Address not available'
|
||||
const identiconAddress = userAddress || 'random'
|
||||
const connectionLogo = connected ? connectedLogo : connectedWarning
|
||||
const color = connected ? 'primary' : 'warning'
|
||||
|
||||
return (
|
||||
|
@ -120,10 +123,7 @@ const UserDetails = ({
|
|||
<Row className={classes.details}>
|
||||
<Paragraph size="sm" noMargin align="right">Status </Paragraph>
|
||||
<Spacer />
|
||||
{ connected
|
||||
? <Img className={classes.logo} src={connectionLogo} height={16} alt="Conection Status" />
|
||||
: <Dot className={classes.warning} />
|
||||
}
|
||||
<Dot className={classNames(classes.dot, connected ? classes.connected : classes.warning)} />
|
||||
<Paragraph size="sm" noMargin align="right" color={color}>
|
||||
<Bold>
|
||||
{status}
|
||||
|
|
|
@ -4,14 +4,11 @@ import { withStyles } from '@material-ui/core/styles'
|
|||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import Col from '~/components/layout/Col'
|
||||
import Dot from '@material-ui/icons/FiberManualRecord'
|
||||
import { sm } from '~/theme/variables'
|
||||
import { connected as connectedBg, sm } from '~/theme/variables'
|
||||
import Identicon from '~/components/Identicon'
|
||||
import { shortVersionOf } from '~/logic/wallets/ethAddresses'
|
||||
import CircleDot from '~/components/Header/component/CircleDot'
|
||||
|
||||
const connectedBg = '#00c4c4'
|
||||
|
||||
|
||||
type Props = {
|
||||
provider: string,
|
||||
network: string,
|
||||
|
|
|
@ -10,7 +10,7 @@ import IconButton from '@material-ui/core/IconButton'
|
|||
import { withStyles } from '@material-ui/core/styles'
|
||||
import WarningIcon from '@material-ui/icons/Warning'
|
||||
import { type WithStyles } from '~/theme/mui'
|
||||
import { secondary, warning } from '~/theme/variables'
|
||||
import { secondary, warning, connected } from '~/theme/variables'
|
||||
|
||||
type Variant = 'success' | 'error' | 'warning' | 'info'
|
||||
|
||||
|
@ -39,7 +39,7 @@ const styles = theme => ({
|
|||
backgroundColor: '#ffffff',
|
||||
},
|
||||
successIcon: {
|
||||
color: '#00c4c4',
|
||||
color: connected,
|
||||
},
|
||||
warning: {
|
||||
backgroundColor: '#fff3e2',
|
||||
|
|
|
@ -7,6 +7,7 @@ const tertiary = '#f6f9fc'
|
|||
const fontColor = '#4a5579'
|
||||
const fancyColor = '#fd7890'
|
||||
const warningColor = '#ffc05f'
|
||||
const connectedColor = '#00c4c4'
|
||||
const disabled = '#65707e'
|
||||
const xs = '4px'
|
||||
const sm = '8px'
|
||||
|
@ -25,6 +26,7 @@ module.exports = Object.assign({}, {
|
|||
fontColor,
|
||||
fancy: fancyColor,
|
||||
warning: warningColor,
|
||||
connected: connectedColor,
|
||||
xs,
|
||||
sm,
|
||||
md,
|
||||
|
|
Loading…
Reference in New Issue