Skip to content

Commit f983576

Browse files
grv-saini-20grv-saini-20
committed
feat: Typography
1 parent 010bee6 commit f983576

File tree

6 files changed

+53
-24
lines changed

6 files changed

+53
-24
lines changed

‎infrastructure/eid-wallet/src/app.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,35 @@
1515
font-style: normal;
1616
}
1717

18+
/* Typoraphy */
19+
.header-0 {
20+
@apply text-[90px] text-black font-semibold;
21+
}
22+
23+
.header-1 {
24+
@apply text-6xl text-black font-semibold;
25+
}
26+
27+
.header-2 {
28+
@apply text-3xl text-black font-semibold;
29+
}
30+
31+
.header-1 {
32+
@apply text-xl text-black font-semibold;
33+
}
34+
35+
.body-large {
36+
@apply text-lg text-black font-normal;
37+
}
38+
39+
.body-medium {
40+
@apply text-base text-black font-normal;
41+
}
42+
43+
.body-small {
44+
@apply text-xs text-black font-normal;
45+
}
46+
1847
@theme {
1948
/* Custom theme */
2049
--color-primary: #8e52ff;

‎infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ const handleFinish = async () => {};
1010

1111
<main class="h-[100vh] pt-[5.2vh] px-[2.3vw] pb-[4.5vh] flex flex-col justify-between">
1212
<section>
13-
<h1 class="text-3xl text-black font-semibold mb-[0.5vh]">Your ePassport and eVault are ready</h1>
14-
<p class="text-base text-black-700 font-normal mb-[3vh]">Log into any W3DS platform without passwords. It’s tied to this phone; if lost, you’ll need to revoke and reissue it on a new device.</p>
13+
<h1 class="header-3 mb-[0.5vh]">Your ePassport and eVault are ready</h1>
14+
<p class="body-medium text-black-700! mb-[3vh]">Log into any W3DS platform without passwords. It’s tied to this phone; if lost, you’ll need to revoke and reissue it on a new device.</p>
1515
</section>
1616
<section>
17-
<h1 class="text-xl text-black font-semibold mb-[0.5vh]">Your eVault</h1>
18-
<p class="text-base text-black-700 font-normal mb-[3vh]">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
17+
<h1 class="header-1 mb-[0.5vh]">Your eVault</h1>
18+
<p class="body-medium text-black-700! mb-[3vh]">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
1919
</section>
2020
<section class="bg-gray rounded-[24px] p-[24px]">
2121
<div class="flex justify-between items-center mb-[12px]">
22-
<p class="text-base font-normal text-black">{usedStorage}GB used</p>
23-
<p class="text-base font-normal text-black">{totalStorage}GB total storage</p>
22+
<p class="body-medium">{usedStorage}GB used</p>
23+
<p class="body-medium">{totalStorage}GB total storage</p>
2424
</div>
2525
<progress class="progress progress-secondary bg-primary-400 w-full h-[16px] rounded-xl" value={(usedStorage/totalStorage)*100} max="100"></progress>
2626
</section>

‎infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,16 @@ const handleNext = async () => {
1717

1818
<main class="pt-[3vh] px-[6vw] pb-[4.5vh]">
1919
<article class="flex justify-center mb-[4vh]">
20-
<img src="/images/Onboarding.svg" alt="card">
20+
<img src="/images/Onboarding.svg" alt="info-graphic-card">
2121
</article>
2222
<section class="mb-[9.3vh]">
2323
<h1 class="text-[42px]/[1] text-black font-medium mb-[1vh]">Your <br>
2424
Digital Identity,
2525
Secured</h1>
26-
<p class="text-base text-black-700 font-normal">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
26+
<p class="body-medium text-black-700!">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
2727
</section>
2828
<section>
29-
<p class="max-w-[300px] mx-[auto] text-center text-xs text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>
29+
<p class="max-w-[300px] mx-[auto] text-center body-small text-black-500!">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>
3030
<div class="flex justify-center whitespace-nowrap mt-[2vh]">
3131
<ButtonAction class="w-full" callback={handleGetStarted}>Get Started</ButtonAction>
3232
</div>
@@ -35,8 +35,8 @@ const handleNext = async () => {
3535

3636
<Drawer bind:isPaneOpen>
3737
<img src="/images/GetStarted.svg" alt="get-started">
38-
<h1 class="text-xl text-black font-semibold mt-[2.3vh] mb-[0.5vh]">Welcome to Web 3 Data Spaces</h1>
39-
<p class="text-base text-black-700 font-normal">Your eName is more than a name—it's your unique digital passport. One constant identifier that travels with you across the internet, connecting your real-world self to the digital universe.</p>
38+
<h1 class="header-1 mt-[2.3vh] mb-[0.5vh]">Welcome to Web 3 Data Spaces</h1>
39+
<p class="body-medium text-black-700!">Your eName is more than a name—it's your unique digital passport. One constant identifier that travels with you across the internet, connecting your real-world self to the digital universe.</p>
4040
<div class="flex justify-center whitespace-nowrap my-[2.3vh]">
4141
<ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
4242
</div>

‎infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,19 @@ $effect(() => {
5454
{#if firstStep}
5555
<main class="h-[100vh] pt-[5.2vh] px-[2.3vw] pb-[4.5vh] flex flex-col justify-between">
5656
<section>
57-
<h1 class="text-3xl text-black font-semibold mb-[1vh]">Create a pin</h1>
58-
<p class="text-base text-black-700 font-normal mb-[14vh]">Enter a 4-digit PIN code</p>
57+
<h1 class="header-2 mb-[1vh]">Create a pin</h1>
58+
<p class="body-medium text-black-700! mb-[14vh]">Enter a 4-digit PIN code</p>
5959
<InputPin bind:pin/>
6060
</section>
6161
<ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
6262
</main>
6363
{:else}
6464
<main class="h-[100vh] pt-[5.2vh] px-[2.3vw] pb-[4.5vh] flex flex-col justify-between">
6565
<section>
66-
<h1 class="text-3xl text-black font-semibold mb-[1vh]">Re-enter your pin</h1>
67-
<p class="text-base text-black-700 font-normal mb-[14vh]">Confirm by entering pin again</p>
66+
<h1 class="header-2 mb-[1vh]">Re-enter your pin</h1>
67+
<p class="body-medium text-black-700! mb-[14vh]">Confirm by entering pin again</p>
6868
<InputPin bind:pin={repeatPin} {isError}/>
69-
<p class={`text-base font-normal text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
69+
<p class={`body-medium text-danger! mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
7070
</section>
7171
<ButtonAction class="w-full" callback={handleConfirm}>Confirm</ButtonAction>
7272
</main>
@@ -82,8 +82,8 @@ $effect(() => {
8282
<img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
8383
<img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
8484
</div>
85-
<h1 class="text-black text-xl font-medium">Pin code set!</h1>
86-
<p class="text-black-700 text-base font-normal mt-[0.5vh] mb-[2.3vh]">Your PIN has been created. You’ll use it to access your digital entity securely.</p>
85+
<h1 class="header-1 font-medium">Pin code set!</h1>
86+
<p class="text-black-700! body-medium mt-[0.5vh] mb-[2.3vh]">Your PIN has been created. You’ll use it to access your digital entity securely.</p>
8787
<ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
8888
{:else}
8989
<div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
@@ -93,8 +93,8 @@ $effect(() => {
9393
<img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
9494
<img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
9595
</div>
96-
<h1 class="text-black text-xl font-medium">{isBiometricsAdded ? "You’re all set!" : "Add biometrics"}</h1>
97-
<p class="text-black-700 text-base font-normal mt-[0.5vh] mb-[2.3vh]">{ isBiometricsAdded ? "Your biometrics have been successfully added." : "Use your fingerprint or face recognition for faster, more secure logins."}</p>
96+
<h1 class="header-1 font-medium!">{isBiometricsAdded ? "You’re all set!" : "Add biometrics"}</h1>
97+
<p class="text-black-700! body-normal mt-[0.5vh] mb-[2.3vh]">{ isBiometricsAdded ? "Your biometrics have been successfully added." : "Use your fingerprint or face recognition for faster, more secure logins."}</p>
9898
{#if !isBiometricsAdded}
9999
<div class="flex justify-center items-center gap-[11px]">
100100
<ButtonAction class="w-full bg-primary-100 text-primary" callback={handleSkip}>Skip</ButtonAction>

‎infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ const handleNext = async () => {
1010

1111
<main class="h-[100vh] pt-[5.2vh] px-[2.3vw] pb-[4.5vh] flex flex-col justify-between">
1212
<section>
13-
<h1 class="text-3xl text-black font-semibold mb-[0.5vh]">Here’s your eName</h1>
14-
<p class="text-base text-black-700 font-normal mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
13+
<h1 class="header-2 mb-[0.5vh]">Here’s your eName</h1>
14+
<p class="body-medium text-black-700! mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
1515

1616
<IdentifierCard eName="AbcXyz" code="@asdasd-asdafaf-asdaffa-asfafaf"/>
1717
</section>

‎infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { ButtonAction } from "$lib/ui";
55

66
<main class="h-[100vh] pt-[3vh] px-[6vw] pb-[4.5vh] flex flex-col justify-between items-center">
77
<section>
8-
<h1 class="text-3xl text-black font-semibold mb-[1vh]">Verify your account</h1>
9-
<p class="text-base font-normal text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
8+
<h1 class="header-2 mb-[1vh]">Verify your account</h1>
9+
<p class="body-medium text-black-700! mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
1010
<div class="flex justify-center">
1111
<img src="images/Passport.svg" alt="passport">
1212
</div>

0 commit comments

Comments
 (0)