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-right: -3rem;
+  margin-left: -2rem;
+  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-right: -3rem;
+  margin-left: -2rem;
+  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,8 +61,7 @@ export default function Dynamic({
   }, [ocean, chainId, account])
 
   return (
-    <div className={stylesIndex.content}>
-      <div className={styles.advanced}>
+    <div className={styles.dynamic}>
       <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
 
       <aside className={styles.wallet}>
@@ -115,6 +114,5 @@ export default function Dynamic({
         </div>
       )}
     </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}>
       <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 {
-  usePublish,
-  useOcean,
-  PriceOptions,
-  DataTokenOptions
-} from '@oceanprotocol/react'
+import { usePublish, 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({