restore pricing screens styling

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

@@ -22,6 +22,11 @@
   fill: var(--font-color-text);
 }
 
+.icon svg {
+  width: 100%;
+  height: 100%;
+}
+
 .coin:last-child .icon {
   fill: var(--brand-violet);
 }

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

@@ -42,6 +42,8 @@
 @media screen and (min-width: 40rem) {
   .tokens {
     grid-template-columns: 1fr 1fr;
+    margin-left: -4rem;
+    margin-right: -4rem;
   }
 }
 

src/components/Publish/FormPublish/Pricing/Fees.module.css

@@ -12,6 +12,13 @@
   background: var(--background-highlight);
 }
 
+@media screen and (min-width: 40rem) {
+  .fees {
+    margin-left: -4rem;
+    margin-right: -4rem;
+  }
+}
+
 .fees > div {
   margin-bottom: 0;
   justify-self: center;

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

@@ -14,6 +14,13 @@
   border-bottom: 1px solid var(--border-color);
 }
 
+@media (min-width: 40rem) {
+  .price {
+    margin-left: -4rem;
+    margin-right: -4rem;
+  }
+}
+
 .grid {
   display: grid;
   gap: calc(var(--spacer) / 2);

src/components/Publish/FormPublish/Pricing/index.module.css

@@ -0,0 +1,3 @@
+.pricing input {
+  text-align: center;
+}

src/components/Publish/FormPublish/Pricing/index.tsx

@@ -10,6 +10,7 @@ import Dynamic from './Dynamic'
 import Fixed from './Fixed'
 import Free from './Free'
 import content from '../../../../../content/price.json'
+import styles from './index.module.css'
 
 export default function PricingFields(): ReactElement {
   const { appConfig } = useSiteMetadata()
@@ -72,6 +73,7 @@ export default function PricingFields(): ReactElement {
       items={tabs}
       handleTabChange={handleTabChange}
       defaultIndex={type === 'fixed' ? 0 : 1}
+      className={styles.pricing}
     />
   )
 

src/components/Publish/FormPublish/index.module.css

@@ -1,4 +1,5 @@
 .form {
   composes: box from '@shared/atoms/Box.module.css';
   margin-bottom: var(--spacer);
+  padding: 0;
 }