feat: add styles for the claim name modal in mobile (#2118)

* feat: add styles for the claim name modal in mobile * fix: race condition between the tokenId being fetched and tx mined * chore: remove console logs
decentraland · Jan 30, 2024 · 2b83099 · 2b83099
1 parent d980344
commit 2b83099
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 2 deletions.
diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.css b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.css
@@ -213,3 +213,45 @@
   flex: 1 0 auto;
   margin-left: 12px;
 }
+
+@media (max-width: 767px) {
+  .ClaimNameFatFingerModal.ui.modal > .ui.form > .content {
+    padding: 32px;
+    margin: 0;
+  }
+  .ClaimNameFatFingerModal.ui.modal > .ui.form > .content .dcl.field {
+    min-width: 100%;
+  }
+  .ClaimNameFatFingerModal.ui.modal .paymentMethodContainer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .ClaimNameFatFingerModal.ui.modal .payWithTitle {
+    margin-bottom: 12px;
+  }
+
+  .ClaimNameFatFingerModal .baseGradient {
+    width: 100%;
+  }
+
+  .ClaimNameFatFingerModal.ui.modal > .ui.form > .actions {
+    margin: 0;
+    flex-direction: row;
+    padding: 32px;
+    margin-top: auto;
+  }
+
+  .ClaimNameFatFingerModal.ui.modal
+    > .ui.form
+    > .actions
+    > .ui.button:not(.primary),
+  .ClaimNameFatFingerModal.ui.modal .ui.button:not(.primary) {
+    margin: 0;
+  }
+
+  .ClaimNameFatFingerModal .ui.form {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+}
diff --git a/webapp/src/components/SuccessPage/SuccessPage.tsx b/webapp/src/components/SuccessPage/SuccessPage.tsx
@@ -25,8 +25,8 @@ export function SuccessPage(props: Props) {
   const assetType = search.get('assetType')
   const subdomain = search.get('subdomain')
 
-  // this is a workaround to show the NAME while the transaction is being mined
-  if (subdomain && isLoading) {
+  // this is a workaround to show the NAME while the transaction is being mined or the tokenId getting retrieved.
+  if (subdomain && (isLoading || !tokenId)) {
     return (
       <div className={styles.pageContainer}>
         <Navbar />