WA-238 Refactor Safe component leaving space for user interaction

src/components/layout/Block/index.jsx

@@ -11,7 +11,7 @@ type Size = 'sm' | 'md' | 'lg' | 'xl'
 type Props = {
   margin?: Size,
   padding?: Size,
-  center?: boolean,
+  align?: 'center' | 'right',
   children: React$Node,
   className?: string,
 }
@@ -19,12 +19,12 @@ type Props = {
 class Block extends PureComponent<Props> {
   render() {
     const {
-      margin, padding, center, children, className, ...props
+      margin, padding, align, children, className, ...props
     } = this.props
 
     const paddingStyle = padding ? capitalize(padding, 'padding') : undefined
     return (
-      <div className={cx(className, 'block', margin, paddingStyle, { center })} {...props}>
+      <div className={cx(className, 'block', margin, paddingStyle, align)} {...props}>
         { children }
       </div>
     )

src/components/layout/Block/index.scss

@@ -1,5 +1,4 @@
 .block {
-  display: inline-block;
   width: 100%;
   overflow: hidden;
 }
@@ -37,7 +36,13 @@
 }
 
 .center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }

src/components/layout/Col/index.jsx

@@ -16,6 +16,7 @@ type Props = {
   around?: 'xs' | 'sm' | 'md' | 'lg',
   between?: 'xs' | 'sm' | 'md' | 'lg',
   margin?: 'sm' | 'md' | 'lg' | 'xl',
+  layout?: 'inherit' | 'block',
   xs?: number | boolean,
   sm?: number | boolean,
   md?: number | boolean,
@@ -29,7 +30,7 @@ type Props = {
 }
 
 const Col = ({
-  children, margin,
+  children, margin, layout = 'inherit',
   xs, sm, md, lg,
   start, center, end, top, middle, bottom, around, between,
   xsOffset, smOffset, mdOffset, lgOffset,
@@ -54,6 +55,7 @@ const Col = ({
     smOffset ? capitalize(smOffset, 'smOffset') : undefined,
     mdOffset ? capitalize(mdOffset, 'mdOffset') : undefined,
     lgOffset ? capitalize(lgOffset, 'lgOffset') : undefined,
+    layout,
     props.className,
   )
 

src/components/layout/Col/index.scss

@@ -1,7 +1,15 @@
 .col {
   flex: 1 1 auto;
-  display: flex;
   align-items: center;
+  display: inherit;
+}
+
+.inherit {
+  display: inherit;
+}
+
+.block {
+  display: block;
 }
 
 .marginSm {
@@ -128,11 +136,11 @@
 
 @define-mixin autoWidth $size {
   .$(size) {
-      -ms-flex-positive: 1;
-      flex-grow: 1;
-      -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-      max-width: 100%;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    max-width: 100%;
   }
 }
 

src/routes/safe/component/Safe.jsx

@@ -1,86 +0,0 @@
-// @flow
-import * as React from 'react'
-import Block from '~/components/layout/Block'
-import Bold from '~/components/layout/Bold'
-import Col from '~/components/layout/Col'
-import Paragraph from '~/components/layout/Paragraph'
-import Row from '~/components/layout/Row'
-import Table, { TableBody, TableCell, TableHead, TableRow } from '~/components/layout/Table'
-import { type Safe } from '~/routes/safe/store/model/safe'
-
-type SafeProps = {
-  safe: Safe,
-  balance: string,
-}
-
-const GnoSafe = ({ safe, balance }: SafeProps) => (
-  <React.Fragment>
-    <Row>
-      <Col xs={12}>
-        <Paragraph size="lg">
-          <Bold>{safe.name.toUpperCase()}</Bold>
-        </Paragraph>
-      </Col>
-    </Row>
-    <Row>
-      <Paragraph size="lg">
-        <Bold>Balance</Bold>
-      </Paragraph>
-    </Row>
-    <Row>
-      <Block>
-        <Paragraph>
-          {balance} - ETH
-        </Paragraph>
-      </Block>
-    </Row>
-    <Row>
-      <Paragraph size="lg">
-        <Bold>Address</Bold>
-      </Paragraph>
-    </Row>
-    <Row>
-      <Block>
-        <Paragraph>
-          {safe.address}
-        </Paragraph>
-      </Block>
-    </Row>
-    <Row>
-      <Paragraph size="lg">
-        <Bold>Number of required confirmations per transaction</Bold>
-      </Paragraph>
-    </Row>
-    <Row>
-      <Paragraph>
-        {safe.get('confirmations')}
-      </Paragraph>
-    </Row>
-    <Row>
-      <Paragraph size="lg">
-        <Bold>Owners</Bold>
-      </Paragraph>
-    </Row>
-    <Row margin="lg">
-      <Table size={700}>
-        <TableHead>
-          <TableRow>
-            <TableCell>Name</TableCell>
-            <TableCell>Adress</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {safe.owners.map(owner => (
-            <TableRow key={safe.address}>
-              <TableCell>{owner.name}</TableCell>
-              <TableCell>{owner.address}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-      <div />
-    </Row>
-  </React.Fragment>
-)
-
-export default GnoSafe

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

@@ -0,0 +1,58 @@
+// @flow
+import * as React from 'react'
+import Block from '~/components/layout/Block'
+import Col from '~/components/layout/Col'
+import Bold from '~/components/layout/Bold'
+import Paragraph from '~/components/layout/Paragraph'
+import Row from '~/components/layout/Row'
+import { type Safe } from '~/routes/safe/store/model/safe'
+import List from 'material-ui/List'
+
+import Address from './Address'
+import Balance from './Balance'
+import Owners from './Owners'
+import Confirmations from './Confirmations'
+
+type SafeProps = {
+  safe: Safe,
+  balance: string,
+}
+
+const listStyle = {
+  width: '100%',
+}
+
+class GnoSafe extends React.PureComponent<SafeProps> {
+  render() {
+    const { safe, balance } = this.props
+
+    return (
+      <Row>
+        <Col xs={12} top="xs" sm={4} margin="xl">
+          <List style={listStyle}>
+            <Balance balance={balance} />
+            <Owners owners={safe.owners} />
+            <Confirmations confirmations={safe.get('confirmations')} />
+            <Address address={safe.get('address')} />
+          </List>
+        </Col>
+        <Col xs={12} center="xs" sm={8} margin="xl" layout="block">
+          <Block margin="xl">
+            <Paragraph size="lg" noMargin align="right">
+              <Bold>{safe.name.toUpperCase()}</Bold>
+            </Paragraph>
+          </Block>
+          <Block>
+            Extra info will be placed here
+          </Block>
+        </Col>
+      </Row>
+    )
+  }
+}
+
+/*
+        <Paragraph size="lg">
+          <Bold>{safe.name.toUpperCase()}</Bold>
+*/
+export default GnoSafe