space saving tweaks for pricing screen

src/components/Publish/Pricing/Coin.module.css

@@ -1,11 +1,19 @@
 .coin {
-  padding: var(--spacer) calc(var(--spacer) / 2);
+  padding: calc(var(--spacer) / 2);
+  padding-top: calc(var(--spacer) / 1.5);
 }
 
 .coin:last-child {
   border-left: 1px solid var(--border-color);
 }
 
+.token {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
 .icon {
   composes: box from '@shared/atoms/Box.module.css';
   padding: calc(var(--spacer) / 2);
@@ -17,7 +25,8 @@
   border: 1px solid var(--border-color);
   border-radius: 50%;
   background-color: var(--background-body);
-  margin-bottom: calc(var(--spacer) / 2);
+  margin: 0;
+  margin-right: calc(var(--spacer) / 4);
   fill: var(--font-color-text);
 }
 
@@ -33,8 +42,15 @@
 .tokenName {
   font-size: var(--font-size-base);
   color: var(--font-color-text);
-  text-align: center;
+  margin-bottom: 0;
-  margin-bottom: calc(var(--spacer) / 6);
+}
+
+.weight {
+  width: 100%;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
 }
 
 .data {
@@ -54,15 +70,6 @@
   top: calc(var(--spacer) / 2.5);
 }
 
-.weight {
-  width: 100%;
-  text-align: center;
-  margin-bottom: calc(var(--spacer) / 2);
-  text-transform: uppercase;
-  font-size: var(--font-size-small);
-  color: var(--color-secondary);
-}
-
 .weight strong {
   color: var(--font-color-text);
 }

src/components/Publish/Pricing/Coin.tsx

@@ -22,16 +22,19 @@ export default function Coin({
 
   return (
     <div className={styles.coin}>
-      <figure className={styles.icon}>
+      <div className={styles.token}>
-        <Logo />
+        <figure className={styles.icon}>
-      </figure>
+          <Logo />
+        </figure>
+        <div>
+          <h4 className={styles.tokenName}>
+            {datatokenOptions?.name || 'Data Token'}
+          </h4>
 
-      <h4 className={styles.tokenName}>
+          <div className={styles.weight}>
-        {datatokenOptions?.name || 'Data Token'}
+            Weight <strong>{weight}</strong>
-      </h4>
+          </div>
-
+        </div>
-      <div className={styles.weight}>
-        Weight <strong>{weight}</strong>
       </div>
 
       <div className={styles.data}>

src/components/Publish/Pricing/Dynamic.module.css

@@ -3,8 +3,7 @@
   margin-top: var(--spacer);
   margin-bottom: 0;
   color: var(--color-secondary);
-  text-align: center;
+  padding-bottom: calc(var(--spacer) / 4);
-  padding-bottom: calc(var(--spacer) / 3);
 }
 
 .tokens {

src/components/Publish/Pricing/Fixed.tsx

@@ -2,11 +2,15 @@ import React, { ReactElement } from 'react'
 import FormHelp from '@shared/FormInput/Help'
 import Price from './Price'
 import Fees from './Fees'
+import styles from './Dynamic.module.css'
 
 export default function Fixed({ content }: { content: any }): ReactElement {
   return (
     <>
       <FormHelp>{content.info}</FormHelp>
+
+      <h4 className={styles.title}>Price</h4>
+
       <Price />
       <Fees tooltips={content.tooltips} pricingType="fixed" />
     </>

src/components/Publish/Pricing/Price.module.css

@@ -16,7 +16,7 @@
   display: grid;
   gap: calc(var(--spacer) / 2);
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-  padding: var(--spacer);
+  padding: calc(var(--spacer) / 2);
   max-width: 30rem;
   margin-left: auto;
   margin-right: auto;