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

style name & symbol output

This commit is contained in:
Matthias Kretschmann 2020-09-11 13:33:33 +02:00
parent 7bda8b7c13
commit bc6b9ec8b1
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 32 additions and 12 deletions

View File

@ -18,14 +18,18 @@
border: 1px solid var(--brand-grey-lighter);
border-radius: 50%;
background-color: var(--brand-white);
margin-bottom: var(--spacer);
margin-bottom: calc(var(--spacer) / 2);
}
.coin:last-child .icon path {
fill: var(--brand-grey-dimmed);
stroke: var(--brand-black);
stroke-width: 5px;
stroke-linejoin: round;
fill: var(--brand-violet);
}
.tokenName {
font-size: var(--font-size-base);
color: var(--brand-grey);
text-align: center;
margin-bottom: calc(var(--spacer) / 2);
}
.data {

View File

@ -4,16 +4,17 @@ import styles from './Coin.module.css'
import InputElement from '../../../atoms/Input/InputElement'
import { ReactComponent as Logo } from '../../../../images/logo.svg'
import Conversion from '../../../atoms/Price/Conversion'
import { DataTokenOptions } from '@oceanprotocol/react'
export default function Coin({
symbol,
datatokenOptions,
name,
value,
weight,
onOceanChange,
readOnly
}: {
symbol: string
datatokenOptions: DataTokenOptions
name: string
value: string
weight: string
@ -26,6 +27,10 @@ export default function Coin({
<Logo />
</figure>
<h4 className={styles.tokenName}>
{datatokenOptions?.name || 'Data Token'}
</h4>
<div className={styles.data}>
<InputElement
value={value}
@ -33,7 +38,7 @@ export default function Coin({
type="number"
onChange={onOceanChange}
readOnly={readOnly}
prefix={symbol}
prefix={datatokenOptions?.symbol || 'DT'}
/>
<Conversion price={value} className={stylesIndex.conversion} />

View File

@ -1,5 +1,4 @@
import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import stylesIndex from './index.module.css'
import styles from './Dynamic.module.css'
import FormHelp from '../../../atoms/Input/Help'
@ -83,14 +82,14 @@ export default function Dynamic({
<div className={styles.tokens}>
<Coin
name="ocean"
symbol="OCEAN"
datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
value={ocean}
weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
onOceanChange={onOceanChange}
/>
<Coin
name="tokensToMint"
symbol={datatokenOptions.symbol}
datatokenOptions={datatokenOptions}
value={tokensToMint.toString()}
weight={`${Number(weightOnDataToken) * 10}%`}
readOnly

View File

@ -6,3 +6,11 @@
.fixed label {
display: none;
}
.datatoken {
color: var(--color-secondary);
margin-top: calc(var(--spacer) / 4);
text-align: center;
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
}

View File

@ -33,8 +33,12 @@ export default function Fixed({
onChange={onChange}
/>
<Conversion price={ocean} className={stylesIndex.conversion} />
</div>
{datatokenOptions && (
<div className={styles.datatoken}>
{datatokenOptions?.symbol} | {datatokenOptions?.name}
</div>
)}
</div>
</div>
)