WA-238 Improve Withdrawn CSS look and feel

src/components/Header/component/Layout.jsx

@@ -20,7 +20,7 @@ const Header = ({ provider, reloadWallet }: Props) => (
     <Col xs={12} center="xs" sm={6} start="sm" margin="lg">
       <Img src={logo} height={40} alt="Gnosis Safe" />
     </Col>
-    <Col xs={12} center="xs" sm={6} end="sm" margin="lg">
+    <Col xs={12} center="xs" sm={6} end="sm" middle="xs" margin="lg">
       { provider ? <Connected provider={provider} /> : <NotConnected /> }
       <Refresh callback={reloadWallet} />
     </Col>

src/components/Stepper/index.jsx

@@ -1,5 +1,6 @@
 // @flow
 import Stepper, { Step as FormStep, StepLabel } from 'material-ui/Stepper'
+import { withStyles } from 'material-ui/styles';
 import * as React from 'react'
 import type { FormApi } from 'react-final-form'
 import GnoForm from '~/components/forms/GnoForm'
@@ -10,6 +11,7 @@ import Controls from './Controls'
 export { default as Step } from './Step'
 
 type Props = {
+  classes: Object,
   goTitle: string,
   goPath: string,
   steps: string[],
@@ -78,7 +80,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
 
   render() {
     const {
-      steps, children, finishedTransaction, goTitle, goPath,
+      steps, children, finishedTransaction, goTitle, goPath, classes,
     } = this.props
     const { page, values } = this.state
     const activePage = this.getActivePageFrom(children)
@@ -86,7 +88,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <Stepper activeStep={page} alternativeLabel>
+        <Stepper classes={{ root: classes.root }} activeStep={page} alternativeLabel>
           {steps.map(label => (
             <FormStep key={label}>
               <StepLabel>{label}</StepLabel>
@@ -121,4 +123,10 @@ class GnoStepper extends React.PureComponent<Props, State> {
   }
 }
 
-export default GnoStepper
+const styles = {
+  root: {
+    flex: '1 1 auto',
+  },
+}
+
+export default withStyles(styles)(GnoStepper)

src/components/layout/Col/index.scss

@@ -1,6 +1,5 @@
 .col {
   flex: 1 1 auto;
-  align-items: center;
   display: inherit;
 }
 
@@ -39,107 +38,107 @@
 
 @define-mixin col $size {
   .$(size)1 {
-      flex-basis: 8.333%;
-      max-width: 8.333%;
+    flex-basis: 8.333%;
+    max-width: 8.333%;
   }
 
   .$(size)2 {
-      flex-basis: 16.667%;
-      max-width: 16.667%;
+    flex-basis: 16.667%;
+    max-width: 16.667%;
   }
 
   .$(size)3 {
-      flex-basis: 25%;
-      max-width: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
   }
 
   .$(size)4 {
-      flex-basis: 33.333%;
-      max-width: 33.333%;
+    flex-basis: 33.333%;
+    max-width: 33.333%;
   }
 
   .$(size)5 {
-      flex-basis: 41.667%;
-      max-width: 41.667%;
+    flex-basis: 41.667%;
+    max-width: 41.667%;
   }
 
   .$(size)6 {
-      flex-basis: 50%;
-      max-width: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
   }
 
   .$(size)7 {
-      flex-basis: 58.333%;
-      max-width: 58.333%;
+    flex-basis: 58.333%;
+    max-width: 58.333%;
   }
 
   .$(size)8 {
-      flex-basis: 66.667%;
-      max-width: 66.667%;
+    flex-basis: 66.667%;
+    max-width: 66.667%;
   }
 
   .$(size)9 {
-      flex-basis: 75%;
-      max-width: 75%;
+    flex-basis: 75%;
+    max-width: 75%;
   }
 
   .$(size)10 {
-      flex-basis: 83.333%;
-      max-width: 83.333%;
+    flex-basis: 83.333%;
+    max-width: 83.333%;
   }
 
   .$(size)11 {
-      flex-basis: 91.667%;
-      max-width: 91.667%;
+    flex-basis: 91.667%;
+    max-width: 91.667%;
   }
 
   .$(size)12 {
-      flex-basis: 100%;
-      max-width: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
   }
 
   .$(size)Offset1 {
-      margin-left: 8.333%;
+    margin-left: 8.333%;
   }
 
   .$(size)Offset2 {
-      margin-left: 16.667%;
+    margin-left: 16.667%;
   }
 
   .$(size)Offset3 {
-      margin-left: 25%;
+    margin-left: 25%;
   }
 
   .$(size)Offset4 {
-      margin-left: 33.333%;
+    margin-left: 33.333%;
   }
 
   .$(size)Offset5 {
-      margin-left: 41.667%;
+    margin-left: 41.667%;
   }
 
   .$(size)Offset6 {
-      margin-left: 50%;
+    margin-left: 50%;
   }
 
   .$(size)Offset7 {
-      margin-left: 58.333%;
+    margin-left: 58.333%;
   }
 
   .$(size)Offset8 {
-      margin-left: 66.667%;
+    margin-left: 66.667%;
   }
 
   .$(size)Offset9 {
-      margin-left: 75%;
+    margin-left: 75%;
   }
 
   .$(size)Offset10 {
-      margin-left: 83.333%;
+    margin-left: 83.333%;
   }
 
   .$(size)Offset11 {
-      margin-left: 91.667%;
+    margin-left: 91.667%;
   }
 }
 
@@ -173,16 +172,16 @@
 
 @define-mixin row $size {
   .start$(size) {
-      justify-content: flex-start;
-      text-align: start;
+    justify-content: flex-start;
+    text-align: start;
   }
   .center$(size) {
-      justify-content: center;
-      text-align: center;
+    justify-content: center;
+    text-align: center;
   }
   .end$(size) {
-      justify-content: flex-end;
-      text-align: end;
+    justify-content: flex-end;
+    text-align: end;
   }
   .top$(size) {
       align-items: flex-start;

src/routes/safe/component/Safe/index.jsx

@@ -64,8 +64,10 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
               <Bold>{safe.name.toUpperCase()}</Bold>
             </Paragraph>
           </Block>
-          <Row grow align={component ? undefined : 'center'}>
-            { component || <Img alt="Safe Icon" src={safeIcon} height={330} /> }
+          <Row grow>
+            <Col sm={12} center="sm" middle={component ? undefined : 'sm'} layout="column">
+              { component || <Img alt="Safe Icon" src={safeIcon} height={330} /> }
+            </Col>
           </Row>
         </Col>
       </Row>