Added more UI changes to Header

src/components/Header/component/Layout.jsx

@@ -4,15 +4,14 @@ import { withStyles } from '@material-ui/core/styles'
 import ExpansionPanel from '@material-ui/core/ExpansionPanel'
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
-import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import Divider from '@material-ui/core/Divider'
+import OpenInNew from '@material-ui/icons/OpenInNew'
 import Paragraph from '~/components/layout/Paragraph'
 import Col from '~/components/layout/Col'
 import Img from '~/components/layout/Img'
 import Button from '~/components/layout/Button'
-import Refresh from '~/components/Refresh'
 import Row from '~/components/layout/Row'
+import Identicon from '~/components/Identicon'
 import Spacer from '~/components/Spacer'
 import Connected from './Connected'
 
@@ -20,7 +19,6 @@ const logo = require('../assets/gnosis-safe-logo.svg')
 
 type Props = {
   provider: string,
-  reloadWallet: Function,
   classes: Object,
 }
 
@@ -37,6 +35,13 @@ const styles = theme => ({
     flexDirection: 'column',
     justifyContent: 'center',
   },
+  user: {
+    alignItems: 'center',
+  },
+  address: {
+    flexGrow: 1,
+    textAlign: 'center',
+  },
   heading: {
     fontSize: theme.typography.pxToRem(15),
   },
@@ -51,6 +56,11 @@ const styles = theme => ({
   },
   details: {
     alignItems: 'center',
+    width: '350px',
+    border: '1px solid grey',
+    display: 'block',
+    padding: '12px 4px 4px',
+    marginLeft: 'auto',
   },
   column: {
     flexBasis: '33.33%',
@@ -68,12 +78,12 @@ const styles = theme => ({
   },
 })
 
-const Header = ({ provider, reloadWallet, classes }: Props) => {
+const Header = ({ provider, classes }: Props) => {
   const providerText = provider ? `${provider} [Rinkeby]` : 'Not connected'
 
   return (
     <React.Fragment>
-      <ExpansionPanel elevation={0}>
+      <ExpansionPanel className={classes.root} elevation={0} defaultExpanded>
         <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
           <Row grow>
             <Col start="xs" middle="xs" className={classes.logo}>
@@ -89,16 +99,22 @@ const Header = ({ provider, reloadWallet, classes }: Props) => {
         { provider &&
           <React.Fragment>
             <ExpansionPanelDetails className={classes.details}>
-              <Connected provider={provider} />
-              <Refresh callback={reloadWallet} />
+              <Row grow margin="md">
+                <Connected provider={provider} />
+                <Spacer />
+              </Row>
+              <Row className={classes.user} margin="md" grow >
+                <Identicon address="0x873faa4cddd5b157e8e5a57e7a5479afc5d30f0b" diameter={25} />
+                <Paragraph className={classes.address} size="sm" noMargin>0x873faa4cddd5b157e8e5a57e7a5479afc5d30f0b</Paragraph>
+                <OpenInNew style={{ height: '14px' }} />
+              </Row>
+              <Col align="center" margin="md" grow>
+                <Button size="small" variant="raised" color="secondary">DISCONNECT</Button>
+              </Col>
             </ExpansionPanelDetails>
-            <ExpansionPanelActions>
-              <Button size="small">DISCONNECT</Button>
-            </ExpansionPanelActions>
           </React.Fragment>
         }
       </ExpansionPanel>
-      <Divider />
     </React.Fragment>
   )
 }