firstPrice styling

src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css

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

src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx

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

src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css

@@ -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);
+}

src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx

@@ -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.price}>
-      <div className={styles.form}>
+      <div className={styles.grid}>
-        <Input
+        <div className={styles.form}>
-          value={field.value}
+          <Input
-          name="price"
+            value={field.value}
-          type="number"
+            name="price"
-          prefix="OCEAN"
+            type="number"
-          min="1"
+            prefix="OCEAN"
-          {...field}
+            min="1"
-          additionalComponent={
+            {...field}
-            <Conversion price={field.value} className={styles.conversion} />
+            additionalComponent={
-          }
+              <Conversion price={field.value} className={styles.conversion} />
-        />
+            }
-        <Error meta={meta} />
+          />
-      </div>
+          <Error meta={meta} />
-      <div className={styles.datatoken}>
+        </div>
-        <h4>
+        <div className={styles.datatoken}>
-          = <strong>1</strong> {dtName} — {dtSymbol}
+          <h4>
-        </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>
   )
 }