Updated the connected component

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

@@ -1,40 +1,34 @@
 // @flow
 import * as React from 'react'
-import Img from '~/components/layout/Img'
+import Col from '~/components/layout/Col'
-import Span from '~/components/layout/Span'
+import Bold from '~/components/layout/Bold'
-import { upperFirst } from '~/utils/css'
+import Paragraph from '~/components/layout/Paragraph'
-
-const IconParity = require('~/components/Header/assets/icon_parity.svg')
-const IconMetamask = require('~/components/Header/assets/icon_metamask.svg')
 
 type Props = {
   provider: string,
 }
 
-const PROVIDER_METAMASK = 'METAMASK'
+const leftColumnStyle = {
-const PROVIDER_PARITY = 'PARITY'
+  maxWidth: '80px',
-
-const PROVIDER_ICONS = {
-  [PROVIDER_METAMASK]: IconMetamask,
-  [PROVIDER_PARITY]: IconParity,
 }
 
-const Connected = ({ provider }: Props) => {
+const paragraphStyle = {
-  const msg = `You are using ${upperFirst(provider.toLowerCase())} to connect to your Safe`
+  margin: '2px',
+}
 
-  return (
+const Connected = ({ provider }: Props) => (
   <React.Fragment>
-      { PROVIDER_ICONS[provider] &&
+    <Col style={leftColumnStyle} layout="column">
-        <Img
+      <Paragraph style={paragraphStyle} size="sm" noMargin align="right">Status: </Paragraph>
-          height={40}
+      <Paragraph style={paragraphStyle} size="sm" noMargin align="right">Client: </Paragraph>
-          src={PROVIDER_ICONS[provider]}
+      <Paragraph style={paragraphStyle} size="sm" noMargin align="right">Network: </Paragraph>
-          title={msg}
+    </Col>
-          alt={msg}
+    <Col style={leftColumnStyle} layout="column">
-        />
+      <Paragraph style={paragraphStyle} size="sm" noMargin align="left"><Bold>Connected</Bold></Paragraph>
-      }
+      <Paragraph style={paragraphStyle} size="sm" noMargin align="left"><Bold>{provider}</Bold></Paragraph>
-      <Span>Connected</Span>
+      <Paragraph style={paragraphStyle} size="sm" noMargin align="left"><Bold>Rinkeby</Bold></Paragraph>
+    </Col>
   </React.Fragment>
 )
-}
 
 export default Connected