Remove daisy, rewrite login UI
parent
60eb0d3ff1
commit
32d131db67
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,27 @@
|
|||
@tailwind components;
|
||||
@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 {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-variation-settings: "slnt" 0;
|
||||
background-color: var(--c-bg);
|
||||
color: var(--c-on-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<div class="max-w-80 px-1 overflow-hidden">
|
||||
<form onSubmit={login}>
|
||||
<h1 class="text-center font-black text-xl">Login</h1>
|
||||
<label class="form-control" for="login-server">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue