clone/kvm
1
0
Fork 0
mirror of https://github.com/luckfox-eng29/kvm.git synced 2026-01-20 10:14:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Migrate from tailwind.js config to Tailwind CSS config (#451)

Browse Source 
* refactor: Migrate from tailwind.js config to Tailwind CSS configuration and improve component styling

- Removed extensive theme and animation configurations from tailwind.config.js, migrating them to index.css for better organization.
- Updated components to utilize CSS variables for grid layouts and animations, enhancing maintainability.
- Adjusted various components to reflect the new CSS structure, ensuring consistent styling across the application.
- Improved accessibility and responsiveness in several UI components, including headers and popovers.
- Fixed minor styling issues and optimized class usage for better performance.

* style: use default tailwindcss/forms options

* refactor(Header): remove unused LuUser icon import
This commit is contained in:
Adam Shiervani
2025-05-15 17:13:16 +02:00
committed by GitHub
parent c9dd3cd926
commit baf85dcbec
22 changed files with 233 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ui/src/routes/welcome-local.password.tsx
View File

@@ -69,28 +69,34 @@ export default function WelcomeLocalPasswordRoute() {
<GridBackground />
<div className="grid min-h-screen">
<Container>
<div className="flex items-center justify-center w-full h-full isolate">
<div className="isolate flex h-full w-full items-center justify-center">
<div className="max-w-2xl space-y-8">
<div className="flex items-center justify-center animate-fadeIn">
<img src={LogoWhiteIcon} alt="" className="-ml-4 h-[32px] hidden dark:block" />
<div className="animate-fadeIn flex items-center justify-center opacity-0">
<img
src={LogoWhiteIcon}
alt=""
className="-ml-4 hidden h-[32px] dark:block"
/>
<img src={LogoBlueIcon} alt="" className="-ml-4 h-[32px] dark:hidden" />
</div>
<div
className="space-y-2 text-center animate-fadeIn"
className="animate-fadeIn space-y-2 text-center opacity-0"
style={{ animationDelay: "200ms" }}
>
<h1 className="text-4xl font-semibold text-black dark:text-white">Set a Password</h1>
<h1 className="text-4xl font-semibold text-black dark:text-white">
Set a Password
</h1>
<p className="font-medium text-slate-600 dark:text-slate-400">
Create a strong password to secure your JetKVM device locally.
</p>
</div>
<Fieldset className="space-y-12">
<Form method="POST" className="max-w-sm mx-auto space-y-4">
<Form method="POST" className="mx-auto max-w-sm space-y-4">
<div className="space-y-4">
<div
className="animate-fadeIn"
className="animate-fadeIn opacity-0"
style={{ animationDelay: "400ms" }}
>
<InputFieldWithLabel
@@ -106,21 +112,21 @@ export default function WelcomeLocalPasswordRoute() {
onClick={() => setShowPassword(false)}
className="pointer-events-auto"
>
<LuEye className="w-4 h-4 cursor-pointer text-slate-500 dark:text-slate-400" />
<LuEye className="h-4 w-4 cursor-pointer text-slate-500 dark:text-slate-400" />
</div>
) : (
<div
onClick={() => setShowPassword(true)}
className="pointer-events-auto"
>
<LuEyeOff className="w-4 h-4 cursor-pointer text-slate-500 dark:text-slate-400" />
<LuEyeOff className="h-4 w-4 cursor-pointer text-slate-500 dark:text-slate-400" />
</div>
)
}
/>
</div>
<div
className="animate-fadeIn"
className="animate-fadeIn opacity-0"
style={{ animationDelay: "400ms" }}
>
<InputFieldWithLabel
@@ -137,7 +143,7 @@ export default function WelcomeLocalPasswordRoute() {
{actionData?.error && <p className="text-sm text-red-600">{}</p>}
<div
className="animate-fadeIn"
className="animate-fadeIn opacity-0"
style={{ animationDelay: "600ms" }}
>
<Button
@@ -153,7 +159,7 @@ export default function WelcomeLocalPasswordRoute() {
</Fieldset>
<p
className="max-w-md text-xs text-center animate-fadeIn text-slate-500 dark:text-slate-400"
className="animate-fadeIn max-w-md text-center text-xs text-slate-500 opacity-0 dark:text-slate-400"
style={{ animationDelay: "800ms" }}
>
This password will be used to secure your device data and protect against