From bc6b9ec8b16a1b07285593590924c56cab640523 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 11 Sep 2020 13:33:33 +0200
Subject: [PATCH] style name & symbol output

---
 .../molecules/FormFields/Price/Coin.module.css     | 14 +++++++++-----
 src/components/molecules/FormFields/Price/Coin.tsx | 11 ++++++++---
 .../molecules/FormFields/Price/Dynamic.tsx         |  5 ++---
 .../molecules/FormFields/Price/Fixed.module.css    |  8 ++++++++
 .../molecules/FormFields/Price/Fixed.tsx           |  6 +++++-
 5 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/components/molecules/FormFields/Price/Coin.module.css b/src/components/molecules/FormFields/Price/Coin.module.css
index 6e04ccf8e..5ee582cd9 100644
--- a/src/components/molecules/FormFields/Price/Coin.module.css
+++ b/src/components/molecules/FormFields/Price/Coin.module.css
@@ -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 {
diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx
index 53c3590be..6f5a549e1 100644
--- a/src/components/molecules/FormFields/Price/Coin.tsx
+++ b/src/components/molecules/FormFields/Price/Coin.tsx
@@ -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} />
 
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index b779dc57b..b7d0a75ca 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/molecules/FormFields/Price/Dynamic.tsx
@@ -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
diff --git a/src/components/molecules/FormFields/Price/Fixed.module.css b/src/components/molecules/FormFields/Price/Fixed.module.css
index 68a1be810..5eb02a7db 100644
--- a/src/components/molecules/FormFields/Price/Fixed.module.css
+++ b/src/components/molecules/FormFields/Price/Fixed.module.css
@@ -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);
+}
diff --git a/src/components/molecules/FormFields/Price/Fixed.tsx b/src/components/molecules/FormFields/Price/Fixed.tsx
index b0bede600..5896db487 100644
--- a/src/components/molecules/FormFields/Price/Fixed.tsx
+++ b/src/components/molecules/FormFields/Price/Fixed.tsx
@@ -33,8 +33,12 @@ export default function Fixed({
             onChange={onChange}
           />
           <Conversion price={ocean} className={stylesIndex.conversion} />
-          {datatokenOptions?.symbol} | {datatokenOptions?.name}
         </div>
+        {datatokenOptions && (
+          <div className={styles.datatoken}>
+            {datatokenOptions?.symbol} | {datatokenOptions?.name}
+          </div>
+        )}
       </div>
     </div>
   )