Merge pull request #996 from michojekunle/fix-955

Fix 955: Redesign confirmation page

components/UI/button.tsx

@@ -21,7 +21,7 @@ const Button: FunctionComponent<ButtonProps> = ({
       disabled={disabled}
       onClick={onClick}
       className={` ${styles["nq-button"]} ${styles[variation]}`}
-       style={radius ? { borderRadius: radius } : undefined}
+      style={radius ? { borderRadius: radius } : undefined}
     >
       {children}
     </button>

components/UI/iconsComponents/icons/copyIcon.tsx

@@ -3,15 +3,18 @@ import React, { FunctionComponent } from "react";
 const CopyIcon: FunctionComponent<IconProps> = ({ color, width }) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={width}
-      viewBox="0 0 16 17"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.45055 13.173V5.76972C3.50715 4.99997 4.12295 3.44687 6.13338 3.39253C8.1438 3.3382 10.2765 3.36989 11.0915 3.39253C11.3632 3.40385 11.9201 3.43329 11.9745 3.46046C12.0424 3.49442 11.4311 2.00018 9.90292 2.00018H5.42022C4.31086 1.98886 2.09215 2.50279 2.09215 4.64905V11.2712C2.08083 11.6335 2.33666 12.5209 3.45055 13.173ZM4.76419 10.3794V6.98338C4.69627 6.19099 5.78842 4.60619 7.5 4.60619H11.8958C13.5 4.60618 13.8994 5.00013 13.8994 6.98338V12.7905C13.9107 13.5263 13.4783 14.9979 11.6581 14.9979H6.8018C6.09996 15.0319 4.69629 14.6583 4.69629 12.8924C4.69629 11.1265 4.74156 10.4812 4.76419 10.3794Z"
+        d="M13.8327 11.25V14.75C13.8327 17.6667 12.666 18.8333 9.74935 18.8333H6.24935C3.33268 18.8333 2.16602 17.6667 2.16602 14.75V11.25C2.16602 8.33334 3.33268 7.16667 6.24935 7.16667H9.74935C12.666 7.16667 13.8327 8.33334 13.8327 11.25Z"
+        fill={color}
+      />
+      <path
+        d="M14.7508 2.16667H11.2508C8.68155 2.16667 7.4766 3.07841 7.22557 5.28252C7.17305 5.74363 7.55494 6.125 8.01903 6.125H9.75078C13.2508 6.125 14.8758 7.75 14.8758 11.25V12.9818C14.8758 13.4458 15.2572 13.8277 15.7183 13.7752C17.9224 13.5242 18.8341 12.3192 18.8341 9.75001V6.25001C18.8341 3.33334 17.6674 2.16667 14.7508 2.16667Z"
         fill={color}
       />
     </svg>

package.json

@@ -76,4 +76,4 @@
     "ts-jest": "^29.0.3",
     "typescript": "^5.3.2"
   }
-}
+}

pages/confirmation.tsx

@@ -33,8 +33,7 @@ const Confirmation: NextPage = () => {
         <div>
           <div className={styles.subtitle}>Referral</div>
           <div className={styles.title}>
-            It&apos;s now time to earn
-            <br />
+            It&apos;s now time to earn <br className="hidden sm:block" />
             <span className={styles.highlight}>crypto!</span>
           </div>
         </div>
@@ -67,14 +66,16 @@ const Confirmation: NextPage = () => {
           )}
         </div>
         <div>
-          <Button onClick={redirect}>Go to your domain</Button>
+          <Button onClick={redirect} radius={"12px"}>
+            Go to your domain
+          </Button>
         </div>
       </div>
       <div className={styles.coconutLeft}>
-        <img alt="coconut" src="/register/coconutleft.webp" />
+        <img alt="coconut" src="/visuals/leftTree.svg" />
       </div>
       <div className={styles.coconutRight}>
-        <img alt="coconut" src="/register/coconutright.webp" />
+        <img alt="coconut" src="/visuals/rightTree.svg" />
       </div>
     </>
   );

styles/components/confirmation.module.css

@@ -7,9 +7,9 @@
   color: #454545;
   gap: 24px;
   text-align: center;
-  margin: 10px;
   position: relative;
   z-index: 1;
+  overflow: hidden;
 }
 
 .subtitle {
@@ -25,38 +25,39 @@
   line-height: 58px;
   text-align: center;
   text-transform: uppercase;
-  color: var(--secondary);
+  color: var(--dark-content);
 }
 
 .highlight {
-  color: var(--primary);
+  color: var(--primary600);
 }
 
 .copyAddr {
-  background-color: #fffcf8;
+  background-color: #fff;
   width: 320px;
   height: 40px;
   padding: 8px 16px;
   gap: 8px;
   border-radius: 8px;
   box-shadow: 0px 2px 30px 0px #0000000f;
+  border: 1px solid #e0e0e0;
   display: flex;
   cursor: pointer;
 }
 
 .coconutLeft {
   position: fixed;
-  left: -150px;
-  bottom: -80px;
-  width: 390px;
+  left: 0px;
+  bottom: -3px;
+  width: 420px;
   overflow: hidden;
 }
 
 .coconutRight {
   position: fixed;
-  right: -150px;
-  bottom: -80px;
-  width: 390px;
+  right: -125px;
+  bottom: -3px;
+  width: 420px;
   overflow: hidden;
 }
 
@@ -79,15 +80,65 @@
 }
 
 @media (max-width: 1084px) {
-  .coconutLeft,
-  .coconutRight,
   .coconut {
     display: none;
   }
 
+  .coconutLeft,
+  .coconutRight {
+    bottom: -100px;
+    width: 350px;
+  }
+
+  .coconutLeft {
+    left: -50px;
+  }
+
+  .coconutRight {
+    right: -50px;
+  }
+
   .balloon {
     right: 0;
     left: auto;
-    top: 70px;
+    top: 100px;
+  }
+}
+
+@media (max-width: 768px) {
+  .title {
+    font-size: 32px;
+    line-height: 38px;
+  }
+
+  .subtitle {
+    font-size: 12px;
+    line-height: 16px;
+    margin-top: 2rem;
+  }
+
+  .copyAddr {
+    width: 260px;
+    height: 40px;
+    padding: 6px 14px;
+  }
+
+  .coconutLeft,
+  .coconutRight {
+    bottom: -70px;
+    width: 200px;
+  }
+
+  .coconutLeft {
+    left: -80px;
+  }
+
+  .coconutRight {
+    right: -63px;
+  }
+
+  .balloon {
+    left: 0;
+    width: 90px;
   }
 }