Skip to content

Fix: Reviewed and fixed Refont of Confirmation page after enabling Subscription #1179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Marchand-Nicolas merged 5 commits into from
Jul 25, 2025
Merged

Fix: Reviewed and fixed Refont of Confirmation page after enabling Subscription #1179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fb632df
feat: fix generated address block styling
emarc99 Jul 19, 2025
74afe0e
fix: use accurate extrabold font
emarc99 Jul 19, 2025
db2d91c
fix: properly space elements as in figma
emarc99 Jul 19, 2025
9158882
fix: properly align images with elements in desktop
emarc99 Jul 19, 2025
0fcbc78
fix: navbar aligns with figma
emarc99 Jul 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/UI/iconsComponents/icons/copyIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
6 changes: 3 additions & 3 deletions pages/subscriptionConfirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ 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="font-extrabold">
<div className="stronger">
Earn up to 8$ per friends with your referral link below.
</div>
</div>
Expand All @@ -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"
Expand Down
26 changes: 18 additions & 8 deletions styles/components/confirmation.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@
align-items: center;
height: 100vh;
color: #454545;
gap: 24px;
gap: 10px;
text-align: center;
position: relative;
z-index: 1;
overflow: hidden;
padding-top: 55px;
}

.subtitle {
Expand All @@ -34,15 +35,24 @@

.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: 40px;
}

.content {
line-height: 28px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 7px;
}

.coconutLeft {
Expand All @@ -63,8 +73,8 @@

.balloon {
position: fixed;
top: 28%;
left: 18%;
top: 25%;
left: 20%;
width: 115px;
overflow: hidden;
z-index: -1;
Expand All @@ -73,7 +83,7 @@
.coconut {
position: fixed;
top: 52%;
right: 19%;
right: 21%;
width: 55px;
overflow: hidden;
z-index: -1;
Expand Down
1 change: 1 addition & 0 deletions styles/components/navbar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
padding-right: 4rem;
height: 12vh;
z-index: 12;
padding-top: 15px;
}

.mobileNavBarHeader {
Expand Down
8 changes: 8 additions & 0 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Comment on lines +18 to +21
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Ship web-optimised font formats as well
Only ttf is declared; browsers will download the full-fat file (~100 KB-plus) even on mobile.
Add at least a woff2 source for modern browsers and keep ttf as a fallback:

 @font-face {
   font-family: "Poppins-ExtraBold";
-  src: url(../public/fonts/poppins/Poppins-ExtraBold.ttf);
+  src: url(../public/fonts/poppins/Poppins-ExtraBold.woff2) format("woff2"),
+       url(../public/fonts/poppins/Poppins-ExtraBold.ttf)  format("truetype");
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@font-face {
font-family: "Poppins-ExtraBold";
src: url(../public/fonts/poppins/Poppins-ExtraBold.ttf);
}
@font-face {
font-family: "Poppins-ExtraBold";
src: url(../public/fonts/poppins/Poppins-ExtraBold.woff2) format("woff2"),
url(../public/fonts/poppins/Poppins-ExtraBold.ttf) format("truetype");
}
🤖 Prompt for AI Agents 
In styles/globals.css around lines 18 to 21, the @font-face rule only includes a
TTF font source, which is large and not optimized for web use. Add a WOFF2 font
source before the TTF source to provide a smaller, web-optimized format for
modern browsers while keeping TTF as a fallback. Update the src property to
include both formats with proper format declarations.

}

:root {
Expand Down Expand Up @@ -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;
Expand Down