Mobile publish fixes (#1076)

* aligned inputs for mobile

* correction for mobile first approch

* change nft layout on publish mobile (metadata section)

* align datatokens view on publish widzard for mobile

* remove unnecessary margin around nft, datatoken UI

* reduce min-width for xs viewports

* fix mobile layout for pricing tab / submit tab on publish

src/components/@shared/FormFields/Datatoken/index.module.css

@@ -1,7 +1,8 @@
 .datatoken {
   display: grid;
   gap: var(--spacer);
-  grid-template-columns: 1fr 11fr;
+  grid-template-columns: none;
+  margin-top: calc(var(--spacer) / 2);
   margin-bottom: var(--spacer);
   align-items: center;
 }
@@ -20,9 +21,16 @@
   border: 1px solid var(--border-color);
   fill: var(--brand-violet);
   border-radius: 50%;
+  margin: 0;
 }
 
 .image svg {
   width: 100%;
   height: 100%;
 }
+
+@media (min-width: 40rem) {
+  .datatoken {
+    grid-template-columns: 1fr 11fr;
+  }
+}

src/components/@shared/FormFields/Nft/index.module.css

@@ -1,7 +1,8 @@
 .nft {
   display: grid;
   gap: var(--spacer);
-  grid-template-columns: 1fr 11fr;
+  grid-template-columns: none;
+  margin-top: calc(var(--spacer) / 2);
   margin-bottom: var(--spacer);
   align-items: center;
 }
@@ -19,6 +20,7 @@
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
   position: relative;
+  margin: 0;
 }
 
 .actions {
@@ -41,3 +43,9 @@
   transform: scale(0.9);
   transform-origin: center;
 }
+
+@media (min-width: 40rem) {
+  .nft {
+    grid-template-columns: 1fr 11fr;
+  }
+}

src/components/@shared/atoms/Tabs.module.css

@@ -2,6 +2,8 @@
   text-align: center;
   border-bottom: 1px solid var(--border-color);
   padding: calc(var(--spacer) / 2);
+  display: flex;
+  justify-content: center;
 }
 
 .tab {
@@ -15,7 +17,7 @@
   background-color: var(--background-body);
   border: 1px solid var(--border-color);
   margin-right: -1px;
-  min-width: 100px;
+  min-width: 90px;
 }
 
 .tab:first-child {

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

@@ -10,7 +10,7 @@
 .token {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   margin-bottom: calc(var(--spacer) / 2);
 }
 
@@ -60,8 +60,7 @@
   flex-wrap: wrap;
   justify-content: center;
   text-align: center;
-  max-width: 12rem;
+  margin: auto 0;
-  margin: auto;
 }
 
 .max {
@@ -73,3 +72,13 @@
 .weight strong {
   color: var(--font-color-text);
 }
+
+@media screen and (min-width: 41rem) {
+  .token {
+    justify-content: center;
+  }
+  .data {
+    margin: auto;
+    max-width: 12rem;
+  }
+}

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

@@ -1,14 +1,14 @@
 .fees {
   display: grid;
   gap: var(--spacer);
-  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
-  padding: var(--spacer);
+  padding: var(--spacer) 0;
   text-align: center;
 }
 
 .fees > div {
   margin-bottom: 0;
-  justify-self: center;
+  justify-self: start;
 }
 
 .fees label {
@@ -18,3 +18,10 @@
 .fees input {
   max-width: 5rem;
 }
+
+@media screen and (min-width: 25rem) {
+  .fees {
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+    padding: var(--spacer);
+  }
+}

src/components/Publish/Submission/Feedback.module.css

@@ -58,7 +58,15 @@
 .title {
   font-size: var(--font-size-large);
   display: inline-block;
+  margin-bottom: 0;
+}
+
+.txs {
+  display: block;
+  margin-left: 1.5rem;
   margin-bottom: calc(var(--spacer) / 4);
+  white-space: nowrap;
+  width: 100%;
 }
 
 .description {
@@ -78,3 +86,18 @@
     transform: rotate(360deg);
   }
 }
+
+@media screen and (min-width: 30rem) {
+  .txs {
+    display: inline;
+  }
+}
+
+@media screen and (min-width: 40rem) {
+  .title {
+    margin-bottom: calc(var(--spacer) / 2);
+  }
+  .txs {
+    margin-left: calc(var(--spacer) / 4);
+  }
+}

src/components/Publish/Submission/Feedback.tsx

@@ -9,8 +9,8 @@ export function Feedback(): ReactElement {
 
   const items = Object.entries(values.feedback).map(([key, value], index) => (
     <li key={index} className={styles[value.status]}>
-      <h3 className={styles.title}>
+      <h3 className={styles.title}>{value.name}</h3>
-        {value.name}
+      <div className={styles.txs}>
         {value.txCount > 0 && (
           <TransactionCount
             txCount={value.txCount}
@@ -18,7 +18,7 @@ export function Feedback(): ReactElement {
             txHash={value.txHash}
           />
         )}
-      </h3>
+      </div>
       <p className={styles.description}>{value.description}</p>
       {value.errorMessage && (
         <span className={styles.errorMessage}>{value.errorMessage}</span>

src/components/Publish/Submission/TransactionCount.module.css

@@ -1,7 +1,6 @@
 .txHash {
   display: inline-block;
-  margin-left: calc(var(--spacer) / 2);
+  margin: calc(var(--spacer) / 4) calc(var(--spacer) / 4);
-  margin-top: calc(var(--spacer) / 2);
   font-size: var(--font-size-small);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-base);