Changes to colors

frontend/src/index.css

@@ -14,8 +14,12 @@
         --c-bg: white;
         --c-on-bg: #09090b;
         --c-border-1: #a1a1aa;
+
         --c-primary: #7c3aed;
         --c-on-primary: white;
+
+        --c-primary-bg: #f5f3ff;
+        --c-primary-border: #c4b5fd;
     }
 }
 

frontend/src/routes/Login.tsx

@@ -1,14 +1,26 @@
-import { Show, createSignal } from "solid-js";
+import { Show, createSignal, onMount } from "solid-js";
 import { Login as GoLogin } from "../../wailsjs/go/main/App";
 import { useNavigate } from "@solidjs/router";
 
+function runAndDelay(ms: number, fn: () => void): Promise<void> {
+    fn();
+    return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+    });
+}
+
+const delay = (ms: number, fn: () => void) => new Promise((resolve) => setTimeout(() => {
+    fn();
+    resolve(null);
+}, ms));
+
 export function Login() {
     const [loading, setLoading] = createSignal(false);
     const [error, setError] = createSignal("");
     const [server, setServer] = createSignal("");
     const [username, setUsername] = createSignal("");
     const [password, setPassword] = createSignal("");
-    const [fade, setFade] = createSignal(false);
+    const [fadeUI, setFadeUI] = createSignal(false);
     const navigate = useNavigate();
 
     const login = async(ev: Event) => {
@@ -17,30 +29,31 @@ export function Login() {
         setError("");
 
         GoLogin(server(), username(), password())
-            .then(() => {
-                setFade(true);
-                setTimeout(() => {
-                    navigate("/home");
-                }, 150);
-            })
+            .then(() => runAndDelay(150, () => setFadeUI(true)))
+            .then(() => navigate("/home"))
             .catch((err) => {
                 setError(err);
                 setLoading(false);
             });
     };
 
+    onMount(() => {
+        setFadeUI(true);
+        delay(150, () => setFadeUI(false));
+    });
+
     return (
-        <div class={`w-screen h-screen flex items-center justify-center ${fade() ? "opacity-0" : "opacity-100"} transition-opacity`}>
+        <div class={`w-screen h-screen flex items-center justify-center ${fadeUI() ? "opacity-0" : "opacity-100"} transition-opacity`}>
             <div class="max-w-80 px-1 overflow-hidden">
                 <form onSubmit={login}>
-                    <h1 class="text-center font-title font-black text-xl text-c-primary my-4">Login to Navidrome</h1>
+                    <h1 class="text-center font-title font-black text-xl text-c-primary mb-4">Login to Navidrome</h1>
                     <label for="login-server">
                         <div class="label">
                             <span class="font-title label-text text-xs">Server URL:</span>
                         </div>
                         <input id="login-server" type="text"
                             onInput={(e) => setServer(e.target.value)}
-                            class="border border-c-border-1 rounded inline-block w-full p-1"
+                            class="border border-c-primary-border rounded bg-c-primary-bg inline-block w-full p-1"
                             placeholder="https://"
                             required
                             disabled={loading()}
@@ -52,7 +65,7 @@ export function Login() {
                         </div>
                         <input id="login-username" type="text"
                             onInput={(e) => setUsername(e.target.value)}
-                            class="border border-c-border-1 rounded inline-block w-full p-1"
+                            class="border border-c-primary-border rounded bg-c-primary-bg inline-block w-full p-1"
                             placeholder="username"
                             required
                             disabled={loading()}
@@ -64,7 +77,7 @@ export function Login() {
                         </div>
                         <input id="login-password" type="password"
                             onInput={(e) => setPassword(e.target.value)}
-                            class="border border-c-border-1 rounded inline-block w-full p-1"
+                            class="border border-c-primary-border rounded bg-c-primary-bg inline-block w-full p-1"
                             placeholder="********"
                             required
                             disabled={loading()}
@@ -74,7 +87,7 @@ export function Login() {
                     <div class="text-center">
                         <button
                             type="submit"
-                            class={`rounded font-title bg-c-primary text-c-on-primary py-2 px-4 mt-2 ${loading() ? "animate-pulse" : ""}`}
+                            class={`rounded font-title bg-c-primary text-c-on-primary py-2 px-4 mt-6 ${loading() ? "animate-pulse" : ""}`}
                             disabled={loading()}
                         >
                             Login

frontend/tailwind.config.mjs

@@ -17,6 +17,8 @@ export default {
                 "c-border-1": "var(--c-border-1)",
                 "c-primary": "var(--c-primary)",
                 "c-on-primary": "var(--c-on-primary)",
+                "c-primary-bg": "var(--c-primary-bg)",
+                "c-primary-border": "var(--c-primary-border)",
             },
         },
     },