clone/kvm
1
0
Fork 0
mirror of https://github.com/luckfox-eng29/kvm.git synced 2026-06-02 11:31:21 +02: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

2
ui/src/components/AuthLayout.tsx
View File

@@ -37,7 +37,7 @@ export default function AuthLayout({
<>
<GridBackground />
<div className="grid min-h-screen grid-rows-layout">
<div className="grid min-h-screen grid-rows-(--grid-layout)">
<SimpleNavbar
logoHref="/"
actionElement={

6
ui/src/components/Checkbox.tsx
View File

@@ -15,7 +15,7 @@ const checkboxVariants = cva({
"block rounded",
// Colors
"border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800 text-blue-700 dark:text-blue-500 transition-colors",
"border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800 checked:accent-blue-700 checked:dark:accent-blue-500 transition-colors",
// Hover
"hover:bg-slate-200/50 dark:hover:bg-slate-700/50",
@@ -41,7 +41,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckBoxProps>(function Checkbox(
ref,
) {
const classes = checkboxVariants({ size });
return <input ref={ref} {...props} type="checkbox" className={clsx(classes, className)} />;
return (
<input ref={ref} {...props} type="checkbox" className={clsx(classes, className)} />
);
});
Checkbox.displayName = "Checkbox";

4
ui/src/components/GridBackground.tsx
View File

@@ -1,8 +1,8 @@
export default function GridBackground() {
return (
<div className="absolute w-screen h-screen overflow-hidden isolate opacity-60">
<div className="absolute isolate h-screen w-screen overflow-hidden opacity-60">
<svg
className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-300 [mask-image:radial-gradient(center_at_32rem_32rem,white,transparent)] dark:stroke-slate-300/20"
className="absolute inset-x-0 top-0 -z-10 h-full w-full mask-radial-[32rem_32rem] mask-radial-from-white mask-radial-to-transparent mask-radial-at-center stroke-gray-300 dark:stroke-slate-300/20"
aria-hidden="true"
>
<defs>

57
ui/src/components/Header.tsx
View File

@@ -55,7 +55,7 @@ export default function DashboardNavbar({
//picture = "https://placehold.co/32x32"
return (
<div className="w-full select-none border-b border-b-slate-800/20 bg-white dark:border-b-slate-300/20 dark:bg-slate-900">
<div className="w-full border-b border-b-slate-800/20 bg-white select-none dark:border-b-slate-300/20 dark:bg-slate-900">
<Container>
<div className="flex h-14 items-center justify-between">
<div className="flex shrink-0 items-center gap-x-8">
@@ -81,7 +81,7 @@ export default function DashboardNavbar({
</div>
<div className="flex w-full items-center justify-end gap-x-2">
<div className="flex shrink-0 items-center space-x-4">
<div className="hidden items-center gap-x-2 md:flex">
<div className="hidden items-stretch gap-x-2 md:flex">
{showConnectionStatus && (
<>
<div className="w-[159px]">
@@ -100,47 +100,50 @@ export default function DashboardNavbar({
)}
{isLoggedIn ? (
<>
<hr className="h-[20px] w-[1px] border-none bg-slate-800/20 dark:bg-slate-300/20" />
<hr className="h-[20px] w-[1px] self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
<div className="relative inline-block text-left">
<Menu>
<MenuButton>
<Button className="flex items-center gap-x-3 rounded-md border bg-white dark:border-slate-600 dark:bg-slate-800 dark:text-white border-slate-800/20 px-2 py-1.5">
{picture
? (
<img
src={picture}
alt="Avatar"
className="size-6 rounded-full border-2 border-transparent transition-colors group-hover:border-blue-700"
/>
)
: (
<span className="max-w-[200px] text-sm/6 font-display font-semibold truncate">
{userEmail}
</span>
)
}
<MenuButton className="h-full">
<Button className="flex h-full items-center gap-x-3 rounded-md border border-slate-800/20 bg-white px-2 py-1.5 dark:border-slate-600 dark:bg-slate-800 dark:text-white">
{picture ? (
<img
src={picture}
alt="Avatar"
className="size-6 rounded-full border-2 border-transparent transition-colors group-hover:border-blue-700"
/>
) : userEmail ? (
<span className="font-display max-w-[200px] truncate text-sm/6 font-semibold">
{userEmail}
</span>
) : null}
<ChevronDownIcon className="size-4 shrink-0 text-slate-900 dark:text-white" />
</Button>
</MenuButton>
<MenuItems
transition
anchor="bottom end"
className="right-0 mt-1 w-56 origin-top-right data-closed:opacity-0 focus:outline-hidden">
className="right-0 mt-1 w-56 origin-top-right p-px focus:outline-hidden data-closed:opacity-0"
>
<MenuItem>
<Card className="overflow-hidden">
<div className="space-y-1 p-1 dark:text-white">
{userEmail && (
{userEmail && (
<div className="space-y-1 p-1 dark:text-white">
<div className="border-b border-b-slate-800/20 dark:border-slate-300/20">
<div className="p-2">
<div className="font-display text-xs">Logged in as</div>
<div className="max-w-[200px] truncate font-display text-sm font-semibold">
<div className="font-display text-xs">
Logged in as
</div>
<div className="font-display max-w-[200px] truncate text-sm font-semibold">
{userEmail}
</div>
</div>
</div>
)}
</div>
<div className="space-y-1 p-1 dark:text-white" onClick={onLogout}>
</div>
)}
<div
className="space-y-1 p-1 dark:text-white"
onClick={onLogout}
>
<button className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700">
<ArrowLeftEndOnRectangleIcon className="size-4" />
<div className="font-display">Log out</div>

4
ui/src/components/WebRTCVideo.tsx
View File

@@ -673,7 +673,7 @@ export default function WebRTCVideo() {
]);
return (
<div className="grid h-full w-full grid-rows-layout">
<div className="grid h-full w-full grid-rows-(--grid-layout)">
<div className="flex min-h-[39.5px] flex-col">
<div className="flex flex-col">
<fieldset
@@ -699,7 +699,7 @@ export default function WebRTCVideo() {
<div className="flex h-full flex-col">
<div className="relative flex-grow overflow-hidden">
<div className="flex h-full flex-col">
<div className="grid flex-grow grid-rows-bodyFooter overflow-hidden">
<div className="grid flex-grow grid-rows-(--grid-bodyFooter) overflow-hidden">
<div className="relative mx-4 my-2 flex items-center justify-center overflow-hidden">
<div className="relative flex h-full w-full items-center justify-center">
<div className="relative inline-block">

2
ui/src/components/popovers/ExtensionPopover.tsx
View File

@@ -84,7 +84,7 @@ export default function ExtensionPopover() {
return (
<GridCard>
<div className="space-y-4 p-4 py-3">
<div className="grid h-full grid-rows-headerBody">
<div className="grid h-full grid-rows-(--grid-headerBody)">
<div className="space-y-4">
{activeExtension ? (
// Extension Control View

2
ui/src/components/popovers/MountPopover.tsx
View File

@@ -194,7 +194,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
return (
<GridCard>
<div className="space-y-4 p-4 py-3">
<div ref={ref} className="grid h-full grid-rows-headerBody">
<div ref={ref} className="grid h-full grid-rows-(--grid-headerBody)">
<div className="h-full space-y-4">
<div className="space-y-4">
<SettingsPageHeader

2
ui/src/components/popovers/PasteModal.tsx
View File

@@ -74,7 +74,7 @@ export default function PasteModal() {
return (
<GridCard>
<div className="space-y-4 p-4 py-3">
<div className="grid h-full grid-rows-headerBody">
<div className="grid h-full grid-rows-(--grid-headerBody)">
<div className="h-full space-y-4">
<div className="space-y-4">
<SettingsPageHeader

2
ui/src/components/popovers/WakeOnLan/Index.tsx
View File

@@ -102,7 +102,7 @@ export default function WakeOnLanModal() {
return (
<GridCard>
<div className="space-y-4 p-4 py-3">
<div className="grid h-full grid-rows-headerBody">
<div className="grid h-full grid-rows-(--grid-headerBody)">
<div className="space-y-4">
<SettingsPageHeader
title="Wake On LAN"

2
ui/src/components/sidebar/connectionStats.tsx
View File

@@ -99,7 +99,7 @@ export default function ConnectionStatsSidebar() {
}, 500);
return (
<div className="grid h-full grid-rows-headerBody shadow-xs">
<div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs">
<SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} />
<div className="h-full space-y-4 overflow-y-scroll bg-white px-4 py-2 pb-8 dark:bg-slate-900">
<div className="space-y-4">