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

firstPrice styling

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-10-26 19:17:20 +01:00
parent 2ac9a7cf1b
commit 30ebed4e29
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 57 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css
View File

@ -58,8 +58,3 @@
margin-right: -2rem;
padding: 0 calc(var(--spacer) / 2);
}
.firstPrice {
text-align: center;
padding-top: calc(var(--spacer) / 4);
}

9
src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
View File

@ -98,14 +98,7 @@ export default function Dynamic({
Price <Tooltip content={content.tooltips.poolInfo} />
</h4>
<Price ddo={ddo} />
{Number(firstPrice) > 0 && (
<aside className={styles.firstPrice}>
Expected first price:{' '}
<PriceUnit price={firstPrice} small conversion />
</aside>
)}
<Price ddo={ddo} firstPrice={firstPrice} />
<h4 className={styles.title}>
Datatoken Liquidity Pool <Tooltip content={content.tooltips.poolInfo} />

21
src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css
View File

@ -9,17 +9,20 @@
}
}
.grid {
.price {
margin-left: -2rem;
margin-right: -2rem;
padding-top: var(--spacer);
background: var(--brand-grey-dimmed);
border-top: 1px solid var(--brand-grey-lighter);
border-bottom: 1px solid var(--brand-grey-lighter);
}
.grid {
display: grid;
gap: var(--spacer);
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
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 {
@ -42,3 +45,13 @@
.datatoken strong {
color: var(--brand-grey-dark);
}
.firstPrice {
font-size: var(--font-size-small);
color: var(--color-secondary);
text-align: center;
margin-top: -1rem;
padding-top: calc(var(--spacer) / 3);
padding-bottom: calc(var(--spacer) / 3);
border-top: 1px solid var(--brand-grey-lighter);
}

59
src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx
View File

@ -6,32 +6,51 @@ import Input from '../../../../atoms/Input'
import styles from './Price.module.css'
import Error from './Error'
import { DDO } from '@oceanprotocol/lib'
import PriceUnit from '../../../../atoms/Price/PriceUnit'
export default function Price({ ddo }: { ddo: DDO }): ReactElement {
export default function Price({
ddo,
firstPrice
}: {
ddo: DDO
firstPrice?: string
}): ReactElement {
const [field, meta] = useField('price')
const { dtName, dtSymbol } = usePricing(ddo)
return (
<div className={styles.grid}>
<div className={styles.form}>
<Input
value={field.value}
name="price"
type="number"
prefix="OCEAN"
min="1"
{...field}
additionalComponent={
<Conversion price={field.value} className={styles.conversion} />
}
/>
<Error meta={meta} />
</div>
<div className={styles.datatoken}>
<h4>
= <strong>1</strong> {dtName} — {dtSymbol}
</h4>
<div className={styles.price}>
<div className={styles.grid}>
<div className={styles.form}>
<Input
value={field.value}
name="price"
type="number"
prefix="OCEAN"
min="1"
{...field}
additionalComponent={
<Conversion price={field.value} className={styles.conversion} />
}
/>
<Error meta={meta} />
</div>
<div className={styles.datatoken}>
<h4>
= <strong>1</strong> {dtName} — {dtSymbol}
</h4>
</div>
</div>
{firstPrice && (
<aside className={styles.firstPrice}>
Expected first price:{' '}
<PriceUnit
price={Number(firstPrice) > 0 ? firstPrice : '-'}
small
conversion
/>
</aside>
)}
</div>
)
}