visual cleanup, make more use of space

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

@@ -30,15 +30,27 @@
   margin-bottom: 0;
   color: var(--color-secondary);
   text-align: center;
-  border: 1px solid var(--brand-grey-lighter);
-  border-bottom: 0;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-  padding: calc(var(--spacer) / 3);
+  padding-bottom: calc(var(--spacer) / 3);
 }
 
 .tokens {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  margin-bottom: calc(var(--spacer) / 2);
+  margin-bottom: -2rem;
+  margin-left: -3rem;
+  margin-right: -3rem;
+}
+
+@media screen and (min-width: 40rem) {
+  .tokens {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.alertArea {
+  margin-left: -3rem;
+  margin-right: -3rem;
+  padding: var(--spacer) calc(var(--spacer) / 2);
+  padding-bottom: 0;
+  margin-top: var(--spacer);
+  border-top: 1px solid var(--brand-grey-lighter);
 }

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

@@ -82,7 +82,11 @@ export default function Advanced(props: InputProps): ReactElement {
           />
         </div>
 
-        {error && <Alert text={error} state="error" />}
+        {error && (
+          <div className={styles.alertArea}>
+            <Alert text={error} state="error" />
+          </div>
+        )}
       </div>
 
       {/* Hidden to fields to actually collect form values for Formik state */}

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

@@ -1,18 +1,10 @@
 .coin {
-  border: 1px solid var(--brand-grey-lighter);
-  border-radius: var(--border-radius);
-  padding: calc(var(--spacer) / 2);
-}
-
-.coin:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  padding: var(--spacer) calc(var(--spacer) / 2);
+  border-top: 1px solid var(--brand-grey-lighter);
 }
 
 .coin:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  margin-left: -1px;
+  border-left: 1px solid var(--brand-grey-lighter);
 }
 
 .icon {
@@ -26,7 +18,7 @@
   border: 1px solid var(--brand-grey-lighter);
   border-radius: 50%;
   background-color: var(--brand-white);
-  margin-bottom: calc(var(--spacer) / 2);
+  margin-bottom: var(--spacer);
 }
 
 .coin:last-child .icon path {
@@ -36,14 +28,8 @@
   stroke-linejoin: round;
 }
 
-.symbol {
-  text-align: center;
-  display: block;
-  font-size: var(--font-size-base);
-  margin-bottom: calc(var(--spacer) / 4);
-}
-
 .data {
+  position: relative;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
@@ -51,14 +37,18 @@
   text-align: center;
 }
 
+.max {
+  position: absolute;
+  right: var(--spacer);
+  top: calc(var(--spacer) / 2.5);
+}
+
 .weight {
   width: 100%;
-  margin-top: calc(var(--spacer) / 2);
-  padding-top: calc(var(--spacer) / 2);
+  margin-top: var(--spacer);
   text-transform: uppercase;
   font-size: var(--font-size-small);
   color: var(--color-secondary);
-  border-top: 1px solid var(--brand-grey-lighter);
 }
 
 .weight strong {

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

@@ -21,6 +21,7 @@
 }
 
 .conversion {
+  width: 100%;
   display: block;
   text-align: center;
   margin-top: calc(var(--spacer) / 6);

src/components/pages/Publish/index.tsx

@@ -40,11 +40,9 @@ export default function PublishPage({
     `)
 
     try {
-      const ddo = await publish(
-        metadata as any,
-        tokensToMint.toString(),
-        [{ serviceType, cost: cost.toString() }]
-      )
+      const ddo = await publish(metadata as any, tokensToMint.toString(), [
+        { serviceType, cost: cost.toString() }
+      ])
 
       if (publishError) {
         toast.error(publishError)