settings page

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

@@ -1,36 +1,41 @@
 <script lang="ts">
-import { goto } from "$app/navigation";
-import { Hero } from "$lib/fragments";
-import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
-import { ButtonAction } from "$lib/ui";
+    import { goto } from "$app/navigation";
+    import { Hero } from "$lib/fragments";
+    import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
+    import { ButtonAction } from "$lib/ui";
 
-const handleFinish = async () => {
-    await goto("/main");
-};
+    const handleFinish = async () => {
+        await goto("/main");
+    };
 </script>
 
-
-<main class="h-[max-content] pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between">
+<main
+    class="h-[max-content] pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
+>
     <section>
         <Hero
-        title="Your ePassport and eVault are ready"
-        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."
-        class="mb-2"
+            title="Your ePassport and eVault are ready"
+            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."
+            class="mb-2"
+        />
+        <IdentityCard
+            variant="ePassport"
+            userData={{
+                Name: "Ananya",
+                Dob: "29 Nov 2003",
+                Nationality: "Indian",
+                Passport: "234dfvgsdfg",
+            }}
         />
-        <IdentityCard variant= "ePassport"
-		userData= {{
-			Name: "Ananya",
-			Dob: "29 Nov 2003",
-			Nationality: "Indian",
-			Passport: "234dfvgsdfg",
-		}}/>
     </section>
     <section class="mt-[4svh] mb-[9svh]">
         <h4>Your eVault</h4>
-        <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>
-        <IdentityCard variant= "eVault"
-		usedStorage= {15}
-		totalStorage= {80}/>
+        <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>
+        <IdentityCard variant="eVault" usedStorage={15} totalStorage={80} />
     </section>
     <ButtonAction class="w-full" callback={handleFinish}>Finish</ButtonAction>
-</main>
+</main>

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

@@ -14,20 +14,18 @@
 		profileSrc = 'https://picsum.photos/200'
 	}: IBottomNavProps = $props();
 
-	const tabs = ['home', 'discover', 'post', 'messages', 'profile'];
+	const tabs = ['home', 'discover', 'post', 'messages', 'profile', 'settings'];
 	let previousTab = $state('home');
 	let _activeTab = $derived(page.url.pathname);
+	let fullPath = $derived(page.url.pathname);
 
 	const handleNavClick = (newTab: string) => {
 		// activeTab = newTab;
 		isNavigatingThroughNav.value = true;
-
 		const fromIndex = tabs.indexOf(previousTab);
 		const toIndex = tabs.indexOf(newTab);
-
 		const direction = toIndex > fromIndex ? 'right' : 'left';
 		document.documentElement.setAttribute('data-transition', direction);
-
 		previousTab = newTab;
 		goto(`/${newTab}`);
 	};
@@ -40,7 +38,7 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <nav
 	aria-label="Main navigation"
-	class="fixed start-0 bottom-0 flex w-full items-center justify-between px-7 py-2 md:hidden"
+	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"
 	role="tablist"
 >
 	<button
@@ -54,7 +52,7 @@
 			color={activeTab === 'home'
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
-			fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange-300)' : 'white'}
 		/>
 	</button>
 
@@ -69,7 +67,7 @@
 			color={activeTab === 'discover'
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
-			fill={activeTab === 'discover' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			fill={activeTab === 'discover' ? 'var(--color-brand-burnt-orange-300)' : 'white'}
 		/>
 	</button>
 
@@ -84,7 +82,7 @@
 			color={activeTab === 'post'
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
-			fill={activeTab === 'post' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			fill={activeTab === 'post' ? 'var(--color-brand-burnt-orange-300)' : 'white'}
 		/>
 	</button>
 
@@ -99,7 +97,7 @@
 			color={activeTab === 'messages'
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
-			fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange-300)' : 'white'}
 		/>
 	</button>
 
@@ -110,7 +108,7 @@
 		onclick={() => handleNavClick('profile')}
 	>
 		<span
-			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
+			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' || fullPath.includes('settings') ? 'border-brand-burnt-orange' : 'border-transparent'}`}
 		>
 			<img
 				width="24px"

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

@@ -19,7 +19,7 @@
 
 	const variantClasses = {
 		primary: {
-			text: 'text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)]',
+			text: 'text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)] py-2',
 			background: ''
 		},
 		secondary: {
@@ -44,7 +44,9 @@
 	};
 
 	const classes = $derived({
-		common: cn('flex items-center justify-between p-4'),
+		common: cn(
+			'flex items-center justify-between my-4 pb-4 border-b-[1px] md:border-0 border-grey w-full px-4'
+		),
 		text: variantClasses[variant].text,
 		background: variantClasses[variant].background
 	});

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IRightAsideProps extends HTMLAttributes<HTMLElement> {
+		header: string;
+		asideContent: Snippet;
+	}
+	let { header, asideContent, ...restProps }: IRightAsideProps = $props();
+</script>
+
+<aside {...restProps} class="hidden w-full md:block">
+	<div class="mx-5">
+		<h2 class="mb-8 text-lg font-semibold">{header}</h2>
+		<div>
+			{@render asideContent?.()}
+		</div>
+	</div>
+</aside>

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

@@ -23,6 +23,14 @@ export const Primary = {
 		hasTrailingIcon: true
 	}
 };
+export const ProfileSrc = {
+    args: {
+        children: ButtonText,
+        profileSrc: "https://picsum.photos/200/300",
+        onclick: () => alert('clicked'),
+        hasTrailingIcon: true
+    }
+};
 
 export const Secondary = {
 	args: {
@@ -32,3 +40,5 @@ export const Secondary = {
 		hasTrailingIcon: false
 	}
 };
+
+

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

@@ -7,13 +7,15 @@
 
 	interface ISettingsNaviationButtonProps extends HTMLButtonAttributes {
 		leadingIcon?: Snippet;
+		profileSrc?: string;
 		children: Snippet;
 		onclick: () => void;
-		hasTrailingIcon: boolean;
+		hasTrailingIcon?: boolean;
 	}
 
 	let {
 		leadingIcon,
+		profileSrc,
 		children,
 		onclick,
 		hasTrailingIcon = true,
@@ -27,12 +29,21 @@
 	<div class="flex items-center gap-2">
 		{#if leadingIcon}
 			<div
-				class="bg-brand-burnt-orange-100 flex h-10 w-10 items-center justify-center rounded-full"
+				class="bg-brand-burnt-orange-100 flex size-8 items-center justify-center rounded-full md:size-10"
 			>
 				{@render leadingIcon?.()}
 			</div>
 		{/if}
-		<h3 class="text-black-800 font-semibold">
+		{#if profileSrc}
+			<img
+				width="24px"
+				height="24px"
+				class="flex aspect-square size-10 items-center justify-center rounded-full md:size-12"
+				src={profileSrc}
+				alt=""
+			/>
+		{/if}
+		<h3 class="text-black-800 text-base font-semibold">
 			{@render children?.()}
 		</h3>
 	</div>