change frontpage image and toast animation

src/views/Home.svelte

@@ -8,6 +8,8 @@
     import Icon from '../ui/Icon.svelte';
     import Link from '../ui/Link.svelte';
 
+    import vaultDoorSvg from '../assets/vault_door.svg?raw';
+
 
     onMount(async () => {
         // will block until a request comes in
@@ -18,24 +20,31 @@
 </script>
 
 
-<Nav />
+<Nav position="fixed">
+    <h2 slot="title" class="text-3xl font-bold">Creddy</h2>
+</Nav>
 
 <div class="flex flex-col h-screen items-center justify-center p-4 space-y-4">
     {#await invoke('get_session_status') then status}
         {#if status === 'locked'}
-            <img src="/static/padlock-closed.svg" alt="A locked padlock" class="w-32" />
+            <!-- <img src={closedPadlockUrl} alt="A locked padlock" class="w-32" /> -->
+
+            {@html vaultDoorSvg}
+
             <h2 class="text-2xl font-bold">Creddy is locked</h2>
-            <Link target="Unlock">
-                <button class="btn btn-primary">Unlock</button>
+            <Link target="Unlock" class="w-64">
+                <button class="btn btn-primary w-full">Unlock</button>
             </Link>
 
         {:else if status === 'unlocked'}
-            <img src="/static/padlock-open.svg" alt="An unlocked padlock" class="w-24" />
+            {@html vaultDoorSvg}
             <h2 class="text-2xl font-bold">Waiting for requests</h2>
 
         {:else if status === 'empty'}
-            <Link target="EnterCredentials">
-                <button class="btn btn-primary">Enter Credentials</button>
+            {@html vaultDoorSvg}
+            <h2 class="text-2xl font-bold">No credentials found</h2>
+            <Link target="EnterCredentials" class="w-64">
+                <button class="btn btn-primary w-full">Enter Credentials</button>
             </Link>
         {/if}
     {/await}