feat: hide builder redirect and add gradient effect

decentraland · Jan 4, 2024 · 2948892 · 2948892
1 parent 6800906
commit 2948892
Show file tree

Hide file tree

Showing 2 changed files with 293 additions and 202 deletions.
diff --git a/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.module.css b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.module.css
@@ -126,7 +126,7 @@
 }
 
 .claimNamePage .nameCost {
-  margin-top: 74px;
+  margin-top: 54px;
   transition: opacity 1s ease; /* Adjust the duration as needed */
   position: relative;
   margin-left: -14px;
@@ -149,20 +149,21 @@
 }
 
 .claimNamePage .claimContainer {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--divider);
-  margin-right: 16px;
-  border-radius: 16px;
-  border: 3px solid var(--DCL-Gradients-Highlight-stroke, #ffbc5b);
-  background: linear-gradient(
+  width: calc(100% - 6px);
+  border-radius: 14.482757568359375px;
+  background-color: linear-gradient(
     116deg,
     rgba(255, 188, 91, 0.1) 0%,
     rgba(255, 45, 85, 0.1) 50.52%,
     rgba(198, 64, 205, 0.1) 100%
   );
-  width: 100%;
-  height: 524px;
+
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--divider);
+
+  height: 518px;
+  margin-top: 0;
   position: relative;
   align-items: center;
 }
@@ -218,12 +219,16 @@
 .claimNamePage .claimContainer .subtitle {
   font-size: 24px;
   line-height: 36px;
+  font-style: normal;
+  font-weight: 500;
+  margin-top: 8px;
+  text-align: center;
 }
 
 .claimNamePage .claimInput {
   position: relative;
   display: flex;
-  margin-top: 40px;
+  margin-top: 60px;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
   height: 46px;
@@ -393,6 +398,48 @@
   height: 14px;
 }
 
+.claimNamePage .gradient {
+  width: 100%;
+  height: 524px;
+  margin-bottom: 11px;
+  border-radius: 14.482757568359375px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.claimNamePage .gradient::before {
+  content: '';
+  position: absolute;
+  aspect-ratio: 1/1;
+  width: 130%;
+  background-image: radial-gradient(
+      100% 100% at 6% 9%,
+      #ffbc5bff 2%,
+      #ffffff00 73%
+    ),
+    linear-gradient(60deg, #ff2d55 18%, #c640cd 100%);
+  z-index: -1;
+  animation: rotate 4s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 767px) {
+  .gradient {
+    display: none;
+  }
+}
+
 @media (max-width: 768px) {
   .claimNamePage .claimContainer {
     height: 587px;
@@ -522,4 +569,37 @@
   .claimNamePage .ctasContainer .card {
     min-width: 305px;
   }
+
+  .claimNamePage .claimContainer .subtitle {
+    text-align: center;
+    font-size: 16px;
+  }
+
+  .claimNamePage .gradient {
+    height: 586px;
+  }
+
+  .claimNamePage .claimContainer {
+    height: 580px;
+  }
+
+  .claimNamePage .gradient::before {
+    width: 200%;
+  }
+
+  .claimNamePage .claimInput {
+    margin-top: 24px;
+  }
+
+  .claimNamePage .claimContainer :global(.ui.primary.button) {
+    width: 100%;
+  }
+
+  .claimNamePage .mainContainer .claimContainer .nameCost img {
+    display: none;
+  }
+
+  .claimNamePage .claimContainer .remainingCharactersContainer {
+    top: 13px;
+  }
 }