Style more things

6 files changed, 36 insertions, 31 deletions

diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/Channel.svelte
index ad07594..9922af6 100644
--- a/hi-ui/src/lib/Channel.svelte
+++ b/hi-ui/src/lib/Channel.svelte
@@ -15,9 +15,12 @@
 </script>
 
 <li
-    class="cursor-pointer hover:bg-slate-300"
+    class="rounded-full"
     class:bg-slate-400={active}
     on:click={activate}
 >
-    #{name}
+<a href="">
+    <span class="badge bg-primary-500">#</span>
+    <span class="flex-auto">{name}</span>
+</a>
 </li>
diff --git a/hi-ui/src/lib/ChannelList.svelte b/hi-ui/src/lib/ChannelList.svelte
index ba48e5d..80d903e 100644
--- a/hi-ui/src/lib/ChannelList.svelte
+++ b/hi-ui/src/lib/ChannelList.svelte
@@ -9,12 +9,10 @@
     });
 </script>
 
-<ul class="select-none">
-    {#each channels as channel}
-        <Channel {...channel} />
-    {/each}
-</ul>
-
-<style>
-</style>
-
+<nav class="list-nav">
+    <ul>
+        {#each channels as channel}
+            <Channel {...channel} />
+        {/each}
+    </ul>
+</nav>
diff --git a/hi-ui/src/lib/CreateChannelForm.svelte b/hi-ui/src/lib/CreateChannelForm.svelte
index 265ab7e..6b4b7a4 100644
--- a/hi-ui/src/lib/CreateChannelForm.svelte
+++ b/hi-ui/src/lib/CreateChannelForm.svelte
@@ -14,8 +14,8 @@
     }
 </script>
 
-<form on:submit|preventDefault={handleSubmit} class="form form-row">
-    <input type="text" placeholder="channel name" bind:value={name} disabled={disabled} class="flex-auto h-6" />
+<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>
 </form>
 
diff --git a/hi-ui/src/lib/Message.svelte b/hi-ui/src/lib/Message.svelte
index 0e7cdaf..efc6641 100644
--- a/hi-ui/src/lib/Message.svelte
+++ b/hi-ui/src/lib/Message.svelte
@@ -3,28 +3,29 @@
     import { currentUser } from '../store';
     import { deleteMessage } from '../apiServer';
 
-    export let at;
+    export let at;  // XXX: Omitted for now.
     export let sender;
     export let message;
 
     let timestamp = new Date(at).toTimeString();
 </script>
 
-<div class="hover:bg-zinc-300 flex flex-row">
-    <div class="sender basis-20 text-right mr-1">
+<div class="card card-hover m-4 relative">
+    <span class="chip variant-soft sticky top-o left-0">
+        <!-- TODO: should this show up for only the first of a run? -->
         @{sender.name}:
-    </div>
-    <div class="body grow">
+    </span>
+    <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
+    <section class="p-4">
         <SvelteMarkdown source={message.body} />
-    </div>
-    <div class="timestamp basis-6">
-        <!-- TODO: this is too long and looks awful. -->
-        <!-- {timestamp} -->
-    </div>
+    </section>
 </div>
 
 <style>
-    div:hover .controls {
-        display: block;
+    .card .timestamp {
+        display: none;
+    }
+    .card:hover .timestamp {
+        display: flex;
     }
 </style>
diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
index 9e78348..e526fe8 100644
--- a/hi-ui/src/lib/MessageInput.svelte
+++ b/hi-ui/src/lib/MessageInput.svelte
@@ -24,7 +24,7 @@
     }
 </script>
 
-<form on:submit|preventDefault={handleSubmit} class="flex flex-row">
-    <input bind:this={input} bind:value={value} disabled={disabled} type="search" class="flex-auto h-6" />
+<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>
 </form>
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte
index 1a61b3e..cae1aff 100644
--- a/hi-ui/src/routes/+page.svelte
+++ b/hi-ui/src/routes/+page.svelte
@@ -61,16 +61,16 @@
 {:else if user != null}
     <LogOut />
     <div id="interface">
-        <div>
+        <div class="channel-list">
             <ChannelList />
         </div>
-        <div>
+        <div class="active-channel">
             <ActiveChannel />
         </div>
-        <div>
+        <div class="create-channel">
             <CreateChannelForm />
         </div>
-        <div>
+        <div class="create-message">
             <MessageInput />
         </div>
     </div>
@@ -90,6 +90,9 @@
     #interface div {
         max-height: 100%;
         overflow: scroll;
+    }
+    #interface .active-channel {
         border: 1px solid grey;
+        border-radius: 1.25rem;
     }
 </style>