From 818404c5ef345b31a30e0a209047f99e930a0418 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 29 Jul 2020 23:36:50 +0200 Subject: [PATCH] more visual UI for advanced pricing --- .../FormFields/Price/Advanced.module.css | 19 +++++- .../molecules/FormFields/Price/Advanced.tsx | 62 ++++++----------- .../FormFields/Price/Coin.module.css | 67 +++++++++++++++++++ .../molecules/FormFields/Price/Coin.tsx | 48 +++++++++++++ .../FormFields/Price/index.module.css | 6 +- src/images/logo.svg | 26 +++++++ 6 files changed, 182 insertions(+), 46 deletions(-) create mode 100644 src/components/molecules/FormFields/Price/Coin.module.css create mode 100644 src/components/molecules/FormFields/Price/Coin.tsx create mode 100644 src/images/logo.svg diff --git a/src/components/molecules/FormFields/Price/Advanced.module.css b/src/components/molecules/FormFields/Price/Advanced.module.css index 8d4983810..c8f54757d 100644 --- a/src/components/molecules/FormFields/Price/Advanced.module.css +++ b/src/components/molecules/FormFields/Price/Advanced.module.css @@ -24,6 +24,21 @@ color: var(--brand-grey); } -.tokens { - margin-bottom: var(--spacer); +.title { + font-size: var(--font-size-base); + margin-top: var(--spacer); + margin-bottom: 0; + color: var(--color-secondary); + text-align: center; + border: 1px solid var(--brand-grey-lighter); + border-bottom: 0; + border-top-right-radius: var(--border-radius); + border-top-left-radius: var(--border-radius); + padding: calc(var(--spacer) / 3); +} + +.tokens { + display: grid; + grid-template-columns: 1fr 1fr; + margin-bottom: calc(var(--spacer) / 2); } diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index b9f0ffa2f..486c5c083 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -11,6 +11,7 @@ import FormHelp from '../../../atoms/Input/Help' import Wallet from '../../Wallet' import { useOcean } from '@oceanprotocol/react' import Alert from '../../../atoms/Alert' +import Coin from './Coin' export default function Advanced(props: InputProps): ReactElement { const { price } = props.form.values as MetadataPublishForm @@ -27,6 +28,8 @@ export default function Advanced(props: InputProps): ReactElement { useEffect(() => { if (balance.ocean < ocean) { setError(`Insufficiant balance. You need at least ${ocean} OCEAN`) + } else { + setError(undefined) } }, [ocean]) @@ -51,46 +54,25 @@ export default function Advanced(props: InputProps): ReactElement { - - - - - - - - - - - - - - - - - - - - - - -
AssetWeightAmountValue
OCEAN{`${100 - Number(weightOnDataToken)}%`} - - - -
OCEAN-CAVIAR{`${weightOnDataToken}%`} - - -
+

Data Token Liquidity Pool

+ +
+ + +
{error && } diff --git a/src/components/molecules/FormFields/Price/Coin.module.css b/src/components/molecules/FormFields/Price/Coin.module.css new file mode 100644 index 000000000..93779497f --- /dev/null +++ b/src/components/molecules/FormFields/Price/Coin.module.css @@ -0,0 +1,67 @@ +.coin { + border: 1px solid var(--brand-grey-lighter); + border-radius: var(--border-radius); + padding: calc(var(--spacer) / 2); +} + +.coin:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.coin:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.icon { + composes: box from '../../../atoms/Box.module.css'; + padding: calc(var(--spacer) / 1.5); + width: 6rem; + height: 6rem; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--brand-grey-lighter); + border-radius: 50%; + background-color: var(--brand-white); + 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; +} + +.symbol { + text-align: center; + display: block; + font-size: var(--font-size-base); + margin-bottom: calc(var(--spacer) / 4); +} + +.data { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; +} + +.weight { + width: 100%; + margin-top: calc(var(--spacer) / 2); + padding-top: calc(var(--spacer) / 2); + text-transform: uppercase; + font-size: var(--font-size-small); + color: var(--color-secondary); + border-top: 1px solid var(--brand-grey-lighter); +} + +.weight strong { + color: var(--brand-grey); + font-size: var(--font-size-base); +} diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx new file mode 100644 index 000000000..425ed517d --- /dev/null +++ b/src/components/molecules/FormFields/Price/Coin.tsx @@ -0,0 +1,48 @@ +import React, { ReactElement, ChangeEvent } from 'react' +import stylesIndex from './index.module.css' +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 Label from '../../../atoms/Input/Label' + +export default function Coin({ + symbol, + name, + value, + weight, + onChange, + readOnly +}: { + symbol: string + name: string + value: string + weight: string + onChange?: (event: ChangeEvent) => void + readOnly?: boolean + field?: any +}): ReactElement { + return ( +
+
+ +
+ +
+ + + +
+ Weight {weight} +
+
+
+ ) +} diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css index 33cfdef48..1490cfcd7 100644 --- a/src/components/molecules/FormFields/Price/index.module.css +++ b/src/components/molecules/FormFields/Price/index.module.css @@ -23,13 +23,11 @@ .conversion { display: block; - padding-left: 5rem; + text-align: center; margin-top: calc(var(--spacer) / 6); } .help { text-align: center; - margin-bottom: var(--spacer); - border-bottom: 1px solid var(--brand-grey-lighter); - padding-bottom: var(--spacer); + margin-bottom: calc(var(--spacer) / 1.5); } diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..c5099c095 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +