1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

styling & copy

This commit is contained in:
Matthias Kretschmann 2020-09-11 15:13:22 +02:00
parent bc6b9ec8b1
commit 09e68d44cd
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 85 additions and 74 deletions

View File

@ -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"

View File

@ -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);

View File

@ -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>
) )
} }

View File

@ -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);
} }

View File

@ -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>

View File

@ -5,7 +5,7 @@
} }
.content { .content {
padding: 0 calc(var(--spacer) / 2); padding: 0;
} }
.content label { .content label {

View File

@ -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({