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

fixed pricing styling

This commit is contained in:
Matthias Kretschmann 2020-10-20 16:11:32 +02:00
parent a058af65f6
commit 484d8b735a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 19 additions and 5 deletions

View File

@ -14,11 +14,16 @@
} }
.grid { .grid {
margin-top: var(--spacer); margin-left: -2rem;
margin-right: -2rem;
padding-top: var(--spacer);
display: grid; display: grid;
gap: var(--spacer); gap: var(--spacer);
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
justify-content: center; justify-content: center;
background: var(--brand-grey-dimmed);
border-top: 1px solid var(--brand-grey-lighter);
border-bottom: 1px solid var(--brand-grey-lighter);
} }
.fixed label { .fixed label {
@ -26,14 +31,14 @@
} }
.datatoken { .datatoken {
margin-top: calc(var(--spacer) / 6); margin-top: calc(var(--spacer) / 2);
color: var(--color-secondary); color: var(--color-secondary);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
.datatoken h4 { .datatoken h4 {
font-size: var(--font-size-small); font-size: var(--font-size-base);
color: var(--color-secondary); color: var(--color-secondary);
margin: 0; margin: 0;
} }

View File

@ -7,6 +7,7 @@ import { useField } from 'formik'
import Input from '../../../atoms/Input' import Input from '../../../atoms/Input'
import Error from './Error' import Error from './Error'
import { DDO } from '@oceanprotocol/lib' import { DDO } from '@oceanprotocol/lib'
import { usePricing } from '@oceanprotocol/react'
export default function Fixed({ export default function Fixed({
ddo, ddo,
@ -16,6 +17,7 @@ export default function Fixed({
content: any content: any
}): ReactElement { }): ReactElement {
const [field, meta] = useField('price') const [field, meta] = useField('price')
const { dtName, dtSymbol } = usePricing(ddo)
return ( return (
<div className={styles.fixed}> <div className={styles.fixed}>
@ -40,6 +42,11 @@ export default function Fixed({
/> />
<Error meta={meta} /> <Error meta={meta} />
</div> </div>
<div className={styles.datatoken}>
<h4>
= <strong>1</strong> {dtName} {dtSymbol}
</h4>
</div>
</div> </div>
</div> </div>
) )

View File

@ -1,6 +1,8 @@
.price { .price {
margin: -2rem; margin: -2rem;
margin-bottom: 0; margin-bottom: 0;
border-bottom: 1px solid var(--brand-grey-lighter);
padding-bottom: var(--spacer);
} }
.content { .content {

View File

@ -23,7 +23,7 @@ export default function Feedback({
<Button <Button
style="primary" style="primary"
size="small" size="small"
href={`/asset/${ddo.id}`} href={`/asset/${ddo?.id}`}
className={styles.action} className={styles.action}
> >
Go to data set Go to data set

View File

@ -66,7 +66,7 @@ export default function PublishPage({
resetForm() resetForm()
setSuccess( setSuccess(
'🎉 Successfully published. Now create a price on your data set. 🎉' '🎉 Successfully published. 🎉 Now create a price on your data set.'
) )
} catch (error) { } catch (error) {
setError(error.message) setError(error.message)