From 6edbf338bc63bbc7c8024dbd8fc61cce41636136 Mon Sep 17 00:00:00 2001
From: Adolfo Panizo <adolfo.panizo@gmail.com>
Date: Sun, 16 Sep 2018 09:47:22 +0200
Subject: [PATCH] Passing Stepper controls down to the Paper step component

---
 src/components/Stepper/Controls/index.jsx |  7 +++----
 src/components/Stepper/index.jsx          | 24 +++++++++++++----------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/Stepper/Controls/index.jsx b/src/components/Stepper/Controls/index.jsx
index 21634e23..aa4962fb 100644
--- a/src/components/Stepper/Controls/index.jsx
+++ b/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"
diff --git a/src/components/Stepper/index.jsx b/src/components/Stepper/index.jsx
index 0e24f32e..80744bc8 100644
--- a/src/components/Stepper/index.jsx
+++ b/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)}
-                      <Hairline />
-                      <Controls
-                        disabled={disabled}
-                        finishedTx={finishedTransaction}
-                        finishedButton={finished}
-                        onPrevious={this.previous}
-                        firstPage={page === 0}
-                        lastPage={isLastPage}
-                      />
+                      {activePage(controls, rest)}
                     </StepContent>
                   </FormStep>
                 ))}