feat: improve header fragment

infrastructure/eid-wallet/src/app.css

@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
-		@apply text-[90px] text-black font-semibold;
+		@apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
-		@apply text-6xl text-black font-semibold;
+		@apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
-		@apply text-3xl text-black font-semibold;
+		@apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
-		@apply text-xl text-black font-semibold;
+		@apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
-		@apply text-base text-black font-normal;
+		@apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
-		@apply text-xs text-black font-normal;
+		@apply text-xs/[1.5] text-black font-normal;
 	}
 }
 
@@ -71,4 +71,8 @@
 
 body {
 	font-family: "Archivo", sans-serif;
+	padding-top: env(safe-area-inset-top);
+	padding-bottom: env(safe-area-inset-bottom);
+	padding-left: env(safe-area-inset-left);
+	padding-right: env(safe-area-inset-right);
 }

infrastructure/eid-wallet/src/app.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preload" href="/fonts/Archivo-VariableFont_wdth,wght.ttf" as="font" type="truetype" crossorigin="anonymous">
     <title>Tauri + SvelteKit + Typescript App</title>
     %sveltekit.head%
   </head>

infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.stories.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+		Component: Hero;
+		props: ComponentProps<typeof Hero>;
+	}) => ({
+		Component: Hero,
+		props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+		title: "Create PIN",
+		subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+		title: "Good morning!",
+		subtitle: "Don't forget to drink water.",
+		titleClasses: "-mb-2",
+		showSettings: true,
+	},
+};

infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+import * as Button from "$lib/ui/Button";
+
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+    <div class="flex flex-col items-start">
+            <h3 class={cn(titleClasses)}>
+                {@render children?.()}
+                {title}
+            </h3>
+        {#if subtitle}
+            <p class="text-black-700 mt-2">{subtitle}</p>
+        {/if}
+    </div>
+    {#if showSettings}
+        <Button.Nav href="/settings">
+            <Button.Icon
+                icon={Settings02Icon}
+                iconSize="lg"
+            />
+        </Button.Nav>
+    {:else}
+        <span aria-hidden="true"></span>
+    {/if}
+</header>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -20,7 +21,7 @@ interface IIdentityCard extends HTMLAttributes<HTMLElement> {
 	usedStorage?: number;
 }
 
-let {
+const {
 	variant = "eName",
 	userId,
 	viewBtn,
@@ -40,30 +41,25 @@ $effect(() => {
 });
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"}  rounded-xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"}  rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
     <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
         <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
         <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
     </div>
     <div class="p-5 flex flex-col gap-2">
         <div class="flex justify-between">
             {#if variant === 'eName'}  
-                <HugeiconsIcon size={30} strokeWidth={2} color="var(--color-secondary)" icon={CheckmarkBadge02Icon} />
-                <div class="flex gap-3 items-center"> 
-                    <button class="flex justify-start" onclick={shareBtn}>
-                        <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={Upload03Icon} />
-                    </button>
-                    <button class="flex justify-start" onclick={viewBtn}>
-                        <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
-                    </button>
-                </div>
+                <HugeiconsIcon size={30} strokeWidth={2} className="text-secondary" icon={CheckmarkBadge02Icon} />
+                <div class="flex gap-3 items-center">  
+                    <Button.Icon icon={Upload03Icon} iconColor={"white"} strokeWidth={2} onclick={shareBtn} />
+                    <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+                    </div>
             {:else if variant === 'ePassport'}
-                <p class="bg-white flex items-center rounded-4xl px-5 py-2 small font-semibold">HIGH SECURITY</p>
-                <button class="flex justify-start" onclick={viewBtn}>
-                    <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
-                </button>
+                <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+                <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+
             {:else if variant === 'eVault'}
-            <h3 class="text-black-300 font-semibold mb-3">{state.progressWidth} Used</h3>
+                <div class="text-black-300 text-3xl mb-3">{state.progressWidth} Used</div>
             {/if}
         </div>
         <div>
@@ -98,4 +94,5 @@ $effect(() => {
     </div>
 </div>
 
-
+
+

infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { cubicOut } from "svelte/easing";
+import { fade, scale } from "svelte/transition";
+</script>
+
+<div  out:fade={{duration: 150}} class="z-50 absolute w-screen h-screen overflow-hidden" >
+    <div  class="relative w-screen h-screen bg-primary overflow-hidden">
+
+        <img in:scale={{start: 0.8, duration: 500, easing: cubicOut, opacity: 1 }} class="absolute w-full bottom-[-80px] start-0" src="/images/Shape1.svg" alt="illustration">
+        <img in:scale={{start: 0.8, duration: 500, easing: cubicOut, opacity: 1 }} class="absolute w-full top-[50px] end-[100px]" src="/images/Shape2.svg" alt="illustration">
+        <div in:scale={{start: 0.9, duration: 500, easing: cubicOut, opacity: 1 }}  class="absolute w-full top-[42%] start-[50%] translate-x-[-50%] translate-y-[-42%]">
+            <h1 in:fade={{duration: 500}} class="text-center text-white text-[44px]">eAgency</h1>
+            <p in:fade={{duration: 500}} class="text-center text-white">Your self-sovereign digital entity</p>
+        </div>
+        <img in:fade={{duration: 500}} class="absolute bottom-[116px] start-[50%] translate-x-[-50%]" src="/images/W3DSLogoWhite.svg" alt="logo">
+    </div>
+</div>
+
+<style>
+
+</style>

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

@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts

@@ -1,15 +1,12 @@
-import { FlashlightIcon } from "@hugeicons/core-free-icons";
+import { FlashlightIcon, ViewIcon } from "@hugeicons/core-free-icons";
 import type { ComponentProps } from "svelte";
 import ButtonIcon from "./ButtonIcon.svelte";
 
 export default {
 	title: "UI/ButtonIcon",
 	component: ButtonIcon,
 	tags: ["autodocs"],
-	render: (args: {
-		Component: ButtonIcon<{ icon: typeof FlashlightIcon }>;
-		props: ComponentProps<typeof ButtonIcon>;
-	}) => ({
+	render: (args: ComponentProps<typeof ButtonIcon>) => ({
 		Component: ButtonIcon,
 		props: args,
 	}),
@@ -19,10 +16,26 @@ export const Default = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
 			ariaLabel: "Default button",
-			size: "md",
+			bgSize: "md", // Predefined size
+			iconSize: "md",
+			icon: ViewIcon,
+			bgColor: "black",
+			iconColor: "white",
+		},
+	}),
+};
+
+export const CustomSize = {
+	render: () => ({
+		Component: ButtonIcon,
+		props: {
+			ariaLabel: "Custom sized button",
+			bgSize: "w-[120px] h-[120px]", // Custom Tailwind size
+			iconSize: 56, // Custom pixel size
 			icon: FlashlightIcon,
+			bgColor: "bg-danger",
+			iconColor: "white",
 		},
 	}),
 };
@@ -31,24 +44,32 @@ export const Loading = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
 			ariaLabel: "Loading button",
-			size: "md",
+			bgSize: "md",
+			iconSize: "md",
 			icon: FlashlightIcon,
 			isLoading: true,
+			bgColor: "black",
+			iconColor: "white",
 		},
 	}),
 };
 
-export const Active = {
+export const WithCallback = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
-			ariaLabel: "Active button",
-			size: "md",
+			ariaLabel: "Button with async callback",
+			bgSize: "md",
+			iconSize: "md",
 			icon: FlashlightIcon,
-			isActive: true,
+			callback: async () => {
+				await new Promise((resolve) => setTimeout(resolve, 2000));
+				console.log("Action completed!");
+			},
+			blockingClick: true,
+			bgColor: "primary",
+			iconColor: "white",
 		},
 	}),
 };