mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
styling & copy
This commit is contained in:
parent
bc6b9ec8b1
commit
09e68d44cd
@ -100,11 +100,11 @@
|
|||||||
"price": {
|
"price": {
|
||||||
"fixed": {
|
"fixed": {
|
||||||
"title": "Fixed",
|
"title": "Fixed",
|
||||||
"info": "Set your price for accessing this data set. A Data Token contract for this data set, worth the entered amount of OCEAN will be created."
|
"info": "Set your price for accessing this data set. A Data Token for this data set, worth the entered amount of OCEAN, will be created."
|
||||||
},
|
},
|
||||||
"dynamic": {
|
"dynamic": {
|
||||||
"title": "Dynamic",
|
"title": "Dynamic",
|
||||||
"info": "Let's create a decentralized, automated market for your data set. A Data Token contract for this data set worth the entered amount of OCEAN will be created. Additionally, you will provide liquidity into a Data Token/OCEAN liquidity pool with Balancer.",
|
"info": "Let's create a decentralized, automated market for your data set. A Data Token for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a Data Token/OCEAN liquidity pool with Balancer.",
|
||||||
"tooltips": {
|
"tooltips": {
|
||||||
"poolInfo": "Help me",
|
"poolInfo": "Help me",
|
||||||
"liquidityProviderFee": "Help me"
|
"liquidityProviderFee": "Help me"
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
.advanced {
|
.dynamic {
|
||||||
|
composes: content from './index.module.css';
|
||||||
}
|
}
|
||||||
|
|
||||||
.wallet {
|
.wallet {
|
||||||
@ -36,8 +37,8 @@
|
|||||||
.tokens {
|
.tokens {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
||||||
margin-left: -3rem;
|
margin-left: -2rem;
|
||||||
margin-right: -3rem;
|
margin-right: -2rem;
|
||||||
border-bottom: 1px solid var(--brand-grey-lighter);
|
border-bottom: 1px solid var(--brand-grey-lighter);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -50,7 +51,6 @@
|
|||||||
.summary {
|
.summary {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: var(--spacer);
|
margin-top: var(--spacer);
|
||||||
margin-bottom: -2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary input {
|
.summary input {
|
||||||
@ -58,8 +58,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alertArea {
|
.alertArea {
|
||||||
margin-left: -3rem;
|
margin-left: -2rem;
|
||||||
margin-right: -3rem;
|
margin-right: -2rem;
|
||||||
padding: var(--spacer) calc(var(--spacer) / 2);
|
padding: var(--spacer) calc(var(--spacer) / 2);
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
margin-top: var(--spacer);
|
margin-top: var(--spacer);
|
||||||
|
@ -61,8 +61,7 @@ export default function Dynamic({
|
|||||||
}, [ocean, chainId, account])
|
}, [ocean, chainId, account])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={stylesIndex.content}>
|
<div className={styles.dynamic}>
|
||||||
<div className={styles.advanced}>
|
|
||||||
<FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
|
<FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
|
||||||
|
|
||||||
<aside className={styles.wallet}>
|
<aside className={styles.wallet}>
|
||||||
@ -115,6 +114,5 @@ export default function Dynamic({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,19 @@
|
|||||||
|
.fixed {
|
||||||
|
composes: content from './index.module.css';
|
||||||
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
max-width: 12rem;
|
max-width: 12rem;
|
||||||
margin: 0 auto;
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin-top: var(--spacer);
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacer);
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed label {
|
.fixed label {
|
||||||
@ -9,8 +22,11 @@
|
|||||||
|
|
||||||
.datatoken {
|
.datatoken {
|
||||||
color: var(--color-secondary);
|
color: var(--color-secondary);
|
||||||
margin-top: calc(var(--spacer) / 4);
|
|
||||||
text-align: center;
|
|
||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datatoken strong {
|
||||||
|
color: var(--brand-grey);
|
||||||
}
|
}
|
||||||
|
@ -19,12 +19,12 @@ export default function Fixed({
|
|||||||
content: any
|
content: any
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
return (
|
return (
|
||||||
<div className={stylesIndex.content}>
|
|
||||||
<div className={styles.fixed}>
|
<div className={styles.fixed}>
|
||||||
<FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
|
<FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
|
||||||
|
|
||||||
|
<div className={styles.grid}>
|
||||||
<div className={styles.form}>
|
<div className={styles.form}>
|
||||||
<Label htmlFor="ocean">Ocean Tokens</Label>
|
<Label htmlFor="ocean">Ocean Token</Label>
|
||||||
<InputElement
|
<InputElement
|
||||||
value={ocean}
|
value={ocean}
|
||||||
name="ocean"
|
name="ocean"
|
||||||
@ -36,7 +36,9 @@ export default function Fixed({
|
|||||||
</div>
|
</div>
|
||||||
{datatokenOptions && (
|
{datatokenOptions && (
|
||||||
<div className={styles.datatoken}>
|
<div className={styles.datatoken}>
|
||||||
{datatokenOptions?.symbol} | {datatokenOptions?.name}
|
<strong>Data Token</strong>
|
||||||
|
<br />
|
||||||
|
{datatokenOptions?.name} | {datatokenOptions?.symbol}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 0 calc(var(--spacer) / 2);
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content label {
|
.content label {
|
||||||
|
@ -2,12 +2,7 @@ import React, { ReactElement } from 'react'
|
|||||||
import { useNavigate } from '@reach/router'
|
import { useNavigate } from '@reach/router'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import { Formik } from 'formik'
|
import { Formik } from 'formik'
|
||||||
import {
|
import { usePublish, DataTokenOptions } from '@oceanprotocol/react'
|
||||||
usePublish,
|
|
||||||
useOcean,
|
|
||||||
PriceOptions,
|
|
||||||
DataTokenOptions
|
|
||||||
} from '@oceanprotocol/react'
|
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import PublishForm from './PublishForm'
|
import PublishForm from './PublishForm'
|
||||||
import Web3Feedback from '../../molecules/Wallet/Feedback'
|
import Web3Feedback from '../../molecules/Wallet/Feedback'
|
||||||
@ -16,7 +11,7 @@ import { initialValues, validationSchema } from '../../../models/FormPublish'
|
|||||||
import { transformPublishFormToMetadata } from './utils'
|
import { transformPublishFormToMetadata } from './utils'
|
||||||
import Preview from './Preview'
|
import Preview from './Preview'
|
||||||
import { MetadataPublishForm } from '../../../@types/MetaData'
|
import { MetadataPublishForm } from '../../../@types/MetaData'
|
||||||
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
// import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
||||||
import { useUserPreferences } from '../../../providers/UserPreferences'
|
import { useUserPreferences } from '../../../providers/UserPreferences'
|
||||||
|
|
||||||
export default function PublishPage({
|
export default function PublishPage({
|
||||||
|
Loading…
Reference in New Issue
Block a user