fix: login UI

frontend/src/Login.tsx

@@ -3,7 +3,7 @@ import { TextField } from "@kobalte/core/text-field";
 import { Navigate } from "@solidjs/router";
 import { type Component, Show, createSignal } from "solid-js";
 import { isTokenValid } from "./ProtectedRoute";
-import { base, postCode, postLogin } from "./network";
+import { postCode, postLogin } from "./network";
 
 export const Login: Component = () => {
     let form: HTMLFormElement | undefined;
@@ -32,8 +32,6 @@ export const Login: Component = () => {
                 code.toString(),
             );
 
-            console.log(access, refresh);
-
             localStorage.setItem("access", access);
             localStorage.setItem("refresh", refresh);
 
@@ -44,23 +42,37 @@ export const Login: Component = () => {
     const isAuthorized = isTokenValid();
 
     return (
-        <>
-            {base}
-            <Show when={!isAuthorized} fallback={<Navigate href="/" />}>
-                <form ref={form} onSubmit={onSubmit}>
-                    <TextField name="email">
-                        <TextField.Label>Email</TextField.Label>
-                        <TextField.Input />
+        <Show when={!isAuthorized} fallback={<Navigate href="/" />}>
+            <form
+                ref={form}
+                onSubmit={onSubmit}
+                class="flex flex-col gap-2 mt-4 w-72"
+            >
+                <TextField name="email" class="flex flex-col gap-4">
+                    <TextField.Label class="text-xl font-semibold">
+                        Email
+                    </TextField.Label>
+                    <TextField.Input
+                        pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
+                        type="email"
+                        class="rounded px-1 py-2"
+                    />
+                </TextField>
+                <Show when={submitted()}>
+                    <TextField name="code" class="flex flex-col gap-2">
+                        <TextField.Label class="text-xl font-semibold">
+                            Code
+                        </TextField.Label>
+                        <TextField.Input class="rounded px-1 py-2" />
                     </TextField>
-                    <Show when={submitted()}>
-                        <TextField name="code">
-                            <TextField.Label>Code</TextField.Label>
-                            <TextField.Input />
-                        </TextField>
-                    </Show>
-                    <Button type="submit">Submit</Button>
-                </form>
-            </Show>
-        </>
+                </Show>
+                <Button
+                    type="submit"
+                    class="rounded-xl bg-slate-800 px-2 py-4 text-neutral-200"
+                >
+                    Submit
+                </Button>
+            </form>
+        </Show>
     );
 };