All kinds of styling

6 files changed, 27 insertions, 27 deletions

diff --git a/hi-ui/src/lib/CreateChannelForm.svelte b/hi-ui/src/lib/CreateChannelForm.svelte
index 6b4b7a4..8910b4d 100644
--- a/hi-ui/src/lib/CreateChannelForm.svelte
+++ b/hi-ui/src/lib/CreateChannelForm.svelte
@@ -15,8 +15,8 @@
 </script>
 
 <form on:submit|preventDefault={handleSubmit} class="form form-row flex-nowrap">
-    <input type="text" placeholder="create channel" bind:value={name} disabled={disabled} class="input flex-auto h-6" />
-    <button type="submit" class="flex-none w-4 h-4">&#x2795;</button>
+    <input type="text" placeholder="create channel" bind:value={name} disabled={disabled} class="input flex-auto h-6 w-9/12" />
+    <button type="submit" class="flex-none w-6 h-6">&#x2795;</button>
 </form>
 
 <style>
diff --git a/hi-ui/src/lib/LogIn.svelte b/hi-ui/src/lib/LogIn.svelte
index 1ec6772..4ffcdab 100644
--- a/hi-ui/src/lib/LogIn.svelte
+++ b/hi-ui/src/lib/LogIn.svelte
@@ -18,22 +18,18 @@
     }
 </script>
 
-<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" on:submit|preventDefault={handleLogin}>
-    <div class="mb-4">
-        <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
+<div class="card m-4 p-4">
+    <form on:submit|preventDefault={handleLogin}>
+        <label class="label" for="username">
             username
+            <input class="input" name="username" type="text" placeholder="username" bind:value={username} disabled={disabled}>
         </label>
-        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" name="username" type="text" placeholder="username" bind:value={username} disabled={disabled}>
-    </div>
-    <div class="mb-6">
-        <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+        <label class="label" for="password">
             password
+            <input class="input" name="password" type="password" placeholder="password" bind:value={password} disabled={disabled}>
         </label>
-        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" name="password" type="password" placeholder="password" bind:value={password} disabled={disabled}>
-    </div>
-    <div class="flex items-center justify-between">
-        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
+        <button class="btn variant-filled" type="submit">
             sign in or up
         </button>
-    </div>
-</form>
+    </form>
+</div>
diff --git a/hi-ui/src/lib/LogOut.svelte b/hi-ui/src/lib/LogOut.svelte
index 738be24..0f0bb13 100644
--- a/hi-ui/src/lib/LogOut.svelte
+++ b/hi-ui/src/lib/LogOut.svelte
@@ -2,12 +2,6 @@
     import { logOut} from '../apiServer';
     import { currentUser } from '../store';
 
-    let user;
-
-    currentUser.subscribe((value) => {
-        user = value;
-    });
-
     async function handleLogout(event) {
         const response = await logOut();
         if (200 <= response.status && response.status < 300) {
@@ -17,7 +11,7 @@
 </script>
 
 <form on:submit|preventDefault={handleLogout}>
-    @{user.username}
+    @{$currentUser.username}
     <button
         class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
         type="submit"
diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
index e526fe8..2e81ee2 100644
--- a/hi-ui/src/lib/MessageInput.svelte
+++ b/hi-ui/src/lib/MessageInput.svelte
@@ -25,6 +25,6 @@
 </script>
 
 <form on:submit|preventDefault={handleSubmit} class="flex flex-row flex-nowrap">
-    <input bind:this={input} bind:value={value} disabled={disabled} type="search" class="flex-auto h-6 input" />
-    <button color="primary variant-filled-secondary" type="submit" class="flex-none w-4 h-4">&raquo;</button>
+    <input bind:this={input} bind:value={value} disabled={disabled} type="search" class="flex-auto h-6 input rounded-r-none" />
+    <button color="primary variant-filled-secondary" type="submit" class="flex-none w-6 h-6 btn-icon variant-filled rounded-l-none">&raquo;</button>
 </form>
diff --git a/hi-ui/src/routes/+layout.svelte b/hi-ui/src/routes/+layout.svelte
index f54f3bf..28ae4ec 100644
--- a/hi-ui/src/routes/+layout.svelte
+++ b/hi-ui/src/routes/+layout.svelte
@@ -1,9 +1,21 @@
 <script>
+  import { AppBar } from '@skeletonlabs/skeleton';
   import "../app.css";
+
+  import { currentUser } from '../store';
+  import LogOut from '../lib/LogOut.svelte';
 </script>
 
 <div id="app">
-    <h1>hi</h1>
+    <AppBar>
+        <svelte:fragment slot="lead">🌳</svelte:fragment>
+        understory
+        <svelte:fragment slot="trail">
+            {#if $currentUser}
+                <LogOut />
+            {/if}
+        </svelte:fragment>
+    </AppBar>
 
     <slot />
 </div>
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte
index cae1aff..932582d 100644
--- a/hi-ui/src/routes/+page.svelte
+++ b/hi-ui/src/routes/+page.svelte
@@ -8,7 +8,6 @@
     import ChannelList from '../lib/ChannelList.svelte';
     import CreateChannelForm from '../lib/CreateChannelForm.svelte';
     import LogIn from '../lib/LogIn.svelte';
-    import LogOut from '../lib/LogOut.svelte';
     import MessageInput from '../lib/MessageInput.svelte';
 
     let user;
@@ -59,7 +58,6 @@
 {#if loading}
     <h2>Loading&hellip;</h2>
 {:else if user != null}
-    <LogOut />
     <div id="interface">
         <div class="channel-list">
             <ChannelList />