Adapting layout to new design

src/components/Header/component/Layout.jsx

@@ -7,13 +7,13 @@ import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
 import ExpandMoreIcon from '@material-ui/icons/ArrowDropDown'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import Paragraph from '~/components/layout/Paragraph'
-import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Img from '~/components/layout/Img'
 import Button from '~/components/layout/Button'
 import Row from '~/components/layout/Row'
 import Identicon from '~/components/Identicon'
 import Spacer from '~/components/Spacer'
+import { border } from '~/theme/variables'
 import Details from './Details'
 
 const logo = require('../assets/gnosis-safe-logo.svg')
@@ -31,8 +31,7 @@ const styles = theme => ({
     width: '100%',
   },
   summary: {
-    backgroundColor: '#f1f1f1',
-    border: 'solid 0.5px #979797',
+    border: `solid 0.5px ${border}`,
   },
   logo: {
     flexBasis: '125px',
@@ -71,7 +70,7 @@ const styles = theme => ({
     border: '1px solid grey',
     display: 'block',
     padding: '12px 8px 4px',
-    margin: '0 0 16px auto',
+    margin: '0 0 0 auto',
   },
   column: {
     flexBasis: '33.33%',
@@ -100,40 +99,38 @@ const Header = ({
   const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : ''
 
   return (
-    <Block margin="md">
-      <ExpansionPanel className={classes.root} elevation={0}>
-        <ExpansionPanelSummary className={classes.summary} expandIcon={<ExpandMoreIcon />}>
-          <Row grow>
-            <Col start="xs" middle="xs" className={classes.logo}>
-              <Img src={logo} height={54} alt="Gnosis Safe" />
+    <ExpansionPanel className={classes.root} elevation={0}>
+      <ExpansionPanelSummary className={classes.summary} expandIcon={<ExpandMoreIcon />}>
+        <Row grow>
+          <Col start="xs" middle="xs" className={classes.logo}>
+            <Img src={logo} height={54} alt="Gnosis Safe" />
+          </Col>
+          <Spacer />
+          <Col end="sm" middle="xs" layout="column" className={classes.provider}>
+            <Paragraph size="sm" transform="capitalize" noMargin bold>{providerText}</Paragraph>
+            <Paragraph size="sm" noMargin>{cutAddress}</Paragraph>
+          </Col>
+        </Row>
+      </ExpansionPanelSummary>
+      { connected &&
+        <React.Fragment>
+          <ExpansionPanelDetails className={classes.details}>
+            <Row grow margin="md">
+              <Details provider={provider} connected={connected} network={network} />
+              <Spacer />
+            </Row>
+            <Row className={classes.user} margin="md" grow >
+              <Identicon address={userAddress} diameter={25} />
+              <Paragraph className={classes.address} size="sm" noMargin>{userAddress}</Paragraph>
+              <OpenInNew style={openIconStyle} />
+            </Row>
+            <Col align="center" margin="md">
+              <Button size="small" variant="raised" color="secondary">DISCONNECT</Button>
             </Col>
-            <Spacer />
-            <Col end="sm" middle="xs" layout="column" className={classes.provider}>
-              <Paragraph size="sm" transform="capitalize" noMargin bold>{providerText}</Paragraph>
-              <Paragraph size="sm" noMargin>{cutAddress}</Paragraph>
-            </Col>
-          </Row>
-        </ExpansionPanelSummary>
-        { connected &&
-          <React.Fragment>
-            <ExpansionPanelDetails className={classes.details}>
-              <Row grow margin="md">
-                <Details provider={provider} connected={connected} network={network} />
-                <Spacer />
-              </Row>
-              <Row className={classes.user} margin="md" grow >
-                <Identicon address={userAddress} diameter={25} />
-                <Paragraph className={classes.address} size="sm" noMargin>{userAddress}</Paragraph>
-                <OpenInNew style={openIconStyle} />
-              </Row>
-              <Col align="center" margin="md">
-                <Button size="small" variant="raised" color="secondary">DISCONNECT</Button>
-              </Col>
-            </ExpansionPanelDetails>
-          </React.Fragment>
-        }
-      </ExpansionPanel>
-    </Block>
+          </ExpansionPanelDetails>
+        </React.Fragment>
+      }
+    </ExpansionPanel>
   )
 }
 

src/components/layout/Page/index.scss

@@ -1,8 +1,10 @@
 .page {
   display: flex;
-  flex-direction: column;
   flex: 1 0 auto;
-  padding: 0 $xl;
+  width: 100%;
+  flex-direction: column;
+  padding: $xl;
+  background-color: #f1f1f1;
 }
 
 .center {

src/components/layout/PageFrame/index.scss

@@ -3,6 +3,5 @@
   flex-direction: column;
   flex: 1 1 auto;
   background-color: white;
-  padding-bottom: $xl;
   max-width: 100%;
 }