fernando
/
wails-player
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove daisy, rewrite login UI

master
Araozu 2024-06-16 18:13:03 -05:00
parent 60eb0d3ff1
commit 32d131db67
5 changed files with 52 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@ -9,10 +9,10 @@
<title>Solid App</title> <title>Solid App</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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> </head>
<body data-theme="black"> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>

19
frontend/src/index.css
View File

@ -2,8 +2,27 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* 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 { html {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-optical-sizing: auto; font-optical-sizing: auto;
font-variation-settings: "slnt" 0; font-variation-settings: "slnt" 0;
background-color: var(--c-bg);
color: var(--c-on-bg);
} }

28
frontend/src/routes/Login.tsx
View File

@ -31,40 +31,40 @@ export function Login() {
return ( 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 ${fade() ? "opacity-0" : "opacity-100"} transition-opacity`}>
<div class="w-80"> <div class="max-w-80 px-1 overflow-hidden">
<form onSubmit={login} > <form onSubmit={login}>
<h1 class="text-center font-black text-xl">Login</h1> <h1 class="text-center font-title font-black text-xl text-c-primary my-4">Login to Navidrome</h1>
<label class="form-control" for="login-server"> <label for="login-server">
<div class="label"> <div class="label">
<span class="label-text text-xs">Server URL</span> <span class="font-title label-text text-xs">Server URL:</span>
</div> </div>
<input id="login-server" type="text" <input id="login-server" type="text"
onInput={(e) => setServer(e.target.value)} 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://" placeholder="https://"
required required
disabled={loading()} disabled={loading()}
/> />
</label> </label>
<label class="form-control" for="login-username"> <label for="login-username">
<div class="label"> <div class="label">
<span class="label-text text-xs">Username</span> <span class="font-title label-text text-xs">Username</span>
</div> </div>
<input id="login-username" type="text" <input id="login-username" type="text"
onInput={(e) => setUsername(e.target.value)} 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" placeholder="username"
required required
disabled={loading()} disabled={loading()}
/> />
</label> </label>
<label class="form-control" for="login-password"> <label for="login-password">
<div class="label"> <div class="label">
<span class="label-text text-xs">Password</span> <span class="font-title label-text text-xs">Password</span>
</div> </div>
<input id="login-password" type="password" <input id="login-password" type="password"
onInput={(e) => setPassword(e.target.value)} onInput={(e) => setPassword(e.target.value)}
class="input input-bordered" class="border border-c-border-1 rounded inline-block w-full p-1"
placeholder="********" placeholder="********"
required required
disabled={loading()} disabled={loading()}
@ -72,7 +72,9 @@ export function Login() {
</label> </label>
<br /> <br />
<div class="text-center"> <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()} disabled={loading()}
> >
Login Login

49
frontend/tailwind.config.mjs
View File

@ -1,5 +1,3 @@
import daisyui from "daisyui";
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: [ content: [
@ -10,45 +8,16 @@ export default {
spacing: { spacing: {
"30": "7.5rem", "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",
],
}, },
}; };

6
main.go
View File

@ -26,10 +26,8 @@ func main() {
Title: "my-wails-solid", Title: "my-wails-solid",
Width: 1024, Width: 1024,
Height: 768, Height: 768,
MinWidth: 1024, MinWidth: 250,
MinHeight: 768, MinHeight: 400,
MaxWidth: 1280,
MaxHeight: 800,
DisableResize: false, DisableResize: false,
Fullscreen: false, Fullscreen: false,
Frameless: false, Frameless: false,