Skip to content

Commit 4b81d91

Browse files
grv-saini-20JulienAuvo
grv-saini-20
and
JulienAuvo
authored
feat: settings-flow (#86)
* feat: settings-flow * feat: settings and language page * feat : history page * feat: change pin page * fix: height of selector * fix: pin change page * fix: size of input pin * fix: spacing of pins * feat: AppNav fragment * fix: height of page * fix: padding * fix: remove redundant code * feat: privacy page * chore: add doc * fix: error state * feat: remove redundant code * chore: used app nav component --------- Co-authored-by: JulienAuvo <julien@auvo.io>
1 parent ecaa8f3 commit 4b81d91

15 files changed

Lines changed: 248 additions & 13 deletions

File tree

‎infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.stories.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { ComponentProps } from "svelte";
2+
import AppNav from "./AppNav.svelte";
3+
4+
export default {
5+
title: "Fragments/AppNav",
6+
component: AppNav,
7+
tags: ["autodocs"],
8+
render: (args: {
9+
Component: AppNav;
10+
props: ComponentProps<typeof AppNav>;
11+
}) => ({
12+
Component: AppNav,
13+
props: args,
14+
}),
15+
};
16+
17+
export const Basic = {
18+
args: {
19+
title: "Settings",
20+
},
21+
};

‎infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script lang="ts">
2+
import * as Button from "$lib/ui/Button";
3+
import { cn } from "$lib/utils";
4+
import { ArrowLeft01Icon, Settings02Icon } from "@hugeicons/core-free-icons";
5+
import type { HTMLAttributes } from "svelte/elements";
6+
interface IHeroProps extends HTMLAttributes<HTMLElement> {
7+
title?: string;
8+
titleClasses?: string;
9+
}
10+
const { title, titleClasses, ...restProps }: IHeroProps = $props();
11+
const baseClasses = "w-full relative flex justify-center h-14 items-center";
12+
</script>
13+
14+
<nav {...restProps} class={cn(baseClasses, restProps.class)}>
15+
<Button.Icon
16+
icon={ArrowLeft01Icon}
17+
iconSize="md"
18+
iconColor={"black"}
19+
class="absolute left-2"
20+
onclick={() => window.history.back()}
21+
/>
22+
<h4 class={cn(titleClasses)}>
23+
{title}
24+
</h4>
25+
</nav>
26+
27+
<!--
28+
@component
29+
@name AppNav
30+
@description A component that displays the title of the current page and a back button.
31+
@props
32+
- title: string - The main title to display.
33+
- titleClasses: string - Additional classes to apply to the title element.
34+
@usage
35+
```svelte
36+
<AppNav title="My Title" />
37+
-->

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ $effect(() => {
5959
<Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
6060

6161
{:else if variant === 'eVault'}
62-
<div class="text-black-300 text-3xl mb-3">{state.progressWidth} Used</div>
62+
<h3 class="text-black-300 text-3xl font-semibold mb-3">{state.progressWidth} Used</h3>
6363
{/if}
6464
</div>
6565
<div>
@@ -83,7 +83,7 @@ $effect(() => {
8383
<div>
8484
<div class="flex justify-between mb-1 ">
8585
<p class="z-[1]">{usedStorage}GB Used</p>
86-
<p class="z-[1]">{totalStorage}GB Used</p>
86+
<p class="z-[1]">{totalStorage}GB total storage</p>
8787
</div>
8888
<div class="relative w-full h-3 rounded-full overflow-hidden bg-primary-400">
8989
<div class="h-full bg-secondary rounded-full" style={`width: calc(${state.progressWidth})`}></div>

‎infrastructure/eid-wallet/src/lib/fragments/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { default as Hero } from "./Hero/Hero.svelte";
22
export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
33
export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
4+
export { default as AppNav } from "./AppNav/AppNav.svelte";

‎infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,9 @@ const cBase =
144144

145145
<style>
146146
.sm {
147-
scale: 0.8;
147+
scale: 0.7;
148148
transform-origin: 0 0;
149+
justify-content: flex-start;
149150
}
150151
151152
.singular-input .mask {

‎infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ let {
3030
{...restProps}
3131
for={id}
3232
class={cn(
33-
["flex w-full justify-between items-center py-4", restProps.class].join(
33+
["flex w-full justify-between items-center ps-[5vw] py-6", restProps.class].join(
3434
" "
3535
)
3636
)}
@@ -46,9 +46,13 @@ let {
4646
bind:group={selected}
4747
/>
4848
{#if icon}
49-
<div>{@render icon?.(id)}</div>
49+
<div class="">
50+
{@render icon?.(id)}
51+
</div>
5052
{/if}
51-
{@render children?.()}
53+
<p>
54+
{@render children?.()}
55+
</p>
5256
</div>
5357
</div>
5458
{#if selected === value}

‎infrastructure/eid-wallet/src/lib/ui/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { default as Drawer } from "./Drawer/Drawer.svelte";
22
export { default as InputPin } from "./InputPin/InputPin.svelte";
33
export { default as ButtonAction } from "./Button/ButtonAction.svelte";
4+
export { default as Selector } from "./Selector/Selector.svelte";

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts">
2+
import { AppNav } from "$lib/fragments";
3+
import { runtime } from "$lib/global/runtime.svelte";
4+
5+
const { children } = $props();
6+
</script>
7+
8+
<main class="h-[100vh] px-[5vw] pb-[4.5vh]">
9+
<AppNav title={runtime.header.title ?? ""}/>
10+
{@render children?.()}
11+
</main>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script lang="ts">
2+
import { SettingsNavigationBtn } from "$lib/fragments";
3+
import { runtime } from "$lib/global/runtime.svelte";
4+
import {
5+
Key01Icon,
6+
LanguageSquareIcon,
7+
Link02Icon,
8+
PinCodeIcon,
9+
Shield01Icon,
10+
} from "@hugeicons/core-free-icons";
11+
12+
$effect(() => {
13+
runtime.header.title = "Settings";
14+
});
15+
</script>
16+
17+
<main>
18+
<!-- header part -->
19+
<SettingsNavigationBtn icon={LanguageSquareIcon} label="Language" href="/settings/language"/>
20+
<SettingsNavigationBtn icon={Link02Icon} label="History" href="/settings/history"/>
21+
<SettingsNavigationBtn icon={PinCodeIcon} label="Pin" href="/settings/pin"/>
22+
<SettingsNavigationBtn icon={Key01Icon} label="Keys" href="/settings/keys"/>
23+
<SettingsNavigationBtn icon={Shield01Icon} label="Privacy" href="/settings/privacy"/>
24+
</main>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script lang="ts">
2+
import { runtime } from "$lib/global/runtime.svelte";
3+
4+
$effect(() => {
5+
runtime.header.title = "History";
6+
});
7+
</script>
8+
9+
<main>
10+
</main>

0 commit comments

Comments
 (0)