Fix/remove daisyui

infrastructure/eid-wallet/package.json

@@ -51,7 +51,6 @@
 		"@vitest/coverage-v8": "^3.0.9",
 		"autoprefixer": "^10.4.21",
 		"cupertino-pane": "^1.4.22",
-		"daisyui": "^5.0.6",
 		"playwright": "^1.51.1",
 		"postcss": "^8.5.3",
 		"storybook": "^8.6.7",

infrastructure/eid-wallet/src/app.css

@@ -1,13 +1,6 @@
 @import "tailwindcss";
 @import "flag-icons/css/flag-icons.min.css";
 
-@plugin "daisyui" {
-	/* biome-ignore lint/correctness/noUnknownProperty: DaisyUI v5 specific stuff, not handled yet by Biome */
-	themes: false;
-	/* biome-ignore lint/correctness/noUnknownProperty: DaisyUI v5 specific stuff, not handled yet by Biome */
-	darktheme: "light";
-}
-
 @font-face {
 	font-family: "Archivo";
 	src: url("/fonts/Archivo-VariableFont_wdth,wght.ttf") format("truetype");
@@ -17,7 +10,6 @@
 
 @layer base {
 	/* Typography */
-
 	h1 {
 		@apply text-[90px] text-black font-semibold;
 	}
@@ -80,8 +72,3 @@
 body {
 	font-family: "Archivo", sans-serif;
 }
-
-/* Custom classes */
-.spin-slow {
-	animation: spin 3s linear infinite;
-}

infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte

@@ -97,7 +97,7 @@ const createValueSlot = (arr: number[]) => {
 	);
 };
 
-let uniqueId = `input${Math.random().toString().split(".")[1]}`;
+const uniqueId = `input${Math.random().toString().split(".")[1]}`;
 const cBase =
 	"relative w-full margin-x-[auto] flex justify-between items-center gap-[10px] flex-row flex-nowrap select-none";
 </script>
@@ -115,11 +115,7 @@ const cBase =
         <input
           bind:value={pins[i]}
           maxLength="1"
-          class="pin-item w-[68px] h-[81px] rounded-[64px] border-[1px] border-transparent text-xl text-center bg-gray select-none {pins[
-            i
-          ]
-            ? 'has-value'
-            : ''}"
+          class="pin-item w-[68px] h-[81px] rounded-[64px] border-[1px] border-transparent text-xl text-center bg-gray select-none"
           class:error={isError}
           id={uniqueId}
           type="tel"
@@ -136,7 +132,10 @@ const cBase =
           placeholder=""
         />
         {#if pins[i] !== ''}
-          <div class="mask">·</div>
+          <div 
+            class="mask w-[9px] h-[9px] bg-black rounded-full"
+            class:hidden={!pins[i]} 
+          ></div>
         {/if}
       </div>
     {/each}
@@ -154,8 +153,6 @@ const cBase =
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 24px;
-    visibility: hidden;
   }
 
   input.error + .mask {
@@ -178,9 +175,4 @@ const cBase =
     outline: none;
     border-color: var(--color-primary);
   }
-
-  /* Show the mask when the input has a value */
-  .singular-input input.has-value + .mask {
-    visibility: visible;
-  }
 </style>

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

@@ -17,7 +17,7 @@ const handleNext = async () => {
 
 <main class="pt-[3vh] px-[5vw] pb-[4.5vh]">
     <article class="flex justify-center mb-[4vh]">
-        <img src="/images/Onboarding.svg" alt="info-graphic-card">
+        <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
     </article>
     <section class="mb-[9.3vh]">
         <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>

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

@@ -53,56 +53,56 @@ $effect(() => {
 </script>
 
 {#if firstStep}
-<main class="h-[100vh] pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
-    <section>
-        <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>
+    <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
+        <section>
+            <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-[5vw] pb-[4.5vh] flex flex-col justify-between">
-    <section>
-        <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={`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>
+    <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
+        <section>
+            <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={`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>
 {/if}
 
 
 <Drawer bind:isPaneOpen={showDrawer} isCancelRequired={true}>
     {#if !isBiometricScreen}
-    <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
-        <span class="relative z-[1]">
-            <HugeiconsIcon icon={CircleLock01Icon} color="var(--color-primary)"/>
-        </span>
-        <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>
-    <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>
+        <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
+            <span class="relative z-[1]">
+                <HugeiconsIcon icon={CircleLock01Icon} color="var(--color-primary)"/>
+            </span>
+            <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>
+        <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]">
-        <span class="relative z-[1]">
-            <HugeiconsIcon icon={FaceIdIcon} color="var(--color-primary)" />
-        </span>
-        <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>
-    <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>
-        <ButtonAction class="w-full" callback={handleSetupBiometrics}>Set up</ButtonAction>
-    </div>
-    {:else}
-    <ButtonAction class="w-full" callback={handleBiometricsAdded}>Continue</ButtonAction>
-    {/if}
+        <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
+            <span class="relative z-[1]">
+                <HugeiconsIcon icon={FaceIdIcon} color="var(--color-primary)" />
+            </span>
+            <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>
+        <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>
+                <ButtonAction class="w-full" callback={handleSetupBiometrics}>Set up</ButtonAction>
+            </div>
+        {:else}
+            <ButtonAction class="w-full" callback={handleBiometricsAdded}>Continue</ButtonAction>
+        {/if}
     {/if}
 </Drawer>

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

@@ -8,12 +8,12 @@ const handleNext = async () => {
 };
 </script>
 
-<main class="h-[100vh] pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
+<main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
     <section>
         <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>
 
-        <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null}  viewBtn={() => null}/>
+        <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null}  viewBtn={() => null}/>
     </section>
     <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>

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

@@ -3,7 +3,7 @@ import { goto } from "$app/navigation";
 import { ButtonAction } from "$lib/ui";
 </script>
 
-<main class="h-[100vh] pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
+<main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
     <section>
         <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>

infrastructure/eid-wallet/src/routes/+layout.svelte

@@ -12,7 +12,7 @@ $effect(() => {
 </script>
 
 {#if showSplashScreen}
-    <div class="relative w-full h-[100vh] bg-primary">
+    <div class="relative w-full h-screen bg-primary">
         <img class="absolute w-full bottom-[-80px] start-0" src="/images/Shape1.svg" alt="illustration">
         <img class="absolute w-full top-[50px] end-[100px]" src="/images/Shape2.svg" alt="illustration">
         <div class="absolute w-full top-[42%] start-[50%] translate-x-[-50%] translate-y-[-42%]">