From fb632df9324713d111933da0413a22472fc5958c Mon Sep 17 00:00:00 2001
From: Emmanuel Aroso <57766083+emarc99@users.noreply.github.com>
Date: Sat, 19 Jul 2025 09:36:03 +0100
Subject: [PATCH 1/5] feat: fix generated address block styling

---
 components/UI/iconsComponents/icons/copyIcon.tsx |  2 +-
 pages/subscriptionConfirmation.tsx               |  2 +-
 styles/components/confirmation.module.css        | 12 +++++++-----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/UI/iconsComponents/icons/copyIcon.tsx b/components/UI/iconsComponents/icons/copyIcon.tsx
index 5e1fa6d1..1e78a15f 100644
--- a/components/UI/iconsComponents/icons/copyIcon.tsx
+++ b/components/UI/iconsComponents/icons/copyIcon.tsx
@@ -5,7 +5,7 @@ const CopyIcon: FunctionComponent<IconProps> = ({ color, width }) => {
     <svg
       width={width}
       height={width}
-      viewBox="0 0 24 24"
+      viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
diff --git a/pages/subscriptionConfirmation.tsx b/pages/subscriptionConfirmation.tsx
index c68e7a2b..85acba7d 100644
--- a/pages/subscriptionConfirmation.tsx
+++ b/pages/subscriptionConfirmation.tsx
@@ -57,7 +57,7 @@ const SubscriptionConfirmation: NextPage = () => {
             ""
           )}/${minifyAddress(address)}`}
           {!copied ? (
-            <CopyIcon width="25" color={theme.palette.secondary.main} />
+            <CopyIcon width="20" color={theme.palette.secondary.main} />
           ) : (
             <DoneFilledIcon
               width="25"
diff --git a/styles/components/confirmation.module.css b/styles/components/confirmation.module.css
index 7b844b9e..c4291c67 100644
--- a/styles/components/confirmation.module.css
+++ b/styles/components/confirmation.module.css
@@ -5,7 +5,7 @@
   align-items: center;
   height: 100vh;
   color: #454545;
-  gap: 24px;
+  gap: 10px;
   text-align: center;
   position: relative;
   z-index: 1;
@@ -34,15 +34,17 @@
 
 .copyAddr {
   background-color: #fff;
-  width: 320px;
-  height: 40px;
   padding: 8px 16px;
-  gap: 8px;
+  gap: 12px;
   border-radius: 8px;
   box-shadow: 0px 2px 30px 0px #0000000f;
-  border: 1px solid #e0e0e0;
+  border: 1px solid #4545451A;
   display: flex;
+  align-items: center;
   cursor: pointer;
+  font-size: 14px;
+  line-height: 24px;
+  margin-bottom: 20px;
 }
 
 .coconutLeft {

From 74afe0eb9260f23ba3c53165f340420a52a774ef Mon Sep 17 00:00:00 2001
From: Emmanuel Aroso <57766083+emarc99@users.noreply.github.com>
Date: Sat, 19 Jul 2025 09:57:51 +0100
Subject: [PATCH 2/5] fix: use accurate extrabold font

---
 pages/subscriptionConfirmation.tsx | 2 +-
 styles/globals.css                 | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/pages/subscriptionConfirmation.tsx b/pages/subscriptionConfirmation.tsx
index 85acba7d..b0a88e23 100644
--- a/pages/subscriptionConfirmation.tsx
+++ b/pages/subscriptionConfirmation.tsx
@@ -40,7 +40,7 @@ const SubscriptionConfirmation: NextPage = () => {
         </div>
         <div>
           <div>Refer your friends to Starknet ID and earn crypto ! </div>
-          <div className="font-extrabold">
+          <div className="stronger">
             Earn up to 8$ per friends with your referral link below.
           </div>
         </div>
diff --git a/styles/globals.css b/styles/globals.css
index 59cbe139..d10ee8f5 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -15,6 +15,10 @@
     font-family: "Poppins-Bold";
     src: url(../public/fonts/poppins/Poppins-Bold.ttf);
   }
+  @font-face {
+    font-family: "Poppins-ExtraBold";
+    src: url(../public/fonts/poppins/Poppins-ExtraBold.ttf);
+  }
 }
 
 :root {
@@ -117,6 +121,10 @@ strong {
   font-family: "Poppins-Bold";
 }
 
+.stronger {
+  font-family: "Poppins-ExtraBold";
+}
+
 .wallet-adapter-button {
   border-radius: 500px !important;
   padding: 0 2rem !important;

From db2d91c58f134a80784bf73a6c9fb177ed0122ca Mon Sep 17 00:00:00 2001
From: Emmanuel Aroso <57766083+emarc99@users.noreply.github.com>
Date: Sat, 19 Jul 2025 10:18:18 +0100
Subject: [PATCH 3/5] fix: properly space elements as in figma

---
 pages/subscriptionConfirmation.tsx        | 2 +-
 styles/components/confirmation.module.css | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/pages/subscriptionConfirmation.tsx b/pages/subscriptionConfirmation.tsx
index b0a88e23..6a7da090 100644
--- a/pages/subscriptionConfirmation.tsx
+++ b/pages/subscriptionConfirmation.tsx
@@ -38,7 +38,7 @@ const SubscriptionConfirmation: NextPage = () => {
             <span className={styles.highlight}>active!</span>
           </div>
         </div>
-        <div>
+        <div className={styles.content}>
           <div>Refer your friends to Starknet ID and earn crypto ! </div>
           <div className="stronger">
             Earn up to 8$ per friends with your referral link below.
diff --git a/styles/components/confirmation.module.css b/styles/components/confirmation.module.css
index c4291c67..5b48a14c 100644
--- a/styles/components/confirmation.module.css
+++ b/styles/components/confirmation.module.css
@@ -44,7 +44,14 @@
   cursor: pointer;
   font-size: 14px;
   line-height: 24px;
-  margin-bottom: 20px;
+  margin-bottom: 40px;
+}
+
+.content {
+  line-height: 28px;
+  font-size: 16px;
+  padding-top: 10px;
+  padding-bottom: 7px;
 }
 
 .coconutLeft {

From 9158882767ed1c653e01cea688e1d74daa32de2f Mon Sep 17 00:00:00 2001
From: Emmanuel Aroso <57766083+emarc99@users.noreply.github.com>
Date: Sat, 19 Jul 2025 10:25:24 +0100
Subject: [PATCH 4/5] fix: properly align images with elements in desktop

---
 styles/components/confirmation.module.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/styles/components/confirmation.module.css b/styles/components/confirmation.module.css
index 5b48a14c..a970c830 100644
--- a/styles/components/confirmation.module.css
+++ b/styles/components/confirmation.module.css
@@ -10,6 +10,7 @@
   position: relative;
   z-index: 1;
   overflow: hidden;
+  padding-top: 55px;
 }
 
 .subtitle {
@@ -72,8 +73,8 @@
 
 .balloon {
   position: fixed;
-  top: 28%;
-  left: 18%;
+  top: 25%;
+  left: 20%;
   width: 115px;
   overflow: hidden;
   z-index: -1;
@@ -82,7 +83,7 @@
 .coconut {
   position: fixed;
   top: 52%;
-  right: 19%;
+  right: 21%;
   width: 55px;
   overflow: hidden;
   z-index: -1;

From 0fcbc784a84392f3d373273cad039e45aa5efd27 Mon Sep 17 00:00:00 2001
From: Emmanuel Aroso <57766083+emarc99@users.noreply.github.com>
Date: Sat, 19 Jul 2025 10:26:46 +0100
Subject: [PATCH 5/5] fix: navbar aligns with figma

---
 styles/components/navbar.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/styles/components/navbar.module.css b/styles/components/navbar.module.css
index 2860871e..7ac4e6c7 100644
--- a/styles/components/navbar.module.css
+++ b/styles/components/navbar.module.css
@@ -63,6 +63,7 @@
   padding-right: 4rem;
   height: 12vh;
   z-index: 12;
+  padding-top: 15px;
 }
 
 .mobileNavBarHeader {