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

32
ui/src/routes/welcome-local.tsx
View File

@@ -13,8 +13,6 @@ import { DEVICE_API } from "@/ui.config";
import api from "../api";
export interface DeviceStatus {
isSetup: boolean;
}
@@ -43,19 +41,24 @@ export default function WelcomeRoute() {
<div className="grid min-h-screen">
{imageLoaded && (
<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-3xl text-center">
<div className="space-y-8">
<div className="space-y-4">
<div className="flex items-center justify-center animate-fadeIn animation-delay-1000">
<img src={LogoWhiteIcon} alt="JetKVM Logo" className="h-[32px] hidden dark:block" />
<img src={LogoBlueIcon} alt="JetKVM Logo" className="h-[32px] dark:hidden" />
<div className="animate-fadeIn animation-delay-1000 flex items-center justify-center opacity-0">
<img
src={LogoWhiteIcon}
alt="JetKVM Logo"
className="hidden h-[32px] dark:block"
/>
<img
src={LogoBlueIcon}
alt="JetKVM Logo"
className="h-[32px] dark:hidden"
/>
</div>
<div
className="space-y-1 animate-fadeIn"
style={{ animationDelay: "1500ms" }}
>
<div className="animate-fadeIn animation-delay-1500 space-y-1 opacity-0">
<h1 className="text-4xl font-semibold text-black dark:text-white">
Welcome to JetKVM
</h1>
@@ -69,22 +72,19 @@ export default function WelcomeRoute() {
<img
src={DeviceImage}
alt="JetKVM Device"
className="animation-delay-0 max-w-md scale-[0.98] animate-fadeInScaleFloat transition-all duration-1000 ease-out"
className="animation-delay-300 animate-fadeInScaleFloat max-w-md scale-[0.98] opacity-0 transition-all duration-1000 ease-out"
/>
</div>
</div>
<div className="-mt-8 space-y-4">
<p
style={{ animationDelay: "2000ms" }}
className="max-w-lg mx-auto text-lg animate-fadeIn text-slate-700 dark:text-slate-300"
className="animate-fadeIn mx-auto max-w-lg text-lg text-slate-700 opacity-0 dark:text-slate-300"
>
JetKVM combines powerful hardware with intuitive software to provide a
seamless remote control experience.
</p>
<div
style={{ animationDelay: "2300ms" }}
className="animate-fadeIn"
>
<div className="animate-fadeIn animation-delay-2300 opacity-0">
<LinkButton
size="LG"
theme="light"