Add lots of style and layout

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>