Fix Header Provider info statusses dots

src/components/Header/assets/key.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="7" height="13" viewBox="0 0 7 13">
+    <path fill="#A2A8BA" fill-rule="evenodd" d="M1.878 6.22l-.995 6.115h4.874l-.994-6.116c1.109-.531 1.879-1.648 1.879-2.946C6.642 1.467 5.155 0 3.32 0 1.488 0 0 1.467 0 3.273-.002 4.572.767 5.688 1.878 6.22"/>
+</svg>

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

@@ -1,13 +1,15 @@
 // @flow
 import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import Dot from '@material-ui/icons/FiberManualRecord'
 import Paragraph from '~/components/layout/Paragraph'
+import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Img from '~/components/layout/Img'
 import { type Open } from '~/components/hoc/OpenHoc'
-import { md } from '~/theme/variables'
+import { sm, fancy } from '~/theme/variables'
 
-const connectWallet = require('../../assets/connect-wallet.svg')
+const connectWallet = require('../../assets/key.svg')
 
 type Props = Open & {
   classes: Object,
@@ -19,20 +21,43 @@ const styles = () => ({
     fontFamily: 'Montserrat, sans-serif',
   },
   account: {
-    padding: `0 ${md}`,
+    paddingRight: sm,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
+    alignItems: 'start',
     flexGrow: 1,
   },
   connect: {
     letterSpacing: '-0.5px',
   },
+  logo: {
+    height: '15px',
+    width: '15px',
+    top: '12px',
+    position: 'relative',
+    right: '10px',
+    backgroundColor: '#ffffff',
+    borderRadius: '15px',
+    color: fancy,
+  },
+  key: {
+    width: '38px',
+    height: '35px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#f4f4f9',
+    borderRadius: '20px',
+  },
 })
 
 const ProviderDesconnected = ({ classes }: Props) => (
   <React.Fragment>
-    <Img src={connectWallet} height={35} alt="Status connected" />
+    <Block className={classes.key}>
+      <Img src={connectWallet} height={18} alt="Status disconnected" />
+    </Block>
+    <Dot className={classes.logo} />
     <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,15 +1,16 @@
 // @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'
-import Img from '~/components/layout/Img'
+import Dot from '@material-ui/icons/FiberManualRecord'
 import { sm } from '~/theme/variables'
 import Identicon from '~/components/Identicon'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 
-const connectedLogo = require('../../assets/connected.svg')
+const connectedBg = '#00c4c4'
-const connectedWarning = require('../../assets/connected-error.svg')
+const warningBg = '#ffc05f'
 
 type Props = {
   provider: string,
@@ -24,15 +25,26 @@ const styles = () => ({
     fontFamily: 'Montserrat, sans-serif',
   },
   logo: {
-    top: '10px',
+    height: '15px',
+    width: '15px',
+    top: '12px',
     position: 'relative',
-    right: '13px',
+    right: '10px',
+    backgroundColor: '#ffffff',
+    borderRadius: '15px',
+  },
+  connected: {
+    color: connectedBg,
+  },
+  warning: {
+    color: warningBg,
   },
   account: {
     paddingRight: sm,
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center',
+    justifyContent: 'left',
+    alignItems: 'start',
     flexGrow: 1,
   },
   address: {
@@ -46,13 +58,13 @@ const ProviderInfo = ({
   const providerText = `${provider} [${network}]`
   const cutAddress = connected ? shortVersionOf(userAddress, 6) : 'Connection Error'
   const color = connected ? 'primary' : 'warning'
-  const logo = connected ? connectedLogo : connectedWarning
+  const logo = connected ? classes.connected : classes.warning
   const identiconAddress = userAddress || 'random'
 
   return (
     <React.Fragment>
       <Identicon address={identiconAddress} diameter={30} />
-      <Img className={classes.logo} src={logo} height={20} alt="Connection status" />
+      <Dot className={classNames(classes.logo, logo)} />
       <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>