Fix disconnected dot in Provider modal

src/components/Header/assets/connect-wallet.svg

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80" viewBox="0 0 80 80">
-    <defs>
-        <circle id="a" cx="36.129" cy="36.129" r="36.129"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <g>
-            <use fill="#E4E8F1" xlink:href="#a"/>
-            <path fill="#A2A8BA" d="M33.234 36.695l-2.569 15.782h12.58l-2.566-15.782c2.861-1.372 4.848-4.254 4.848-7.603 0-4.662-3.835-8.447-8.57-8.447-4.73 0-8.57 3.785-8.57 8.447-.005 3.352 1.979 6.23 4.847 7.603"/>
-        </g>
-        <g fill-rule="nonzero" transform="translate(38.71 38.71)">
-            <circle cx="20.645" cy="20.645" r="20.645" fill="#FD7890"/>
-            <path fill="#FFF" d="M20.645 30.968l4.301-5.506a7.354 7.354 0 0 0-4.3-1.376 7.354 7.354 0 0 0-4.302 1.376l4.301 5.506zm0-20.645c-4.839 0-9.307 1.536-12.903 4.129l2.15 2.752c2.987-2.156 6.715-3.44 10.753-3.44s7.766 1.284 10.753 3.44l2.15-2.752c-3.596-2.593-8.064-4.13-12.903-4.13zm0 6.881c-3.226 0-6.2 1.021-8.602 2.753l2.15 2.753a10.978 10.978 0 0 1 6.452-2.065c2.425 0 4.66.769 6.452 2.065l2.15-2.753c-2.401-1.732-5.376-2.753-8.602-2.753z"/>
-        </g>
-    </g>
-</svg>

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

@@ -3,11 +3,13 @@ import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
+import Dot from '@material-ui/icons/FiberManualRecord'
+import Block from '~/components/layout/Block'
 import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
-import { md, lg } from '~/theme/variables'
+import { md, lg, fancy } from '~/theme/variables'
 
-const connectedLogo = require('../../assets/connect-wallet.svg')
+const connectedLogo = require('../../assets/key.svg')
 
 type Props = {
   classes: Object,
@@ -35,6 +37,25 @@ const styles = () => ({
   img: {
     margin: '0px 2px',
   },
+  status: {
+    height: '25px',
+    width: '25px',
+    borderRadius: '20px',
+    bottom: '93px',
+    position: 'absolute',
+    right: '98px',
+    backgroundColor: '#ffffff',
+    color: fancy,
+  },
+  key: {
+    width: '75px',
+    height: '75px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#e4e8f1',
+    borderRadius: '40px',
+  },
 })
 
 const ConnectDetails = ({ classes, onConnect }: Props) => (
@@ -45,7 +66,10 @@ const ConnectDetails = ({ classes, onConnect }: Props) => (
       </Row>
     </div>
     <Row className={classes.logo} margin="lg">
-      <Img className={classes.img} src={connectedLogo} height={75} alt="Connect a Wallet" />
+      <Block className={classes.key}>
+        <Img src={connectedLogo} height={32} alt="Status disconnected" />
+      </Block>
+      <Dot className={classes.status} />
     </Row>
     <Row className={classes.connect}>
       <Button

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

@@ -47,7 +47,7 @@ const styles = () => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#f4f4f9',
+    backgroundColor: '#e4e8f1',
     borderRadius: '20px',
   },
 })