progress styling, visually structure form, lots of tweaks

src/components/atoms/Form/Form.module.scss

@@ -2,6 +2,10 @@
 
 .form {
     width: 100%;
+    background: $brand-white;
+    padding: $spacer;
+    border: 1px solid $brand-grey-lighter;
+    border-radius: $border-radius;
 
     fieldset {
         border: 0;

src/data/form-publish.json

@@ -18,7 +18,7 @@
           "placeholder": "i.e. https://file.com/file.json",
           "type": "text",
           "required": true,
-          "help": "Provide one or multiple links to your data files."
+          "help": "Provide one or multiple urls to your data set files."
         }
       }
     },
@@ -73,7 +73,7 @@
       }
     },
     {
-      "title": "Credentials",
+      "title": "Authorship",
       "description": "A description about these credentials fields",
       "fields": {
         "author": {
@@ -103,6 +103,9 @@
           ]
         }
       }
+    },
+    {
+      "title": "Register"
     }
   ]
 }

src/routes/Publish/Progress.module.scss

@@ -0,0 +1,76 @@
+@import '../../styles/variables';
+
+.progress {
+    display: block;
+    padding: 0;
+    position: relative;
+    margin-top: $spacer * 1.5;
+    margin-bottom: $spacer;
+}
+
+.item {
+    display: inline-block;
+    width: 25%;
+    text-align: center;
+    color: $brand-grey-light;
+
+    &:before {
+        content: '';
+        display: block;
+        width: 60%;
+        height: .1rem;
+        background: $brand-grey-lighter;
+        position: absolute;
+        top: 20%;
+        left: -30%;
+    }
+
+    &:first-child {
+        &:before {
+            display: none;
+        }
+    }
+
+    span {
+        display: block;
+    }
+}
+
+.active {
+    composes: item;
+    font-family: $font-family-button;
+    font-weight: $font-weight-bold;
+    color: $brand-black;
+
+    .number {
+        background: $brand-black;
+    }
+
+    &:before {
+        background: $green;
+    }
+}
+
+.completed {
+    composes: active;
+
+    .number {
+        background: $green;
+    }
+}
+
+.label {
+    margin-top: $spacer / 8;
+    font-size: $font-size-small;
+}
+
+.number {
+    width: 1.6rem;
+    height: 1.6rem;
+    margin: auto;
+    border-radius: 50%;
+    background: $brand-grey-light;
+    color: $brand-white;
+    font-family: $font-family-button;
+    font-weight: $font-weight-bold;
+}

src/routes/Publish/Progress.tsx

@@ -1,25 +1,31 @@
 import React from 'react'
+import styles from './Progress.module.scss'
 
 const Progress = ({
     currentStep,
-    totalSteps,
     steps
 }: {
     currentStep: number
-    totalSteps: number
     steps: any[]
 }) => {
     return (
-        <aside>
-            <ul>
-                {steps.map(({ title }, index) => (
-                    <li key={index}>
-                        {index + 1}
-                        {title}
-                    </li>
-                ))}
-            </ul>
-        </aside>
+        <ul className={styles.progress}>
+            {steps.map(({ title }, index) => (
+                <li
+                    key={index}
+                    className={
+                        currentStep === index + 1
+                            ? styles.active
+                            : currentStep > index + 1
+                            ? styles.completed
+                            : styles.item
+                    }
+                >
+                    <span className={styles.number}>{index + 1}</span>
+                    <span className={styles.label}>{title}</span>
+                </li>
+            ))}
+        </ul>
     )
 }
 

src/routes/Publish/Step.module.scss

@@ -2,7 +2,6 @@
 
 .header {
     margin-bottom: $spacer * 1.5;
-    border-bottom: .1rem solid $brand-grey-lighter;
 }
 
 .title {
@@ -19,7 +18,7 @@
     justify-content: space-between;
     border-top: .1rem solid $brand-grey-lighter;
     padding-top: $spacer;
-    margin-top: $spacer * 2;
+    margin-top: $spacer;
 
     button:last-child {
         min-width: 12rem;

src/routes/Publish/Step.tsx

@@ -1,8 +1,9 @@
-import React, { PureComponent, FormEvent } from 'react'
+import React, { PureComponent } from 'react'
 import Input from '../../components/atoms/Form/Input'
 import Label from '../../components/atoms/Form/Label'
 import Row from '../../components/atoms/Form/Row'
 import Button from '../../components/atoms/Button'
+import Web3message from '../../components/Web3message'
 import { User } from '../../context/User'
 import Files from './Files/'
 import styles from './Step.module.scss'
@@ -20,6 +21,7 @@ interface StepProps {
     next: any
     prev: any
     totalSteps: number
+    component?: string
 }
 
 export default class Step extends PureComponent<StepProps, {}> {
@@ -56,13 +58,16 @@ export default class Step extends PureComponent<StepProps, {}> {
             inputToArrayChange,
             files,
             state,
-            totalSteps
+            totalSteps,
+            component
         } = this.props
 
         if (currentStep !== index + 1) {
             return null
         }
 
+        const lastStep = currentStep === totalSteps
+
         return (
             <>
                 <header className={styles.header}>
@@ -112,11 +117,13 @@ export default class Step extends PureComponent<StepProps, {}> {
                         )
                     })}
 
+                {lastStep && <Web3message />}
+
                 <div className={styles.actions}>
                     {this.previousButton()}
                     {this.nextButton()}
 
-                    {currentStep === totalSteps && (
+                    {lastStep && (
                         <User.Consumer>
                             {states =>
                                 states.isLogged ? (

src/routes/Publish/index.tsx

@@ -3,7 +3,6 @@ import { Logger } from '@oceanprotocol/squid'
 import Route from '../../components/templates/Route'
 import Form from '../../components/atoms/Form/Form'
 import AssetModel from '../../models/AssetModel'
-import Web3message from '../../components/Web3message'
 import Step from './Step'
 import Progress from './Progress'
 
@@ -159,9 +158,10 @@ class Publish extends Component<{}, PublishState> {
 
     public render() {
         return (
-            <Route title="Publish">
-                <Web3message />
-
+            <Route
+                title="Publish"
+                description="Publish a new data set into the Ocean Protocol Network."
+            >
                 {this.state.isPublishing ? (
                     this.publishingState()
                 ) : this.state.publishingError ? (
@@ -173,7 +173,6 @@ class Publish extends Component<{}, PublishState> {
                         <Progress
                             steps={form.steps}
                             currentStep={this.state.currentStep}
-                            totalSteps={form.steps.length}
                         />
 
                         <Form onSubmit={this.registerAsset}>
@@ -192,6 +191,7 @@ class Publish extends Component<{}, PublishState> {
                                     next={this.next}
                                     prev={this.prev}
                                     totalSteps={form.steps.length}
+                                    component={step.component}
                                 />
                             ))}
                         </Form>