Skip to content

Commit b20396b

Browse files
BekibooBekiboo
committed
Improve the Wizard style and add new icons
1 parent 3971cd5 commit b20396b

6 files changed

Lines changed: 105 additions & 63 deletions

File tree

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -243,12 +243,13 @@ async function handleTourNext(next: TourStep | null) {
243243
tourStep = next;
244244
await tick();
245245
246-
// Scan is special: we don't scroll the card stack further. Apps marketplace
247-
// stays in place (now passed/faded) and the Scan FAB drops into the empty
248-
// space below it.
246+
// Scan is special: push the apps card up to the top gutter so the Scan
247+
// FAB has clear room beneath it. Without this extra scroll the apps card
248+
// sits right against the FAB and reads as overlap.
249249
if (next === "scan") {
250250
const apps = document.getElementById("tour-target-apps");
251251
if (!apps) return;
252+
tourOffset = Math.max(0, apps.offsetTop - TOUR_TOP_GUTTER_PX);
252253
const appsBottomInViewport =
253254
apps.offsetTop + apps.offsetHeight - tourOffset;
254255
const panelTopInViewport =
@@ -415,6 +416,7 @@ onDestroy(() => {
415416
greeting={tourGreeting}
416417
name={(userData?.name as string) ?? ""}
417418
{notificationCount}
419+
{tourActive}
418420
/>
419421

420422
<main class="mt-6 flex flex-col gap-3 pb-32">

‎infrastructure/eid-wallet/src/routes/(app)/main/components/Greeting.svelte‎

Lines changed: 63 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,86 @@
11
<script lang="ts">
22
import * as Button from "$lib/ui/Button";
3-
import {
4-
ChatNotificationIcon,
5-
Edit02Icon,
6-
Settings02Icon,
7-
} from "@hugeicons/core-free-icons";
3+
import { Edit02Icon } from "@hugeicons/core-free-icons";
84
import { HugeiconsIcon } from "@hugeicons/svelte";
95
106
interface IGreetingProps {
117
greeting: string;
128
name: string;
139
notificationCount: number;
1410
onedit?: () => void;
11+
/** When true, hide the edit-name + notifications + settings affordances
12+
* so the welcome tour can't be derailed by a stray tap. */
13+
tourActive?: boolean;
1514
}
1615
17-
const { greeting, name, notificationCount, onedit }: IGreetingProps = $props();
16+
const {
17+
greeting,
18+
name,
19+
notificationCount,
20+
onedit,
21+
tourActive = false,
22+
}: IGreetingProps = $props();
1823
</script>
1924

2025
<header class="flex items-start justify-between pt-2">
2126
<div>
22-
<h1 class="text-3xl font-light text-black-500 leading-tight">
27+
<h1 class="text-[40px] font-bold font-condensed text-black-300 leading-none">
2328
{greeting}
2429
</h1>
25-
<div class="flex items-center gap-2 mt-1">
26-
<h2 class="text-3xl font-bold text-black-900 leading-tight">
30+
<div class="flex items-center gap-2">
31+
<h2 class="text-[40px] font-bold font-condensed text-black leading-none">
2732
{name}
2833
</h2>
29-
<button
30-
type="button"
31-
aria-label="Edit name"
32-
onclick={onedit}
33-
class="text-black-500 active:opacity-60"
34-
>
35-
<HugeiconsIcon icon={Edit02Icon} size={20} strokeWidth={2} />
36-
</button>
37-
</div>
38-
</div>
39-
40-
<div class="flex items-center gap-2 shrink-0">
41-
<Button.Nav
42-
href="/notifications"
43-
class="relative"
44-
aria-label={notificationCount > 0
45-
? `Notifications (${notificationCount} unread)`
46-
: "Notifications"}
47-
>
48-
<HugeiconsIcon
49-
size={26}
50-
strokeWidth={2}
51-
icon={ChatNotificationIcon}
52-
/>
53-
{#if notificationCount > 0}
54-
<span
55-
class="absolute -top-0.5 -right-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full min-w-4.5 h-4.5 flex items-center justify-center px-1"
34+
{#if !tourActive}
35+
<button
36+
type="button"
37+
aria-label="Edit name"
38+
onclick={onedit}
39+
class="text-black-500 active:opacity-60"
5640
>
57-
{notificationCount > 99 ? "99+" : notificationCount}
58-
</span>
41+
<HugeiconsIcon
42+
icon={Edit02Icon}
43+
size={20}
44+
strokeWidth={2}
45+
/>
46+
</button>
5947
{/if}
60-
</Button.Nav>
61-
<Button.Nav href="/settings" aria-label="Settings">
62-
<HugeiconsIcon
63-
size={28}
64-
strokeWidth={2}
65-
icon={Settings02Icon}
66-
/>
67-
</Button.Nav>
48+
</div>
6849
</div>
50+
51+
{#if !tourActive}
52+
<div class="flex items-center gap-2 shrink-0">
53+
<Button.Nav
54+
href="/notifications"
55+
class="relative"
56+
aria-label={notificationCount > 0
57+
? `Notifications (${notificationCount} unread)`
58+
: "Notifications"}
59+
>
60+
<img
61+
src="/images/message.svg"
62+
alt=""
63+
width="24"
64+
height="24"
65+
aria-hidden="true"
66+
/>
67+
{#if notificationCount > 0}
68+
<span
69+
class="absolute -top-0.5 -right-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full min-w-4.5 h-4.5 flex items-center justify-center px-1"
70+
>
71+
{notificationCount > 99 ? "99+" : notificationCount}
72+
</span>
73+
{/if}
74+
</Button.Nav>
75+
<Button.Nav href="/settings" aria-label="Settings">
76+
<img
77+
src="/images/gear.svg"
78+
alt=""
79+
width="24"
80+
height="24"
81+
aria-hidden="true"
82+
/>
83+
</Button.Nav>
84+
</div>
85+
{/if}
6986
</header>

‎infrastructure/eid-wallet/src/routes/(app)/main/components/WelcomeTour.svelte‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,34 +19,41 @@ export const TOUR_ORDER: TourStep[] = [
1919
];
2020
2121
interface ITourStepDef {
22-
description: string;
22+
/** One paragraph per array entry — rendered as separate <p> elements. */
23+
description: string[];
2324
cta: string;
2425
}
2526
2627
export const TOUR_STEPS: Record<TourStep, ITourStepDef> = {
2728
ename: {
28-
description:
29+
description: [
2930
"This is your eName — a unique, persistent identifier used globally in the digital world. It is permanently tied to your real self.",
31+
"Write down your eName, it may be needed for recovery. To strengthen your control over eName, we'll bind it to you in the next step.",
32+
],
3033
cta: "Okay",
3134
},
3235
"binding-docs": {
33-
description:
36+
description: [
3437
"Bind your real and digital selves in different ways. This protects your identity and strengthens control over your data.",
35-
cta: "Alright",
38+
],
39+
cta: "Got it",
3640
},
3741
evault: {
38-
description:
42+
description: [
3943
"This is your eVault — your sovereign data storage. From now on, all platforms will read and write data about you from here, under your control.",
44+
],
4045
cta: "Alright",
4146
},
4247
apps: {
43-
description:
48+
description: [
4449
"Discover apps that work with your eVault — their number is growing fast!",
50+
],
4551
cta: "Next",
4652
},
4753
scan: {
48-
description:
54+
description: [
4955
"Log in to any W3DS service by scanning the QR code. No need to create new accounts — your Digital Self is your sovereign account for all platforms.",
56+
],
5057
cta: "Finish",
5158
},
5259
};
@@ -95,16 +102,22 @@ function handleClick() {
95102
style="padding-bottom: max(2.5rem, env(safe-area-inset-bottom));"
96103
>
97104
{#key step}
98-
<p
99-
class="text-primary text-base font-medium leading-relaxed text-left"
105+
<div
106+
class="flex flex-col gap-3"
100107
in:fade={{
101108
duration: 250,
102109
delay: step === "ename" ? 500 : 200,
103110
}}
104111
out:fade={{ duration: 150 }}
105112
>
106-
{def.description}
107-
</p>
113+
{#each def.description as paragraph, i (i)}
114+
<p
115+
class="text-primary text-lg font-medium leading-relaxed text-left"
116+
>
117+
{paragraph}
118+
</p>
119+
{/each}
120+
</div>
108121
{/key}
109122
<div
110123
class="pointer-events-auto"

‎infrastructure/eid-wallet/src/routes/(auth)/onboarding/steps/NameInput.svelte‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,16 +37,18 @@ const handleSubmit = async () => {
3737
>
3838
<StepHeader title="What's your name?" step={3} {onback} />
3939

40-
<section class="flex-1 flex flex-col items-center justify-center gap-4">
40+
<section class="flex-1 flex flex-col justify-center">
41+
<label for="name" class="text-black opacity-50 text-lg font-medium">Enter your name</label>
4142
<input
43+
name="name"
4244
bind:this={inputEl}
4345
type="text"
4446
bind:value={name}
45-
placeholder="Your name"
47+
placeholder="Alex for example"
4648
autocomplete="given-name"
4749
autocapitalize="words"
4850
maxlength="64"
49-
class="w-full text-3xl text-center font-medium text-black-900 placeholder:text-black-300 bg-transparent outline-none"
51+
class="w-full text-[40px] font-condensed font-bold text-black-900 placeholder:text-black-900 placeholder:opacity-20 bg-transparent outline-none"
5052
/>
5153

5254
{#if error}

‎infrastructure/eid-wallet/static/images/gear.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎infrastructure/eid-wallet/static/images/message.svg‎

Lines changed: 5 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)