styling & copy

content/pages/publish.json

@@ -100,11 +100,11 @@
   "price": {
     "fixed": {
       "title": "Fixed",
-      "info": "Set your price for accessing this data set. A Data Token contract for this data set, worth the entered amount of OCEAN will be created."
+      "info": "Set your price for accessing this data set. A Data Token for this data set, worth the entered amount of OCEAN, will be created."
     },
     "dynamic": {
       "title": "Dynamic",
-      "info": "Let's create a decentralized, automated market for your data set. A Data Token contract for this data set worth the entered amount of OCEAN will be created. Additionally, you will provide liquidity into a Data Token/OCEAN liquidity pool with Balancer.",
+      "info": "Let's create a decentralized, automated market for your data set. A Data Token for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a Data Token/OCEAN liquidity pool with Balancer.",
       "tooltips": {
         "poolInfo": "Help me",
         "liquidityProviderFee": "Help me"

src/components/molecules/FormFields/Price/Dynamic.module.css

@@ -1,4 +1,5 @@
-.advanced {
+.dynamic {
+  composes: content from './index.module.css';
 }
 
 .wallet {
@@ -36,8 +37,8 @@
 .tokens {
   display: grid;
 
-  margin-left: -3rem;
+  margin-left: -2rem;
-  margin-right: -3rem;
+  margin-right: -2rem;
   border-bottom: 1px solid var(--brand-grey-lighter);
 }
 
@@ -50,7 +51,6 @@
 .summary {
   text-align: center;
   margin-top: var(--spacer);
-  margin-bottom: -2rem;
 }
 
 .summary input {
@@ -58,8 +58,8 @@
 }
 
 .alertArea {
-  margin-left: -3rem;
+  margin-left: -2rem;
-  margin-right: -3rem;
+  margin-right: -2rem;
   padding: var(--spacer) calc(var(--spacer) / 2);
   padding-bottom: 0;
   margin-top: var(--spacer);

src/components/molecules/FormFields/Price/Dynamic.tsx

@@ -61,60 +61,58 @@ export default function Dynamic({
   }, [ocean, chainId, account])
 
   return (
-    <div className={stylesIndex.content}>
+    <div className={styles.dynamic}>
-      <div className={styles.advanced}>
+      <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
-        <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
 
-        <aside className={styles.wallet}>
+      <aside className={styles.wallet}>
-          {balance?.ocean && (
+        {balance?.ocean && (
-            <div className={styles.balance}>
+          <div className={styles.balance}>
-              OCEAN <strong>{balance.ocean}</strong>
+            OCEAN <strong>{balance.ocean}</strong>
-            </div>
-          )}
-          <Wallet />
-        </aside>
-
-        <h4 className={styles.title}>
-          Data Token Liquidity Pool{' '}
-          <Tooltip content={content.tooltips.poolInfo} />
-        </h4>
-
-        <div className={styles.tokens}>
-          <Coin
-            name="ocean"
-            datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
-            value={ocean}
-            weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
-            onOceanChange={onOceanChange}
-          />
-          <Coin
-            name="tokensToMint"
-            datatokenOptions={datatokenOptions}
-            value={tokensToMint.toString()}
-            weight={`${Number(weightOnDataToken) * 10}%`}
-            readOnly
-          />
-        </div>
-
-        <footer className={styles.summary}>
-          <Label htmlFor="liquidityProviderFee">
-            Liquidity Provider Fee{' '}
-            <Tooltip content={content.tooltips.liquidityProviderFee} />
-          </Label>
-          <InputElement
-            value={liquidityProviderFee}
-            name="liquidityProviderFee"
-            readOnly
-            postfix="%"
-          />
-        </footer>
-
-        {error && (
-          <div className={styles.alertArea}>
-            <Alert text={error} state="error" />
           </div>
         )}
+        <Wallet />
+      </aside>
+
+      <h4 className={styles.title}>
+        Data Token Liquidity Pool{' '}
+        <Tooltip content={content.tooltips.poolInfo} />
+      </h4>
+
+      <div className={styles.tokens}>
+        <Coin
+          name="ocean"
+          datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
+          value={ocean}
+          weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
+          onOceanChange={onOceanChange}
+        />
+        <Coin
+          name="tokensToMint"
+          datatokenOptions={datatokenOptions}
+          value={tokensToMint.toString()}
+          weight={`${Number(weightOnDataToken) * 10}%`}
+          readOnly
+        />
       </div>
+
+      <footer className={styles.summary}>
+        <Label htmlFor="liquidityProviderFee">
+          Liquidity Provider Fee{' '}
+          <Tooltip content={content.tooltips.liquidityProviderFee} />
+        </Label>
+        <InputElement
+          value={liquidityProviderFee}
+          name="liquidityProviderFee"
+          readOnly
+          postfix="%"
+        />
+      </footer>
+
+      {error && (
+        <div className={styles.alertArea}>
+          <Alert text={error} state="error" />
+        </div>
+      )}
     </div>
   )
 }

src/components/molecules/FormFields/Price/Fixed.module.css

@@ -1,6 +1,19 @@
+.fixed {
+  composes: content from './index.module.css';
+}
+
 .form {
   max-width: 12rem;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.grid {
+  margin-top: var(--spacer);
+  display: grid;
+  gap: var(--spacer);
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  justify-content: center;
 }
 
 .fixed label {
@@ -9,8 +22,11 @@
 
 .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);
+  white-space: nowrap;
+}
+
+.datatoken strong {
+  color: var(--brand-grey);
 }

src/components/molecules/FormFields/Price/Fixed.tsx

@@ -19,12 +19,12 @@ export default function Fixed({
   content: any
 }): ReactElement {
   return (
-    <div className={stylesIndex.content}>
+    <div className={styles.fixed}>
-      <div className={styles.fixed}>
+      <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
-        <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
 
+      <div className={styles.grid}>
         <div className={styles.form}>
-          <Label htmlFor="ocean">Ocean Tokens</Label>
+          <Label htmlFor="ocean">Ocean Token</Label>
           <InputElement
             value={ocean}
             name="ocean"
@@ -36,7 +36,9 @@ export default function Fixed({
         </div>
         {datatokenOptions && (
           <div className={styles.datatoken}>
-            {datatokenOptions?.symbol} | {datatokenOptions?.name}
+            <strong>Data Token</strong>
+            <br />
+            {datatokenOptions?.name} | {datatokenOptions?.symbol}
           </div>
         )}
       </div>

src/components/molecules/FormFields/Price/index.module.css

@@ -5,7 +5,7 @@
 }
 
 .content {
-  padding: 0 calc(var(--spacer) / 2);
+  padding: 0;
 }
 
 .content label {

src/components/pages/Publish/index.tsx

@@ -2,12 +2,7 @@ import React, { ReactElement } from 'react'
 import { useNavigate } from '@reach/router'
 import { toast } from 'react-toastify'
 import { Formik } from 'formik'
-import {
+import { usePublish, DataTokenOptions } from '@oceanprotocol/react'
-  usePublish,
-  useOcean,
-  PriceOptions,
-  DataTokenOptions
-} from '@oceanprotocol/react'
 import styles from './index.module.css'
 import PublishForm from './PublishForm'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
@@ -16,7 +11,7 @@ import { initialValues, validationSchema } from '../../../models/FormPublish'
 import { transformPublishFormToMetadata } from './utils'
 import Preview from './Preview'
 import { MetadataPublishForm } from '../../../@types/MetaData'
-import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
+// import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 
 export default function PublishPage({