Including warning and error mode in DotCircle component

src/components/Header/assets/triangle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11">
+    <path fill="#A2A8BA" fill-rule="nonzero" d="M6.947 6.947H5.79V4.632h1.158v2.315zm0 2.316H5.79V8.105h1.158v1.158zM0 11h12.737L6.368 0 0 11z"/>
+</svg>

src/components/Header/component/CircleDot.jsx

@@ -4,9 +4,10 @@ import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Dot from '@material-ui/icons/FiberManualRecord'
 import Img from '~/components/layout/Img'
-import { fancy, border } from '~/theme/variables'
+import { fancy, border, warning } from '~/theme/variables'
 
-const key = require('../../assets/key.svg')
+const key = require('../assets/key.svg')
+const triangle = require('../assets/key.svg')
 
 const styles = () => ({
   root: {
@@ -25,6 +26,8 @@ const styles = () => ({
   },
 })
 
+type Mode = 'error' | 'warning'
+
 type Props = {
   classes: Object,
   keySize: number,
@@ -33,6 +36,7 @@ type Props = {
   dotTop: number,
   dotRight: number,
   center?: boolean,
+  mode: Mode,
 }
 
 const buildKeyStyleFrom = (size: number, center: boolean, dotSize: number) => ({
@@ -42,25 +46,27 @@ const buildKeyStyleFrom = (size: number, center: boolean, dotSize: number) => ({
   borderRadius: `${size}px`,
 })
 
-const buildDotStyleFrom = (size: number, top: number, right: number) => ({
+const buildDotStyleFrom = (size: number, top: number, right: number, mode: Mode) => ({
   width: `${size}px`,
   height: `${size}px`,
   borderRadius: `${size}px`,
   top: `${top}px`,
   right: `${right}px`,
+  color: mode === 'error' ? fancy : warning,
 })
 
 const KeyRing = ({
-  classes, circleSize, keySize, dotSize, dotTop, dotRight, center = false,
+  classes, circleSize, keySize, dotSize, dotTop, dotRight, mode, center = false,
 }: Props) => {
   const keyStyle = buildKeyStyleFrom(circleSize, center, dotSize)
-  const dotStyle = buildDotStyleFrom(dotSize, dotTop, dotRight)
+  const dotStyle = buildDotStyleFrom(dotSize, dotTop, dotRight, mode)
+  const img = mode === warning ? triangle : key
 
   return (
     <React.Fragment>
       <Block className={classes.root}>
         <Block className={classes.key} style={keyStyle}>
-          <Img src={key} height={keySize} alt="Status disconnected" />
+          <Img src={img} height={keySize} alt="Status disconnected" />
         </Block>
         <Dot className={classes.dot} style={dotStyle} />
       </Block>

src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx

@@ -5,7 +5,7 @@ import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
 import Row from '~/components/layout/Row'
 import { md, lg } from '~/theme/variables'
-import KeyRing from './KeyRing'
+import CircleDot from '~/components/Header/component/CircleDot'
 
 type Props = {
   classes: Object,
@@ -43,7 +43,7 @@ const ConnectDetails = ({ classes, onConnect }: Props) => (
       </Row>
     </div>
     <Row className={classes.logo} margin="lg">
-      <KeyRing keySize={32} circleSize={75} dotSize={25} dotTop={50} dotRight={25} center />
+      <CircleDot keySize={32} circleSize={75} dotSize={25} dotTop={50} dotRight={25} center mode="error" />
     </Row>
     <Row className={classes.connect}>
       <Button

src/components/Header/component/ProviderDisconnected/index.jsx

@@ -5,7 +5,7 @@ import Paragraph from '~/components/layout/Paragraph'
 import Col from '~/components/layout/Col'
 import { type Open } from '~/components/hoc/OpenHoc'
 import { sm } from '~/theme/variables'
-import KeyRing from './KeyRing'
+import CircleDot from '~/components/Header/component/CircleDot'
 
 type Props = Open & {
   classes: Object,
@@ -31,7 +31,7 @@ const styles = () => ({
 
 const ProviderDesconnected = ({ classes }: Props) => (
   <React.Fragment>
-    <KeyRing keySize={17} circleSize={35} dotSize={16} dotTop={24} dotRight={11} />
+    <CircleDot keySize={17} circleSize={35} dotSize={16} dotTop={24} dotRight={11} mode="error" />
     <Col end="sm" middle="xs" layout="column" className={classes.account}>
       <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bold">Not Connected</Paragraph>
       <Paragraph size="sm" color="fancy" className={classes.connect} noMargin>Connect Wallet</Paragraph>

src/components/Header/component/ProviderInfo/index.jsx

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react'
-import classNames from 'classnames'
 import { withStyles } from '@material-ui/core/styles'
 import Paragraph from '~/components/layout/Paragraph'
 import Col from '~/components/layout/Col'
@@ -8,9 +7,10 @@ import Dot from '@material-ui/icons/FiberManualRecord'
 import { 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'
-const warningBg = '#ffc05f'
+
 
 type Props = {
   provider: string,
@@ -32,13 +32,8 @@ const styles = () => ({
     right: '10px',
     backgroundColor: '#ffffff',
     borderRadius: '15px',
-  },
-  connected: {
     color: connectedBg,
   },
-  warning: {
-    color: warningBg,
-  },
   account: {
     paddingRight: sm,
     display: 'flex',
@@ -58,13 +53,19 @@ const ProviderInfo = ({
   const providerText = `${provider} [${network}]`
   const cutAddress = connected ? shortVersionOf(userAddress, 6) : 'Connection Error'
   const color = connected ? 'primary' : 'warning'
-  const logo = connected ? classes.connected : classes.warning
   const identiconAddress = userAddress || 'random'
 
   return (
     <React.Fragment>
-      <Identicon address={identiconAddress} diameter={30} />
-      <Dot className={classNames(classes.logo, logo)} />
+      { connected &&
+        <React.Fragment>
+          <Identicon address={identiconAddress} diameter={30} />
+          <Dot className={classes.logo} />
+        </React.Fragment>
+      }
+      { !connected &&
+        <CircleDot keySize={17} circleSize={35} dotSize={16} dotTop={24} dotRight={11} mode="warning" />
+      }
       <Col start="sm" layout="column" className={classes.account}>
         <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bolder">{providerText}</Paragraph>
         <Paragraph size="sm" className={classes.address} noMargin color={color}>{cutAddress}</Paragraph>

src/components/SnackbarContent/index.jsx

@@ -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 } from '~/theme/variables'
+import { secondary, warning } from '~/theme/variables'
 
 type Variant = 'success' | 'error' | 'warning' | 'info'
 
@@ -45,7 +45,7 @@ const styles = theme => ({
     backgroundColor: '#fff3e2',
   },
   warningIcon: {
-    color: '#ffc05f',
+    color: warning,
   },
   error: {
     backgroundColor: '#ffe6ea',

src/theme/variables.js

@@ -6,7 +6,7 @@ const secondary = '#467ee5' // '#13222b'
 const tertiary = '#f6f9fc'
 const fontColor = '#4a5579'
 const fancyColor = '#fd7890'
-const warningColor = '#c97c05'
+const warningColor = '#ffc05f'
 const disabled = '#65707e'
 const xs = '4px'
 const sm = '8px'