Using dots in Header's UserDetails component for referencing status

src/components/Header/assets/connected-error.svg

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

src/components/Header/assets/connected.svg

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

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

@@ -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
+        <Dot className={classNames(classes.dot, connected ? classes.connected : classes.warning)} />
-          ? <Img className={classes.logo} src={connectionLogo} height={16} alt="Conection Status" />
-          : <Dot className={classes.warning} />
-        }
         <Paragraph size="sm" noMargin align="right" color={color}>
           <Bold>
             {status}

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

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

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

src/theme/variables.js

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