fix/drawers-replaced-with-component

infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte

@@ -84,13 +84,10 @@ onMount(() => {
  return () => {
  disposed = true;
  cleanup?.();
+ cancelScan();
  };
 });
 
-onDestroy(async () => {
- await cancelScan();
-});
-
 $effect(() => {
  console.log(
  "🔍 DEBUG: selectedBlindVoteOption changed to:",
@@ -223,3 +220,9 @@ function handleRevealDrawerOpenChange(value: boolean) {
  onReveal={handleRevealVote}
  onOpenChange={handleRevealDrawerOpenChange}
 />
+
+<style>
+ :global(body:has(.loggedin-drawer)) {
+ background-color: white !important;
+ }
+</style>

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -28,110 +27,148 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
- <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
- >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
+{#if internalOpen}
+ <div class="fixed inset-0 z-50 bg-white p-4 overflow-y-auto">
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
- <h4>Code scanned!</h4>
- <p class="text-black-700">You're trying to access the following site</p>
+ <h4 class="text-xl font-bold">Code scanned!</h4>
+ <p class="text-black-700 mt-1">
+ Please review the connection details below.
+ </p>
 
- <div class="bg-gray rounded-2xl w-full p-4 mt-4">
- <h4 class="text-base text-black-700">Platform Name</h4>
- <p class="text-black-700 font-normal capitalize">
- {platform ?? "Unable to get name"}
- </p>
- </div>
+ <div
+ class="w-full mt-6 border border-gray-100 rounded-2xl overflow-hidden bg-gray-50"
+ >
+ <table class="w-full border-collapse">
+ <tbody class="divide-y divide-gray-200">
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Platform Name
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium capitalize mt-1 block"
+ >
+ {platform ?? "Unable to get name"}
+ </div>
+ </td>
+ </tr>
 
- <div class="bg-gray rounded-2xl w-full p-4">
- <h4 class="text-base text-black-700">Website URL</h4>
- <p class="text-black-700 font-normal">
- {hostname ?? scannedContent}
- </p>
- </div>
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Website URL
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium break-all mt-1 block"
+ >
+ {hostname ?? scannedContent}
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
 
- {#if authError}
- <div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
- <div class="flex items-center">
- <div class="flex-shrink-0">
- <svg
- class="h-5 w-5 text-red-400"
- viewBox="0 0 20 20"
- fill="currentColor"
+ {#if authError}
+ <div
+ class="bg-red-50 border border-red-200 rounded-lg p-4 w-full mt-4"
  >
- <path
- fill-rule="evenodd"
- d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
- clip-rule="evenodd"
- />
- </svg>
- </div>
- <div class="ml-3">
- <h3 class="text-sm font-medium text-red-800">Error</h3>
- <div class="mt-2 text-sm text-red-700">
- {authError}
+ <div class="flex items-center">
+ <div class="shrink-0">
+ <svg
+ class="h-5 w-5 text-red-400"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </div>
+ <div class="ml-3">
+ <h3 class="text-sm font-medium text-red-800">
+ Error
+ </h3>
+ <div class="mt-1 text-sm text-red-700">
+ {authError}
+ </div>
+ </div>
+ </div>
  </div>
+ {/if}
+ </div>
+
+ <div class="flex flex-col gap-3 pb-2 w-full pt-8">
+ <div class="flex justify-center gap-3 items-center w-full">
+ {#if authError}
+ <Button.Action
+ variant="solid"
+ class="w-full"
+ callback={onDecline}
+ >
+ Okay
+ </Button.Action>
+ {:else}
+ <Button.Action
+ variant="danger-soft"
+ class="w-full"
+ callback={onDecline}
+ disabled={authLoading}
+ >
+ Decline
+ </Button.Action>
+ <Button.Action
+ variant="solid"
+ class="w-full whitespace-nowrap"
+ callback={onConfirm}
+ disabled={authLoading}
+ >
+ {#if authLoading}
+ Authenticating...
+ {:else}
+ Confirm
+ {/if}
+ </Button.Action>
+ {/if}
  </div>
+
+ {#if isSigningRequest === false}
+ <div class="text-center mt-1">
+ <p class="text-sm text-gray-600">
+ After confirmation, you may return to <strong
+ >{platform}</strong
+ > and continue there
+ </p>
+ </div>
+ {/if}
  </div>
  </div>
- {/if}
-
- <div class="flex justify-center gap-3 items-center mt-4">
- {#if authError}
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onDecline}
- >
- Okay
- </Button.Action>
- {:else}
- <Button.Action
- variant="danger-soft"
- class="w-full"
- callback={onDecline}
- disabled={authLoading}
- >
- Decline
- </Button.Action>
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onConfirm}
- disabled={authLoading}
- >
- {#if authLoading}
- Authenticating...
- {:else}
- Confirm
- {/if}
- </Button.Action>
- {/if}
  </div>
-
- {#if isSigningRequest === false}
- <div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- After confirmation, you may return to {platform} and continue
- there
- </p>
- </div>
- {/if}
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/LoggedInDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -23,42 +22,62 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
+{#if internalOpen}
  <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="loggedin-title"
+ class="loggedin-drawer fixed inset-0 z-50 bg-white p-4 overflow-y-auto"
  >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
-
- <h4>You're logged in!</h4>
- <p class="text-black-700">You're now connected to {platform}</p>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
-<div class="flex flex-col gap-3 mt-4">
-{#if redirect && platform}
-<div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- You may return to {platform} and continue there
+ <h4 id="loggedin-title" class="text-xl font-bold">
+ You're logged in!
+ </h4>
+ <p class="text-gray-700">
+ You're now connected to {platform ?? "the platform"}
  </p>
+ <div class="flex flex-col items-start py-6 w-full">
+ {#if redirect && platform}
+ <div class="text-start">
+ <p class="text-sm text-gray-600">
+ You may return to <strong>{platform}</strong> and
+ continue there
+ </p>
+ </div>
+ {/if}
+ </div>
  </div>
- {/if}
 
- <Button.Action variant="soft" class="w-full" callback={onConfirm}>
- Ok
- </Button.Action>
+ <div class="flex flex-col gap-3 pb-2 w-full">
+ <Button.Action
+ variant="soft"
+ class="w-full"
+ callback={onConfirm}
+ >
+ Ok
+ </Button.Action>
+ </div>
+ </div>
  </div>
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte

@@ -84,13 +84,10 @@ onMount(() => {
  return () => {
  disposed = true;
  cleanup?.();
+ cancelScan();
  };
 });
 
-onDestroy(async () => {
- await cancelScan();
-});
-
 $effect(() => {
  console.log(
  "🔍 DEBUG: selectedBlindVoteOption changed to:",
@@ -223,3 +220,9 @@ function handleRevealDrawerOpenChange(value: boolean) {
  onReveal={handleRevealVote}
  onOpenChange={handleRevealDrawerOpenChange}
 />
+
+<style>
+ :global(body:has(.loggedin-drawer)) {
+ background-color: white !important;
+ }
+</style>

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -28,110 +27,148 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
- <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
- >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
+{#if internalOpen}
+ <div class="fixed inset-0 z-50 bg-white p-4 overflow-y-auto">
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
- <h4>Code scanned!</h4>
- <p class="text-black-700">You're trying to access the following site</p>
+ <h4 class="text-xl font-bold">Code scanned!</h4>
+ <p class="text-black-700 mt-1">
+ Please review the connection details below.
+ </p>
 
- <div class="bg-gray rounded-2xl w-full p-4 mt-4">
- <h4 class="text-base text-black-700">Platform Name</h4>
- <p class="text-black-700 font-normal capitalize">
- {platform ?? "Unable to get name"}
- </p>
- </div>
+ <div
+ class="w-full mt-6 border border-gray-100 rounded-2xl overflow-hidden bg-gray-50"
+ >
+ <table class="w-full border-collapse">
+ <tbody class="divide-y divide-gray-200">
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Platform Name
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium capitalize mt-1 block"
+ >
+ {platform ?? "Unable to get name"}
+ </div>
+ </td>
+ </tr>
 
- <div class="bg-gray rounded-2xl w-full p-4">
- <h4 class="text-base text-black-700">Website URL</h4>
- <p class="text-black-700 font-normal">
- {hostname ?? scannedContent}
- </p>
- </div>
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Website URL
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium break-all mt-1 block"
+ >
+ {hostname ?? scannedContent}
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
 
- {#if authError}
- <div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
- <div class="flex items-center">
- <div class="flex-shrink-0">
- <svg
- class="h-5 w-5 text-red-400"
- viewBox="0 0 20 20"
- fill="currentColor"
+ {#if authError}
+ <div
+ class="bg-red-50 border border-red-200 rounded-lg p-4 w-full mt-4"
  >
- <path
- fill-rule="evenodd"
- d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
- clip-rule="evenodd"
- />
- </svg>
- </div>
- <div class="ml-3">
- <h3 class="text-sm font-medium text-red-800">Error</h3>
- <div class="mt-2 text-sm text-red-700">
- {authError}
+ <div class="flex items-center">
+ <div class="shrink-0">
+ <svg
+ class="h-5 w-5 text-red-400"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </div>
+ <div class="ml-3">
+ <h3 class="text-sm font-medium text-red-800">
+ Error
+ </h3>
+ <div class="mt-1 text-sm text-red-700">
+ {authError}
+ </div>
+ </div>
+ </div>
  </div>
+ {/if}
+ </div>
+
+ <div class="flex flex-col gap-3 pb-2 w-full pt-8">
+ <div class="flex justify-center gap-3 items-center w-full">
+ {#if authError}
+ <Button.Action
+ variant="solid"
+ class="w-full"
+ callback={onDecline}
+ >
+ Okay
+ </Button.Action>
+ {:else}
+ <Button.Action
+ variant="danger-soft"
+ class="w-full"
+ callback={onDecline}
+ disabled={authLoading}
+ >
+ Decline
+ </Button.Action>
+ <Button.Action
+ variant="solid"
+ class="w-full whitespace-nowrap"
+ callback={onConfirm}
+ disabled={authLoading}
+ >
+ {#if authLoading}
+ Authenticating...
+ {:else}
+ Confirm
+ {/if}
+ </Button.Action>
+ {/if}
  </div>
+
+ {#if isSigningRequest === false}
+ <div class="text-center mt-1">
+ <p class="text-sm text-gray-600">
+ After confirmation, you may return to <strong
+ >{platform}</strong
+ > and continue there
+ </p>
+ </div>
+ {/if}
  </div>
  </div>
- {/if}
-
- <div class="flex justify-center gap-3 items-center mt-4">
- {#if authError}
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onDecline}
- >
- Okay
- </Button.Action>
- {:else}
- <Button.Action
- variant="danger-soft"
- class="w-full"
- callback={onDecline}
- disabled={authLoading}
- >
- Decline
- </Button.Action>
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onConfirm}
- disabled={authLoading}
- >
- {#if authLoading}
- Authenticating...
- {:else}
- Confirm
- {/if}
- </Button.Action>
- {/if}
  </div>
-
- {#if isSigningRequest === false}
- <div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- After confirmation, you may return to {platform} and continue
- there
- </p>
- </div>
- {/if}
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/LoggedInDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -23,42 +22,62 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
+{#if internalOpen}
  <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="loggedin-title"
+ class="loggedin-drawer fixed inset-0 z-50 bg-white p-4 overflow-y-auto"
  >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
-
- <h4>You're logged in!</h4>
- <p class="text-black-700">You're now connected to {platform}</p>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
-<div class="flex flex-col gap-3 mt-4">
-{#if redirect && platform}
-<div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- You may return to {platform} and continue there
+ <h4 id="loggedin-title" class="text-xl font-bold">
+ You're logged in!
+ </h4>
+ <p class="text-gray-700">
+ You're now connected to {platform ?? "the platform"}
  </p>
+ <div class="flex flex-col items-start py-6 w-full">
+ {#if redirect && platform}
+ <div class="text-start">
+ <p class="text-sm text-gray-600">
+ You may return to <strong>{platform}</strong> and
+ continue there
+ </p>
+ </div>
+ {/if}
+ </div>
  </div>
- {/if}
 
- <Button.Action variant="soft" class="w-full" callback={onConfirm}>
- Ok
- </Button.Action>
+ <div class="flex flex-col gap-3 pb-2 w-full">
+ <Button.Action
+ variant="soft"
+ class="w-full"
+ callback={onConfirm}
+ >
+ Ok
+ </Button.Action>
+ </div>
+ </div>
  </div>
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte

@@ -84,13 +84,10 @@ onMount(() => {
  return () => {
  disposed = true;
  cleanup?.();
+ cancelScan();
  };
 });
 
-onDestroy(async () => {
- await cancelScan();
-});
-
 $effect(() => {
  console.log(
  "🔍 DEBUG: selectedBlindVoteOption changed to:",
@@ -223,3 +220,9 @@ function handleRevealDrawerOpenChange(value: boolean) {
  onReveal={handleRevealVote}
  onOpenChange={handleRevealDrawerOpenChange}
 />
+
+<style>
+ :global(body:has(.loggedin-drawer)) {
+ background-color: white !important;
+ }
+</style>

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -28,110 +27,148 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
- <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
- >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
+{#if internalOpen}
+ <div class="fixed inset-0 z-50 bg-white p-4 overflow-y-auto">
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
- <h4>Code scanned!</h4>
- <p class="text-black-700">You're trying to access the following site</p>
+ <h4 class="text-xl font-bold">Code scanned!</h4>
+ <p class="text-black-700 mt-1">
+ Please review the connection details below.
+ </p>
 
- <div class="bg-gray rounded-2xl w-full p-4 mt-4">
- <h4 class="text-base text-black-700">Platform Name</h4>
- <p class="text-black-700 font-normal capitalize">
- {platform ?? "Unable to get name"}
- </p>
- </div>
+ <div
+ class="w-full mt-6 border border-gray-100 rounded-2xl overflow-hidden bg-gray-50"
+ >
+ <table class="w-full border-collapse">
+ <tbody class="divide-y divide-gray-200">
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Platform Name
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium capitalize mt-1 block"
+ >
+ {platform ?? "Unable to get name"}
+ </div>
+ </td>
+ </tr>
 
- <div class="bg-gray rounded-2xl w-full p-4">
- <h4 class="text-base text-black-700">Website URL</h4>
- <p class="text-black-700 font-normal">
- {hostname ?? scannedContent}
- </p>
- </div>
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Website URL
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium break-all mt-1 block"
+ >
+ {hostname ?? scannedContent}
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
 
- {#if authError}
- <div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
- <div class="flex items-center">
- <div class="flex-shrink-0">
- <svg
- class="h-5 w-5 text-red-400"
- viewBox="0 0 20 20"
- fill="currentColor"
+ {#if authError}
+ <div
+ class="bg-red-50 border border-red-200 rounded-lg p-4 w-full mt-4"
  >
- <path
- fill-rule="evenodd"
- d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
- clip-rule="evenodd"
- />
- </svg>
- </div>
- <div class="ml-3">
- <h3 class="text-sm font-medium text-red-800">Error</h3>
- <div class="mt-2 text-sm text-red-700">
- {authError}
+ <div class="flex items-center">
+ <div class="shrink-0">
+ <svg
+ class="h-5 w-5 text-red-400"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </div>
+ <div class="ml-3">
+ <h3 class="text-sm font-medium text-red-800">
+ Error
+ </h3>
+ <div class="mt-1 text-sm text-red-700">
+ {authError}
+ </div>
+ </div>
+ </div>
  </div>
+ {/if}
+ </div>
+
+ <div class="flex flex-col gap-3 pb-2 w-full pt-8">
+ <div class="flex justify-center gap-3 items-center w-full">
+ {#if authError}
+ <Button.Action
+ variant="solid"
+ class="w-full"
+ callback={onDecline}
+ >
+ Okay
+ </Button.Action>
+ {:else}
+ <Button.Action
+ variant="danger-soft"
+ class="w-full"
+ callback={onDecline}
+ disabled={authLoading}
+ >
+ Decline
+ </Button.Action>
+ <Button.Action
+ variant="solid"
+ class="w-full whitespace-nowrap"
+ callback={onConfirm}
+ disabled={authLoading}
+ >
+ {#if authLoading}
+ Authenticating...
+ {:else}
+ Confirm
+ {/if}
+ </Button.Action>
+ {/if}
  </div>
+
+ {#if isSigningRequest === false}
+ <div class="text-center mt-1">
+ <p class="text-sm text-gray-600">
+ After confirmation, you may return to <strong
+ >{platform}</strong
+ > and continue there
+ </p>
+ </div>
+ {/if}
  </div>
  </div>
- {/if}
-
- <div class="flex justify-center gap-3 items-center mt-4">
- {#if authError}
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onDecline}
- >
- Okay
- </Button.Action>
- {:else}
- <Button.Action
- variant="danger-soft"
- class="w-full"
- callback={onDecline}
- disabled={authLoading}
- >
- Decline
- </Button.Action>
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onConfirm}
- disabled={authLoading}
- >
- {#if authLoading}
- Authenticating...
- {:else}
- Confirm
- {/if}
- </Button.Action>
- {/if}
  </div>
-
- {#if isSigningRequest === false}
- <div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- After confirmation, you may return to {platform} and continue
- there
- </p>
- </div>
- {/if}
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/LoggedInDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -23,42 +22,62 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
+{#if internalOpen}
  <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="loggedin-title"
+ class="loggedin-drawer fixed inset-0 z-50 bg-white p-4 overflow-y-auto"
  >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
-
- <h4>You're logged in!</h4>
- <p class="text-black-700">You're now connected to {platform}</p>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
-<div class="flex flex-col gap-3 mt-4">
-{#if redirect && platform}
-<div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- You may return to {platform} and continue there
+ <h4 id="loggedin-title" class="text-xl font-bold">
+ You're logged in!
+ </h4>
+ <p class="text-gray-700">
+ You're now connected to {platform ?? "the platform"}
  </p>
+ <div class="flex flex-col items-start py-6 w-full">
+ {#if redirect && platform}
+ <div class="text-start">
+ <p class="text-sm text-gray-600">
+ You may return to <strong>{platform}</strong> and
+ continue there
+ </p>
+ </div>
+ {/if}
+ </div>
  </div>
- {/if}
 
- <Button.Action variant="soft" class="w-full" callback={onConfirm}>
- Ok
- </Button.Action>
+ <div class="flex flex-col gap-3 pb-2 w-full">
+ <Button.Action
+ variant="soft"
+ class="w-full"
+ callback={onConfirm}
+ >
+ Ok
+ </Button.Action>
+ </div>
+ </div>
  </div>
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte

@@ -84,13 +84,10 @@ onMount(() => {
  return () => {
  disposed = true;
  cleanup?.();
+ cancelScan();
  };
 });
 
-onDestroy(async () => {
- await cancelScan();
-});
-
 $effect(() => {
  console.log(
  "🔍 DEBUG: selectedBlindVoteOption changed to:",
@@ -223,3 +220,9 @@ function handleRevealDrawerOpenChange(value: boolean) {
  onReveal={handleRevealVote}
  onOpenChange={handleRevealDrawerOpenChange}
 />
+
+<style>
+ :global(body:has(.loggedin-drawer)) {
+ background-color: white !important;
+ }
+</style>

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -28,110 +27,148 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
- <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
- >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
+{#if internalOpen}
+ <div class="fixed inset-0 z-50 bg-white p-4 overflow-y-auto">
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
- <h4>Code scanned!</h4>
- <p class="text-black-700">You're trying to access the following site</p>
+ <h4 class="text-xl font-bold">Code scanned!</h4>
+ <p class="text-black-700 mt-1">
+ Please review the connection details below.
+ </p>
 
- <div class="bg-gray rounded-2xl w-full p-4 mt-4">
- <h4 class="text-base text-black-700">Platform Name</h4>
- <p class="text-black-700 font-normal capitalize">
- {platform ?? "Unable to get name"}
- </p>
- </div>
+ <div
+ class="w-full mt-6 border border-gray-100 rounded-2xl overflow-hidden bg-gray-50"
+ >
+ <table class="w-full border-collapse">
+ <tbody class="divide-y divide-gray-200">
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Platform Name
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium capitalize mt-1 block"
+ >
+ {platform ?? "Unable to get name"}
+ </div>
+ </td>
+ </tr>
 
- <div class="bg-gray rounded-2xl w-full p-4">
- <h4 class="text-base text-black-700">Website URL</h4>
- <p class="text-black-700 font-normal">
- {hostname ?? scannedContent}
- </p>
- </div>
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Website URL
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium break-all mt-1 block"
+ >
+ {hostname ?? scannedContent}
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
 
- {#if authError}
- <div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
- <div class="flex items-center">
- <div class="flex-shrink-0">
- <svg
- class="h-5 w-5 text-red-400"
- viewBox="0 0 20 20"
- fill="currentColor"
+ {#if authError}
+ <div
+ class="bg-red-50 border border-red-200 rounded-lg p-4 w-full mt-4"
  >
- <path
- fill-rule="evenodd"
- d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
- clip-rule="evenodd"
- />
- </svg>
- </div>
- <div class="ml-3">
- <h3 class="text-sm font-medium text-red-800">Error</h3>
- <div class="mt-2 text-sm text-red-700">
- {authError}
+ <div class="flex items-center">
+ <div class="shrink-0">
+ <svg
+ class="h-5 w-5 text-red-400"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </div>
+ <div class="ml-3">
+ <h3 class="text-sm font-medium text-red-800">
+ Error
+ </h3>
+ <div class="mt-1 text-sm text-red-700">
+ {authError}
+ </div>
+ </div>
+ </div>
  </div>
+ {/if}
+ </div>
+
+ <div class="flex flex-col gap-3 pb-2 w-full pt-8">
+ <div class="flex justify-center gap-3 items-center w-full">
+ {#if authError}
+ <Button.Action
+ variant="solid"
+ class="w-full"
+ callback={onDecline}
+ >
+ Okay
+ </Button.Action>
+ {:else}
+ <Button.Action
+ variant="danger-soft"
+ class="w-full"
+ callback={onDecline}
+ disabled={authLoading}
+ >
+ Decline
+ </Button.Action>
+ <Button.Action
+ variant="solid"
+ class="w-full whitespace-nowrap"
+ callback={onConfirm}
+ disabled={authLoading}
+ >
+ {#if authLoading}
+ Authenticating...
+ {:else}
+ Confirm
+ {/if}
+ </Button.Action>
+ {/if}
  </div>
+
+ {#if isSigningRequest === false}
+ <div class="text-center mt-1">
+ <p class="text-sm text-gray-600">
+ After confirmation, you may return to <strong
+ >{platform}</strong
+ > and continue there
+ </p>
+ </div>
+ {/if}
  </div>
  </div>
- {/if}
-
- <div class="flex justify-center gap-3 items-center mt-4">
- {#if authError}
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onDecline}
- >
- Okay
- </Button.Action>
- {:else}
- <Button.Action
- variant="danger-soft"
- class="w-full"
- callback={onDecline}
- disabled={authLoading}
- >
- Decline
- </Button.Action>
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onConfirm}
- disabled={authLoading}
- >
- {#if authLoading}
- Authenticating...
- {:else}
- Confirm
- {/if}
- </Button.Action>
- {/if}
  </div>
-
- {#if isSigningRequest === false}
- <div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- After confirmation, you may return to {platform} and continue
- there
- </p>
- </div>
- {/if}
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/LoggedInDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -23,42 +22,62 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
+{#if internalOpen}
  <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="loggedin-title"
+ class="loggedin-drawer fixed inset-0 z-50 bg-white p-4 overflow-y-auto"
  >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
-
- <h4>You're logged in!</h4>
- <p class="text-black-700">You're now connected to {platform}</p>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
-<div class="flex flex-col gap-3 mt-4">
-{#if redirect && platform}
-<div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- You may return to {platform} and continue there
+ <h4 id="loggedin-title" class="text-xl font-bold">
+ You're logged in!
+ </h4>
+ <p class="text-gray-700">
+ You're now connected to {platform ?? "the platform"}
  </p>
+ <div class="flex flex-col items-start py-6 w-full">
+ {#if redirect && platform}
+ <div class="text-start">
+ <p class="text-sm text-gray-600">
+ You may return to <strong>{platform}</strong> and
+ continue there
+ </p>
+ </div>
+ {/if}
+ </div>
  </div>
- {/if}
 
- <Button.Action variant="soft" class="w-full" callback={onConfirm}>
- Ok
- </Button.Action>
+ <div class="flex flex-col gap-3 pb-2 w-full">
+ <Button.Action
+ variant="soft"
+ class="w-full"
+ callback={onConfirm}
+ >
+ Ok
+ </Button.Action>
+ </div>
+ </div>
  </div>
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte

@@ -84,13 +84,10 @@ onMount(() => {
  return () => {
  disposed = true;
  cleanup?.();
+ cancelScan();
  };
 });
 
-onDestroy(async () => {
- await cancelScan();
-});
-
 $effect(() => {
  console.log(
  "🔍 DEBUG: selectedBlindVoteOption changed to:",
@@ -223,3 +220,9 @@ function handleRevealDrawerOpenChange(value: boolean) {
  onReveal={handleRevealVote}
  onOpenChange={handleRevealDrawerOpenChange}
 />
+
+<style>
+ :global(body:has(.loggedin-drawer)) {
+ background-color: white !important;
+ }
+</style>

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -28,110 +27,148 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
- <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
- >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
+{#if internalOpen}
+ <div class="fixed inset-0 z-50 bg-white p-4 overflow-y-auto">
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
- <h4>Code scanned!</h4>
- <p class="text-black-700">You're trying to access the following site</p>
+ <h4 class="text-xl font-bold">Code scanned!</h4>
+ <p class="text-black-700 mt-1">
+ Please review the connection details below.
+ </p>
 
- <div class="bg-gray rounded-2xl w-full p-4 mt-4">
- <h4 class="text-base text-black-700">Platform Name</h4>
- <p class="text-black-700 font-normal capitalize">
- {platform ?? "Unable to get name"}
- </p>
- </div>
+ <div
+ class="w-full mt-6 border border-gray-100 rounded-2xl overflow-hidden bg-gray-50"
+ >
+ <table class="w-full border-collapse">
+ <tbody class="divide-y divide-gray-200">
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Platform Name
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium capitalize mt-1 block"
+ >
+ {platform ?? "Unable to get name"}
+ </div>
+ </td>
+ </tr>
 
- <div class="bg-gray rounded-2xl w-full p-4">
- <h4 class="text-base text-black-700">Website URL</h4>
- <p class="text-black-700 font-normal">
- {hostname ?? scannedContent}
- </p>
- </div>
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Website URL
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium break-all mt-1 block"
+ >
+ {hostname ?? scannedContent}
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
 
- {#if authError}
- <div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
- <div class="flex items-center">
- <div class="flex-shrink-0">
- <svg
- class="h-5 w-5 text-red-400"
- viewBox="0 0 20 20"
- fill="currentColor"
+ {#if authError}
+ <div
+ class="bg-red-50 border border-red-200 rounded-lg p-4 w-full mt-4"
  >
- <path
- fill-rule="evenodd"
- d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
- clip-rule="evenodd"
- />
- </svg>
- </div>
- <div class="ml-3">
- <h3 class="text-sm font-medium text-red-800">Error</h3>
- <div class="mt-2 text-sm text-red-700">
- {authError}
+ <div class="flex items-center">
+ <div class="shrink-0">
+ <svg
+ class="h-5 w-5 text-red-400"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </div>
+ <div class="ml-3">
+ <h3 class="text-sm font-medium text-red-800">
+ Error
+ </h3>
+ <div class="mt-1 text-sm text-red-700">
+ {authError}
+ </div>
+ </div>
+ </div>
  </div>
+ {/if}
+ </div>
+
+ <div class="flex flex-col gap-3 pb-2 w-full pt-8">
+ <div class="flex justify-center gap-3 items-center w-full">
+ {#if authError}
+ <Button.Action
+ variant="solid"
+ class="w-full"
+ callback={onDecline}
+ >
+ Okay
+ </Button.Action>
+ {:else}
+ <Button.Action
+ variant="danger-soft"
+ class="w-full"
+ callback={onDecline}
+ disabled={authLoading}
+ >
+ Decline
+ </Button.Action>
+ <Button.Action
+ variant="solid"
+ class="w-full whitespace-nowrap"
+ callback={onConfirm}
+ disabled={authLoading}
+ >
+ {#if authLoading}
+ Authenticating...
+ {:else}
+ Confirm
+ {/if}
+ </Button.Action>
+ {/if}
  </div>
+
+ {#if isSigningRequest === false}
+ <div class="text-center mt-1">
+ <p class="text-sm text-gray-600">
+ After confirmation, you may return to <strong
+ >{platform}</strong
+ > and continue there
+ </p>
+ </div>
+ {/if}
  </div>
  </div>
- {/if}
-
- <div class="flex justify-center gap-3 items-center mt-4">
- {#if authError}
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onDecline}
- >
- Okay
- </Button.Action>
- {:else}
- <Button.Action
- variant="danger-soft"
- class="w-full"
- callback={onDecline}
- disabled={authLoading}
- >
- Decline
- </Button.Action>
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onConfirm}
- disabled={authLoading}
- >
- {#if authLoading}
- Authenticating...
- {:else}
- Confirm
- {/if}
- </Button.Action>
- {/if}
  </div>
-
- {#if isSigningRequest === false}
- <div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- After confirmation, you may return to {platform} and continue
- there
- </p>
- </div>
- {/if}
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/LoggedInDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -23,42 +22,62 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
+{#if internalOpen}
  <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="loggedin-title"
+ class="loggedin-drawer fixed inset-0 z-50 bg-white p-4 overflow-y-auto"
  >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
-
- <h4>You're logged in!</h4>
- <p class="text-black-700">You're now connected to {platform}</p>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
-<div class="flex flex-col gap-3 mt-4">
-{#if redirect && platform}
-<div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- You may return to {platform} and continue there
+ <h4 id="loggedin-title" class="text-xl font-bold">
+ You're logged in!
+ </h4>
+ <p class="text-gray-700">
+ You're now connected to {platform ?? "the platform"}
  </p>
+ <div class="flex flex-col items-start py-6 w-full">
+ {#if redirect && platform}
+ <div class="text-start">
+ <p class="text-sm text-gray-600">
+ You may return to <strong>{platform}</strong> and
+ continue there
+ </p>
+ </div>
+ {/if}
+ </div>
  </div>
- {/if}
 
- <Button.Action variant="soft" class="w-full" callback={onConfirm}>
- Ok
- </Button.Action>
+ <div class="flex flex-col gap-3 pb-2 w-full">
+ <Button.Action
+ variant="soft"
+ class="w-full"
+ callback={onConfirm}
+ >
+ Ok
+ </Button.Action>
+ </div>
+ </div>
  </div>
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte

@@ -84,13 +84,10 @@ onMount(() => {
  return () => {
  disposed = true;
  cleanup?.();
+ cancelScan();
  };
 });
 
-onDestroy(async () => {
- await cancelScan();
-});
-
 $effect(() => {
  console.log(
  "🔍 DEBUG: selectedBlindVoteOption changed to:",
@@ -223,3 +220,9 @@ function handleRevealDrawerOpenChange(value: boolean) {
  onReveal={handleRevealVote}
  onOpenChange={handleRevealDrawerOpenChange}
 />
+
+<style>
+ :global(body:has(.loggedin-drawer)) {
+ background-color: white !important;
+ }
+</style>

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -28,110 +27,148 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
- <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
- >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
+{#if internalOpen}
+ <div class="fixed inset-0 z-50 bg-white p-4 overflow-y-auto">
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
- <h4>Code scanned!</h4>
- <p class="text-black-700">You're trying to access the following site</p>
+ <h4 class="text-xl font-bold">Code scanned!</h4>
+ <p class="text-black-700 mt-1">
+ Please review the connection details below.
+ </p>
 
- <div class="bg-gray rounded-2xl w-full p-4 mt-4">
- <h4 class="text-base text-black-700">Platform Name</h4>
- <p class="text-black-700 font-normal capitalize">
- {platform ?? "Unable to get name"}
- </p>
- </div>
+ <div
+ class="w-full mt-6 border border-gray-100 rounded-2xl overflow-hidden bg-gray-50"
+ >
+ <table class="w-full border-collapse">
+ <tbody class="divide-y divide-gray-200">
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Platform Name
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium capitalize mt-1 block"
+ >
+ {platform ?? "Unable to get name"}
+ </div>
+ </td>
+ </tr>
 
- <div class="bg-gray rounded-2xl w-full p-4">
- <h4 class="text-base text-black-700">Website URL</h4>
- <p class="text-black-700 font-normal">
- {hostname ?? scannedContent}
- </p>
- </div>
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Website URL
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium break-all mt-1 block"
+ >
+ {hostname ?? scannedContent}
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
 
- {#if authError}
- <div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
- <div class="flex items-center">
- <div class="flex-shrink-0">
- <svg
- class="h-5 w-5 text-red-400"
- viewBox="0 0 20 20"
- fill="currentColor"
+ {#if authError}
+ <div
+ class="bg-red-50 border border-red-200 rounded-lg p-4 w-full mt-4"
  >
- <path
- fill-rule="evenodd"
- d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
- clip-rule="evenodd"
- />
- </svg>
- </div>
- <div class="ml-3">
- <h3 class="text-sm font-medium text-red-800">Error</h3>
- <div class="mt-2 text-sm text-red-700">
- {authError}
+ <div class="flex items-center">
+ <div class="shrink-0">
+ <svg
+ class="h-5 w-5 text-red-400"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </div>
+ <div class="ml-3">
+ <h3 class="text-sm font-medium text-red-800">
+ Error
+ </h3>
+ <div class="mt-1 text-sm text-red-700">
+ {authError}
+ </div>
+ </div>
+ </div>
  </div>
+ {/if}
+ </div>
+
+ <div class="flex flex-col gap-3 pb-2 w-full pt-8">
+ <div class="flex justify-center gap-3 items-center w-full">
+ {#if authError}
+ <Button.Action
+ variant="solid"
+ class="w-full"
+ callback={onDecline}
+ >
+ Okay
+ </Button.Action>
+ {:else}
+ <Button.Action
+ variant="danger-soft"
+ class="w-full"
+ callback={onDecline}
+ disabled={authLoading}
+ >
+ Decline
+ </Button.Action>
+ <Button.Action
+ variant="solid"
+ class="w-full whitespace-nowrap"
+ callback={onConfirm}
+ disabled={authLoading}
+ >
+ {#if authLoading}
+ Authenticating...
+ {:else}
+ Confirm
+ {/if}
+ </Button.Action>
+ {/if}
  </div>
+
+ {#if isSigningRequest === false}
+ <div class="text-center mt-1">
+ <p class="text-sm text-gray-600">
+ After confirmation, you may return to <strong
+ >{platform}</strong
+ > and continue there
+ </p>
+ </div>
+ {/if}
  </div>
  </div>
- {/if}
-
- <div class="flex justify-center gap-3 items-center mt-4">
- {#if authError}
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onDecline}
- >
- Okay
- </Button.Action>
- {:else}
- <Button.Action
- variant="danger-soft"
- class="w-full"
- callback={onDecline}
- disabled={authLoading}
- >
- Decline
- </Button.Action>
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onConfirm}
- disabled={authLoading}
- >
- {#if authLoading}
- Authenticating...
- {:else}
- Confirm
- {/if}
- </Button.Action>
- {/if}
  </div>
-
- {#if isSigningRequest === false}
- <div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- After confirmation, you may return to {platform} and continue
- there
- </p>
- </div>
- {/if}
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/LoggedInDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -23,42 +22,62 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
+{#if internalOpen}
  <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="loggedin-title"
+ class="loggedin-drawer fixed inset-0 z-50 bg-white p-4 overflow-y-auto"
  >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
-
- <h4>You're logged in!</h4>
- <p class="text-black-700">You're now connected to {platform}</p>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
-<div class="flex flex-col gap-3 mt-4">
-{#if redirect && platform}
-<div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- You may return to {platform} and continue there
+ <h4 id="loggedin-title" class="text-xl font-bold">
+ You're logged in!
+ </h4>
+ <p class="text-gray-700">
+ You're now connected to {platform ?? "the platform"}
  </p>
+ <div class="flex flex-col items-start py-6 w-full">
+ {#if redirect && platform}
+ <div class="text-start">
+ <p class="text-sm text-gray-600">
+ You may return to <strong>{platform}</strong> and
+ continue there
+ </p>
+ </div>
+ {/if}
+ </div>
  </div>
- {/if}
 
- <Button.Action variant="soft" class="w-full" callback={onConfirm}>
- Ok
- </Button.Action>
+ <div class="flex flex-col gap-3 pb-2 w-full">
+ <Button.Action
+ variant="soft"
+ class="w-full"
+ callback={onConfirm}
+ >
+ Ok
+ </Button.Action>
+ </div>
+ </div>
  </div>
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte

@@ -84,13 +84,10 @@ onMount(() => {
  return () => {
  disposed = true;
  cleanup?.();
+ cancelScan();
  };
 });
 
-onDestroy(async () => {
- await cancelScan();
-});
-
 $effect(() => {
  console.log(
  "🔍 DEBUG: selectedBlindVoteOption changed to:",
@@ -223,3 +220,9 @@ function handleRevealDrawerOpenChange(value: boolean) {
  onReveal={handleRevealVote}
  onOpenChange={handleRevealDrawerOpenChange}
 />
+
+<style>
+ :global(body:has(.loggedin-drawer)) {
+ background-color: white !important;
+ }
+</style>

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -28,110 +27,148 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
- <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
- >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
+{#if internalOpen}
+ <div class="fixed inset-0 z-50 bg-white p-4 overflow-y-auto">
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
- <h4>Code scanned!</h4>
- <p class="text-black-700">You're trying to access the following site</p>
+ <h4 class="text-xl font-bold">Code scanned!</h4>
+ <p class="text-black-700 mt-1">
+ Please review the connection details below.
+ </p>
 
- <div class="bg-gray rounded-2xl w-full p-4 mt-4">
- <h4 class="text-base text-black-700">Platform Name</h4>
- <p class="text-black-700 font-normal capitalize">
- {platform ?? "Unable to get name"}
- </p>
- </div>
+ <div
+ class="w-full mt-6 border border-gray-100 rounded-2xl overflow-hidden bg-gray-50"
+ >
+ <table class="w-full border-collapse">
+ <tbody class="divide-y divide-gray-200">
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Platform Name
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium capitalize mt-1 block"
+ >
+ {platform ?? "Unable to get name"}
+ </div>
+ </td>
+ </tr>
 
- <div class="bg-gray rounded-2xl w-full p-4">
- <h4 class="text-base text-black-700">Website URL</h4>
- <p class="text-black-700 font-normal">
- {hostname ?? scannedContent}
- </p>
- </div>
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Website URL
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium break-all mt-1 block"
+ >
+ {hostname ?? scannedContent}
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
 
- {#if authError}
- <div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
- <div class="flex items-center">
- <div class="flex-shrink-0">
- <svg
- class="h-5 w-5 text-red-400"
- viewBox="0 0 20 20"
- fill="currentColor"
+ {#if authError}
+ <div
+ class="bg-red-50 border border-red-200 rounded-lg p-4 w-full mt-4"
  >
- <path
- fill-rule="evenodd"
- d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
- clip-rule="evenodd"
- />
- </svg>
- </div>
- <div class="ml-3">
- <h3 class="text-sm font-medium text-red-800">Error</h3>
- <div class="mt-2 text-sm text-red-700">
- {authError}
+ <div class="flex items-center">
+ <div class="shrink-0">
+ <svg
+ class="h-5 w-5 text-red-400"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </div>
+ <div class="ml-3">
+ <h3 class="text-sm font-medium text-red-800">
+ Error
+ </h3>
+ <div class="mt-1 text-sm text-red-700">
+ {authError}
+ </div>
+ </div>
+ </div>
  </div>
+ {/if}
+ </div>
+
+ <div class="flex flex-col gap-3 pb-2 w-full pt-8">
+ <div class="flex justify-center gap-3 items-center w-full">
+ {#if authError}
+ <Button.Action
+ variant="solid"
+ class="w-full"
+ callback={onDecline}
+ >
+ Okay
+ </Button.Action>
+ {:else}
+ <Button.Action
+ variant="danger-soft"
+ class="w-full"
+ callback={onDecline}
+ disabled={authLoading}
+ >
+ Decline
+ </Button.Action>
+ <Button.Action
+ variant="solid"
+ class="w-full whitespace-nowrap"
+ callback={onConfirm}
+ disabled={authLoading}
+ >
+ {#if authLoading}
+ Authenticating...
+ {:else}
+ Confirm
+ {/if}
+ </Button.Action>
+ {/if}
  </div>
+
+ {#if isSigningRequest === false}
+ <div class="text-center mt-1">
+ <p class="text-sm text-gray-600">
+ After confirmation, you may return to <strong
+ >{platform}</strong
+ > and continue there
+ </p>
+ </div>
+ {/if}
  </div>
  </div>
- {/if}
-
- <div class="flex justify-center gap-3 items-center mt-4">
- {#if authError}
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onDecline}
- >
- Okay
- </Button.Action>
- {:else}
- <Button.Action
- variant="danger-soft"
- class="w-full"
- callback={onDecline}
- disabled={authLoading}
- >
- Decline
- </Button.Action>
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onConfirm}
- disabled={authLoading}
- >
- {#if authLoading}
- Authenticating...
- {:else}
- Confirm
- {/if}
- </Button.Action>
- {/if}
  </div>
-
- {#if isSigningRequest === false}
- <div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- After confirmation, you may return to {platform} and continue
- there
- </p>
- </div>
- {/if}
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/LoggedInDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -23,42 +22,62 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
+{#if internalOpen}
  <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="loggedin-title"
+ class="loggedin-drawer fixed inset-0 z-50 bg-white p-4 overflow-y-auto"
  >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
-
- <h4>You're logged in!</h4>
- <p class="text-black-700">You're now connected to {platform}</p>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
-<div class="flex flex-col gap-3 mt-4">
-{#if redirect && platform}
-<div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- You may return to {platform} and continue there
+ <h4 id="loggedin-title" class="text-xl font-bold">
+ You're logged in!
+ </h4>
+ <p class="text-gray-700">
+ You're now connected to {platform ?? "the platform"}
  </p>
+ <div class="flex flex-col items-start py-6 w-full">
+ {#if redirect && platform}
+ <div class="text-start">
+ <p class="text-sm text-gray-600">
+ You may return to <strong>{platform}</strong> and
+ continue there
+ </p>
+ </div>
+ {/if}
+ </div>
  </div>
- {/if}
 
- <Button.Action variant="soft" class="w-full" callback={onConfirm}>
- Ok
- </Button.Action>
+ <div class="flex flex-col gap-3 pb-2 w-full">
+ <Button.Action
+ variant="soft"
+ class="w-full"
+ callback={onConfirm}
+ >
+ Ok
+ </Button.Action>
+ </div>
+ </div>
  </div>
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte

@@ -84,13 +84,10 @@ onMount(() => {
  return () => {
  disposed = true;
  cleanup?.();
+ cancelScan();
  };
 });
 
-onDestroy(async () => {
- await cancelScan();
-});
-
 $effect(() => {
  console.log(
  "🔍 DEBUG: selectedBlindVoteOption changed to:",
@@ -223,3 +220,9 @@ function handleRevealDrawerOpenChange(value: boolean) {
  onReveal={handleRevealVote}
  onOpenChange={handleRevealDrawerOpenChange}
 />
+
+<style>
+ :global(body:has(.loggedin-drawer)) {
+ background-color: white !important;
+ }
+</style>

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -28,110 +27,148 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
- <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
- >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
+{#if internalOpen}
+ <div class="fixed inset-0 z-50 bg-white p-4 overflow-y-auto">
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
- <h4>Code scanned!</h4>
- <p class="text-black-700">You're trying to access the following site</p>
+ <h4 class="text-xl font-bold">Code scanned!</h4>
+ <p class="text-black-700 mt-1">
+ Please review the connection details below.
+ </p>
 
- <div class="bg-gray rounded-2xl w-full p-4 mt-4">
- <h4 class="text-base text-black-700">Platform Name</h4>
- <p class="text-black-700 font-normal capitalize">
- {platform ?? "Unable to get name"}
- </p>
- </div>
+ <div
+ class="w-full mt-6 border border-gray-100 rounded-2xl overflow-hidden bg-gray-50"
+ >
+ <table class="w-full border-collapse">
+ <tbody class="divide-y divide-gray-200">
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Platform Name
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium capitalize mt-1 block"
+ >
+ {platform ?? "Unable to get name"}
+ </div>
+ </td>
+ </tr>
 
- <div class="bg-gray rounded-2xl w-full p-4">
- <h4 class="text-base text-black-700">Website URL</h4>
- <p class="text-black-700 font-normal">
- {hostname ?? scannedContent}
- </p>
- </div>
+ <tr>
+ <td class="py-4 px-4">
+ <div
+ class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
+ >
+ Website URL
+ </div>
+ <div
+ class="text-sm text-black-700 font-medium break-all mt-1 block"
+ >
+ {hostname ?? scannedContent}
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
 
- {#if authError}
- <div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
- <div class="flex items-center">
- <div class="flex-shrink-0">
- <svg
- class="h-5 w-5 text-red-400"
- viewBox="0 0 20 20"
- fill="currentColor"
+ {#if authError}
+ <div
+ class="bg-red-50 border border-red-200 rounded-lg p-4 w-full mt-4"
  >
- <path
- fill-rule="evenodd"
- d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
- clip-rule="evenodd"
- />
- </svg>
- </div>
- <div class="ml-3">
- <h3 class="text-sm font-medium text-red-800">Error</h3>
- <div class="mt-2 text-sm text-red-700">
- {authError}
+ <div class="flex items-center">
+ <div class="shrink-0">
+ <svg
+ class="h-5 w-5 text-red-400"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </div>
+ <div class="ml-3">
+ <h3 class="text-sm font-medium text-red-800">
+ Error
+ </h3>
+ <div class="mt-1 text-sm text-red-700">
+ {authError}
+ </div>
+ </div>
+ </div>
  </div>
+ {/if}
+ </div>
+
+ <div class="flex flex-col gap-3 pb-2 w-full pt-8">
+ <div class="flex justify-center gap-3 items-center w-full">
+ {#if authError}
+ <Button.Action
+ variant="solid"
+ class="w-full"
+ callback={onDecline}
+ >
+ Okay
+ </Button.Action>
+ {:else}
+ <Button.Action
+ variant="danger-soft"
+ class="w-full"
+ callback={onDecline}
+ disabled={authLoading}
+ >
+ Decline
+ </Button.Action>
+ <Button.Action
+ variant="solid"
+ class="w-full whitespace-nowrap"
+ callback={onConfirm}
+ disabled={authLoading}
+ >
+ {#if authLoading}
+ Authenticating...
+ {:else}
+ Confirm
+ {/if}
+ </Button.Action>
+ {/if}
  </div>
+
+ {#if isSigningRequest === false}
+ <div class="text-center mt-1">
+ <p class="text-sm text-gray-600">
+ After confirmation, you may return to <strong
+ >{platform}</strong
+ > and continue there
+ </p>
+ </div>
+ {/if}
  </div>
  </div>
- {/if}
-
- <div class="flex justify-center gap-3 items-center mt-4">
- {#if authError}
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onDecline}
- >
- Okay
- </Button.Action>
- {:else}
- <Button.Action
- variant="danger-soft"
- class="w-full"
- callback={onDecline}
- disabled={authLoading}
- >
- Decline
- </Button.Action>
- <Button.Action 
- variant="solid" 
- class="w-full" 
- callback={onConfirm}
- disabled={authLoading}
- >
- {#if authLoading}
- Authenticating...
- {:else}
- Confirm
- {/if}
- </Button.Action>
- {/if}
  </div>
-
- {#if isSigningRequest === false}
- <div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- After confirmation, you may return to {platform} and continue
- there
- </p>
- </div>
- {/if}
-</Drawer>
-
+{/if}

infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/LoggedInDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Drawer } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
 import { QrCodeIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -23,42 +22,62 @@ $: if (internalOpen !== lastReportedOpen) {
 }
 </script>
 
-<Drawer
- title="Scan QR Code"
- bind:isPaneOpen={internalOpen}
- class="flex flex-col gap-4 items-center justify-center"
->
+{#if internalOpen}
  <div
- class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="loggedin-title"
+ class="loggedin-drawer fixed inset-0 z-50 bg-white p-4 overflow-y-auto"
  >
- <div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
  <div
- class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
- ></div>
- <HugeiconsIcon
- size={40}
- className="z-10"
- icon={QrCodeIcon}
- strokeWidth={1.5}
- color="var(--color-primary)"
- />
- </div>
-
- <h4>You're logged in!</h4>
- <p class="text-black-700">You're now connected to {platform}</p>
+ class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
+ >
+ <div class="flex flex-col items-start pt-2">
+ <div
+ class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
+ >
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
+ ></div>
+ <div
+ class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
+ ></div>
+ <HugeiconsIcon
+ size={40}
+ className="z-10"
+ icon={QrCodeIcon}
+ strokeWidth={1.5}
+ color="var(--color-primary)"
+ />
+ </div>
 
-<div class="flex flex-col gap-3 mt-4">
-{#if redirect && platform}
-<div class="text-center mt-3">
- <p class="text-sm text-gray-600">
- You may return to {platform} and continue there
+ <h4 id="loggedin-title" class="text-xl font-bold">
+ You're logged in!
+ </h4>
+ <p class="text-gray-700">
+ You're now connected to {platform ?? "the platform"}
  </p>
+ <div class="flex flex-col items-start py-6 w-full">
+ {#if redirect && platform}
+ <div class="text-start">
+ <p class="text-sm text-gray-600">
+ You may return to <strong>{platform}</strong> and
+ continue there
+ </p>
+ </div>
+ {/if}
+ </div>
  </div>
- {/if}
 
- <Button.Action variant="soft" class="w-full" callback={onConfirm}>
- Ok
- </Button.Action>
+ <div class="flex flex-col gap-3 pb-2 w-full">
+ <Button.Action
+ variant="soft"
+ class="w-full"
+ callback={onConfirm}
+ >
+ Ok
+ </Button.Action>
+ </div>
+ </div>
  </div>
-</Drawer>
-
+{/if}