diff --git a/src/components/Stepper/OpenPaper/index.jsx b/src/components/Stepper/OpenPaper/index.jsx index b833b7cf..11a51995 100644 --- a/src/components/Stepper/OpenPaper/index.jsx +++ b/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, -}: Props) => ( - - - {children} - - { controls } - -) + classes, children, controls, container, padding = true, +}: Props) => { + const containerStyle = generateContainerStyleFrom(container) + + return ( + + + {children} + + { controls } + + ) +} export default withStyles(styles)(OpenPaper) diff --git a/src/routes/open/components/SafeNameForm/index.jsx b/src/routes/open/components/SafeNameForm/index.jsx index c8ded0a3..5ca19a9e 100644 --- a/src/routes/open/components/SafeNameForm/index.jsx +++ b/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. - + + + ● + - ● 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. - - - - ● My Safe is a smart contract on the Ethereum blockchain. + + + + ● - + + My Safe is a smart contract on the Ethereum blockchain. + + ( const SafeNameForm = withStyles(styles)(SafeName) const SafeNamePage = () => (controls: React$Node) => ( - + ) diff --git a/src/routes/open/components/SafeThresholdForm/index.jsx b/src/routes/open/components/SafeThresholdForm/index.jsx index 7a3663b7..50347898 100644 --- a/src/routes/open/components/SafeThresholdForm/index.jsx +++ b/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 ( - + Set the required owner confirmations: @@ -85,7 +82,7 @@ const SafeThreshold = ({ classes, values }: Props) => { - + ) } @@ -93,7 +90,7 @@ const SafeThresholdForm = withStyles(styles)(SafeThreshold) const SafeOwnersPage = () => (controls: React$Node, { values }: Object) => ( - +