From b892bd9fdba5fe9397f3c4432b3039aa961b7a14 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Fri, 27 Sep 2024 23:08:56 -0400
Subject: Add lots of style and layout

---
 hi-ui/src/lib/Channel.svelte    |  4 ++--
 hi-ui/src/lib/LogOut.svelte     | 12 +++++++++++-
 hi-ui/src/routes/+layout.svelte | 11 ++++++++++-
 hi-ui/src/routes/+page.svelte   | 28 +++++++++++++++++++++++-----
 4 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/Channel.svelte
index 80c4505..7826c46 100644
--- a/hi-ui/src/lib/Channel.svelte
+++ b/hi-ui/src/lib/Channel.svelte
@@ -15,8 +15,8 @@
 </script>
 
 <li
-    class="cursor-pointer hover:bg-teal-100"
-    class:bg-teal-300={active}
+    class="cursor-pointer hover:bg-slate-300"
+    class:bg-slate-400={active}
     on:click={activate}
 >
     #{name}
diff --git a/hi-ui/src/lib/LogOut.svelte b/hi-ui/src/lib/LogOut.svelte
index 439a530..64d26c9 100644
--- a/hi-ui/src/lib/LogOut.svelte
+++ b/hi-ui/src/lib/LogOut.svelte
@@ -2,6 +2,12 @@
     import { logOut} from '../apiServer';
     import { currentUser } from '../store';
 
+    let user;
+
+    currentUser.subscribe((value) => {
+        user = value;
+    });
+
     async function handleLogout(event) {
         event.preventDefault();
         const response = await logOut();
@@ -12,7 +18,11 @@
 </script>
 
 <form on:submit={handleLogout}>
-    <button type="submit">log out</button>
+    @{user.username}
+    <button
+        class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
+        type="submit"
+    >log out</button>
 </form>
 
 <style>
diff --git a/hi-ui/src/routes/+layout.svelte b/hi-ui/src/routes/+layout.svelte
index e3c6561..3673e58 100644
--- a/hi-ui/src/routes/+layout.svelte
+++ b/hi-ui/src/routes/+layout.svelte
@@ -2,6 +2,15 @@
   import "../app.css";
 </script>
 
-<div class="container mx-auto">
+<div id="app">
     <slot />
 </div>
+
+<style>
+    #app {
+        margin: 0;
+        padding: 1rem;
+        height: 100vh;
+        width: 100%;
+    }
+</style>
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte
index 4ef26db..6025b6f 100644
--- a/hi-ui/src/routes/+page.svelte
+++ b/hi-ui/src/routes/+page.svelte
@@ -46,17 +46,35 @@
 {#if loading}
     <h2>Loading&hellip;</h2>
 {:else if user != null}
-    <LogOut /> @{user.username}
-    <div class="flex flex-row">
-        <div class="basis-1/4 border-solid border-2 border-sky-500">
+    <LogOut />
+    <div id="interface">
+        <div>
             <ChannelList />
-            <CreateChannelForm />
         </div>
-        <div class="basis-3/4 border-solid border-2 border-sky-500">
+        <div>
             <ActiveChannel />
+        </div>
+        <div>
+            <CreateChannelForm />
+        </div>
+        <div>
             <MessageInput />
         </div>
     </div>
 {:else}
     <LogIn />
 {/if}
+
+<style>
+    #interface {
+        height: 90%;
+        margin: 1rem;
+        display: grid;
+        grid-template-columns: 18rem auto;
+        grid-template-rows: auto 2rem;
+        grid-gap: 0.25rem;
+    }
+    #interface div {
+        border: 1px solid grey;
+    }
+</style>
-- 
cgit v1.2.3