From dd62b823e01934a0f841256fdb17b551091896bf Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Tue, 8 Oct 2024 22:58:17 -0400
Subject: All kinds of styling

---
 hi-ui/src/lib/LogIn.svelte | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

(limited to 'hi-ui/src/lib/LogIn.svelte')

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>
-- 
cgit v1.2.3