Passing Stepper controls down to the Paper step component

src/components/Stepper/Controls/index.jsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import Button from '~/components/layout/Button'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
+import { sm } from '~/theme/variables'
 
 type ControlProps = {
   next: string,
@@ -14,15 +15,13 @@ type ControlProps = {
 
 const controlStyle = {
   backgroundColor: 'white',
-  padding: '8px',
+  padding: sm,
-  borderBottomRightRadius: '4px',
-  borderBottomLeftRadius: '4px',
 }
 
 const ControlButtons = ({
   next, back, firstPage, onPrevious, disabled,
 }: ControlProps) => (
-  <Row style={controlStyle} align="end" margin="lg" grow>
+  <Row style={controlStyle} align="end" grow>
     <Col xs={12} end="xs">
       <Button
         type="button"

src/components/Stepper/index.jsx

@@ -130,6 +130,19 @@ class GnoStepper extends React.PureComponent<Props, State> {
         >
           {(submitting: boolean, validating: boolean, ...rest: any) => {
             const disabled = disabledWhenValidating ? submitting || validating : submitting
+            const controls = (
+              <React.Fragment>
+                <Hairline />
+                <Controls
+                  disabled={disabled}
+                  finishedTx={finishedTransaction}
+                  finishedButton={finished}
+                  onPrevious={this.previous}
+                  firstPage={page === 0}
+                  lastPage={isLastPage}
+                />
+              </React.Fragment>
+            )
 
             return (
               <Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical">
@@ -137,16 +150,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
                   <FormStep key={label}>
                     <StepLabel>{label}</StepLabel>
                     <StepContent>
-                      {activePage(rest)}
+                      {activePage(controls, rest)}
-                      <Hairline />
-                      <Controls
-                        disabled={disabled}
-                        finishedTx={finishedTransaction}
-                        finishedButton={finished}
-                        onPrevious={this.previous}
-                        firstPage={page === 0}
-                        lastPage={isLastPage}
-                      />
                     </StepContent>
                   </FormStep>
                 ))}