basic feedback message styling, fix publishing

src/components/atoms/Spinner.module.scss

@@ -3,7 +3,7 @@
 .spinner {
     position: relative;
     text-align: center;
-    margin-bottom: $spacer * 2;
+    margin-bottom: $spacer;
     margin-top: $spacer * 2;
 
     &:before {

src/data/form-publish.json

@@ -105,7 +105,9 @@
       }
     },
     {
-      "title": "Register"
+      "title": "Register",
+      "description": "We got all the data, now let's register your data set.",
+      "content": "After clicking the button below you will be asked by your wallet to sign this request."
     }
   ]
 }

src/routes/Publish/Step.tsx

@@ -23,6 +23,7 @@ interface StepProps {
     tryAgain: any
     toStart: any
     publishedDid?: string
+    content?: string
 }
 
 export default class Step extends PureComponent<StepProps, {}> {
@@ -60,7 +61,8 @@ export default class Step extends PureComponent<StepProps, {}> {
             state,
             totalSteps,
             tryAgain,
-            toStart
+            toStart,
+            content
         } = this.props
 
         if (currentStep !== index + 1) {
@@ -123,6 +125,7 @@ export default class Step extends PureComponent<StepProps, {}> {
                         tryAgain={tryAgain}
                         toStart={toStart}
                         state={state}
+                        content={content}
                     />
                 )}
 

src/routes/Publish/StepRegisterContent.module.scss

@@ -0,0 +1,5 @@
+@import '../../styles/variables';
+
+.message {
+    margin-bottom: $spacer;
+}

src/routes/Publish/StepRegisterContent.tsx

@@ -1,11 +1,13 @@
 import React, { PureComponent } from 'react'
 import Web3message from '../../components/Web3message'
 import Spinner from '../../components/atoms/Spinner'
+import styles from './StepRegisterContent.module.scss'
 
 interface StepRegisterContentProps {
     tryAgain: any
     toStart: any
     state: any
+    content?: string
 }
 
 export default class StepRegisterContent extends PureComponent<
@@ -17,19 +19,19 @@ export default class StepRegisterContent extends PureComponent<
     )
 
     public errorState = () => (
-        <div>
+        <div className={styles.message}>
             Something went wrong,{' '}
             <a onClick={() => this.props.tryAgain()}>try again</a>
         </div>
     )
 
     public publishedState = () => (
-        <p>
+        <div className={styles.message}>
             Your asset is published! See it{' '}
             <a href={'/asset/' + this.props.state.publishedDid}>here</a>, submit
             another asset by clicking{' '}
             <a onClick={() => this.props.toStart()}>here</a>
-        </p>
+        </div>
     )
 
     public render() {
@@ -44,7 +46,7 @@ export default class StepRegisterContent extends PureComponent<
                 ) : this.props.state.isPublished ? (
                     this.publishedState()
                 ) : (
-                    <div>Hello</div>
+                    <p>{this.props.content}</p>
                 )}
             </>
         )

src/routes/Publish/index.tsx

@@ -3,6 +3,7 @@ import { Logger } from '@oceanprotocol/squid'
 import Route from '../../components/templates/Route'
 import Form from '../../components/atoms/Form/Form'
 import AssetModel from '../../models/AssetModel'
+import { User } from '../../context/User'
 import Step from './Step'
 import Progress from './Progress'
 
@@ -185,6 +186,7 @@ class Publish extends Component<{}, PublishState> {
                             totalSteps={form.steps.length}
                             tryAgain={this.tryAgain}
                             toStart={this.toStart}
+                            content={step.content}
                         />
                     ))}
                 </Form>
@@ -193,4 +195,5 @@ class Publish extends Component<{}, PublishState> {
     }
 }
 
+Publish.contextType = User
 export default Publish