Skip to content

Commit d470d6a

Browse files
ananyayaya129ananyayaya129
authored
settings page (#169)
* settings page layout done * settings page layout done * formt fix * format fix * format fix * routing for settings page fixed * settings page buttons * merge conflict * settings page tertiary pages * settings pages all done * settings pages unnecessary page deleted * requested changes done * requested changes done
1 parent 36f772a commit d470d6a

File tree

32 files changed

+6887
-9289
lines changed

32 files changed

+6887
-9289
lines changed

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

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,33 @@ const handleFinish = async () => {
99
};
1010
</script>
1111

12-
13-
<main class="h-[max-content] pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between">
12+
<main
13+
class="h-[max-content] pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
14+
>
1415
<section>
1516
<Hero
16-
title="Your ePassport and eVault are ready"
17-
subtitle="Log into any W3DS platform without passwords. It’s tied to this phone; if lost, you’ll need to revoke and reissue it on a new device."
18-
class="mb-2"
17+
title="Your ePassport and eVault are ready"
18+
subtitle="Log into any W3DS platform without passwords. It’s tied to this phone; if lost, you’ll need to revoke and reissue it on a new device."
19+
class="mb-2"
20+
/>
21+
<IdentityCard
22+
variant="ePassport"
23+
userData={{
24+
Name: "Ananya",
25+
Dob: "29 Nov 2003",
26+
Nationality: "Indian",
27+
Passport: "234dfvgsdfg",
28+
}}
1929
/>
20-
<IdentityCard variant= "ePassport"
21-
userData= {{
22-
Name: "Ananya",
23-
Dob: "29 Nov 2003",
24-
Nationality: "Indian",
25-
Passport: "234dfvgsdfg",
26-
}}/>
2730
</section>
2831
<section class="mt-[4svh] mb-[9svh]">
2932
<h4>Your eVault</h4>
30-
<p class="text-black-700 mb-[1svh]">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
31-
<IdentityCard variant= "eVault"
32-
usedStorage= {15}
33-
totalStorage= {80}/>
33+
<p class="text-black-700 mb-[1svh]">
34+
We’ve also created your eVault—secure cloud storage for your
35+
personal data. W3DS platforms access it directly, keeping you in
36+
control.
37+
</p>
38+
<IdentityCard variant="eVault" usedStorage={15} totalStorage={80} />
3439
</section>
3540
<ButtonAction class="w-full" callback={handleFinish}>Finish</ButtonAction>
36-
</main>
41+
</main>

‎platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,18 @@
1414
profileSrc = 'https://picsum.photos/200'
1515
}: IBottomNavProps = $props();
1616
17-
const tabs = ['home', 'discover', 'post', 'messages', 'profile'];
17+
const tabs = ['home', 'discover', 'post', 'messages', 'profile', 'settings'];
1818
let previousTab = $state('home');
1919
let _activeTab = $derived(page.url.pathname);
20+
let fullPath = $derived(page.url.pathname);
2021
2122
const handleNavClick = (newTab: string) => {
2223
// activeTab = newTab;
2324
isNavigatingThroughNav.value = true;
24-
2525
const fromIndex = tabs.indexOf(previousTab);
2626
const toIndex = tabs.indexOf(newTab);
27-
2827
const direction = toIndex > fromIndex ? 'right' : 'left';
2928
document.documentElement.setAttribute('data-transition', direction);
30-
3129
previousTab = newTab;
3230
goto(`/${newTab}`);
3331
};
@@ -40,7 +38,7 @@
4038
<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
4139
<nav
4240
aria-label="Main navigation"
43-
class="fixed start-0 bottom-0 flex w-full items-center justify-between bg-white px-7 py-2 md:hidden"
41+
class="border-grey fixed start-0 bottom-0 flex w-full items-center justify-between border-t-[1px] bg-white px-7 py-2 md:hidden"
4442
role="tablist"
4543
>
4644
<button
@@ -54,7 +52,7 @@
5452
color={activeTab === 'home'
5553
? 'var(--color-brand-burnt-orange)'
5654
: 'var(--color-black-400)'}
57-
fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange)' : 'white'}
55+
fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange-300)' : 'white'}
5856
/>
5957
</button>
6058

@@ -69,7 +67,7 @@
6967
color={activeTab === 'discover'
7068
? 'var(--color-brand-burnt-orange)'
7169
: 'var(--color-black-400)'}
72-
fill={activeTab === 'discover' ? 'var(--color-brand-burnt-orange)' : 'white'}
70+
fill={activeTab === 'discover' ? 'var(--color-brand-burnt-orange-300)' : 'white'}
7371
/>
7472
</button>
7573

@@ -84,7 +82,7 @@
8482
color={activeTab === 'post'
8583
? 'var(--color-brand-burnt-orange)'
8684
: 'var(--color-black-400)'}
87-
fill={activeTab === 'post' ? 'var(--color-brand-burnt-orange)' : 'white'}
85+
fill={activeTab === 'post' ? 'var(--color-brand-burnt-orange-300)' : 'white'}
8886
/>
8987
</button>
9088

@@ -99,7 +97,7 @@
9997
color={activeTab === 'messages'
10098
? 'var(--color-brand-burnt-orange)'
10199
: 'var(--color-black-400)'}
102-
fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange)' : 'white'}
100+
fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange-300)' : 'white'}
103101
/>
104102
</button>
105103

@@ -110,7 +108,7 @@
110108
onclick={() => handleNavClick('profile')}
111109
>
112110
<span
113-
class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
111+
class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' || fullPath.includes('settings') ? 'border-brand-burnt-orange' : 'border-transparent'}`}
114112
>
115113
<img
116114
width="24px"

‎platforms/metagram/src/lib/fragments/Header/Header.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
2020
const variantClasses = {
2121
primary: {
22-
text: 'text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)]',
22+
text: 'text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)] py-2',
2323
background: ''
2424
},
2525
secondary: {
@@ -44,7 +44,9 @@
4444
};
4545
4646
const classes = $derived({
47-
common: cn('flex items-center justify-between py-4 px-0'),
47+
common: cn(
48+
'flex items-center justify-between my-4 pb-6 border-b-[1px] md:border-0 border-grey'
49+
),
4850
text: variantClasses[variant].text,
4951
background: variantClasses[variant].background
5052
});

‎platforms/metagram/src/lib/fragments/RightAside/RightAside.svelte‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
import type { Snippet } from 'svelte';
3+
import type { HTMLAttributes } from 'svelte/elements';
4+
import { Header } from '..';
5+
6+
interface IRightAsideProps extends HTMLAttributes<HTMLElement> {
7+
header: Snippet;
8+
asideContent: Snippet;
9+
}
10+
let { header, asideContent, ...restProps }: IRightAsideProps = $props();
11+
</script>
12+
13+
<aside {...restProps} class="hidden border border-y-0 border-s-gray-200 md:block md:pt-13">
14+
<div class="mx-5">
15+
<h2 class="mb-10 text-lg font-semibold">
16+
{@render header?.()}
17+
</h2>
18+
<div>
19+
{@render asideContent?.()}
20+
</div>
21+
</div>
22+
</aside>

‎platforms/metagram/src/lib/fragments/SettingsDeleteButton/SettingsDeleteButton.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import { cn } from '$lib/utils';
3+
import { Delete02Icon } from '@hugeicons/core-free-icons';
4+
import { HugeiconsIcon } from '@hugeicons/svelte';
5+
import type { Snippet } from 'svelte';
6+
import type { HTMLAttributes } from 'svelte/elements';
7+
8+
interface ISettingsDeleteButtonProps extends HTMLAttributes<HTMLElement> {
9+
children: Snippet;
10+
onclick: () => void;
11+
}
12+
13+
let { children, onclick, ...restProps }: ISettingsDeleteButtonProps = $props();
14+
15+
const cBase = 'flex w-full items-center justify-between';
16+
</script>
17+
18+
<div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
19+
<div class="flex items-center gap-2">
20+
<h3 class="text-black-800 text-base">
21+
{@render children?.()}
22+
</h3>
23+
</div>
24+
<button class="cursor-pointer" {onclick}>
25+
<HugeiconsIcon icon={Delete02Icon} color="var(--color-black-400)" />
26+
</button>
27+
</div>

‎platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,14 @@ export const Primary = {
2323
hasTrailingIcon: true
2424
}
2525
};
26+
export const ProfileSrc = {
27+
args: {
28+
children: ButtonText,
29+
profileSrc: 'https://picsum.photos/200/300',
30+
onclick: () => alert('clicked'),
31+
hasTrailingIcon: true
32+
}
33+
};
2634

2735
export const Secondary = {
2836
args: {

‎platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@
77
88
interface ISettingsNaviationButtonProps extends HTMLButtonAttributes {
99
leadingIcon?: Snippet;
10+
profileSrc?: string;
1011
children: Snippet;
11-
onclick: () => void;
12-
hasTrailingIcon: boolean;
12+
onclick?: () => void;
13+
hasTrailingIcon?: boolean;
1314
}
1415
1516
let {
1617
leadingIcon,
18+
profileSrc,
1719
children,
1820
onclick,
1921
hasTrailingIcon = true,
@@ -27,12 +29,21 @@
2729
<div class="flex items-center gap-2">
2830
{#if leadingIcon}
2931
<div
30-
class="bg-brand-burnt-orange-100 flex h-10 w-10 items-center justify-center rounded-full"
32+
class="bg-brand-burnt-orange-100 flex size-8 items-center justify-center rounded-full md:size-10"
3133
>
3234
{@render leadingIcon?.()}
3335
</div>
3436
{/if}
35-
<h3 class="text-black-800 font-semibold">
37+
{#if profileSrc}
38+
<img
39+
width="24px"
40+
height="24px"
41+
class="flex aspect-square size-10 items-center justify-center rounded-full md:size-12"
42+
src={profileSrc}
43+
alt=""
44+
/>
45+
{/if}
46+
<h3 class="text-black-800 text-start text-base">
3647
{@render children?.()}
3748
</h3>
3849
</div>

‎platforms/metagram/src/lib/fragments/SettingsPage/SettingsPage.svelte‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<script lang="ts">
2+
import { goto } from '$app/navigation';
3+
import { page } from '$app/state';
4+
import SettingsNavigationButton from '$lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte';
5+
import {
6+
DatabaseIcon,
7+
Logout01Icon,
8+
Notification02FreeIcons
9+
} from '@hugeicons/core-free-icons';
10+
import { HugeiconsIcon } from '@hugeicons/svelte';
11+
import type { HTMLAttributes } from 'svelte/elements';
12+
13+
let route = $derived(page.url.pathname);
14+
15+
interface ISettingsPageProps extends HTMLAttributes<HTMLElement> {
16+
username: string;
17+
userEmail: string;
18+
}
19+
let { username, userEmail }: ISettingsPageProps = $props();
20+
</script>
21+
22+
<div class="bg-grey rounded-xl p-3 md:p-5">
23+
<SettingsNavigationButton
24+
onclick={() => goto(`/settings/account`)}
25+
profileSrc="https://picsum.photos/200/300"
26+
>
27+
{#snippet children()}
28+
<div class="flex flex-col items-start">
29+
<h2 class="text-lg">{username}</h2>
30+
<p class="text-sm">{userEmail}</p>
31+
</div>
32+
{/snippet}
33+
</SettingsNavigationButton>
34+
</div>
35+
<hr class="text-grey" />
36+
<div class="flex flex-col gap-3">
37+
<h3 class="text-brand-burnt-orange text-base font-semibold">Personalisation</h3>
38+
<div class="{route === `/settings/notifications` ? 'bg-grey' : ''} rounded-xl p-2">
39+
<SettingsNavigationButton onclick={() => goto(`/settings/notifications`)}>
40+
{#snippet leadingIcon()}
41+
<HugeiconsIcon
42+
size="24px"
43+
icon={Notification02FreeIcons}
44+
color="var(--color-brand-burnt-orange)"
45+
/>
46+
{/snippet}
47+
{#snippet children()}
48+
Notifications
49+
{/snippet}
50+
</SettingsNavigationButton>
51+
</div>
52+
</div>
53+
<hr class="text-grey" />
54+
<div class="flex flex-col gap-3">
55+
<h3 class="text-brand-burnt-orange text-base font-semibold">System</h3>
56+
<div class="{route === `/settings/data-and-storage` ? 'bg-grey' : ''} rounded-xl p-2">
57+
<SettingsNavigationButton onclick={() => goto(`/settings/data-and-storage`)}>
58+
{#snippet leadingIcon()}
59+
<HugeiconsIcon
60+
size="24px"
61+
icon={DatabaseIcon}
62+
color="var(--color-brand-burnt-orange)"
63+
/>
64+
{/snippet}
65+
{#snippet children()}
66+
Data & Storage
67+
{/snippet}
68+
</SettingsNavigationButton>
69+
</div>
70+
<div class="{route === `/settings/logout` ? 'bg-grey' : ''} rounded-xl p-2">
71+
<SettingsNavigationButton onclick={() => goto(`/settings/logout`)}>
72+
{#snippet leadingIcon()}
73+
<HugeiconsIcon
74+
size="24px"
75+
icon={Logout01Icon}
76+
color="var(--color-brand-burnt-orange)"
77+
/>
78+
{/snippet}
79+
{#snippet children()}
80+
Logout
81+
{/snippet}
82+
</SettingsNavigationButton>
83+
</div>
84+
</div>

‎platforms/metagram/src/lib/fragments/SettingsToggleButton/SettingsToggleButton.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 { Toggle } from '$lib/ui';
3+
import { cn } from '$lib/utils';
4+
import type { Snippet } from 'svelte';
5+
import type { HTMLButtonAttributes } from 'svelte/elements';
6+
7+
interface ISettingsToggleButtonProps extends HTMLButtonAttributes {
8+
children: Snippet;
9+
checked: boolean;
10+
}
11+
12+
let { children, onclick, checked, ...restProps }: ISettingsToggleButtonProps = $props();
13+
14+
const cBase = 'flex w-full items-center justify-between';
15+
</script>
16+
17+
<button {...restProps} class={cn([cBase, restProps.class].join(' '))} {onclick}>
18+
<div class="flex items-center gap-2">
19+
<h3 class="text-black-800 text-base">
20+
{@render children?.()}
21+
</h3>
22+
</div>
23+
<Toggle {checked}></Toggle>
24+
</button>

0 commit comments

Comments
 (0)