rewrite frontend with DaisyUI

src/views/Home.svelte

@@ -1,7 +1,8 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte';
     import { invoke } from '@tauri-apps/api/tauri';
-    import Button from '../ui/Button.svelte';
+
+    import Icon from '../ui/Icon.svelte';
 
     export let appState;
 
@@ -21,14 +22,35 @@
     })
 </script>
 
-<h1 class="text-4xl text-gray-300">Creddy</h1>
 
-<p>Credential status: {status}</p>
+<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
+    <div id="nav-left flex">
+        <button class="btn btn-squre btn-ghost align-middle">
+            <Icon name="home" class="w-8 h-8 stroke-2" />
+        </button>
+    </div>
+    <div id="nav-right" class="justify-self-end">
+        <button class="align-middle btn btn-square btn-ghost">
+            <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
+        </button>
+    </div>
+</nav>
 
 {#if status === 'locked'}
-    <Button on:click={() => dispatch('navigate', {target: 'Unlock'})}>Unlock</Button>
+    <div class="flex flex-col h-screen justify-center items-center space-y-4">
+        <img src="/static/padlock-closed.svg" alt="An unlocked padlock" class="w-32" />
+        <h2 class="text-2xl font-bold">Creddy is locked</h2>
+        <button class="btn btn-primary" on:click={() => dispatch('navigate', {target: 'Unlock'})}>Unlock</button>
+    </div>
+
+{:else if status === 'unlocked'}
+    <div class="flex flex-col h-screen justify-center items-center space-y-4">
+        <img src="/static/padlock-open.svg" alt="An unlocked padlock" class="w-24" />
+        <h2 class="text-2xl font-bold">Creddy is ready</h2>
+    </div>
+
 {:else if status === 'empty'}
-    <Button on:click={() => dispatch('navigate', {target: 'EnterCredentials'})}>
+    <button class="btn btn-primary" on:click={() => dispatch('navigate', {target: 'EnterCredentials'})}>
         Enter Credentials
-    </Button>
+    </button>
 {/if}