From 8d34d32c5dc7d96c3390ccf78ca19c24e4ed6704 Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Mon, 3 Sep 2018 13:51:10 +0200
Subject: [PATCH] Adding connected Icon to Provider

---
 .../Header/component/Provider/index.jsx        | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Header/component/Provider/index.jsx b/src/components/Header/component/Provider/index.jsx
index 0c94016f..981155a5 100644
--- a/src/components/Header/component/Provider/index.jsx
+++ b/src/components/Header/component/Provider/index.jsx
@@ -6,11 +6,13 @@ import ExpandLess from '@material-ui/icons/ExpandLess'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import Paragraph from '~/components/layout/Paragraph'
 import Col from '~/components/layout/Col'
+import Img from '~/components/layout/Img'
 import { type Open } from '~/components/hoc/OpenHoc'
 import { sm, md } from '~/theme/variables'
-
 import Identicon from '~/components/Identicon'
 
+const connectedLogo = require('../../assets/connected.svg')
+
 type Props = Open & {
   provider: string,
   network: string,
@@ -36,8 +38,13 @@ const styles = () => ({
   network: {
     fontFamily: 'Montserrat, sans-serif',
   },
+  logo: {
+    top: '10px',
+    position: 'relative',
+    right: '13px',
+  },
   account: {
-    padding: `0 ${md} 0 ${sm}`,
+    paddingRight: sm,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
@@ -74,7 +81,12 @@ class Provider extends React.Component<Props> {
       <React.Fragment>
         <div ref={this.myRef} className={classes.root}>
           <Col end="sm" middle="xs" className={classes.provider}>
-            { connected && <Identicon address={userAddress} diameter={25} /> }
+            { connected &&
+              <React.Fragment>
+                <Identicon address={userAddress} diameter={30} />
+                <Img className={classes.logo} src={connectedLogo} height={20} alt="Status connected" />
+              </React.Fragment>
+            }
             <Col end="sm" middle="xs" layout="column" className={classes.account}>
               <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin bold>{providerText}</Paragraph>
               <Paragraph size="sm" className={classes.address} noMargin>{cutAddress}</Paragraph>