Moving List wrapper to Provider

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>
             )}

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)

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>
   )
 }