From a37aff907a48b527231c7f4a760cb5c9da3e0ee5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 11 Sep 2020 17:53:32 +0200
Subject: [PATCH] data token display tweaks

---
 .../molecules/FormFields/Price/Coin.tsx       |  2 +-
 .../FormFields/Price/Fixed.module.css         | 21 ++++++++++++-------
 .../molecules/FormFields/Price/Fixed.tsx      |  9 ++++----
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx
index 67b807d72..65c420ccb 100644
--- a/src/components/molecules/FormFields/Price/Coin.tsx
+++ b/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>
diff --git a/src/components/molecules/FormFields/Price/Fixed.module.css b/src/components/molecules/FormFields/Price/Fixed.module.css
index 5d64f22ed..4eef6bea7 100644
--- a/src/components/molecules/FormFields/Price/Fixed.module.css
+++ b/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);
 }
diff --git a/src/components/molecules/FormFields/Price/Fixed.tsx b/src/components/molecules/FormFields/Price/Fixed.tsx
index dc3fc25ac..bfffa4112 100644
--- a/src/components/molecules/FormFields/Price/Fixed.tsx
+++ b/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>