Editing controls in Stepper component

src/components/Stepper/Controls/index.jsx

@@ -1,34 +1,48 @@
 // @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>
-    <Button
-      type="button"
-      disabled={firstPage || disabled}
-      onClick={onPrevious}
-    >
-      Back
-    </Button>
-    <Button
-      variant="raised"
-      color="primary"
-      type="submit"
-      disabled={disabled}
-    >
-      {next}
-    </Button>
-  </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}
+      </Button>
+      <Button
+        size="small"
+        variant="raised"
+        color="primary"
+        type="submit"
+        disabled={disabled}
+      >
+        {next}
+      </Button>
+    </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,18 +138,15 @@ class GnoStepper extends React.PureComponent<Props, State> {
                     <StepLabel>{label}</StepLabel>
                     <StepContent>
                       {activePage(rest)}
-                      <Row align="end" margin="lg" grow>
-                        <Col xs={12} center="xs">
-                          <Controls
-                            disabled={disabled}
-                            finishedTx={finishedTransaction}
-                            finishedButton={finished}
-                            onPrevious={this.previous}
-                            firstPage={page === 0}
-                            lastPage={isLastPage}
-                          />
-                        </Col>
-                      </Row>
+                      <Hairline />
+                      <Controls
+                        disabled={disabled}
+                        finishedTx={finishedTransaction}
+                        finishedButton={finished}
+                        onPrevious={this.previous}
+                        firstPage={page === 0}
+                        lastPage={isLastPage}
+                      />
                     </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'
   }
 }