From b97a7220681dedb6f61ae0d70097407aa00cc0cf Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Wed, 5 Sep 2018 10:36:48 +0200
Subject: [PATCH] Moving List wrapper to Provider

---
 src/components/Header/component/Layout.jsx    | 18 +++--
 .../ProviderDisconnected/ConnectDetails.jsx   | 67 +++++++++++++++++++
 .../component/ProviderInfo/UserDetails.jsx    | 10 +--
 3 files changed, 83 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx

diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx
index bb708467..224a62cc 100644
--- a/src/components/Header/component/Layout.jsx
+++ b/src/components/Header/component/Layout.jsx
@@ -1,14 +1,15 @@
 // @flow
 import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import Grow from '@material-ui/core/Grow'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
+import Popper from '@material-ui/core/Popper'
+import List from '@material-ui/core/List'
 import Divider from '~/components/layout/Divider'
 import openHoc, { type Open } from '~/components/hoc/OpenHoc'
 import Col from '~/components/layout/Col'
 import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
-import Grow from '@material-ui/core/Grow'
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
-import Popper from '@material-ui/core/Popper'
 import Spacer from '~/components/Spacer'
 import { border, sm, md } from '~/theme/variables'
 import Provider from './Provider'
@@ -22,6 +23,13 @@ type Props = Open & {
 }
 
 const styles = () => ({
+  root: {
+    backgroundColor: 'white',
+    padding: 0,
+    boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
+    minWidth: '280px',
+    left: '4px',
+  },
   summary: {
     borderBottom: `solid 2px ${border}`,
     alignItems: 'center',
@@ -53,7 +61,9 @@ const Layout = openHoc(({
                 {...TransitionProps}
               >
                 <ClickAwayListener onClickAway={toggle}>
-                  {providerDetails}
+                  <List className={classes.root} component="div">
+                    {providerDetails}
+                  </List>
                 </ClickAwayListener>
               </Grow>
             )}
diff --git a/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx
new file mode 100644
index 00000000..907369ab
--- /dev/null
+++ b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx
@@ -0,0 +1,67 @@
+// @flow
+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 Hairline from '~/components/layout/Hairline'
+import Img from '~/components/layout/Img'
+import Row from '~/components/layout/Row'
+import { sm, md, lg, background } from '~/theme/variables'
+
+const connectedLogo = require('../../assets/connect-wallet.svg')
+
+type Props = {
+  classes: Object,
+}
+
+const styles = () => ({
+  container: {
+    padding: `${md} 12px`,
+  },
+  user: {
+    alignItems: 'center',
+    backgroundColor: background,
+    padding: sm,
+  },
+  details: {
+    padding: `0 ${lg}`,
+    height: '20px',
+    alignItems: 'center',
+  },
+  address: {
+    flexGrow: 1,
+    textAlign: 'center',
+  },
+  disconnect: {
+    padding: `${md} 32px`,
+  },
+  logo: {
+    margin: '0px 2px',
+  },
+})
+
+const ConnectDetails = ({ classes }: Props) => (
+  <React.Fragment>
+    <div className={classes.container}>
+      <Row margin="md" align="center">
+        <Paragraph className={classes.address} size="lg" noMargin bolder>Connect a Wallet</Paragraph>
+      </Row>
+    </div>
+    <Row className={classes.details}>
+      <Img className={classes.logo} src={connectedLogo} height={16} alt="Status connected" />
+    </Row>
+    <Hairline margin="xs" />
+    <Row className={classes.disconnect}>
+      <Button
+        size="medium"
+        variant="raised"
+        color="primary"
+        fullWidth
+      >
+        CONNECT
+      </Button>
+    </Row>
+  </React.Fragment>
+)
+
+export default withStyles(styles)(ConnectDetails)
diff --git a/src/components/Header/component/ProviderInfo/UserDetails.jsx b/src/components/Header/component/ProviderInfo/UserDetails.jsx
index fcb7566b..82ce6ae3 100644
--- a/src/components/Header/component/ProviderInfo/UserDetails.jsx
+++ b/src/components/Header/component/ProviderInfo/UserDetails.jsx
@@ -4,7 +4,6 @@ import OpenInNew from '@material-ui/icons/OpenInNew'
 import { withStyles } from '@material-ui/core/styles'
 import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
-import List from '@material-ui/core/List'
 import Identicon from '~/components/Identicon'
 import Bold from '~/components/layout/Bold'
 import Hairline from '~/components/layout/Hairline'
@@ -32,11 +31,6 @@ const openIconStyle = {
 }
 
 const styles = () => ({
-  root: {
-    backgroundColor: 'white',
-    padding: 0,
-    boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
-  },
   container: {
     padding: `${md} 12px`,
   },
@@ -72,7 +66,7 @@ const UserDetails = ({
   const status = connected ? 'Connected' : 'Not connected'
 
   return (
-    <List className={classes.root} component="div">
+    <React.Fragment>
       <div className={classes.container}>
         <Row className={classes.identicon} margin="md" align="center">
           <Identicon address={userAddress} diameter={60} />
@@ -124,7 +118,7 @@ const UserDetails = ({
           DISCONNECT
         </Button>
       </Row>
-    </List>
+    </React.Fragment>
   )
 }