change frontpage image and toast animation

src/ui/Link.svelte

@@ -7,6 +7,9 @@
     export let alt = false;
     export let shift = false;
 
+    let classes = "";
+    export {classes as class};
+
     function click() {
         if (typeof target === 'string') {
             navigate(target);
@@ -38,6 +41,6 @@
 
 <svelte:window on:keydown={handleHotkey} />
 
-<a href="#" on:click="{click}">
+<a href="#" on:click="{click}" class={classes}>
     <slot></slot>
 </a>

src/ui/Nav.svelte

@@ -1,10 +1,12 @@
 <script>
     import Link from './Link.svelte';
     import Icon from './Icon.svelte';
+
+    export let position = "sticky";
 </script>
 
 
-<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
+<nav class="{position} top-0 bg-base-100 w-full flex justify-between items-center p-2">
     <div>
         <Link target="Home">
             <button class="btn btn-square btn-ghost align-middle">
@@ -13,7 +15,11 @@
         </Link>
     </div>
 
-    <div class="justify-self-end">
+    {#if $$slots.title}
+        <slot name="title"></slot>
+    {/if}
+
+    <div>
         <Link target="Settings">
             <button class="btn btn-square btn-ghost align-middle ">
                 <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />

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">
+            <Link target="Unlock" class="w-64">
-                <button class="btn btn-primary">Unlock</button>
+                <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">
+            {@html vaultDoorSvg}
-                <button class="btn btn-primary">Enter Credentials</button>
+            <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}

src/views/Settings.svelte

@@ -7,6 +7,9 @@
     import ErrorAlert from '../ui/ErrorAlert.svelte';
     import { Setting, ToggleSetting, NumericSetting } from '../ui/settings';
 
+    import { fly } from 'svelte/transition';
+    import { backInOut } from 'svelte/easing';
+
 
     let error = null;
     async function save() {
@@ -21,11 +24,13 @@
 </script>
 
 
-<Nav />
+<Nav>
+    <h2 slot="title" class="text-2xl font-bold">Settings</h2>
+</Nav>
 
 {#await invoke('get_config') then config}
     <div class="max-w-md mx-auto mt-1.5 p-4">
-        <h2 class="text-2xl font-bold text-center">Settings</h2>
+        <!-- <h2 class="text-2xl font-bold text-center">Settings</h2> -->
 
         <ToggleSetting title="Start on login" bind:value={$appState.config.start_on_login} on:update={save}>
             <svelte:fragment slot="description">
@@ -66,8 +71,8 @@
 {/await}
 
 {#if error}
-    <div class="toast">
+    <div transition:fly={{y: 100, easing: backInOut, duration: 400}} class="toast">
-        <div class="alert alert-error">
+        <div class="alert alert-error no-animation">
             <div>
                 <span>{error}</span>
             </div>