Adding controls to Review page

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

@@ -4,6 +4,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'
 import Block from '~/components/layout/Block'
 import Bold from '~/components/layout/Bold'
 import Col from '~/components/layout/Col'
+import OpenPaper from '~/routes/open/components/OpenPaper'
 import Paragraph from '~/components/layout/Paragraph'
 import Pre from '~/components/layout/Pre'
 import Row from '~/components/layout/Row'
@@ -28,11 +29,11 @@ const Deployment = ({ address, tx }: Props) => (
   </Block>
 )
 
-export default ({ address, tx }: Props) => ({ submitting }: FormProps) => {
+export default ({ address, tx }: Props) => (controls: React$Node, { submitting }: FormProps) => {
   const txFinished = !!address
 
   return (
-    <Block>
+    <OpenPaper controls={controls}>
       { !txFinished &&
         <React.Fragment>
           <Paragraph align="center" size="lg">
@@ -51,6 +52,6 @@ export default ({ address, tx }: Props) => ({ submitting }: FormProps) => {
           }
         </Col>
       </Row>
-    </Block>
+    </OpenPaper>
   )
 }

src/routes/open/components/Layout.jsx

@@ -16,7 +16,7 @@ import { history } from '~/store'
 import { secondary } from '~/theme/variables'
 
 const getSteps = () => [
-  'Start', 'Owners', 'Confirmations', 'Review',
+  'Start', 'Details', 'Review', 'Submit',
 ]
 
 const initialValuesFrom = (userAccount: string) => ({

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

@@ -3,22 +3,19 @@ import * as React from 'react'
 import { getNamesFrom, getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
 import Block from '~/components/layout/Block'
 import Bold from '~/components/layout/Bold'
+import OpenPaper from '~/routes/open/components/OpenPaper'
 import Col from '~/components/layout/Col'
 import Heading from '~/components/layout/Heading'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
 import { FIELD_NAME, FIELD_CONFIRMATIONS, FIELD_DAILY_LIMIT } from '../fields'
 
-type FormProps = {
-  values: Object,
-}
-
-const ReviewInformation = () => ({ values }: FormProps) => {
+const ReviewInformation = () => (controls: React$Node, { values }: Object) => {
   const names = getNamesFrom(values)
   const addresses = getAccountsFrom(values)
 
   return (
-    <Block>
+    <OpenPaper controls={controls}>
       <Heading tag="h2">Review the Safe information</Heading>
       <Paragraph>
         <Bold>Safe Name: </Bold> {values[FIELD_NAME]}
@@ -44,7 +41,7 @@ const ReviewInformation = () => ({ values }: FormProps) => {
           </Col>
         </Row>
       ))}
-    </Block>
+    </OpenPaper>
   )
 }