Feat/eid wallet redesign

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//c/Users/julie/AppData/Local/Packages/Claude_pzs8sxrjxfjjc/LocalCache/Roaming/Claude/local-agent-mode-sessions/184ceb9f-c63d-479f-9de2-eb3191328fca/d7f7f518-2e61-4301-ac45-f5c68b836ee3/local_1b897c7e-d73e-435f-a62d-ce4a750943aa/outputs/frames/**)"
+    ]
+  }
+}

.vscode/settings.json

@@ -21,7 +21,7 @@
         }
     },
     "[svelte]": {
-        "editor.defaultFormatter": "svelte.svelte-vscode",
+        "editor.defaultFormatter": "biomejs.biome",
         "editor.codeActionsOnSave": {
             "source.organizeImports.biome": "explicit",
             "source.fixAll.biome": "explicit"

infrastructure/eid-wallet/package.json

@@ -22,34 +22,30 @@
     "license": "MIT",
     "dependencies": {
         "@auvo/tauri-plugin-crypto-hw-api": "^0.1.0",
+        "@choochmeque/tauri-plugin-notifications-api": "^0.4.3",
         "@didit-protocol/sdk-web": "^0.1.6",
+        "@fontsource-variable/roboto": "^5.2.10",
+        "@fontsource-variable/roboto-condensed": "^5.2.8",
         "@hugeicons/core-free-icons": "^1.0.13",
         "@hugeicons/svelte": "^1.0.2",
-        "@iconify/svelte": "^5.0.1",
-        "@ngneat/falso": "^7.3.0",
         "@tailwindcss/container-queries": "^0.1.1",
         "@tauri-apps/api": "^2.9.0",
         "@tauri-apps/plugin-barcode-scanner": "^2.4.2",
         "@tauri-apps/plugin-biometric": "^2.3.2",
         "@tauri-apps/plugin-deep-link": "^2.4.5",
-        "@choochmeque/tauri-plugin-notifications-api": "^0.4.3",
         "@tauri-apps/plugin-opener": "^2.5.2",
         "@tauri-apps/plugin-store": "^2.4.1",
-        "@veriff/incontext-sdk": "^2.4.0",
-        "@veriff/js-sdk": "^1.5.1",
         "axios": "^1.6.7",
         "blindvote": "workspace:*",
         "clsx": "^2.1.1",
         "dotenv": "^16.5.0",
         "flag-icons": "^7.3.2",
         "graphql-request": "^6.1.0",
         "html5-qrcode": "^2.3.8",
-        "import": "^0.0.6",
         "jose": "^5.2.0",
         "svelte-loading-spinners": "^0.3.6",
         "svelte-qrcode": "^1.0.1",
         "tailwind-merge": "^3.0.2",
-        "ts-md5": "^2.0.1",
         "uuid": "^11.1.0",
         "wallet-sdk": "workspace:*"
     },

infrastructure/eid-wallet/src-tauri/Cargo.toml

@@ -18,7 +18,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2", features = ["devtools"] }
 tauri-plugin-opener = "2"
 tauri-plugin-deep-link = "2"
 tauri-plugin-notifications = { version = "0.4", default-features = false, features = ["push-notifications", "notify-rust"] }

infrastructure/eid-wallet/src-tauri/capabilities/desktop.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "desktop-capability",
+  "description": "Capability for the main window on desktop",
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "core:default",
+    "opener:default",
+    "store:default",
+    "deep-link:default",
+    "notifications:default",
+    "process:default",
+    "opener:allow-default-urls"
+  ],
+  "platforms": [
+    "windows",
+    "macOS",
+    "linux"
+  ]
+}

infrastructure/eid-wallet/src-tauri/tauri.conf.json

@@ -19,7 +19,8 @@
         ],
         "security": {
             "capabilities": [
-                "mobile-capability"
+                "mobile-capability",
+                "desktop-capability"
             ],
             "csp": null
         }

infrastructure/eid-wallet/src/app.css

@@ -1,12 +1,7 @@
 @import "tailwindcss";
 @import "flag-icons/css/flag-icons.min.css";
-
-@font-face {
-    font-family: "Archivo";
-    src: url("/fonts/Archivo-VariableFont_wdth,wght.ttf") format("truetype");
-    font-weight: 100 900;
-    font-style: normal;
-}
+@import "@fontsource-variable/roboto";
+@import "@fontsource-variable/roboto-condensed";
 
 @layer base {
     /* Typography */
@@ -15,34 +10,35 @@
     }
 
     h2 {
-        @apply text-6xl/[1.5] text-black font-semibold;
+        @apply text-6xl/normal text-black font-semibold;
     }
 
     h3 {
-        @apply text-3xl/[1.5] text-black font-semibold;
+        @apply text-3xl/normal text-black font-semibold;
     }
 
     h4 {
-        @apply text-xl/[1.5] text-black font-semibold;
+        @apply text-xl/normal text-black font-semibold;
     }
 
     p {
-        @apply text-base/[1.5] text-black font-normal;
+        @apply text-base/normal text-black font-normal;
     }
 
     .small {
-        @apply text-xs/[1.5] text-black font-normal;
+        @apply text-xs/normal text-black font-normal;
     }
 }
 
 @theme {
     /* Custom theme */
-    --color-primary: #8e52ff;
-    --color-primary-100: #e8dcff;
-    --color-primary-200: #d2baff;
-    --color-primary-300: #bb97ff;
-    --color-primary-400: #a575ff;
-    --color-primary-500: #8e52ff;
+    --color-primary: #8968ff;
+    --color-primary-50: #cec1ff66;
+    --color-primary-100: #e7e1ff;
+    --color-primary-200: #d0c3ff;
+    --color-primary-300: #b8a4ff;
+    --color-primary-400: #a186ff;
+    --color-primary-500: #8968ff;
 
     --color-secondary: #73efd5;
     --color-secondary-100: #e3fcf7;
@@ -54,41 +50,63 @@
     --color-white: #ffffff;
     --color-gray: #f5f5f5;
 
-    --color-black: #1f1f1f;
-    --color-black-100: #d2d2d2;
-    --color-black-300: #a5a5a5;
-    --color-black-500: #797979;
-    --color-black-700: #4c4c4c;
-    --color-black-900: #1f1f1f;
+    --color-black: #1d2636;
+    --color-black-50: #ebeff5;
+    --color-black-100: #dce0e8;
+    --color-black-300: #b8c0cb;
+    --color-black-500: #788292;
+    --color-black-700: #364052;
+    --color-black-900: #1d2636;
 
     --color-danger: #ff5255;
     --color-danger-100: #ffdcdd;
     --color-danger-200: #ffb1a7;
     --color-danger-300: #ff968e;
     --color-danger-400: #ff7b77;
     --color-danger-500: #ff5255;
+
+    --color-card-alternative: #f2f5fa;
+
+    /* Success / verified-state palette — used by the verified-ID chip and
+       the Legal ID accordion. Mirrors the lime scale we were reaching for. */
+    --color-success: #84cc16;
+    --color-success-100: #ecfccb;
+    --color-success-200: #d9f99d;
+    --color-success-300: #c0f77c;
+    --color-success-500: #84cc16;
+    --color-success-900: #365314;
+
+    /* Typography */
+    --font-sans: "Roboto Variable", sans-serif;
+    --font-condensed: "Roboto Condensed Variable", sans-serif;
+
+    /* Display size — Greeting h1/h2 and the NameInput field. */
+    --text-display: 40px;
+    --text-display--line-height: 1;
+
+    /* Micro chip / badge label — verified/unverified pills, notification
+       count, the small checkmark on the Legal ID avatar. */
+    --text-chip: 10px;
+    --text-chip--line-height: 1.2;
+
+    /* Pill button label — ADD / INVITE / REPLACE buttons. */
+    --text-pill: 13px;
+    --text-pill--line-height: 1.2;
+
+    /* Standard elevation used across the main-page cards. */
+    --shadow-card: 0px 4px 19.9px 0px #00000024;
 }
 
 body {
-    font-family: "Archivo", sans-serif;
-    /* padding-top: env(safe-area-inset-top); */
-    /* padding-bottom: env(safe-area-inset-bottom); */
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
-    background-color: var(--color-primary);
 }
 
 /* Ensure background remains correct during transitions */
 :root[data-transition]::view-transition-group(root),
 :root[data-transition]::view-transition-old(root),
 :root[data-transition]::view-transition-new(root) {
-    background-color: white !important; /* Default to white */
-}
-
-.dark:root[data-transition]::view-transition-group(root),
-.dark:root[data-transition]::view-transition-old(root),
-.dark:root[data-transition]::view-transition-new(root) {
-    background-color: #0b0d13 !important; /* Use dark background in dark mode */
+    background-color: white !important;
 }
 
 /* Prevent flickering */
@@ -155,18 +173,24 @@ body {
     }
 }
 
-:root[data-transition]::view-transition-old(root) {
-    animation: 400ms ease-out both fade-out;
+/* Forward (data-transition="left"): the NEW page slides in from the right,
+   covering the OLD which stays put. */
+:root[data-transition="left"]::view-transition-old(root) {
+    animation: none;
 }
-
-:root[data-transition="right"]::view-transition-new(root) {
+:root[data-transition="left"]::view-transition-new(root) {
     animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
     position: relative;
     z-index: 1;
 }
 
-:root[data-transition="left"]::view-transition-new(root) {
-    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+/* Backward (data-transition="right"): the OLD page slides out to the right,
+   revealing the NEW page underneath which stays put. */
+:root[data-transition="right"]::view-transition-new(root) {
+    animation: none;
+}
+:root[data-transition="right"]::view-transition-old(root) {
+    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
     position: relative;
     z-index: 1;
 }

infrastructure/eid-wallet/src/app.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1.0, user-scalable=no"/>
-    <link rel="preload" href="/fonts/Archivo-VariableFont_wdth,wght.ttf" as="font" type="truetype" crossorigin="anonymous">
     <title>Tauri + SvelteKit + Typescript App</title>
     %sveltekit.head%
   </head>

infrastructure/eid-wallet/src/lib/actions/keyboardInset.ts

@@ -0,0 +1,47 @@
+/** Exposes the soft keyboard's height as `--kb-inset` on the node, and locks
+ *  document scroll while mounted so the page can't be panned when the
+ *  keyboard pushes the layout viewport past the visual viewport. */
+export function keyboardInset(node: HTMLElement) {
+    const vv = window.visualViewport;
+
+    const update = () => {
+        if (!vv) {
+            node.style.setProperty("--kb-inset", "0px");
+            return;
+        }
+        const inset = Math.max(0, window.innerHeight - vv.height);
+        node.style.setProperty("--kb-inset", `${inset}px`);
+    };
+
+    const html = document.documentElement;
+    const body = document.body;
+    const prevHtmlOverflow = html.style.overflow;
+    const prevBodyOverflow = body.style.overflow;
+    const prevHtmlOverscroll = html.style.overscrollBehavior;
+    const prevBodyOverscroll = body.style.overscrollBehavior;
+    html.style.overflow = "hidden";
+    body.style.overflow = "hidden";
+    html.style.overscrollBehavior = "none";
+    body.style.overscrollBehavior = "none";
+
+    const blockTouchMove = (e: TouchEvent) => {
+        if (e.touches.length === 1) e.preventDefault();
+    };
+    document.addEventListener("touchmove", blockTouchMove, { passive: false });
+
+    vv?.addEventListener("resize", update);
+    vv?.addEventListener("scroll", update);
+    update();
+
+    return {
+        destroy() {
+            vv?.removeEventListener("resize", update);
+            vv?.removeEventListener("scroll", update);
+            document.removeEventListener("touchmove", blockTouchMove);
+            html.style.overflow = prevHtmlOverflow;
+            body.style.overflow = prevBodyOverflow;
+            html.style.overscrollBehavior = prevHtmlOverscroll;
+            body.style.overscrollBehavior = prevBodyOverscroll;
+        },
+    };
+}