fix: eid-wallet-issues

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

@@ -43,7 +43,7 @@ $effect(() => {
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
 
-const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[100px] text-white overflow-hidden`;
 </script>
 
 <div {...restProps} class={cn(baseClasses, restProps.class)}>
@@ -61,7 +61,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  : 'bg-white/10'} h-[300%] rotate-40"
  ></div>
  </div>
- <div class="p-5 flex flex-col gap-2">
+ <div class="p-3 flex flex-col gap-2">
  <div class="flex justify-between">
  {#if variant === "eName"}
  <HugeiconsIcon
@@ -97,7 +97,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  />
  {/if}
  {:else if variant === "eVault"}
- <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
+ <h3 class="text-black-300 text-3xl font-semibold mb-1 z-[1]">
  {state.progressWidth} Used
  </h3>
  {/if}

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

@@ -27,7 +27,7 @@ onMount(() => {
 {#if isVisible}
  <div
  {...restProps}
- class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
+ class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-black-900/95 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
  ? 'opacity-100'
  : 'opacity-0'}"
  role="alert"

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

@@ -126,7 +126,9 @@ $: if (internalOpen !== lastReportedOpen) {
  </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">
+ <div
+ class="flex flex-col justify-center gap-3 items-center w-full"
+ >
  {#if authError}
  <Button.Action
  variant="solid"

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

@@ -111,49 +111,52 @@ $effect(() => {
 });
 </script>
 
-<main>
+<main class="h-[80svh] flex flex-col justify-between">
  <!-- header part -->
- <SettingsNavigationBtn
- icon={LanguageSquareIcon}
- label="Language"
- href="/settings/language"
- />
- <SettingsNavigationBtn
- icon={PinCodeIcon}
- label="Pin"
- href="/settings/pin"
- />
- <SettingsNavigationBtn
- icon={Shield01Icon}
- label="Privacy"
- href="/settings/privacy"
- />
-
- <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
- >Delete Account</ButtonAction
- >
-
- <!-- Hidden eVault profile retry - tap version 10 times -->
- <div class="w-full py-10 text-center">
- <button
- class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
- onclick={handleVersionTap}
- disabled={isRetrying}
+ <div>
+ <SettingsNavigationBtn
+ icon={LanguageSquareIcon}
+ label="Language"
+ href="/settings/language"
+ />
+ <SettingsNavigationBtn
+ icon={PinCodeIcon}
+ label="Pin"
+ href="/settings/pin"
+ />
+ <SettingsNavigationBtn
+ icon={Shield01Icon}
+ label="Privacy"
+ href="https://metastate.foundation/"
+ />
+ </div>
+ <div>
+ <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
+ >Delete Account</ButtonAction
  >
- Version v0.5.0.0
- </button>
-
- {#if retryMessage}
- <div
- class="mt-2 text-sm {isRetrying
- ? 'text-blue-600'
- : retryMessage.includes('✅')
- ? 'text-green-600'
- : 'text-red-600'}"
+
+ <!-- Hidden eVault profile retry - tap version 10 times -->
+ <div class="w-full py-2 text-center">
+ <button
+ class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
+ onclick={handleVersionTap}
+ disabled={isRetrying}
  >
- {retryMessage}
- </div>
- {/if}
+ Version v0.5.0.0
+ </button>
+
+ {#if retryMessage}
+ <div
+ class="mt-2 text-sm {isRetrying
+ ? 'text-blue-600'
+ : retryMessage.includes('✅')
+ ? 'text-green-600'
+ : 'text-red-600'}"
+ >
+ {retryMessage}
+ </div>
+ {/if}
+ </div>
  </div>
 </main>
 

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

@@ -22,11 +22,13 @@ onMount(async () => {
 });
 </script>
 
-<main
- class="h-full pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
->
+<main class="h-full p-4 flex flex-col justify-between">
  <section>
- <Hero title="Here’s your ePassport" class="mb-2">
+ <Hero
+ title="Here’s your ePassport"
+ class="mb-2"
+ titleClasses="text-2xl"
+ >
  {#snippet subtitle()}
  <p>
  You can use it to access any platform that supports the Web
@@ -39,7 +41,7 @@ onMount(async () => {
  <IdentityCard variant="ePassport" {userData} />
  </section>
  <section class="mt-[2svh] mb-[3svh]">
- <Hero title="Here’s your eVault" class="mb-2">
+ <Hero title="Here’s your eVault" class="mb-2" titleClasses="text-2xl">
  {#snippet subtitle()}
  The eVault is your secure cloud storage for your personal data.
  W3DS platforms access it directly, keeping you in control.
@@ -54,6 +56,8 @@ onMount(async () => {
  class="flex-1"
  callback={() => goto("/register")}>Back</ButtonAction
  >
- <ButtonAction class="flex-1" callback={handleFinish}>Finish</ButtonAction>
+ <ButtonAction class="flex-1" callback={handleFinish}
+ >Finish</ButtonAction
+ >
  </div>
 </main>

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

@@ -253,8 +253,12 @@ onMount(async () => {
  </Hero>
 
  {#if isPostAuthLoading}
- <div class="flex flex-col items-center gap-3 py-8">
- <div class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+ <div
+ class="fixed inset-0 flex flex-col items-center justify-center gap-3 py-8"
+ >
+ <div
+ class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"
+ ></div>
  <p class="text-primary text-sm">Logging you in...</p>
  </div>
  {:else}
@@ -278,8 +282,8 @@ onMount(async () => {
  </div>
  <div class="ml-3">
  <p class="text-sm text-primary">
- <strong>Authentication Request Pending</strong><br
- />
+ <strong>Authentication Request Pending</strong
+><br />
  Complete login to process the authentication request
  </p>
  </div>
@@ -288,7 +292,9 @@ onMount(async () => {
  {/if}
 
  <InputPin bind:pin {isError} onchange={() => handlePinInput(pin)} />
- <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>
+ <p
+ class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}
+ >
  Your PIN does not match, try again.
  </p>
  {/if}

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

@@ -310,11 +310,19 @@ onMount(async () => {
  <section>
  <p class="text-center small text-black-500">
  By continuing you agree to our <br />
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ class="text-primary underline underline-offset-4"
+ target="_blank"
  >Terms & Conditions
  </a>
  and
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ target="_blank"
+ class="text-primary underline underline-offset-4"
  >Privacy Policy.</a
  >
  </p>

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

@@ -43,7 +43,7 @@ $effect(() => {
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
 
-const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[100px] text-white overflow-hidden`;
 </script>
 
 <div {...restProps} class={cn(baseClasses, restProps.class)}>
@@ -61,7 +61,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  : 'bg-white/10'} h-[300%] rotate-40"
  ></div>
  </div>
- <div class="p-5 flex flex-col gap-2">
+ <div class="p-3 flex flex-col gap-2">
  <div class="flex justify-between">
  {#if variant === "eName"}
  <HugeiconsIcon
@@ -97,7 +97,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  />
  {/if}
  {:else if variant === "eVault"}
- <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
+ <h3 class="text-black-300 text-3xl font-semibold mb-1 z-[1]">
  {state.progressWidth} Used
  </h3>
  {/if}

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

@@ -27,7 +27,7 @@ onMount(() => {
 {#if isVisible}
  <div
  {...restProps}
- class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
+ class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-black-900/95 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
  ? 'opacity-100'
  : 'opacity-0'}"
  role="alert"

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

@@ -126,7 +126,9 @@ $: if (internalOpen !== lastReportedOpen) {
  </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">
+ <div
+ class="flex flex-col justify-center gap-3 items-center w-full"
+ >
  {#if authError}
  <Button.Action
  variant="solid"

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

@@ -111,49 +111,52 @@ $effect(() => {
 });
 </script>
 
-<main>
+<main class="h-[80svh] flex flex-col justify-between">
  <!-- header part -->
- <SettingsNavigationBtn
- icon={LanguageSquareIcon}
- label="Language"
- href="/settings/language"
- />
- <SettingsNavigationBtn
- icon={PinCodeIcon}
- label="Pin"
- href="/settings/pin"
- />
- <SettingsNavigationBtn
- icon={Shield01Icon}
- label="Privacy"
- href="/settings/privacy"
- />
-
- <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
- >Delete Account</ButtonAction
- >
-
- <!-- Hidden eVault profile retry - tap version 10 times -->
- <div class="w-full py-10 text-center">
- <button
- class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
- onclick={handleVersionTap}
- disabled={isRetrying}
+ <div>
+ <SettingsNavigationBtn
+ icon={LanguageSquareIcon}
+ label="Language"
+ href="/settings/language"
+ />
+ <SettingsNavigationBtn
+ icon={PinCodeIcon}
+ label="Pin"
+ href="/settings/pin"
+ />
+ <SettingsNavigationBtn
+ icon={Shield01Icon}
+ label="Privacy"
+ href="https://metastate.foundation/"
+ />
+ </div>
+ <div>
+ <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
+ >Delete Account</ButtonAction
  >
- Version v0.5.0.0
- </button>
-
- {#if retryMessage}
- <div
- class="mt-2 text-sm {isRetrying
- ? 'text-blue-600'
- : retryMessage.includes('✅')
- ? 'text-green-600'
- : 'text-red-600'}"
+
+ <!-- Hidden eVault profile retry - tap version 10 times -->
+ <div class="w-full py-2 text-center">
+ <button
+ class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
+ onclick={handleVersionTap}
+ disabled={isRetrying}
  >
- {retryMessage}
- </div>
- {/if}
+ Version v0.5.0.0
+ </button>
+
+ {#if retryMessage}
+ <div
+ class="mt-2 text-sm {isRetrying
+ ? 'text-blue-600'
+ : retryMessage.includes('✅')
+ ? 'text-green-600'
+ : 'text-red-600'}"
+ >
+ {retryMessage}
+ </div>
+ {/if}
+ </div>
  </div>
 </main>
 

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

@@ -22,11 +22,13 @@ onMount(async () => {
 });
 </script>
 
-<main
- class="h-full pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
->
+<main class="h-full p-4 flex flex-col justify-between">
  <section>
- <Hero title="Here’s your ePassport" class="mb-2">
+ <Hero
+ title="Here’s your ePassport"
+ class="mb-2"
+ titleClasses="text-2xl"
+ >
  {#snippet subtitle()}
  <p>
  You can use it to access any platform that supports the Web
@@ -39,7 +41,7 @@ onMount(async () => {
  <IdentityCard variant="ePassport" {userData} />
  </section>
  <section class="mt-[2svh] mb-[3svh]">
- <Hero title="Here’s your eVault" class="mb-2">
+ <Hero title="Here’s your eVault" class="mb-2" titleClasses="text-2xl">
  {#snippet subtitle()}
  The eVault is your secure cloud storage for your personal data.
  W3DS platforms access it directly, keeping you in control.
@@ -54,6 +56,8 @@ onMount(async () => {
  class="flex-1"
  callback={() => goto("/register")}>Back</ButtonAction
  >
- <ButtonAction class="flex-1" callback={handleFinish}>Finish</ButtonAction>
+ <ButtonAction class="flex-1" callback={handleFinish}
+ >Finish</ButtonAction
+ >
  </div>
 </main>

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

@@ -253,8 +253,12 @@ onMount(async () => {
  </Hero>
 
  {#if isPostAuthLoading}
- <div class="flex flex-col items-center gap-3 py-8">
- <div class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+ <div
+ class="fixed inset-0 flex flex-col items-center justify-center gap-3 py-8"
+ >
+ <div
+ class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"
+ ></div>
  <p class="text-primary text-sm">Logging you in...</p>
  </div>
  {:else}
@@ -278,8 +282,8 @@ onMount(async () => {
  </div>
  <div class="ml-3">
  <p class="text-sm text-primary">
- <strong>Authentication Request Pending</strong><br
- />
+ <strong>Authentication Request Pending</strong
+><br />
  Complete login to process the authentication request
  </p>
  </div>
@@ -288,7 +292,9 @@ onMount(async () => {
  {/if}
 
  <InputPin bind:pin {isError} onchange={() => handlePinInput(pin)} />
- <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>
+ <p
+ class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}
+ >
  Your PIN does not match, try again.
  </p>
  {/if}

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

@@ -310,11 +310,19 @@ onMount(async () => {
  <section>
  <p class="text-center small text-black-500">
  By continuing you agree to our <br />
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ class="text-primary underline underline-offset-4"
+ target="_blank"
  >Terms & Conditions
  </a>
  and
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ target="_blank"
+ class="text-primary underline underline-offset-4"
  >Privacy Policy.</a
  >
  </p>

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

@@ -43,7 +43,7 @@ $effect(() => {
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
 
-const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[100px] text-white overflow-hidden`;
 </script>
 
 <div {...restProps} class={cn(baseClasses, restProps.class)}>
@@ -61,7 +61,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  : 'bg-white/10'} h-[300%] rotate-40"
  ></div>
  </div>
- <div class="p-5 flex flex-col gap-2">
+ <div class="p-3 flex flex-col gap-2">
  <div class="flex justify-between">
  {#if variant === "eName"}
  <HugeiconsIcon
@@ -97,7 +97,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  />
  {/if}
  {:else if variant === "eVault"}
- <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
+ <h3 class="text-black-300 text-3xl font-semibold mb-1 z-[1]">
  {state.progressWidth} Used
  </h3>
  {/if}

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

@@ -27,7 +27,7 @@ onMount(() => {
 {#if isVisible}
  <div
  {...restProps}
- class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
+ class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-black-900/95 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
  ? 'opacity-100'
  : 'opacity-0'}"
  role="alert"

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

@@ -126,7 +126,9 @@ $: if (internalOpen !== lastReportedOpen) {
  </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">
+ <div
+ class="flex flex-col justify-center gap-3 items-center w-full"
+ >
  {#if authError}
  <Button.Action
  variant="solid"

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

@@ -111,49 +111,52 @@ $effect(() => {
 });
 </script>
 
-<main>
+<main class="h-[80svh] flex flex-col justify-between">
  <!-- header part -->
- <SettingsNavigationBtn
- icon={LanguageSquareIcon}
- label="Language"
- href="/settings/language"
- />
- <SettingsNavigationBtn
- icon={PinCodeIcon}
- label="Pin"
- href="/settings/pin"
- />
- <SettingsNavigationBtn
- icon={Shield01Icon}
- label="Privacy"
- href="/settings/privacy"
- />
-
- <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
- >Delete Account</ButtonAction
- >
-
- <!-- Hidden eVault profile retry - tap version 10 times -->
- <div class="w-full py-10 text-center">
- <button
- class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
- onclick={handleVersionTap}
- disabled={isRetrying}
+ <div>
+ <SettingsNavigationBtn
+ icon={LanguageSquareIcon}
+ label="Language"
+ href="/settings/language"
+ />
+ <SettingsNavigationBtn
+ icon={PinCodeIcon}
+ label="Pin"
+ href="/settings/pin"
+ />
+ <SettingsNavigationBtn
+ icon={Shield01Icon}
+ label="Privacy"
+ href="https://metastate.foundation/"
+ />
+ </div>
+ <div>
+ <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
+ >Delete Account</ButtonAction
  >
- Version v0.5.0.0
- </button>
-
- {#if retryMessage}
- <div
- class="mt-2 text-sm {isRetrying
- ? 'text-blue-600'
- : retryMessage.includes('✅')
- ? 'text-green-600'
- : 'text-red-600'}"
+
+ <!-- Hidden eVault profile retry - tap version 10 times -->
+ <div class="w-full py-2 text-center">
+ <button
+ class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
+ onclick={handleVersionTap}
+ disabled={isRetrying}
  >
- {retryMessage}
- </div>
- {/if}
+ Version v0.5.0.0
+ </button>
+
+ {#if retryMessage}
+ <div
+ class="mt-2 text-sm {isRetrying
+ ? 'text-blue-600'
+ : retryMessage.includes('✅')
+ ? 'text-green-600'
+ : 'text-red-600'}"
+ >
+ {retryMessage}
+ </div>
+ {/if}
+ </div>
  </div>
 </main>
 

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

@@ -22,11 +22,13 @@ onMount(async () => {
 });
 </script>
 
-<main
- class="h-full pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
->
+<main class="h-full p-4 flex flex-col justify-between">
  <section>
- <Hero title="Here’s your ePassport" class="mb-2">
+ <Hero
+ title="Here’s your ePassport"
+ class="mb-2"
+ titleClasses="text-2xl"
+ >
  {#snippet subtitle()}
  <p>
  You can use it to access any platform that supports the Web
@@ -39,7 +41,7 @@ onMount(async () => {
  <IdentityCard variant="ePassport" {userData} />
  </section>
  <section class="mt-[2svh] mb-[3svh]">
- <Hero title="Here’s your eVault" class="mb-2">
+ <Hero title="Here’s your eVault" class="mb-2" titleClasses="text-2xl">
  {#snippet subtitle()}
  The eVault is your secure cloud storage for your personal data.
  W3DS platforms access it directly, keeping you in control.
@@ -54,6 +56,8 @@ onMount(async () => {
  class="flex-1"
  callback={() => goto("/register")}>Back</ButtonAction
  >
- <ButtonAction class="flex-1" callback={handleFinish}>Finish</ButtonAction>
+ <ButtonAction class="flex-1" callback={handleFinish}
+ >Finish</ButtonAction
+ >
  </div>
 </main>

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

@@ -253,8 +253,12 @@ onMount(async () => {
  </Hero>
 
  {#if isPostAuthLoading}
- <div class="flex flex-col items-center gap-3 py-8">
- <div class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+ <div
+ class="fixed inset-0 flex flex-col items-center justify-center gap-3 py-8"
+ >
+ <div
+ class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"
+ ></div>
  <p class="text-primary text-sm">Logging you in...</p>
  </div>
  {:else}
@@ -278,8 +282,8 @@ onMount(async () => {
  </div>
  <div class="ml-3">
  <p class="text-sm text-primary">
- <strong>Authentication Request Pending</strong><br
- />
+ <strong>Authentication Request Pending</strong
+><br />
  Complete login to process the authentication request
  </p>
  </div>
@@ -288,7 +292,9 @@ onMount(async () => {
  {/if}
 
  <InputPin bind:pin {isError} onchange={() => handlePinInput(pin)} />
- <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>
+ <p
+ class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}
+ >
  Your PIN does not match, try again.
  </p>
  {/if}

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

@@ -310,11 +310,19 @@ onMount(async () => {
  <section>
  <p class="text-center small text-black-500">
  By continuing you agree to our <br />
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ class="text-primary underline underline-offset-4"
+ target="_blank"
  >Terms & Conditions
  </a>
  and
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ target="_blank"
+ class="text-primary underline underline-offset-4"
  >Privacy Policy.</a
  >
  </p>

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

@@ -43,7 +43,7 @@ $effect(() => {
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
 
-const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[100px] text-white overflow-hidden`;
 </script>
 
 <div {...restProps} class={cn(baseClasses, restProps.class)}>
@@ -61,7 +61,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  : 'bg-white/10'} h-[300%] rotate-40"
  ></div>
  </div>
- <div class="p-5 flex flex-col gap-2">
+ <div class="p-3 flex flex-col gap-2">
  <div class="flex justify-between">
  {#if variant === "eName"}
  <HugeiconsIcon
@@ -97,7 +97,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  />
  {/if}
  {:else if variant === "eVault"}
- <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
+ <h3 class="text-black-300 text-3xl font-semibold mb-1 z-[1]">
  {state.progressWidth} Used
  </h3>
  {/if}

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

@@ -27,7 +27,7 @@ onMount(() => {
 {#if isVisible}
  <div
  {...restProps}
- class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
+ class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-black-900/95 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
  ? 'opacity-100'
  : 'opacity-0'}"
  role="alert"

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

@@ -126,7 +126,9 @@ $: if (internalOpen !== lastReportedOpen) {
  </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">
+ <div
+ class="flex flex-col justify-center gap-3 items-center w-full"
+ >
  {#if authError}
  <Button.Action
  variant="solid"

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

@@ -111,49 +111,52 @@ $effect(() => {
 });
 </script>
 
-<main>
+<main class="h-[80svh] flex flex-col justify-between">
  <!-- header part -->
- <SettingsNavigationBtn
- icon={LanguageSquareIcon}
- label="Language"
- href="/settings/language"
- />
- <SettingsNavigationBtn
- icon={PinCodeIcon}
- label="Pin"
- href="/settings/pin"
- />
- <SettingsNavigationBtn
- icon={Shield01Icon}
- label="Privacy"
- href="/settings/privacy"
- />
-
- <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
- >Delete Account</ButtonAction
- >
-
- <!-- Hidden eVault profile retry - tap version 10 times -->
- <div class="w-full py-10 text-center">
- <button
- class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
- onclick={handleVersionTap}
- disabled={isRetrying}
+ <div>
+ <SettingsNavigationBtn
+ icon={LanguageSquareIcon}
+ label="Language"
+ href="/settings/language"
+ />
+ <SettingsNavigationBtn
+ icon={PinCodeIcon}
+ label="Pin"
+ href="/settings/pin"
+ />
+ <SettingsNavigationBtn
+ icon={Shield01Icon}
+ label="Privacy"
+ href="https://metastate.foundation/"
+ />
+ </div>
+ <div>
+ <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
+ >Delete Account</ButtonAction
  >
- Version v0.5.0.0
- </button>
-
- {#if retryMessage}
- <div
- class="mt-2 text-sm {isRetrying
- ? 'text-blue-600'
- : retryMessage.includes('✅')
- ? 'text-green-600'
- : 'text-red-600'}"
+
+ <!-- Hidden eVault profile retry - tap version 10 times -->
+ <div class="w-full py-2 text-center">
+ <button
+ class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
+ onclick={handleVersionTap}
+ disabled={isRetrying}
  >
- {retryMessage}
- </div>
- {/if}
+ Version v0.5.0.0
+ </button>
+
+ {#if retryMessage}
+ <div
+ class="mt-2 text-sm {isRetrying
+ ? 'text-blue-600'
+ : retryMessage.includes('✅')
+ ? 'text-green-600'
+ : 'text-red-600'}"
+ >
+ {retryMessage}
+ </div>
+ {/if}
+ </div>
  </div>
 </main>
 

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

@@ -22,11 +22,13 @@ onMount(async () => {
 });
 </script>
 
-<main
- class="h-full pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
->
+<main class="h-full p-4 flex flex-col justify-between">
  <section>
- <Hero title="Here’s your ePassport" class="mb-2">
+ <Hero
+ title="Here’s your ePassport"
+ class="mb-2"
+ titleClasses="text-2xl"
+ >
  {#snippet subtitle()}
  <p>
  You can use it to access any platform that supports the Web
@@ -39,7 +41,7 @@ onMount(async () => {
  <IdentityCard variant="ePassport" {userData} />
  </section>
  <section class="mt-[2svh] mb-[3svh]">
- <Hero title="Here’s your eVault" class="mb-2">
+ <Hero title="Here’s your eVault" class="mb-2" titleClasses="text-2xl">
  {#snippet subtitle()}
  The eVault is your secure cloud storage for your personal data.
  W3DS platforms access it directly, keeping you in control.
@@ -54,6 +56,8 @@ onMount(async () => {
  class="flex-1"
  callback={() => goto("/register")}>Back</ButtonAction
  >
- <ButtonAction class="flex-1" callback={handleFinish}>Finish</ButtonAction>
+ <ButtonAction class="flex-1" callback={handleFinish}
+ >Finish</ButtonAction
+ >
  </div>
 </main>

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

@@ -253,8 +253,12 @@ onMount(async () => {
  </Hero>
 
  {#if isPostAuthLoading}
- <div class="flex flex-col items-center gap-3 py-8">
- <div class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+ <div
+ class="fixed inset-0 flex flex-col items-center justify-center gap-3 py-8"
+ >
+ <div
+ class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"
+ ></div>
  <p class="text-primary text-sm">Logging you in...</p>
  </div>
  {:else}
@@ -278,8 +282,8 @@ onMount(async () => {
  </div>
  <div class="ml-3">
  <p class="text-sm text-primary">
- <strong>Authentication Request Pending</strong><br
- />
+ <strong>Authentication Request Pending</strong
+><br />
  Complete login to process the authentication request
  </p>
  </div>
@@ -288,7 +292,9 @@ onMount(async () => {
  {/if}
 
  <InputPin bind:pin {isError} onchange={() => handlePinInput(pin)} />
- <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>
+ <p
+ class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}
+ >
  Your PIN does not match, try again.
  </p>
  {/if}

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

@@ -310,11 +310,19 @@ onMount(async () => {
  <section>
  <p class="text-center small text-black-500">
  By continuing you agree to our <br />
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ class="text-primary underline underline-offset-4"
+ target="_blank"
  >Terms & Conditions
  </a>
  and
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ target="_blank"
+ class="text-primary underline underline-offset-4"
  >Privacy Policy.</a
  >
  </p>

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

@@ -43,7 +43,7 @@ $effect(() => {
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
 
-const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[100px] text-white overflow-hidden`;
 </script>
 
 <div {...restProps} class={cn(baseClasses, restProps.class)}>
@@ -61,7 +61,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  : 'bg-white/10'} h-[300%] rotate-40"
  ></div>
  </div>
- <div class="p-5 flex flex-col gap-2">
+ <div class="p-3 flex flex-col gap-2">
  <div class="flex justify-between">
  {#if variant === "eName"}
  <HugeiconsIcon
@@ -97,7 +97,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  />
  {/if}
  {:else if variant === "eVault"}
- <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
+ <h3 class="text-black-300 text-3xl font-semibold mb-1 z-[1]">
  {state.progressWidth} Used
  </h3>
  {/if}

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

@@ -27,7 +27,7 @@ onMount(() => {
 {#if isVisible}
  <div
  {...restProps}
- class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
+ class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-black-900/95 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
  ? 'opacity-100'
  : 'opacity-0'}"
  role="alert"

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

@@ -126,7 +126,9 @@ $: if (internalOpen !== lastReportedOpen) {
  </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">
+ <div
+ class="flex flex-col justify-center gap-3 items-center w-full"
+ >
  {#if authError}
  <Button.Action
  variant="solid"

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

@@ -111,49 +111,52 @@ $effect(() => {
 });
 </script>
 
-<main>
+<main class="h-[80svh] flex flex-col justify-between">
  <!-- header part -->
- <SettingsNavigationBtn
- icon={LanguageSquareIcon}
- label="Language"
- href="/settings/language"
- />
- <SettingsNavigationBtn
- icon={PinCodeIcon}
- label="Pin"
- href="/settings/pin"
- />
- <SettingsNavigationBtn
- icon={Shield01Icon}
- label="Privacy"
- href="/settings/privacy"
- />
-
- <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
- >Delete Account</ButtonAction
- >
-
- <!-- Hidden eVault profile retry - tap version 10 times -->
- <div class="w-full py-10 text-center">
- <button
- class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
- onclick={handleVersionTap}
- disabled={isRetrying}
+ <div>
+ <SettingsNavigationBtn
+ icon={LanguageSquareIcon}
+ label="Language"
+ href="/settings/language"
+ />
+ <SettingsNavigationBtn
+ icon={PinCodeIcon}
+ label="Pin"
+ href="/settings/pin"
+ />
+ <SettingsNavigationBtn
+ icon={Shield01Icon}
+ label="Privacy"
+ href="https://metastate.foundation/"
+ />
+ </div>
+ <div>
+ <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
+ >Delete Account</ButtonAction
  >
- Version v0.5.0.0
- </button>
-
- {#if retryMessage}
- <div
- class="mt-2 text-sm {isRetrying
- ? 'text-blue-600'
- : retryMessage.includes('✅')
- ? 'text-green-600'
- : 'text-red-600'}"
+
+ <!-- Hidden eVault profile retry - tap version 10 times -->
+ <div class="w-full py-2 text-center">
+ <button
+ class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
+ onclick={handleVersionTap}
+ disabled={isRetrying}
  >
- {retryMessage}
- </div>
- {/if}
+ Version v0.5.0.0
+ </button>
+
+ {#if retryMessage}
+ <div
+ class="mt-2 text-sm {isRetrying
+ ? 'text-blue-600'
+ : retryMessage.includes('✅')
+ ? 'text-green-600'
+ : 'text-red-600'}"
+ >
+ {retryMessage}
+ </div>
+ {/if}
+ </div>
  </div>
 </main>
 

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

@@ -22,11 +22,13 @@ onMount(async () => {
 });
 </script>
 
-<main
- class="h-full pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
->
+<main class="h-full p-4 flex flex-col justify-between">
  <section>
- <Hero title="Here’s your ePassport" class="mb-2">
+ <Hero
+ title="Here’s your ePassport"
+ class="mb-2"
+ titleClasses="text-2xl"
+ >
  {#snippet subtitle()}
  <p>
  You can use it to access any platform that supports the Web
@@ -39,7 +41,7 @@ onMount(async () => {
  <IdentityCard variant="ePassport" {userData} />
  </section>
  <section class="mt-[2svh] mb-[3svh]">
- <Hero title="Here’s your eVault" class="mb-2">
+ <Hero title="Here’s your eVault" class="mb-2" titleClasses="text-2xl">
  {#snippet subtitle()}
  The eVault is your secure cloud storage for your personal data.
  W3DS platforms access it directly, keeping you in control.
@@ -54,6 +56,8 @@ onMount(async () => {
  class="flex-1"
  callback={() => goto("/register")}>Back</ButtonAction
  >
- <ButtonAction class="flex-1" callback={handleFinish}>Finish</ButtonAction>
+ <ButtonAction class="flex-1" callback={handleFinish}
+ >Finish</ButtonAction
+ >
  </div>
 </main>

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

@@ -253,8 +253,12 @@ onMount(async () => {
  </Hero>
 
  {#if isPostAuthLoading}
- <div class="flex flex-col items-center gap-3 py-8">
- <div class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+ <div
+ class="fixed inset-0 flex flex-col items-center justify-center gap-3 py-8"
+ >
+ <div
+ class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"
+ ></div>
  <p class="text-primary text-sm">Logging you in...</p>
  </div>
  {:else}
@@ -278,8 +282,8 @@ onMount(async () => {
  </div>
  <div class="ml-3">
  <p class="text-sm text-primary">
- <strong>Authentication Request Pending</strong><br
- />
+ <strong>Authentication Request Pending</strong
+><br />
  Complete login to process the authentication request
  </p>
  </div>
@@ -288,7 +292,9 @@ onMount(async () => {
  {/if}
 
  <InputPin bind:pin {isError} onchange={() => handlePinInput(pin)} />
- <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>
+ <p
+ class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}
+ >
  Your PIN does not match, try again.
  </p>
  {/if}

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

@@ -310,11 +310,19 @@ onMount(async () => {
  <section>
  <p class="text-center small text-black-500">
  By continuing you agree to our <br />
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ class="text-primary underline underline-offset-4"
+ target="_blank"
  >Terms & Conditions
  </a>
  and
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ target="_blank"
+ class="text-primary underline underline-offset-4"
  >Privacy Policy.</a
  >
  </p>

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

@@ -43,7 +43,7 @@ $effect(() => {
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
 
-const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[100px] text-white overflow-hidden`;
 </script>
 
 <div {...restProps} class={cn(baseClasses, restProps.class)}>
@@ -61,7 +61,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  : 'bg-white/10'} h-[300%] rotate-40"
  ></div>
  </div>
- <div class="p-5 flex flex-col gap-2">
+ <div class="p-3 flex flex-col gap-2">
  <div class="flex justify-between">
  {#if variant === "eName"}
  <HugeiconsIcon
@@ -97,7 +97,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  />
  {/if}
  {:else if variant === "eVault"}
- <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
+ <h3 class="text-black-300 text-3xl font-semibold mb-1 z-[1]">
  {state.progressWidth} Used
  </h3>
  {/if}

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

@@ -27,7 +27,7 @@ onMount(() => {
 {#if isVisible}
  <div
  {...restProps}
- class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
+ class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-black-900/95 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
  ? 'opacity-100'
  : 'opacity-0'}"
  role="alert"

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

@@ -126,7 +126,9 @@ $: if (internalOpen !== lastReportedOpen) {
  </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">
+ <div
+ class="flex flex-col justify-center gap-3 items-center w-full"
+ >
  {#if authError}
  <Button.Action
  variant="solid"

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

@@ -111,49 +111,52 @@ $effect(() => {
 });
 </script>
 
-<main>
+<main class="h-[80svh] flex flex-col justify-between">
  <!-- header part -->
- <SettingsNavigationBtn
- icon={LanguageSquareIcon}
- label="Language"
- href="/settings/language"
- />
- <SettingsNavigationBtn
- icon={PinCodeIcon}
- label="Pin"
- href="/settings/pin"
- />
- <SettingsNavigationBtn
- icon={Shield01Icon}
- label="Privacy"
- href="/settings/privacy"
- />
-
- <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
- >Delete Account</ButtonAction
- >
-
- <!-- Hidden eVault profile retry - tap version 10 times -->
- <div class="w-full py-10 text-center">
- <button
- class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
- onclick={handleVersionTap}
- disabled={isRetrying}
+ <div>
+ <SettingsNavigationBtn
+ icon={LanguageSquareIcon}
+ label="Language"
+ href="/settings/language"
+ />
+ <SettingsNavigationBtn
+ icon={PinCodeIcon}
+ label="Pin"
+ href="/settings/pin"
+ />
+ <SettingsNavigationBtn
+ icon={Shield01Icon}
+ label="Privacy"
+ href="https://metastate.foundation/"
+ />
+ </div>
+ <div>
+ <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
+ >Delete Account</ButtonAction
  >
- Version v0.5.0.0
- </button>
-
- {#if retryMessage}
- <div
- class="mt-2 text-sm {isRetrying
- ? 'text-blue-600'
- : retryMessage.includes('✅')
- ? 'text-green-600'
- : 'text-red-600'}"
+
+ <!-- Hidden eVault profile retry - tap version 10 times -->
+ <div class="w-full py-2 text-center">
+ <button
+ class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
+ onclick={handleVersionTap}
+ disabled={isRetrying}
  >
- {retryMessage}
- </div>
- {/if}
+ Version v0.5.0.0
+ </button>
+
+ {#if retryMessage}
+ <div
+ class="mt-2 text-sm {isRetrying
+ ? 'text-blue-600'
+ : retryMessage.includes('✅')
+ ? 'text-green-600'
+ : 'text-red-600'}"
+ >
+ {retryMessage}
+ </div>
+ {/if}
+ </div>
  </div>
 </main>
 

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

@@ -22,11 +22,13 @@ onMount(async () => {
 });
 </script>
 
-<main
- class="h-full pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
->
+<main class="h-full p-4 flex flex-col justify-between">
  <section>
- <Hero title="Here’s your ePassport" class="mb-2">
+ <Hero
+ title="Here’s your ePassport"
+ class="mb-2"
+ titleClasses="text-2xl"
+ >
  {#snippet subtitle()}
  <p>
  You can use it to access any platform that supports the Web
@@ -39,7 +41,7 @@ onMount(async () => {
  <IdentityCard variant="ePassport" {userData} />
  </section>
  <section class="mt-[2svh] mb-[3svh]">
- <Hero title="Here’s your eVault" class="mb-2">
+ <Hero title="Here’s your eVault" class="mb-2" titleClasses="text-2xl">
  {#snippet subtitle()}
  The eVault is your secure cloud storage for your personal data.
  W3DS platforms access it directly, keeping you in control.
@@ -54,6 +56,8 @@ onMount(async () => {
  class="flex-1"
  callback={() => goto("/register")}>Back</ButtonAction
  >
- <ButtonAction class="flex-1" callback={handleFinish}>Finish</ButtonAction>
+ <ButtonAction class="flex-1" callback={handleFinish}
+ >Finish</ButtonAction
+ >
  </div>
 </main>

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

@@ -253,8 +253,12 @@ onMount(async () => {
  </Hero>
 
  {#if isPostAuthLoading}
- <div class="flex flex-col items-center gap-3 py-8">
- <div class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+ <div
+ class="fixed inset-0 flex flex-col items-center justify-center gap-3 py-8"
+ >
+ <div
+ class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"
+ ></div>
  <p class="text-primary text-sm">Logging you in...</p>
  </div>
  {:else}
@@ -278,8 +282,8 @@ onMount(async () => {
  </div>
  <div class="ml-3">
  <p class="text-sm text-primary">
- <strong>Authentication Request Pending</strong><br
- />
+ <strong>Authentication Request Pending</strong
+><br />
  Complete login to process the authentication request
  </p>
  </div>
@@ -288,7 +292,9 @@ onMount(async () => {
  {/if}
 
  <InputPin bind:pin {isError} onchange={() => handlePinInput(pin)} />
- <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>
+ <p
+ class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}
+ >
  Your PIN does not match, try again.
  </p>
  {/if}

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

@@ -310,11 +310,19 @@ onMount(async () => {
  <section>
  <p class="text-center small text-black-500">
  By continuing you agree to our <br />
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ class="text-primary underline underline-offset-4"
+ target="_blank"
  >Terms & Conditions
  </a>
  and
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ target="_blank"
+ class="text-primary underline underline-offset-4"
  >Privacy Policy.</a
  >
  </p>

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

@@ -43,7 +43,7 @@ $effect(() => {
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
 
-const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[100px] text-white overflow-hidden`;
 </script>
 
 <div {...restProps} class={cn(baseClasses, restProps.class)}>
@@ -61,7 +61,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  : 'bg-white/10'} h-[300%] rotate-40"
  ></div>
  </div>
- <div class="p-5 flex flex-col gap-2">
+ <div class="p-3 flex flex-col gap-2">
  <div class="flex justify-between">
  {#if variant === "eName"}
  <HugeiconsIcon
@@ -97,7 +97,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  />
  {/if}
  {:else if variant === "eVault"}
- <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
+ <h3 class="text-black-300 text-3xl font-semibold mb-1 z-[1]">
  {state.progressWidth} Used
  </h3>
  {/if}

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

@@ -27,7 +27,7 @@ onMount(() => {
 {#if isVisible}
  <div
  {...restProps}
- class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
+ class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-black-900/95 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
  ? 'opacity-100'
  : 'opacity-0'}"
  role="alert"

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

@@ -126,7 +126,9 @@ $: if (internalOpen !== lastReportedOpen) {
  </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">
+ <div
+ class="flex flex-col justify-center gap-3 items-center w-full"
+ >
  {#if authError}
  <Button.Action
  variant="solid"

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

@@ -111,49 +111,52 @@ $effect(() => {
 });
 </script>
 
-<main>
+<main class="h-[80svh] flex flex-col justify-between">
  <!-- header part -->
- <SettingsNavigationBtn
- icon={LanguageSquareIcon}
- label="Language"
- href="/settings/language"
- />
- <SettingsNavigationBtn
- icon={PinCodeIcon}
- label="Pin"
- href="/settings/pin"
- />
- <SettingsNavigationBtn
- icon={Shield01Icon}
- label="Privacy"
- href="/settings/privacy"
- />
-
- <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
- >Delete Account</ButtonAction
- >
-
- <!-- Hidden eVault profile retry - tap version 10 times -->
- <div class="w-full py-10 text-center">
- <button
- class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
- onclick={handleVersionTap}
- disabled={isRetrying}
+ <div>
+ <SettingsNavigationBtn
+ icon={LanguageSquareIcon}
+ label="Language"
+ href="/settings/language"
+ />
+ <SettingsNavigationBtn
+ icon={PinCodeIcon}
+ label="Pin"
+ href="/settings/pin"
+ />
+ <SettingsNavigationBtn
+ icon={Shield01Icon}
+ label="Privacy"
+ href="https://metastate.foundation/"
+ />
+ </div>
+ <div>
+ <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
+ >Delete Account</ButtonAction
  >
- Version v0.5.0.0
- </button>
-
- {#if retryMessage}
- <div
- class="mt-2 text-sm {isRetrying
- ? 'text-blue-600'
- : retryMessage.includes('✅')
- ? 'text-green-600'
- : 'text-red-600'}"
+
+ <!-- Hidden eVault profile retry - tap version 10 times -->
+ <div class="w-full py-2 text-center">
+ <button
+ class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
+ onclick={handleVersionTap}
+ disabled={isRetrying}
  >
- {retryMessage}
- </div>
- {/if}
+ Version v0.5.0.0
+ </button>
+
+ {#if retryMessage}
+ <div
+ class="mt-2 text-sm {isRetrying
+ ? 'text-blue-600'
+ : retryMessage.includes('✅')
+ ? 'text-green-600'
+ : 'text-red-600'}"
+ >
+ {retryMessage}
+ </div>
+ {/if}
+ </div>
  </div>
 </main>
 

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

@@ -22,11 +22,13 @@ onMount(async () => {
 });
 </script>
 
-<main
- class="h-full pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
->
+<main class="h-full p-4 flex flex-col justify-between">
  <section>
- <Hero title="Here’s your ePassport" class="mb-2">
+ <Hero
+ title="Here’s your ePassport"
+ class="mb-2"
+ titleClasses="text-2xl"
+ >
  {#snippet subtitle()}
  <p>
  You can use it to access any platform that supports the Web
@@ -39,7 +41,7 @@ onMount(async () => {
  <IdentityCard variant="ePassport" {userData} />
  </section>
  <section class="mt-[2svh] mb-[3svh]">
- <Hero title="Here’s your eVault" class="mb-2">
+ <Hero title="Here’s your eVault" class="mb-2" titleClasses="text-2xl">
  {#snippet subtitle()}
  The eVault is your secure cloud storage for your personal data.
  W3DS platforms access it directly, keeping you in control.
@@ -54,6 +56,8 @@ onMount(async () => {
  class="flex-1"
  callback={() => goto("/register")}>Back</ButtonAction
  >
- <ButtonAction class="flex-1" callback={handleFinish}>Finish</ButtonAction>
+ <ButtonAction class="flex-1" callback={handleFinish}
+ >Finish</ButtonAction
+ >
  </div>
 </main>

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

@@ -253,8 +253,12 @@ onMount(async () => {
  </Hero>
 
  {#if isPostAuthLoading}
- <div class="flex flex-col items-center gap-3 py-8">
- <div class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+ <div
+ class="fixed inset-0 flex flex-col items-center justify-center gap-3 py-8"
+ >
+ <div
+ class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"
+ ></div>
  <p class="text-primary text-sm">Logging you in...</p>
  </div>
  {:else}
@@ -278,8 +282,8 @@ onMount(async () => {
  </div>
  <div class="ml-3">
  <p class="text-sm text-primary">
- <strong>Authentication Request Pending</strong><br
- />
+ <strong>Authentication Request Pending</strong
+><br />
  Complete login to process the authentication request
  </p>
  </div>
@@ -288,7 +292,9 @@ onMount(async () => {
  {/if}
 
  <InputPin bind:pin {isError} onchange={() => handlePinInput(pin)} />
- <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>
+ <p
+ class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}
+ >
  Your PIN does not match, try again.
  </p>
  {/if}

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

@@ -310,11 +310,19 @@ onMount(async () => {
  <section>
  <p class="text-center small text-black-500">
  By continuing you agree to our <br />
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ class="text-primary underline underline-offset-4"
+ target="_blank"
  >Terms & Conditions
  </a>
  and
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ target="_blank"
+ class="text-primary underline underline-offset-4"
  >Privacy Policy.</a
  >
  </p>

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

@@ -43,7 +43,7 @@ $effect(() => {
  usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
 
-const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[100px] text-white overflow-hidden`;
 </script>
 
 <div {...restProps} class={cn(baseClasses, restProps.class)}>
@@ -61,7 +61,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  : 'bg-white/10'} h-[300%] rotate-40"
  ></div>
  </div>
- <div class="p-5 flex flex-col gap-2">
+ <div class="p-3 flex flex-col gap-2">
  <div class="flex justify-between">
  {#if variant === "eName"}
  <HugeiconsIcon
@@ -97,7 +97,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
  />
  {/if}
  {:else if variant === "eVault"}
- <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
+ <h3 class="text-black-300 text-3xl font-semibold mb-1 z-[1]">
  {state.progressWidth} Used
  </h3>
  {/if}

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

@@ -27,7 +27,7 @@ onMount(() => {
 {#if isVisible}
  <div
  {...restProps}
- class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
+ class="fixed bottom-[30px] left-1/2 -translate-x-1/2 z-50 w-[90%] bg-black-900/95 text-white px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 {isVisible
  ? 'opacity-100'
  : 'opacity-0'}"
  role="alert"

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

@@ -126,7 +126,9 @@ $: if (internalOpen !== lastReportedOpen) {
  </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">
+ <div
+ class="flex flex-col justify-center gap-3 items-center w-full"
+ >
  {#if authError}
  <Button.Action
  variant="solid"

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

@@ -111,49 +111,52 @@ $effect(() => {
 });
 </script>
 
-<main>
+<main class="h-[80svh] flex flex-col justify-between">
  <!-- header part -->
- <SettingsNavigationBtn
- icon={LanguageSquareIcon}
- label="Language"
- href="/settings/language"
- />
- <SettingsNavigationBtn
- icon={PinCodeIcon}
- label="Pin"
- href="/settings/pin"
- />
- <SettingsNavigationBtn
- icon={Shield01Icon}
- label="Privacy"
- href="/settings/privacy"
- />
-
- <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
- >Delete Account</ButtonAction
- >
-
- <!-- Hidden eVault profile retry - tap version 10 times -->
- <div class="w-full py-10 text-center">
- <button
- class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
- onclick={handleVersionTap}
- disabled={isRetrying}
+ <div>
+ <SettingsNavigationBtn
+ icon={LanguageSquareIcon}
+ label="Language"
+ href="/settings/language"
+ />
+ <SettingsNavigationBtn
+ icon={PinCodeIcon}
+ label="Pin"
+ href="/settings/pin"
+ />
+ <SettingsNavigationBtn
+ icon={Shield01Icon}
+ label="Privacy"
+ href="https://metastate.foundation/"
+ />
+ </div>
+ <div>
+ <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}
+ >Delete Account</ButtonAction
  >
- Version v0.5.0.0
- </button>
-
- {#if retryMessage}
- <div
- class="mt-2 text-sm {isRetrying
- ? 'text-blue-600'
- : retryMessage.includes('✅')
- ? 'text-green-600'
- : 'text-red-600'}"
+
+ <!-- Hidden eVault profile retry - tap version 10 times -->
+ <div class="w-full py-2 text-center">
+ <button
+ class="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer select-none"
+ onclick={handleVersionTap}
+ disabled={isRetrying}
  >
- {retryMessage}
- </div>
- {/if}
+ Version v0.5.0.0
+ </button>
+
+ {#if retryMessage}
+ <div
+ class="mt-2 text-sm {isRetrying
+ ? 'text-blue-600'
+ : retryMessage.includes('✅')
+ ? 'text-green-600'
+ : 'text-red-600'}"
+ >
+ {retryMessage}
+ </div>
+ {/if}
+ </div>
  </div>
 </main>
 

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

@@ -22,11 +22,13 @@ onMount(async () => {
 });
 </script>
 
-<main
- class="h-full pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
->
+<main class="h-full p-4 flex flex-col justify-between">
  <section>
- <Hero title="Here’s your ePassport" class="mb-2">
+ <Hero
+ title="Here’s your ePassport"
+ class="mb-2"
+ titleClasses="text-2xl"
+ >
  {#snippet subtitle()}
  <p>
  You can use it to access any platform that supports the Web
@@ -39,7 +41,7 @@ onMount(async () => {
  <IdentityCard variant="ePassport" {userData} />
  </section>
  <section class="mt-[2svh] mb-[3svh]">
- <Hero title="Here’s your eVault" class="mb-2">
+ <Hero title="Here’s your eVault" class="mb-2" titleClasses="text-2xl">
  {#snippet subtitle()}
  The eVault is your secure cloud storage for your personal data.
  W3DS platforms access it directly, keeping you in control.
@@ -54,6 +56,8 @@ onMount(async () => {
  class="flex-1"
  callback={() => goto("/register")}>Back</ButtonAction
  >
- <ButtonAction class="flex-1" callback={handleFinish}>Finish</ButtonAction>
+ <ButtonAction class="flex-1" callback={handleFinish}
+ >Finish</ButtonAction
+ >
  </div>
 </main>

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

@@ -253,8 +253,12 @@ onMount(async () => {
  </Hero>
 
  {#if isPostAuthLoading}
- <div class="flex flex-col items-center gap-3 py-8">
- <div class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+ <div
+ class="fixed inset-0 flex flex-col items-center justify-center gap-3 py-8"
+ >
+ <div
+ class="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"
+ ></div>
  <p class="text-primary text-sm">Logging you in...</p>
  </div>
  {:else}
@@ -278,8 +282,8 @@ onMount(async () => {
  </div>
  <div class="ml-3">
  <p class="text-sm text-primary">
- <strong>Authentication Request Pending</strong><br
- />
+ <strong>Authentication Request Pending</strong
+><br />
  Complete login to process the authentication request
  </p>
  </div>
@@ -288,7 +292,9 @@ onMount(async () => {
  {/if}
 
  <InputPin bind:pin {isError} onchange={() => handlePinInput(pin)} />
- <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>
+ <p
+ class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}
+ >
  Your PIN does not match, try again.
  </p>
  {/if}

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

@@ -310,11 +310,19 @@ onMount(async () => {
  <section>
  <p class="text-center small text-black-500">
  By continuing you agree to our <br />
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ class="text-primary underline underline-offset-4"
+ target="_blank"
  >Terms & Conditions
  </a>
  and
- <a href="/" class="text-primary underline underline-offset-4"
+ <a
+ href="https://metastate.foundation/"
+ rel="noopener noreferrer"
+ target="_blank"
+ class="text-primary underline underline-offset-4"
  >Privacy Policy.</a
  >
  </p>