From e73c5b36e42d469fc4bcaf2a165cfc66d3177261 Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Tue, 4 Sep 2018 17:12:20 +0200
Subject: [PATCH] Styles when provider is disconnected

---
 .../component/ProviderDisconnected/index.jsx  | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/components/Header/component/ProviderDisconnected/index.jsx

diff --git a/src/components/Header/component/ProviderDisconnected/index.jsx b/src/components/Header/component/ProviderDisconnected/index.jsx
new file mode 100644
index 00000000..4ccce09b
--- /dev/null
+++ b/src/components/Header/component/ProviderDisconnected/index.jsx
@@ -0,0 +1,43 @@
+// @flow
+import * as React from 'react'
+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 { type Open } from '~/components/hoc/OpenHoc'
+import { sm, md } from '~/theme/variables'
+
+const connectWallet = require('../../assets/connect-wallet.svg')
+
+type Props = Open & {
+  classes: Object,
+  children: Function,
+}
+
+const styles = () => ({
+  network: {
+    fontFamily: 'Montserrat, sans-serif',
+  },
+  account: {
+    paddingRight: md,
+    paddingLeft: sm,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  connect: {
+    letterSpacing: '-0.5px',
+  },
+})
+
+const ProviderDesconnected = ({ classes }: Props) => (
+  <React.Fragment>
+    <Img src={connectWallet} height={35} alt="Status connected" />
+    <Col end="sm" middle="xs" layout="column" className={classes.account}>
+      <Paragraph size="sm" transform="capitalize" className={classes.network} noMargin bold>Not Connected</Paragraph>
+      <Paragraph size="sm" color="fancy" className={classes.connect} noMargin>Connect Wallet</Paragraph>
+    </Col>
+  </React.Fragment>
+)
+
+export default withStyles(styles)(ProviderDesconnected)