add step descriptions, button layout

src/data/form-publish.json

@@ -4,6 +4,7 @@
   "steps": [
     {
       "title": "Essentials",
+      "description": "A description about these essential fields",
       "fields": {
         "name": {
           "label": "Title",
@@ -23,6 +24,7 @@
     },
     {
       "title": "Information",
+      "description": "A description about these fields",
       "fields": {
         "description": {
           "label": "Description",
@@ -72,6 +74,7 @@
     },
     {
       "title": "Credentials",
+      "description": "A description about these credentials fields",
       "fields": {
         "author": {
           "label": "Author",

src/routes/Publish/Step.module.scss

@@ -1,5 +1,28 @@
 @import '../../styles/variables';
 
+.header {
+    margin-bottom: $spacer * 1.5;
+    border-bottom: .1rem solid $brand-grey-lighter;
+}
+
 .title {
     font-size: $font-size-h2;
+    margin: 0;
+}
+
+.description {
+    margin-top: $spacer / 4;
+}
+
+.actions {
+    display: flex;
+    justify-content: space-between;
+    border-top: .1rem solid $brand-grey-lighter;
+    padding-top: $spacer;
+    margin-top: $spacer * 2;
+
+    button:last-child {
+        min-width: 12rem;
+        margin-left: auto;
+    }
 }

src/routes/Publish/Step.tsx

@@ -16,6 +16,7 @@ interface StepProps {
     files?: any
     state: any
     title: string
+    description: string
     next: any
     prev: any
     totalSteps: number
@@ -26,7 +27,11 @@ export default class Step extends PureComponent<StepProps, {}> {
         let { currentStep, prev } = this.props
 
         if (currentStep !== 1) {
-            return <Button onClick={prev}>Previous</Button>
+            return (
+                <Button link onClick={prev}>
+                    ← Previous
+                </Button>
+            )
         }
         return null
     }
@@ -35,7 +40,7 @@ export default class Step extends PureComponent<StepProps, {}> {
         let { currentStep, next, totalSteps } = this.props
 
         if (currentStep < totalSteps) {
-            return <Button onClick={next}>Next</Button>
+            return <Button onClick={next}>Next →</Button>
         }
         return null
     }
@@ -45,6 +50,7 @@ export default class Step extends PureComponent<StepProps, {}> {
             currentStep,
             index,
             title,
+            description,
             fields,
             inputChange,
             inputToArrayChange,
@@ -59,7 +65,11 @@ export default class Step extends PureComponent<StepProps, {}> {
 
         return (
             <>
-                <h3 className={styles.title}>{title}</h3>
+                <header className={styles.header}>
+                    <h2 className={styles.title}>{title}</h2>
+                    <p className={styles.description}>{description}</p>
+                </header>
+
                 {fields &&
                     Object.entries(fields).map(([key, value]) => {
                         let onChange = inputChange
@@ -102,22 +112,24 @@ export default class Step extends PureComponent<StepProps, {}> {
                         )
                     })}
 
-                {this.previousButton()}
-                {this.nextButton()}
+                <div className={styles.actions}>
+                    {this.previousButton()}
+                    {this.nextButton()}
 
-                {currentStep === totalSteps && (
-                    <User.Consumer>
-                        {states =>
-                            states.isLogged ? (
-                                <Button primary>Register asset</Button>
-                            ) : (
-                                <Button onClick={states.startLogin}>
-                                    Register asset (login first)
-                                </Button>
-                            )
-                        }
-                    </User.Consumer>
-                )}
+                    {currentStep === totalSteps && (
+                        <User.Consumer>
+                            {states =>
+                                states.isLogged ? (
+                                    <Button primary>Register asset</Button>
+                                ) : (
+                                    <Button onClick={states.startLogin}>
+                                        Register asset (login first)
+                                    </Button>
+                                )
+                            }
+                        </User.Consumer>
+                    )}
+                </div>
             </>
         )
     }

src/routes/Publish/index.tsx

@@ -182,6 +182,7 @@ class Publish extends Component<{}, PublishState> {
                                     key={index}
                                     index={index}
                                     title={step.title}
+                                    description={step.description}
                                     currentStep={this.state.currentStep}
                                     fields={step.fields}
                                     inputChange={this.inputChange}