From 32d131db67abcab7de8095089b01e4d251d80ddb Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Sun, 16 Jun 2024 18:13:03 -0500
Subject: [PATCH] Remove daisy, rewrite login UI

---
 frontend/index.html           |  4 +--
 frontend/src/index.css        | 27 ++++++++++++++++---
 frontend/src/routes/Login.tsx | 28 ++++++++++---------
 frontend/tailwind.config.mjs  | 51 +++++++----------------------------
 main.go                       |  6 ++---
 5 files changed, 52 insertions(+), 64 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 75a9398..6a22d07 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,10 +9,10 @@
     <title>Solid App</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet">
 </head>
 
-<body data-theme="black">
+<body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f75cff6..5952e51 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,8 +2,27 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
-  font-family: "Inter", sans-serif;
-  font-optical-sizing: auto;
-  font-variation-settings: "slnt" 0;
+/* Dark mode */
+:root {
+    --c-bg: #09090b;
+    --c-on-bg: white;
+}
+
+/* Light mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --c-bg: white;
+        --c-on-bg: #09090b;
+        --c-border-1: #a1a1aa;
+        --c-primary: #7c3aed;
+        --c-on-primary: white;
+    }
+}
+
+html {
+    font-family: "Inter", sans-serif;
+    font-optical-sizing: auto;
+    font-variation-settings: "slnt" 0;
+    background-color: var(--c-bg);
+    color: var(--c-on-bg);
 }
diff --git a/frontend/src/routes/Login.tsx b/frontend/src/routes/Login.tsx
index 5c54e9c..451c4a1 100644
--- a/frontend/src/routes/Login.tsx
+++ b/frontend/src/routes/Login.tsx
@@ -31,40 +31,40 @@ export function Login() {
 
     return (
         <div class={`w-screen h-screen flex items-center justify-center ${fade() ? "opacity-0" : "opacity-100"} transition-opacity`}>
-            <div class="w-80">
-                <form onSubmit={login} >
-                    <h1 class="text-center font-black text-xl">Login</h1>
-                    <label class="form-control" for="login-server">
+            <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>
+                    <label for="login-server">
                         <div class="label">
-                            <span class="label-text text-xs">Server URL</span>
+                            <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="input input-bordered"
+                            class="border border-c-border-1 rounded inline-block w-full p-1"
                             placeholder="https://"
                             required
                             disabled={loading()}
                         />
                     </label>
-                    <label class="form-control" for="login-username">
+                    <label for="login-username">
                         <div class="label">
-                            <span class="label-text text-xs">Username</span>
+                            <span class="font-title label-text text-xs">Username</span>
                         </div>
                         <input id="login-username" type="text"
                             onInput={(e) => setUsername(e.target.value)}
-                            class="input input-bordered"
+                            class="border border-c-border-1 rounded inline-block w-full p-1"
                             placeholder="username"
                             required
                             disabled={loading()}
                         />
                     </label>
-                    <label class="form-control" for="login-password">
+                    <label for="login-password">
                         <div class="label">
-                            <span class="label-text text-xs">Password</span>
+                            <span class="font-title label-text text-xs">Password</span>
                         </div>
                         <input id="login-password" type="password"
                             onInput={(e) => setPassword(e.target.value)}
-                            class="input input-bordered"
+                            class="border border-c-border-1 rounded inline-block w-full p-1"
                             placeholder="********"
                             required
                             disabled={loading()}
@@ -72,7 +72,9 @@ export function Login() {
                     </label>
                     <br />
                     <div class="text-center">
-                        <button type="submit" class={`btn btn-primary ${loading() ? "animate-pulse" : ""}`}
+                        <button
+                            type="submit"
+                            class={`rounded font-title bg-c-primary text-c-on-primary py-2 px-4 mt-2 ${loading() ? "animate-pulse" : ""}`}
                             disabled={loading()}
                         >
                             Login
diff --git a/frontend/tailwind.config.mjs b/frontend/tailwind.config.mjs
index fd1e313..ec0c4cf 100644
--- a/frontend/tailwind.config.mjs
+++ b/frontend/tailwind.config.mjs
@@ -1,5 +1,3 @@
-import daisyui from "daisyui";
-
 /** @type {import('tailwindcss').Config} */
 export default {
     content: [
@@ -10,45 +8,16 @@ export default {
             spacing: {
                 "30": "7.5rem",
             },
+            fontFamily: {
+                "title": ["'Inter Tight'", "Inter", "sans-serif"],
+            },
+            colors: {
+                "c-bg": "var(--c-bg)",
+                "c-on-bg": "var(--c-on-bg)",
+                "c-border-1": "var(--c-border-1)",
+                "c-primary": "var(--c-primary)",
+                "c-on-primary": "var(--c-on-primary)",
+            },
         },
     },
-    plugins: [
-        daisyui,
-    ],
-    daisyui: {
-        themes: [
-            "light",
-            "dark",
-            "cupcake",
-            "bumblebee",
-            "emerald",
-            "corporate",
-            "synthwave",
-            "retro",
-            "cyberpunk",
-            "valentine",
-            "halloween",
-            "garden",
-            "forest",
-            "aqua",
-            "lofi",
-            "pastel",
-            "fantasy",
-            "wireframe",
-            "black",
-            "luxury",
-            "dracula",
-            "cmyk",
-            "autumn",
-            "business",
-            "acid",
-            "lemonade",
-            "night",
-            "coffee",
-            "winter",
-            "dim",
-            "nord",
-            "sunset",
-        ],
-    },
 };
diff --git a/main.go b/main.go
index 2eb7de6..82134fb 100644
--- a/main.go
+++ b/main.go
@@ -26,10 +26,8 @@ func main() {
 		Title:             "my-wails-solid",
 		Width:             1024,
 		Height:            768,
-		MinWidth:          1024,
-		MinHeight:         768,
-		MaxWidth:          1280,
-		MaxHeight:         800,
+		MinWidth:          250,
+		MinHeight:         400,
 		DisableResize:     false,
 		Fullscreen:        false,
 		Frameless:         false,
