Using dots in Header's UserDetails component for referencing status

This commit is contained in:
apanizo 2018-11-07 11:53:06 +01:00
parent 7f1336dd60
commit a2d10c6da8
6 changed files with 15 additions and 28 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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