An easy-to-host PDS on the ATProtocol, iPhone and MacOS. Maintain control of your keys and data, always.
feat(identity-wallet): add ModeSelectScreen component
+71
+71
apps/identity-wallet/src/lib/components/onboarding/ModeSelectScreen.svelte
+71
apps/identity-wallet/src/lib/components/onboarding/ModeSelectScreen.svelte
···
1
+
<script lang="ts">
2
+
let { oncreate, onimport }: { oncreate: () => void; onimport: () => void } = $props();
3
+
</script>
4
+
5
+
<div class="screen">
6
+
<div class="brand">
7
+
<h1>Identity Wallet</h1>
8
+
<p class="tagline">Your self-sovereign identity, in your pocket.</p>
9
+
</div>
10
+
<div class="actions">
11
+
<button class="cta" onclick={oncreate}>Create new identity</button>
12
+
<button class="cta cta--secondary" onclick={onimport}>I have an identity</button>
13
+
</div>
14
+
</div>
15
+
16
+
<style>
17
+
.screen {
18
+
display: flex;
19
+
flex-direction: column;
20
+
align-items: center;
21
+
justify-content: center;
22
+
height: 100%;
23
+
padding: 2rem;
24
+
gap: 3rem;
25
+
}
26
+
27
+
.brand {
28
+
display: flex;
29
+
flex-direction: column;
30
+
align-items: center;
31
+
gap: 0.75rem;
32
+
text-align: center;
33
+
}
34
+
35
+
h1 {
36
+
font-size: 2rem;
37
+
font-weight: 700;
38
+
margin: 0;
39
+
}
40
+
41
+
.tagline {
42
+
font-size: 1rem;
43
+
color: #6b7280;
44
+
margin: 0;
45
+
}
46
+
47
+
.actions {
48
+
display: flex;
49
+
flex-direction: column;
50
+
gap: 1rem;
51
+
width: 100%;
52
+
max-width: 320px;
53
+
}
54
+
55
+
.cta {
56
+
width: 100%;
57
+
padding: 1rem;
58
+
background: #007aff;
59
+
color: #fff;
60
+
border: none;
61
+
border-radius: 12px;
62
+
font-size: 1.1rem;
63
+
font-weight: 600;
64
+
cursor: pointer;
65
+
}
66
+
67
+
.cta--secondary {
68
+
background: #f3f4f6;
69
+
color: #000;
70
+
}
71
+
</style>