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',
-  borderBottomRightRadius: '4px',
-  borderBottomLeftRadius: '4px',
+  padding: sm,
 }
 
 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,14 +130,8 @@ class GnoStepper extends React.PureComponent<Props, State> {
         >
           {(submitting: boolean, validating: boolean, ...rest: any) => {
             const disabled = disabledWhenValidating ? submitting || validating : submitting
-
-            return (
-              <Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical">
-                {steps.map(label => (
-                  <FormStep key={label}>
-                    <StepLabel>{label}</StepLabel>
-                    <StepContent>
-                      {activePage(rest)}
+            const controls = (
+              <React.Fragment>
                 <Hairline />
                 <Controls
                   disabled={disabled}
@@ -147,6 +141,16 @@ class GnoStepper extends React.PureComponent<Props, State> {
                   firstPage={page === 0}
                   lastPage={isLastPage}
                 />
+              </React.Fragment>
+            )
+
+            return (
+              <Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical">
+                {steps.map(label => (
+                  <FormStep key={label}>
+                    <StepLabel>{label}</StepLabel>
+                    <StepContent>
+                      {activePage(controls, rest)}
                     </StepContent>
                   </FormStep>
                 ))}