data token display tweaks

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

@@ -32,7 +32,7 @@ export default function Coin({
 
       <h4 className={styles.tokenName}>
         {datatokenOptions?.name || 'Data Token'}
-        {datatokenOptions?.name && generateName && (
+        {datatokenOptions?.name && typeof generateName === 'function' && (
           <RefreshName generateName={generateName} />
         )}
       </h4>

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

@@ -2,17 +2,18 @@
   composes: content from './index.module.css';
 }
 
-.form {
-  max-width: 12rem;
-  margin-left: auto;
-  margin-right: auto;
+@media (min-width: 55rem) {
+  .form {
+    max-width: 12rem;
+    margin-left: auto;
+  }
 }
 
 .grid {
   margin-top: var(--spacer);
   display: grid;
   gap: var(--spacer);
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
   justify-content: center;
 }
 
@@ -21,12 +22,18 @@
 }
 
 .datatoken {
+  margin-top: calc(var(--spacer) / 6);
   color: var(--color-secondary);
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-bold);
-  white-space: nowrap;
+}
+
+.datatoken h4 {
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+  margin: 0;
 }
 
 .datatoken strong {
-  color: var(--brand-grey);
+  color: var(--brand-grey-dark);
 }

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

@@ -39,10 +39,11 @@ export default function Fixed({
         </div>
         {datatokenOptions && (
           <div className={styles.datatoken}>
-            <strong>Data Token</strong>
-            <RefreshName generateName={generateName} />
-            <br />
-            {datatokenOptions?.name} | {datatokenOptions?.symbol}
+            <h4>
+              Data Token <RefreshName generateName={generateName} />
+            </h4>
+            <strong>{datatokenOptions?.name}</strong> —{' '}
+            <strong>{datatokenOptions?.symbol}</strong>
           </div>
         )}
       </div>