All kinds of styling

4 files changed, 14 insertions, 24 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>