MetaState-Prototype-Project · sosweetham · May 5, 2025 · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025
@@ -22,7 +22,7 @@ android {
         minSdk = 24
         targetSdk = 34
         versionCode = tauriProperties.getProperty("tauri.android.versionCode", "1").toInt()
-        versionName = tauriProperties.getProperty("tauri.android.versionName", "1.0")
+        versionName = tauriProperties.getProperty("tauri.android.versionName", "1.0")    
     }
     buildTypes {
         getByName("debug") {

@@ -75,6 +75,7 @@ body {
     padding-bottom: env(safe-area-inset-bottom);
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
+    background-color: var(--color-primary);
 }
 
 /* Ensure background remains correct during transitions */

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

@@ -92,6 +92,7 @@ function shareQR() {
 <Button.Nav href="/scan-qr">
     <Button.Action
         variant="solid"
+        size="sm"
         onclick={() => alert("Action button clicked!")}
         class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
     >

@@ -26,34 +26,34 @@ $effect(() => {
 });
 </script>
 
-<main class="h-[calc(100vh-14vh)] flex flex-col justify-between pt-[3vh]">
+<main class="h-[calc(100svh-14svh)] flex flex-col justify-between pt-[3svh]">
     <section>
         <div>
-            <p class="mb-[1vh]">Enter you current PIN</p>
+            <p class="mb-[1svh]">Enter you current PIN</p>
             <InputPin bind:pin={currentPin} variant="sm"/>
         </div>
         <div>
-            <p class="mb-[1vh]">Enter your new PIN</p>
+            <p class="mb-[1svh]">Enter your new PIN</p>
             <InputPin bind:pin={newPin} {isError} variant="sm"/>
         </div>
         <div>
-            <p class="mb-[1vh]">Confirm new PIN</p>
+            <p class="mb-[1svh]">Confirm new PIN</p>
             <InputPin bind:pin={repeatPin} {isError} variant="sm"/>
         </div>
-        <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
+        <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
     </section>
     <ButtonAction class="w-full" callback={handleChangePIN}>Change PIN</ButtonAction>
 </main>
 
 <Drawer bind:isPaneOpen={showDrawer}>
-        <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
+        <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3svh]">
             <span class="relative z-[1]">
                 <HugeiconsIcon icon={CircleLock01Icon} color="var(--color-primary)"/>
             </span>
             <img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
             <img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
         </div>
         <h4>Pin code changed!</h4>
-        <p class="text-black-700 mt-[0.5vh] mb-[2.3vh]">Your PIN has been changed.</p>
+        <p class="text-black-700 mt-[0.5svh] mb-[2.3svh]">Your PIN has been changed.</p>
         <ButtonAction class="w-full" callback={handleClose}>Close</ButtonAction>
 </Drawer>
@@ -10,7 +10,7 @@ const handleFinish = async () => {
 </script>
 
 
-<main class="h-[max-content] pt-[5.2vh] px-[5vw] pb-[4.5vh] 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"
@@ -25,9 +25,9 @@ const handleFinish = async () => {
 			Passport: "234dfvgsdfg",
 		}}/>
     </section>
-    <section class="mt-[4vh] mb-[9vh]">
+    <section class="mt-[4svh] mb-[9svh]">
         <h4>Your eVault</h4>
-        <p class="text-black-700 mb-[1vh]">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
+        <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}/>

@@ -81,15 +81,15 @@ onMount(async () => {
 });
 </script>
 
-<main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
+<main class="h-screen pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between">
     <section>
         <Hero
         title="Log in to your account"
         subtitle="Enter your 4-digit PIN code"
         class="mb-4"
         />
         <InputPin variant="sm" bind:pin isError={isError} onchange={() => handlePinInput(pin)} />
-        <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
+        <p class={`text-danger mt-[3.4svh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
     </section>
     <Button.Action class={`w-full`} variant="danger" callback={clearPin}>
         Clear Pin

@@ -16,11 +16,11 @@ const handleNext = async () => {
 };
 </script>
 
-<main class="pt-[3vh] px-[5vw] pb-[4.5vh]">
-    <article class="flex justify-center mb-[4vh]">
-        <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
+<main class="h-[100dsvh] pt-[3svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between">
+    <article class="flex justify-center">
+        <img class="w-[88vw] h-[39svh]" src="/images/Onboarding.svg" alt="Infographic card">
     </article>
-    <section class="mb-[9.3vh]">
+    <section>
         <Hero
         subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
         class="mb-4"
@@ -33,17 +33,17 @@ const handleNext = async () => {
     </section>
     <section>
         <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>
-        <div class="flex justify-center whitespace-nowrap mt-[2vh]">
+        <div class="flex justify-center whitespace-nowrap mt-[2svh]">
             <ButtonAction class="w-full" callback={handleGetStarted}>Get Started</ButtonAction>
         </div>
     </section>
 </main>
 
 <Drawer bind:isPaneOpen>
     <img src="/images/GetStarted.svg" alt="get-started">
-    <h4 class="mt-[2.3vh] mb-[0.5vh]">Welcome to Web 3 Data Spaces</h4>
+    <h4 class="mt-[2.3svh] mb-[0.5svh]">Welcome to Web 3 Data Spaces</h4>
     <p class="text-black-700">Your eName is more than a name—it's your unique digital passport. One constant identifier that travels with you across the internet, connecting your real-world self to the digital universe.</p>
-    <div class="flex justify-center whitespace-nowrap my-[2.3vh]">
+    <div class="flex justify-center whitespace-nowrap my-[2.3svh]">
         <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
     </div>
 </Drawer>
@@ -86,25 +86,25 @@ onMount(async () => {
 </script>
 
 {#if firstStep}
-    <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
+    <main class="h-screen pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between">
         <section>
             <Hero
             title="Create a pin"
             subtitle="Enter a 4-digit PIN code"
-            class="mb-[14vh]"
+            class="mb-[14svh]"
             />
             <InputPin bind:pin isError={isError && pin.length === 0}/>
-            <p class={`text-danger mt-[3.4vh] ${isError && pin.length === 0 ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
+            <p class={`text-danger mt-[3.4svh] ${isError && pin.length === 0 ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
         </section>
         <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
     </main>
 {:else}
-    <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
+    <main class="h-screen pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between">
         <section>
             <Hero
             title="Re-enter your pin"
                 subtitle="Confirm by entering pin again"
-            class="mb-[14vh]"
+            class="mb-[14svh]"
             />
             <InputPin bind:pin={repeatPin}/>
         </section>
@@ -115,26 +115,26 @@ onMount(async () => {
 
 <Drawer bind:isPaneOpen={showDrawer}>
     {#if !isBiometricScreen}
-        <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
+        <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3svh]">
             <span class="relative z-[1]">
                 <HugeiconsIcon icon={CircleLock01Icon} color="var(--color-primary)"/>
             </span>
             <img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
             <img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
         </div>
         <h4>Pin code set!</h4>
-        <p class="text-black-700 mt-[0.5vh] mb-[2.3vh]">Your PIN has been created. You’ll use it to access your digital entity securely.</p>
+        <p class="text-black-700 mt-[0.5svh] mb-[2.3svh]">Your PIN has been created. You’ll use it to access your digital entity securely.</p>
         <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
     {:else}
-        <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
+        <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3svh]">
             <span class="relative z-[1]">
                 <HugeiconsIcon icon={FaceIdIcon} color="var(--color-primary)" />
             </span>
             <img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
             <img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
         </div>
         <h4>{isBiometricsAdded ? "You’re all set!" : "Add biometrics"}</h4>
-        <p class="text-black-700 mt-[0.5vh] mb-[2.3vh]">{ isBiometricsAdded ? "Your biometrics have been successfully added." : "Use your fingerprint or face recognition for faster, more secure logins."}</p>
+        <p class="text-black-700 mt-[0.5svh] mb-[2.3svh]">{ isBiometricsAdded ? "Your biometrics have been successfully added." : "Use your fingerprint or face recognition for faster, more secure logins."}</p>
         {#if !isBiometricsAdded}
             <div class="flex justify-center items-center gap-[11px]">
                 <ButtonAction class="w-full bg-primary-100 text-primary" callback={handleSkip}>Skip</ButtonAction>

@@ -8,7 +8,7 @@ const handleNext = async () => {
 };
 </script>
 
-<main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
+<main class="h-screen pt-[5.2svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between">
     <section>
         <Hero
             title="Here’s your eName"

@@ -25,7 +25,7 @@ onMount(() => {
 });
 </script>
 
-<main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
+<main class="h-screen pt-[3svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between items-center">
     <section>
         <Hero
             title="Verify your account"

@@ -91,5 +91,7 @@ onNavigate((navigation) => {
 {#if showSplashScreen}
     <SplashScreen />
 {:else}
-    {@render children?.()}
+    <div class="bg-white h-[100dvh] overflow-scroll">
+        {@render children?.()}
+    </div>
 {/if}