Editing controls in Stepper component

src/components/Stepper/Controls/index.jsx

@@ -1,26 +1,39 @@
 // @flow
 import * as React from 'react'
 import Button from '~/components/layout/Button'
+import Col from '~/components/layout/Col'
+import Row from '~/components/layout/Row'
 
 type ControlProps = {
   next: string,
+  back: string,
   onPrevious: () => void,
   firstPage: boolean,
   disabled: boolean,
 }
 
+const controlStyle = {
+  backgroundColor: 'white',
+  padding: '8px',
+  borderBottomRightRadius: '4px',
+  borderBottomLeftRadius: '4px',
+}
+
 const ControlButtons = ({
-  next, firstPage, onPrevious, disabled,
+  next, back, firstPage, onPrevious, disabled,
 }: ControlProps) => (
-  <React.Fragment>
+  <Row style={controlStyle} align="end" margin="lg" grow>
+    <Col xs={12} end="xs">
       <Button
         type="button"
         disabled={firstPage || disabled}
         onClick={onPrevious}
+        size="small"
       >
-      Back
+        {back}
       </Button>
       <Button
+        size="small"
         variant="raised"
         color="primary"
         type="submit"
@@ -28,7 +41,8 @@ const ControlButtons = ({
       >
         {next}
       </Button>
-  </React.Fragment>
+    </Col>
+  </Row>
 )
 
 type Props = {
@@ -47,7 +61,9 @@ const Controls = ({
     ? <React.Fragment>{finishedButton}</React.Fragment>
     : <ControlButtons
       disabled={disabled}
-      next={lastPage ? 'Finish' : 'Next'}
+      back={firstPage ? 'Cancel' : 'Back'}
+      // eslint-disable-next-line
+      next={firstPage ? 'Start' : lastPage ? 'Finish' : 'Next'}
       firstPage={firstPage}
       onPrevious={onPrevious}
     />

src/components/Stepper/index.jsx

@@ -6,9 +6,8 @@ import StepContent from '@material-ui/core/StepContent'
 import { withStyles } from '@material-ui/core/styles'
 import * as React from 'react'
 import GnoForm from '~/components/forms/GnoForm'
+import Hairline from '~/components/layout/Hairline'
 import Button from '~/components/layout/Button'
-import Col from '~/components/layout/Col'
-import Row from '~/components/layout/Row'
 import Controls from './Controls'
 
 export { default as Step } from './Step'
@@ -139,8 +138,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
                     <StepLabel>{label}</StepLabel>
                     <StepContent>
                       {activePage(rest)}
-                      <Row align="end" margin="lg" grow>
+                      <Hairline />
-                        <Col xs={12} center="xs">
                       <Controls
                         disabled={disabled}
                         finishedTx={finishedTransaction}
@@ -149,8 +147,6 @@ class GnoStepper extends React.PureComponent<Props, State> {
                         firstPage={page === 0}
                         lastPage={isLastPage}
                       />
-                        </Col>
-                      </Row>
                     </StepContent>
                   </FormStep>
                 ))}

src/components/layout/Hairline/index.js

@@ -14,7 +14,7 @@ type Props = {
   margin?: Size,
 }
 
-const Hairline = ({ margin = 'md' }: Props) => {
+const Hairline = ({ margin }: Props) => {
   const style = calculateStyleFrom(margin)
 
   return <div style={style} />

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

@@ -9,6 +9,8 @@ const styles = () => ({
   root: {
     padding: lg,
     maxWidth: '770px',
+    borderBottomRightRadius: '0px',
+    borderBottomLeftRadius: '0px',
   },
   container: {
     maxWidth: '600px',

src/theme/size.js

@@ -16,6 +16,6 @@ export const getSize = (size: Size) => {
   case 'xl':
     return xl
   default:
-    return md
+    return '0px'
   }
 }