Merge branch 'testnet' into pr/michojekunle/996

pages/newsletter/confirm.tsx

@@ -1,34 +1,52 @@
 import React, { NextPage } from "next";
-import styles from "../../styles/components/newsletter.module.css";
+import styles from "../../styles/components/confirmNewsletter.module.css";
 import Button from "../../components/UI/button";
 
 const NewsletterConfirm: NextPage = () => {
   return (
     <div className={styles.page}>
       <div className={styles.confirmContainer}>
-        <div className={styles.bannerContainer}>
+        <div>
           <img
-            src="https://storage.googleapis.com/support-kms-prod/OugFYQGklDvyRbnHYclDAjGPqARIkc6XTJ2W"
-            alt="How to remove email from spam"
-            className={styles.confirmBanner}
+            src="/visuals/hotAirBalloon.svg"
+            alt="hot air balloon"
+            className={styles.balloon}
+          />
+          <img
+            src="/visuals/coconut.svg"
+            alt="decorative coconut"
+            className={styles.coconut}
+          />
+          <img
+            src="/visuals/leftTree.svg"
+            alt="decorative left tree"
+            className={styles.tree1}
+          />
+          <img
+            src="/visuals/rightTree.svg"
+            alt="decorative right tree"
+            className={styles.tree2}
           />
         </div>
         <div className={styles.confirmContent}>
-          <div>
-            <p className="mb-2">One last thing...</p>
-            <h1 className={styles.title}>
-              You&apos;re <strong>subscribed !</strong>
-            </h1>
-            <p className="mt-4">
-              Almost there! To ensure you receive our newsletters, please check
-              your email to confirm your subscription. Don&apos;t let vital
-              updates slip through – add us to your trusted senders
-            </p>
-            <div className="w-[244px] mt-12">
-              <Button onClick={() => window.open("mailto:", "_self")}>
-                Open your email
-              </Button>
-            </div>
+          <p className={`${styles.last} mb-2`}>One last thing...</p>
+          <p className={`${styles.last} mb-2 ${styles.letter}`}>Newsletter</p>
+          <h1 className={styles.title}>
+            You&apos;re <strong>subscribed !</strong>
+          </h1>
+          <p className={`${styles.paragraph} mt-4`}>
+            No noise, just news.Almost there! To ensure you receive our
+            newsletters, please check your email to confirm your subscription.
+            Don&apos;t let vital updates slip through – add us to your trusted
+            senders
+          </p>
+          <div className="mt-12">
+            <Button
+              variation="dark"
+              onClick={() => window.open("mailto:", "_self")}
+            >
+              Open your email
+            </Button>
           </div>
         </div>
       </div>

styles/Home.module.css

@@ -40,7 +40,6 @@
   font-family: "QuickZap";
   font-size: 2.5rem;
   color: var(--primary);
-  text-shadow: 1px 1px var(--tertiary);
   text-transform: uppercase;
   text-align: center;
 }

styles/components/button.module.css

@@ -77,6 +77,21 @@
   background: #cdcccc;
 }
 
+.dark {
+  color: var(--background);
+  background: var(--primary600);
+  border-radius: 8px;
+  width: fit-content;
+}
+
+.dark:hover {
+  background: var(--primary);
+}
+
+.dark:disabled:hover {
+  background: #cdcccc;
+}
+
 /* white */
 .white {
   color: var(--dark-content);

styles/components/confirmNewsletter.module.css

@@ -0,0 +1,225 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 88vh;
+  color: var(--dark-content);
+  width: 100%;
+}
+
+.subtitle {
+  margin-bottom: 0.5rem;
+  color: #454545;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.tree1,
+.tree2 {
+  position: fixed;
+
+  width: 392px;
+  height: 394px;
+  left: -65px;
+  bottom: -1px;
+}
+.balloon,
+.coconut {
+  position: fixed;
+  width: 130px;
+  height: 130px;
+}
+
+.balloon {
+  transform: translate(300px, 50px);
+}
+
+.coconut {
+  width: 64px;
+  height: 64px;
+  transform: translate(1100px, 250px);
+}
+
+.starknet {
+  width: 32px;
+  height: 32px;
+  transform: translate(-450px, 130px);
+}
+
+.tree2 {
+  left: auto;
+  right: -65px;
+}
+
+.title {
+  text-align: center;
+
+  /* Title/H1 */
+  font-family: "QuickZap";
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 58px; /* 120.833% */
+  color: var(--secondary);
+  max-width: 618px;
+  min-width: 358px;
+}
+
+.paragraph {
+  max-width: 487px;
+  min-width: 358px;
+  height: 72px;
+  text-align: center;
+  font-weight: 400;
+  font-family: Poppins-Regular;
+  line-height: 24px;
+  color: #8c8989;
+}
+
+.last {
+  text-align: center;
+  font-weight: 400;
+  font-family: Poppins-Regular;
+  line-height: 24px;
+  color: #8c8989;
+}
+
+.letter {
+  display: none;
+}
+
+.title strong {
+  color: var(--primary);
+  font-family: "QuickZap";
+}
+
+.description {
+  max-width: 500px;
+  color: #8c8989;
+  text-align: center;
+  font-family: Poppins-Regular;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  margin-top: 1rem;
+}
+
+.form {
+  margin-top: 3rem;
+  width: 30rem;
+  max-width: 90%;
+}
+
+.errorMessage {
+  color: var(--negative);
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.input {
+  display: flex;
+  height: 56px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+  margin-bottom: 1.5rem;
+  background-color: var(--background);
+  border: 1px solid #cdcccc;
+  padding: 0 10px;
+  color: var(--brown);
+  box-shadow: var(--small-shadow);
+  border-radius: 0.5rem;
+  max-width: calc(100vw - 2rem);
+  width: 500px;
+}
+
+.errorMessage + input {
+  border: 1px solid var(--negative);
+}
+
+.confirmContainer {
+  width: 100%;
+  height: 100vh;
+  padding-top: max(12vh, 80px);
+  display: flex;
+  background-color: var(--background-light);
+}
+
+.bannerContainer {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 20px;
+  background: var(--dark-content);
+
+  /* Small Shadow */
+  box-shadow: var(--small-shadow);
+  padding: 46px;
+}
+
+.confirmBanner {
+  border-radius: 20px;
+}
+
+.confirmContent {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem;
+}
+
+@media screen and (max-width: 768px) {
+  .confirmContainer {
+    padding-top: calc(max(12vh, 80px) + 64px);
+  }
+  .tree1,
+  .tree2 {
+    bottom: -200px;
+  }
+
+  .tree1 {
+    left: -200px;
+  }
+
+  .tree2 {
+    right: -100px;
+  }
+
+  .balloon {
+    position: absolute;
+    transform: rotate(-14.355deg);
+    left: 25px;
+    top: 80px;
+  }
+
+  .paragraph {
+    margin-bottom: 30px;
+  }
+
+  .title {
+    font-size: 32px;
+    line-height: 42px;
+  }
+
+  .last {
+    display: none;
+  }
+
+  .letter {
+    display: block;
+  }
+
+  .confirmContent {
+    margin-bottom: 4rem;
+  }
+}

styles/components/newsletter.module.css

@@ -178,4 +178,4 @@
     font-size: 32px;
     line-height: 42px;
   }
-}
+}

styles/domain.module.css

@@ -4,8 +4,8 @@
   flex-direction: row;
   align-items: center;
   gap: 3rem;
-  position: relative;
-  height: 85vh;
+  min-height: 88vh;
+  margin-top: 12vh;
 }
 
 .searchBarContainer {
@@ -21,7 +21,8 @@
 }
 
 .illustration {
-  width: 500px;
+  width: 440px;
+  height: 428.53px;
 }
 
 .description {

styles/globals.css

@@ -25,8 +25,8 @@
   --secondary300: #eae0d5;
   --tertiary: #bf9e7b;
   --light-tertiary: #f5f0eb;
-  --background: #fcfffe;
-  --background-light: #fffcf8;
+  --background: #ffffff;
+  --background-light: #ffffff;
   --background-light300: #f8f7f7;
   --background-white: #ffffff;
   --dark-content: #454545;
@@ -54,7 +54,6 @@ a {
   font-family: "QuickZap";
   font-size: 2.5rem;
   color: var(--secondary);
-  text-shadow: 1px 1px var(--tertiary);
   text-transform: uppercase;
 }