diff --git a/src/components/atoms/Form/Form.module.scss b/src/components/atoms/Form/Form.module.scss
index 27fb268..b7d8752 100644
--- a/src/components/atoms/Form/Form.module.scss
+++ b/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;
diff --git a/src/data/form-publish.json b/src/data/form-publish.json
index 965c4dd..6b9aba8 100644
--- a/src/data/form-publish.json
+++ b/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"
}
]
}
diff --git a/src/routes/Publish/Progress.module.scss b/src/routes/Publish/Progress.module.scss
new file mode 100644
index 0000000..6e89805
--- /dev/null
+++ b/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;
+}
diff --git a/src/routes/Publish/Progress.tsx b/src/routes/Publish/Progress.tsx
index 91e6cb3..5880dec 100644
--- a/src/routes/Publish/Progress.tsx
+++ b/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 (
-
+
+ {steps.map(({ title }, index) => (
+ - index + 1
+ ? styles.completed
+ : styles.item
+ }
+ >
+ {index + 1}
+ {title}
+
+ ))}
+
)
}
diff --git a/src/routes/Publish/Step.module.scss b/src/routes/Publish/Step.module.scss
index 0ee678a..97d8555 100644
--- a/src/routes/Publish/Step.module.scss
+++ b/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;
diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx
index 6d2e88f..c8236ee 100644
--- a/src/routes/Publish/Step.tsx
+++ b/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 {
@@ -56,13 +58,16 @@ export default class Step extends PureComponent {
inputToArrayChange,
files,
state,
- totalSteps
+ totalSteps,
+ component
} = this.props
if (currentStep !== index + 1) {
return null
}
+ const lastStep = currentStep === totalSteps
+
return (
<>
@@ -112,11 +117,13 @@ export default class Step extends PureComponent {
)
})}
+ {lastStep && }
+
{this.previousButton()}
{this.nextButton()}
- {currentStep === totalSteps && (
+ {lastStep && (
{states =>
states.isLogged ? (
diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx
index 298f9f0..ff5600a 100644
--- a/src/routes/Publish/index.tsx
+++ b/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 (
-
-
-
+
{this.state.isPublishing ? (
this.publishingState()
) : this.state.publishingError ? (
@@ -173,7 +173,6 @@ class Publish extends Component<{}, PublishState> {