fix: as per given suggestion

Author: grv-saini-20

infrastructure/eid-wallet/src/app.css

@@ -16,31 +16,27 @@
 }
 
 /* Typoraphy */
-.header-0 {
+h1 {
 	@apply text-[90px] text-black font-semibold;
 }
 
-.header-1 {
+h2 {
 	@apply text-6xl text-black font-semibold;
 }
 
-.header-2 {
+h3 {
 	@apply text-3xl text-black font-semibold;
 }
 
-.header-1 {
+h4 {
 	@apply text-xl text-black font-semibold;
 }
 
-.body-large {
-	@apply text-lg text-black font-normal;
-}
-
-.body-medium {
+p {
 	@apply text-base text-black font-normal;
 }
 
-.body-small {
+.small {
 	@apply text-xs text-black font-normal;
 }
 

infrastructure/eid-wallet/src/lib/fragments/IdentifierCard/IdentifierCard.svelte

@@ -24,9 +24,9 @@ const cBase = "relative w-full bg-black py-6 px-8 rounded-2xl";
 
 <article {...restProps} class={cn(`${cBase}`, restProps.class)}>
     <img src="" alt="tick" class="" />
-    <p class="text-sm font-normal text-gray-400">Your {eName}</p>
+    <p class="text-sm! font-normal text-gray-400!">Your {eName}</p>
     <div class="grid grid-cols-[65%_35%] items-center gap-2">
-        <h1 class="text-white text-sm font-medium break-all">{code}</h1>
+        <p class="text-white! font-medium! break-all">{code}</p>
         <ButtonAction callback={handleCopy} class="bg-white text-black z-[1]">Copy</ButtonAction>
     </div>
     <img class="absolute bottom-0 end-[30px]" src="/images/Line3.svg" alt="lines">

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

@@ -10,17 +10,17 @@ const handleFinish = async () => {};
 
 <main class="h-[100vh] pt-[5.2vh] px-[2.3vw] pb-[4.5vh] flex flex-col justify-between">
     <section>
-        <h1 class="header-2 mb-[0.5vh]">Your ePassport and eVault are ready</h1>
-        <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>
+        <h3 class="mb-[0.5vh]">Your ePassport and eVault are ready</h3>
+        <p class="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>
     </section>
     <section>
-        <h1 class="header-1 mb-[0.5vh]">Your eVault</h1>
-        <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>
+        <h3 class="mb-[0.5vh]">Your eVault</h3>
+        <p class="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>
     </section>
     <section class="bg-gray rounded-[24px] p-[24px]">
         <div class="flex justify-between items-center mb-[12px]">
-            <p class="body-medium">{usedStorage}GB used</p>
-            <p class="body-medium">{totalStorage}GB total storage</p>
+            <p>{usedStorage}GB used</p>
+            <p>{totalStorage}GB total storage</p>
         </div>
         <progress class="progress progress-secondary bg-primary-400 w-full h-[16px] rounded-xl" value={(usedStorage/totalStorage)*100} max="100"></progress>
     </section>

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

@@ -20,13 +20,13 @@ const handleNext = async () => {
         <img src="/images/Onboarding.svg" alt="info-graphic-card">
     </article>
     <section class="mb-[9.3vh]">
-        <h1 class="text-[42px]/[1] text-black font-medium mb-[1vh]">Your <br>
+        <h2 class="text-[42px]/[1]! font-medium! mb-[1vh]">Your <br>
             Digital Identity,
-            Secured</h1>
-        <p class="body-medium text-black-700!">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+            Secured</h2>
+        <p class="text-black-700!">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
     </section>
     <section>
-        <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>
+        <p class="max-w-[300px] mx-[auto] text-center 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>
         <div class="flex justify-center whitespace-nowrap mt-[2vh]">
             <ButtonAction class="w-full" callback={handleGetStarted}>Get Started</ButtonAction>
         </div>
@@ -35,8 +35,8 @@ const handleNext = async () => {
 
 <Drawer bind:isPaneOpen>
     <img src="/images/GetStarted.svg" alt="get-started">
-    <h1 class="header-1 mt-[2.3vh] mb-[0.5vh]">Welcome to Web 3 Data Spaces</h1>
-    <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>
+    <h4 class="mt-[2.3vh] mb-[0.5vh]">Welcome to Web 3 Data Spaces</h4>
+    <p class="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>
     <div class="flex justify-center whitespace-nowrap my-[2.3vh]">
         <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
     </div>

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

@@ -54,19 +54,19 @@ $effect(() => {
 {#if firstStep}
 <main class="h-[100vh] pt-[5.2vh] px-[2.3vw] pb-[4.5vh] flex flex-col justify-between">
     <section>
-        <h1 class="header-2 mb-[1vh]">Create a pin</h1>
-        <p class="body-medium text-black-700! mb-[14vh]">Enter a 4-digit PIN code</p>
+        <h3 class="mb-[1vh]">Create a pin</h3>
+        <p class="text-black-700! mb-[14vh]">Enter a 4-digit PIN code</p>
         <InputPin bind:pin/>
     </section>
     <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
 </main>
 {:else}
 <main class="h-[100vh] pt-[5.2vh] px-[2.3vw] pb-[4.5vh] flex flex-col justify-between">
     <section>
-        <h1 class="header-2 mb-[1vh]">Re-enter your pin</h1>
-        <p class="body-medium text-black-700! mb-[14vh]">Confirm by entering pin again</p>
+        <h3 class="mb-[1vh]">Re-enter your pin</h3>
+        <p class="text-black-700! mb-[14vh]">Confirm by entering pin again</p>
         <InputPin bind:pin={repeatPin} {isError}/>
-        <p class={`body-medium text-danger! mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
+        <p class={`text-danger! mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
     </section>
     <ButtonAction class="w-full" callback={handleConfirm}>Confirm</ButtonAction>
 </main>
@@ -82,8 +82,8 @@ $effect(() => {
         <img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
         <img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
     </div>
-    <h1 class="header-1 font-medium">Pin code set!</h1>
-    <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>
+    <h4>Pin code set!</h4>
+    <p class="text-black-700! mt-[0.5vh] mb-[2.3vh]">Your PIN has been created. You’ll use it to access your digital entity securely.</p>
     <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
     {:else}
     <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
@@ -93,8 +93,8 @@ $effect(() => {
         <img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
         <img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
     </div>
-    <h1 class="header-1 font-medium!">{isBiometricsAdded ? "You’re all set!" : "Add biometrics"}</h1>
-    <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>
+    <h4>{isBiometricsAdded ? "You’re all set!" : "Add biometrics"}</h4>
+    <p class="text-black-700! 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>
     {#if !isBiometricsAdded}
     <div class="flex justify-center items-center gap-[11px]">
         <ButtonAction class="w-full bg-primary-100 text-primary" callback={handleSkip}>Skip</ButtonAction>

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

@@ -10,8 +10,8 @@ const handleNext = async () => {
 
 <main class="h-[100vh] pt-[5.2vh] px-[2.3vw] pb-[4.5vh] flex flex-col justify-between">
     <section>
-        <h1 class="header-2 mb-[0.5vh]">Here’s your eName</h1>
-        <p class="body-medium text-black-700!  mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
+        <h3 class="mb-[0.5vh]">Here’s your eName</h3>
+        <p class="text-black-700!  mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
 
         <IdentifierCard eName="AbcXyz" code="@asdasd-asdafaf-asdaffa-asfafaf"/>
     </section>

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

@@ -5,8 +5,8 @@ import { ButtonAction } from "$lib/ui";
 
 <main class="h-[100vh] pt-[3vh] px-[6vw] pb-[4.5vh] flex flex-col justify-between items-center">
     <section>
-        <h1 class="header-2 mb-[1vh]">Verify your account</h1>
-        <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>
+        <h3 class="mb-[1vh]">Verify your account</h3>
+        <p class="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>
         <div class="flex justify-center">
             <img src="images/Passport.svg" alt="passport">
         </div>