From b44c30923dd1a219e0a4fcbeeaa3720571ec67cb Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mmvsha73@gmail.com>
Date: Tue, 10 Sep 2019 18:58:28 +0400
Subject: [PATCH] Stepper clickable steps

---
 src/components/Stepper/index.jsx              | 32 +++++++++++++++----
 .../load/components/DetailsForm/index.jsx     |  7 ++--
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/Stepper/index.jsx b/src/components/Stepper/index.jsx
index d256c24f..942f6c10 100644
--- a/src/components/Stepper/index.jsx
+++ b/src/components/Stepper/index.jsx
@@ -143,12 +143,24 @@ const GnoStepper = (props: Props) => {
 
           return (
             <Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical">
-              {steps.map((label) => (
-                <FormStep key={label}>
-                  <StepLabel>{label}</StepLabel>
-                  <StepContent TransitionProps={transitionProps}>{activePage(controls, ...rest)}</StepContent>
-                </FormStep>
-              ))}
+              {steps.map((label, index) => {
+                const labelProps = {}
+                const isClickable = index < page
+
+                if (isClickable) {
+                  labelProps.onClick = () => {
+                    setPage(index)
+                  }
+                  labelProps.className = classes.pointerCursor
+                }
+
+                return (
+                  <FormStep key={label}>
+                    <StepLabel {...labelProps}>{label}</StepLabel>
+                    <StepContent TransitionProps={transitionProps}>{activePage(controls, ...rest)}</StepContent>
+                  </FormStep>
+                )
+              })}
             </Stepper>
           )
         }}
@@ -162,6 +174,14 @@ const styles = {
     flex: '1 1 auto',
     backgroundColor: 'transparent',
   },
+  pointerCursor: {
+    '& > .MuiStepLabel-iconContainer': {
+      cursor: 'pointer',
+    },
+    '& > .MuiStepLabel-labelContainer': {
+      cursor: 'pointer',
+    },
+  },
 }
 
 export default withStyles(styles)(GnoStepper)
diff --git a/src/routes/load/components/DetailsForm/index.jsx b/src/routes/load/components/DetailsForm/index.jsx
index bfbdb1a3..f8889afb 100644
--- a/src/routes/load/components/DetailsForm/index.jsx
+++ b/src/routes/load/components/DetailsForm/index.jsx
@@ -97,10 +97,13 @@ export const safeFieldsValidation = async (values: Object) => {
 
 const Details = ({ classes, errors, form }: Props) => (
   <>
-    <Block margin="sm">
+    <Block margin="md">
       <Paragraph noMargin size="lg" color="primary">
         You are about to load an existing Gnosis Safe. First, choose a name and enter the Safe address. The name is only
-        stored locally and will never be shared with Gnosis or any third parties
+        stored locally and will never be shared with Gnosis or any third parties.
+        <br />
+        Your connected wallet does not have to be the owner of this Safe. In this case, the interface will provide you a
+        read-only view.
       </Paragraph>
     </Block>
     <Block className={classes.root}>