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

chore(ui): Patch-bump packages and use tailwind upgrade (#456)

Browse Source 
* chore(ui): Patch bump in tailwind related packages and framer-motion

tailwind: [4.1.6 -> 4.1.7](https://github.com/tailwindlabs/tailwindcss/compare/v4.1.6...v4.1.7)
@tailwindcss/postcss: 4.1.6 -> 4.1.7
@tailwindcss/vite: 4.1.6 -> 4.1.7

Also patch-bump of:
framer-motion: [12.11.0 -> 12.11.4](https://github.com/motiondivision/motion/compare/v12.11.0...v12.11.4)

No source changes seemingly needed, have not rerun the migrate.

* chore(ui): Run tailwind upgrade and review changes

Ran the `npx @tailwindcss/upgrade` and accepted the changes that seemed safe.

They're things like:
- `data-[closed]:translate-y-9` -> `data-closed:translate-y-8` ()swaps the square bracket syntax to a `-` modifier)
- `bg-gradient-to-*` -> `bg-linear-to-*`
- `/[*%]` -> `/*` (swap square bracket syntax for inline)
- `theme(*.*)` -> `var(--*-*)` (theme styles are exposed as variables with hyphens for dots now)
- `[background-size:*]` -> `bg-size[*]` (move the square brackets inside tag)
- `[.active_&]:` -> `in[.active]:` (new syntax for parent query)
- `!class` -> `class!` (e.g. _!overflow-visible_ to _overflow-visible!_, for [important flag](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-flag style)
- `w-[1px]` -> `w-px` (that's a new syntax for a 1px width)
- `h-[1px]` -> `h-px` (that's a new syntax for a 1px height)
- moved `html` and `html, body` global settings in the _index.css_

Also killed off an unused `import` and blank css class.
Also picked up the two `flex-grow` -> `grow` that I missed last pass, oops.
This commit is contained in:
Marc Brooks
2025-05-16 12:59:57 -05:00
committed by GitHub
parent fea89a0d23
commit 3ec1bdf388
24 changed files with 231 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/routes/devices.$id.mount.tsx
View File

@@ -185,7 +185,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
<img
src={LogoWhiteIcon}
alt="JetKVM Logo"
className="hidden h-[24px] dark:!mt-0 dark:block"
className="hidden h-[24px] dark:mt-0! dark:block"
/>
{modalView === "mode" && (
<ModeSelectionView
@@ -332,7 +332,7 @@ function ModeSelectionView({
{
"ring-2 ring-blue-700": selectedMode === mode,
"hover:ring-2 hover:ring-blue-500": selectedMode !== mode && !disabled,
"!cursor-not-allowed": disabled,
"cursor-not-allowed!": disabled,
},
)}
>
@@ -1489,7 +1489,7 @@ function PreUploadedImageItem({
<div className="flex items-center gap-x-1 text-slate-600 dark:text-slate-400">
{formatters.date(new Date(uploadedAt), { month: "short" })}
</div>
<div className="mx-1 h-[10px] w-[1px] bg-slate-300 text-slate-300 dark:bg-slate-600"></div>
<div className="mx-1 h-[10px] w-px bg-slate-300 text-slate-300 dark:bg-slate-600"></div>
<div className="text-gray-600 dark:text-slate-400">{size}</div>
</div>
</div>

2
ui/src/routes/devices.$id.settings.network.tsx
View File

@@ -345,7 +345,7 @@ export default function SettingsNetworkRoute() {
/>
</div>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
<div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" />
<div className="space-y-4">
<SettingsItem title="IPv4 Mode" description="Configure the IPv4 mode">

22
ui/src/routes/devices.$id.settings.tsx
View File

@@ -111,7 +111,7 @@ export default function SettingsRoute() {
{/* Gradient overlay for left side - only visible on mobile when scrolled */}
<div
className={cx(
"pointer-events-none absolute inset-y-0 left-0 z-10 w-8 bg-gradient-to-r from-white to-transparent transition-opacity duration-300 ease-in-out md:hidden dark:from-slate-900",
"pointer-events-none absolute inset-y-0 left-0 z-10 w-8 bg-linear-to-r from-white to-transparent transition-opacity duration-300 ease-in-out md:hidden dark:from-slate-900",
{
"opacity-0": !showLeftGradient,
"opacity-100": showLeftGradient,
@@ -121,7 +121,7 @@ export default function SettingsRoute() {
{/* Gradient overlay for right side - only visible on mobile when there's more content */}
<div
className={cx(
"pointer-events-none absolute inset-y-0 right-0 z-10 w-8 bg-gradient-to-l from-white to-transparent transition duration-300 ease-in-out md:hidden dark:from-slate-900",
"pointer-events-none absolute inset-y-0 right-0 z-10 w-8 bg-linear-to-l from-white to-transparent transition duration-300 ease-in-out md:hidden dark:from-slate-900",
{
"opacity-0": !showRightGradient,
"opacity-100": showRightGradient,
@@ -137,7 +137,7 @@ export default function SettingsRoute() {
to="general"
className={({ isActive }) => (isActive ? "active" : "")}
>
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuSettings className="h-4 w-4 shrink-0" />
<h1>General</h1>
</div>
@@ -148,7 +148,7 @@ export default function SettingsRoute() {
to="mouse"
className={({ isActive }) => (isActive ? "active" : "")}
>
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuKeyboard className="h-4 w-4 shrink-0" />
<h1>Mouse</h1>
</div>
@@ -159,7 +159,7 @@ export default function SettingsRoute() {
to="video"
className={({ isActive }) => (isActive ? "active" : "")}
>
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuVideo className="h-4 w-4 shrink-0" />
<h1>Video</h1>
</div>
@@ -170,7 +170,7 @@ export default function SettingsRoute() {
to="hardware"
className={({ isActive }) => (isActive ? "active" : "")}
>
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuCpu className="h-4 w-4 shrink-0" />
<h1>Hardware</h1>
</div>
@@ -181,7 +181,7 @@ export default function SettingsRoute() {
to="access"
className={({ isActive }) => (isActive ? "active" : "")}
>
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuShieldCheck className="h-4 w-4 shrink-0" />
<h1>Access</h1>
</div>
@@ -192,7 +192,7 @@ export default function SettingsRoute() {
to="appearance"
className={({ isActive }) => (isActive ? "active" : "")}
>
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuPalette className="h-4 w-4 shrink-0" />
<h1>Appearance</h1>
</div>
@@ -203,7 +203,7 @@ export default function SettingsRoute() {
to="macros"
className={({ isActive }) => (isActive ? "active" : "")}
>
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuCommand className="h-4 w-4 shrink-0" />
<h1>Keyboard Macros</h1>
</div>
@@ -214,7 +214,7 @@ export default function SettingsRoute() {
to="network"
className={({ isActive }) => (isActive ? "active" : "")}
>
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuNetwork className="h-4 w-4 shrink-0" />
<h1>Network</h1>
</div>
@@ -225,7 +225,7 @@ export default function SettingsRoute() {
to="advanced"
className={({ isActive }) => (isActive ? "active" : "")}
>
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuWrench className="h-4 w-4 shrink-0" />
<h1>Advanced</h1>
</div>

4
ui/src/routes/welcome-local.mode.tsx
View File

@@ -90,8 +90,8 @@ export default function WelcomeLocalModeRoute() {
<GridCard
key={mode}
cardClassName={cx("transition-all duration-100", {
"!outline-blue-700 !outline-2": selectedMode === mode,
"hover:!outline-blue-700": selectedMode !== mode,
"outline-blue-700! outline-2!": selectedMode === mode,
"hover:outline-blue-700!": selectedMode !== mode,
})}
>
<div

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

@@ -68,7 +68,7 @@ export default function WelcomeRoute() {
</div>
</div>
<div className="!-mt-2 -ml-6 flex items-center justify-center">
<div className="-mt-2! -ml-6 flex items-center justify-center">
<img
src={DeviceImage}
alt="JetKVM Device"
@@ -90,7 +90,7 @@ export default function WelcomeRoute() {
theme="light"
text="Set up your JetKVM"
LeadingIcon={({ className }) => (
<img src={LogoMark} className={cx(className, "mr-1.5 !h-5")} />
<img src={LogoMark} className={cx(className, "mr-1.5 h-5!")} />
)}
textAlign="center"
to="/welcome/mode"