Refactor OpenPaper component. Now it accepts width for container component

src/components/Stepper/OpenPaper/index.jsx

@@ -22,18 +22,27 @@ type Props = {
   classes: Object,
   children: React$Node,
   controls: React$Node,
+  container?: number,
   padding?: boolean,
 }
 
+const generateContainerStyleFrom = (container?: number) => ({
+  maxWidth: container ? `${container}px` : undefined,
+})
+
 const OpenPaper = ({
-  classes, children, controls, padding = true,
+  classes, children, controls, container, padding = true,
-}: Props) => (
+}: Props) => {
-  <Paper className={classes.root} elevation={1}>
+  const containerStyle = generateContainerStyleFrom(container)
-    <Block className={`${classes.container} ${padding ? classes.padding : ''}`}>
+
-      {children}
+  return (
-    </Block>
+    <Paper className={classes.root} elevation={1}>
-    { controls }
+      <Block style={containerStyle} className={`${classes.container} ${padding ? classes.padding : ''}`}>
-  </Paper>
+        {children}
-)
+      </Block>
+      { controls }
+    </Paper>
+  )
+}
 
 export default withStyles(styles)(OpenPaper)

src/routes/open/components/SafeNameForm/index.jsx

@@ -5,9 +5,11 @@ import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
 import { required } from '~/components/forms/validator'
 import Block from '~/components/layout/Block'
+import Row from '~/components/layout/Row'
 import { FIELD_NAME } from '~/routes/open/components/fields'
 import Paragraph from '~/components/layout/Paragraph'
 import OpenPaper from '~/components/Stepper/OpenPaper'
+import { sm } from '~/theme/variables'
 
 type Props = {
   classes: Object,
@@ -16,6 +18,13 @@ type Props = {
 const styles = () => ({
   root: {
     display: 'flex',
+    maxWidth: '440px',
+  },
+  text: {
+    flexWrap: 'nowrap',
+  },
+  dot: {
+    marginRight: sm,
   },
 })
 
@@ -27,16 +36,22 @@ const SafeName = ({ classes }: Props) => (
         By continuing you consent with the terms of use and privacy policy.
       </Paragraph>
     </Block>
-    <Block margin="md">
+    <Row margin="md" className={classes.text}>
+      <Paragraph noMargin className={classes.dot} color="secondary">
+        &#9679;
+      </Paragraph>
       <Paragraph noMargin size="md" color="primary" weight="bolder">
-        &#9679; I understand that my funds are held securely in my Safe. They cannot be accessed by Gnosis.
+        I understand that my funds are held securely in my Safe. They cannot be accessed by Gnosis.
       </Paragraph>
-    </Block>
+    </Row>
-    <Block margin="md">
+    <Row margin="md">
-      <Paragraph size="md" color="primary" weight="bolder">
+      <Paragraph noMargin className={classes.dot} color="secondary">
-        &#9679; My Safe is a smart contract on the Ethereum blockchain.
+        &#9679;
       </Paragraph>
-    </Block>
+      <Paragraph noMargin size="md" color="primary" weight="bolder">
+        My Safe is a smart contract on the Ethereum blockchain.
+      </Paragraph>
+    </Row>
     <Block margin="lg" className={classes.root}>
       <Field
         name={FIELD_NAME}
@@ -53,7 +68,7 @@ const SafeName = ({ classes }: Props) => (
 const SafeNameForm = withStyles(styles)(SafeName)
 
 const SafeNamePage = () => (controls: React$Node) => (
-  <OpenPaper controls={controls}>
+  <OpenPaper controls={controls} container={600}>
     <SafeNameForm />
   </OpenPaper>
 )

src/routes/open/components/SafeThresholdForm/index.jsx

@@ -19,9 +19,6 @@ type Props = {
 }
 
 const styles = () => ({
-  root: {
-    maxWidth: '450px',
-  },
   owners: {
     paddingLeft: md,
   },
@@ -44,7 +41,7 @@ const SafeThreshold = ({ classes, values }: Props) => {
   const numOwners = getNumOwnersFrom(values)
 
   return (
-    <Block className={classes.root}>
+    <React.Fragment>
       <Block className={classes.title} margin="md">
         <Paragraph size="lg" color="primary" weight="bolder" noMargin>
           Set the required owner confirmations:
@@ -85,7 +82,7 @@ const SafeThreshold = ({ classes, values }: Props) => {
           </Paragraph>
         </Col>
       </Row>
-    </Block>
+    </React.Fragment>
   )
 }
 
@@ -93,7 +90,7 @@ const SafeThresholdForm = withStyles(styles)(SafeThreshold)
 
 const SafeOwnersPage = () => (controls: React$Node, { values }: Object) => (
   <React.Fragment>
-    <OpenPaper controls={controls}>
+    <OpenPaper controls={controls} container={450}>
       <SafeThresholdForm values={values} />
     </OpenPaper>
   </React.Fragment>