Add lots of style and layout

2 files changed, 33 insertions, 6 deletions

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>