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

18
ui/src/components/ActionBar.tsx
View File

@@ -89,8 +89,8 @@ export default function Actionbar({
anchor="bottom start"
transition
className={cx(
"z-10 flex w-[420px] origin-top flex-col !overflow-visible",
"flex origin-top flex-col transition duration-300 ease-out data-[closed]:translate-y-8 data-[closed]:opacity-0",
"z-10 flex w-[420px] origin-top flex-col overflow-visible!",
"flex origin-top flex-col transition duration-300 ease-out data-closed:translate-y-8 data-closed:opacity-0",
)}
>
{({ open }) => {
@@ -131,8 +131,8 @@ export default function Actionbar({
anchor="bottom start"
transition
className={cx(
"z-10 flex w-[420px] origin-top flex-col !overflow-visible",
"flex origin-top flex-col transition duration-300 ease-out data-[closed]:translate-y-8 data-[closed]:opacity-0",
"z-10 flex w-[420px] origin-top flex-col overflow-visible!",
"flex origin-top flex-col transition duration-300 ease-out data-closed:translate-y-8 data-closed:opacity-0",
)}
>
{({ open }) => {
@@ -183,8 +183,8 @@ export default function Actionbar({
transitionProperty: "opacity",
}}
className={cx(
"z-10 flex w-[420px] origin-top flex-col !overflow-visible",
"flex origin-top flex-col transition duration-300 ease-out data-[closed]:translate-y-8 data-[closed]:opacity-0",
"z-10 flex w-[420px] origin-top flex-col overflow-visible!",
"flex origin-top flex-col transition duration-300 ease-out data-closed:translate-y-8 data-closed:opacity-0",
)}
>
{({ open }) => {
@@ -226,8 +226,8 @@ export default function Actionbar({
anchor="bottom start"
transition
className={cx(
"z-10 flex w-[420px] flex-col !overflow-visible",
"flex origin-top flex-col transition duration-300 ease-out data-[closed]:translate-y-8 data-[closed]:opacity-0",
"z-10 flex w-[420px] flex-col overflow-visible!",
"flex origin-top flex-col transition duration-300 ease-out data-closed:translate-y-8 data-closed:opacity-0",
)}
>
{({ open }) => {
@@ -274,7 +274,7 @@ export default function Actionbar({
</div>
<div className="hidden items-center gap-x-2 lg:flex">
<div className="h-4 w-[1px] bg-slate-300 dark:bg-slate-600" />
<div className="h-4 w-px bg-slate-300 dark:bg-slate-600" />
<Button
size="XS"
theme="light"

10
ui/src/components/Button.tsx
View File

@@ -126,9 +126,9 @@ function ButtonContent(props: ButtonContentPropsType) {
<div
className={cx(
"flex w-full min-w-0 items-center gap-x-1.5 text-center",
textAlign === "left" ? "!text-left" : "",
textAlign === "center" ? "!text-center" : "",
textAlign === "right" ? "!text-right" : "",
textAlign === "left" ? "text-left!" : "",
textAlign === "center" ? "text-center!" : "",
textAlign === "right" ? "text-right!" : "",
)}
>
{loading ? (
@@ -216,7 +216,7 @@ type LinkPropsType = Pick<LinkProps, "to"> &
export const LinkButton = ({ to, ...props }: LinkPropsType) => {
const classes = cx(
"group outline-hidden",
props.disabled ? "pointer-events-none !opacity-70" : "",
props.disabled ? "pointer-events-none opacity-70!" : "",
props.fullWidth ? "w-full" : "",
props.loading ? "pointer-events-none" : "",
props.className,
@@ -242,7 +242,7 @@ type LabelPropsType = Pick<HTMLLabelElement, "htmlFor"> &
export const LabelButton = ({ htmlFor, ...props }: LabelPropsType) => {
const classes = cx(
"group outline-hidden block cursor-pointer",
props.disabled ? "pointer-events-none !opacity-70" : "",
props.disabled ? "pointer-events-none opacity-70!" : "",
props.fullWidth ? "w-full" : "",
props.loading ? "pointer-events-none" : "",
props.className,

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

@@ -17,8 +17,8 @@ export const GridCard = ({
return (
<Card className={cx("overflow-hidden", cardClassName)}>
<div className="relative h-full">
<div className="absolute inset-0 z-0 h-full w-full bg-gradient-to-tr from-blue-50/30 to-blue-50/20 transition-colors duration-300 ease-in-out dark:from-slate-800/30 dark:to-slate-800/20" />
<div className="absolute inset-0 z-0 h-full w-full rotate-0 bg-grid-blue-100/[25%] dark:bg-grid-slate-700/[7%]" />
<div className="absolute inset-0 z-0 h-full w-full bg-linear-to-tr from-blue-50/30 to-blue-50/20 transition-colors duration-300 ease-in-out dark:from-slate-800/30 dark:to-slate-800/20" />
<div className="absolute inset-0 z-0 h-full w-full rotate-0 bg-grid-blue-100/25 dark:bg-grid-slate-700/7" />
<div className="isolate h-full">{children}</div>
</div>
</Card>

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

@@ -58,7 +58,7 @@ export function Combobox({
<HeadlessCombobox onChange={onChange} {...otherProps}>
{() => (
<>
<Card className="w-auto !border border-solid !border-slate-800/30 shadow-xs outline-0 dark:!border-slate-300/30">
<Card className="w-auto border! border-solid border-slate-800/30! shadow-xs outline-0 dark:border-slate-300/30!">
<ComboboxInput
ref={inputRef}
className={clsx(
@@ -88,7 +88,7 @@ export function Combobox({
</Card>
{options().length > 0 && (
<ComboboxOptions className="hide-scrollbar absolute left-0 z-[100] mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black/5 dark:bg-slate-800 dark:ring-slate-700">
<ComboboxOptions className="hide-scrollbar absolute left-0 z-100 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black/5 dark:bg-slate-800 dark:ring-slate-700">
{options().map(option => (
<ComboboxOption
key={option.value}
@@ -111,7 +111,7 @@ export function Combobox({
)}
{options().length === 0 && inputRef.current?.value && (
<div className="absolute left-0 z-[100] mt-1 w-full rounded-md bg-white px-4 py-2 text-sm shadow-lg ring-1 ring-black/5 dark:bg-slate-800 dark:ring-slate-700">
<div className="absolute left-0 z-100 mt-1 w-full rounded-md bg-white px-4 py-2 text-sm shadow-lg ring-1 ring-black/5 dark:bg-slate-800 dark:ring-slate-700">
<div className="text-slate-500 dark:text-slate-400">{emptyMessage}</div>
</div>
)}

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

@@ -100,7 +100,7 @@ export default function DashboardNavbar({
)}
{isLoggedIn ? (
<>
<hr className="h-[20px] w-[1px] self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
<hr className="h-[20px] w-px self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
<div className="relative inline-block text-left">
<Menu>
<MenuButton className="h-full">

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

@@ -78,7 +78,7 @@ export default function KvmCard({
)}
</div>
</div>
<div className="h-[1px] bg-slate-800/20 dark:bg-slate-300/20" />
<div className="h-px bg-slate-800/20 dark:bg-slate-300/20" />
<div className="flex justify-between">
<div>
{online ? (
@@ -111,7 +111,7 @@ export default function KvmCard({
<MenuItems
transition
className="data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in"
className="data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-leave:duration-75 data-enter:ease-out data-leave:ease-in"
>
<Card className="absolute right-0 z-10 w-56 px-1 mt-2 transition origin-top-right ring-1 ring-black/50 focus:outline-hidden">
<div className="divide-y divide-slate-800/20 dark:divide-slate-300/20">

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

@@ -18,7 +18,7 @@ const Modal = React.memo(function Modal({
<Dialog open={open} onClose={onClose} className="relative z-20">
<DialogBackdrop
transition
className="fixed inset-0 bg-gray-500/75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-500 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in dark:bg-slate-900/90"
className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-500 data-leave:duration-200 data-enter:ease-out data-leave:ease-in dark:bg-slate-900/90"
/>
<div className="fixed inset-0 z-20 w-screen overflow-y-auto">
{/* TODO: This doesn't work well with other-sessions */}
@@ -26,8 +26,8 @@ const Modal = React.memo(function Modal({
<DialogPanel
transition
className={cx(
"pointer-events-none relative w-full md:my-8 md:!mt-[10vh]",
"transform transition-all data-[closed]:translate-y-8 data-[closed]:opacity-0 data-[enter]:duration-500 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in",
"pointer-events-none relative w-full md:my-8 md:mt-[10vh]!",
"transform transition-all data-closed:translate-y-8 data-closed:opacity-0 data-enter:duration-500 data-leave:duration-200 data-enter:ease-out data-leave:ease-in",
className,
)}
>

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

@@ -63,7 +63,7 @@ export const SelectMenuBasic = React.forwardRef<HTMLSelectElement, SelectMenuPro
)}
>
{label && <FieldLabel label={label} id={id} as="span" />}
<Card className="w-auto !border border-solid !border-slate-800/30 shadow-xs outline-0 dark:!border-slate-300/30">
<Card className="w-auto border! border-solid border-slate-800/30! shadow-xs outline-0 dark:border-slate-300/30!">
<select
ref={ref}
name={name}

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

@@ -23,7 +23,7 @@ const variants = cva({
export default function StepCounter({ nSteps, currStepIdx, size = "MD" }: Props) {
const textStyle = variants({ size });
return (
<Card className="!inline-flex w-auto select-none items-center justify-center gap-x-2 rounded-lg p-1">
<Card className="inline-flex! w-auto select-none items-center justify-center gap-x-2 rounded-lg p-1">
{[...Array(nSteps).keys()].map(i => {
if (i < currStepIdx) {
return (
@@ -57,7 +57,7 @@ export default function StepCounter({ nSteps, currStepIdx, size = "MD" }: Props)
return (
<Card
className={cx(
"flex items-center justify-center !rounded-full text-slate-600 dark:text-slate-400",
"flex items-center justify-center rounded-full! text-slate-600 dark:text-slate-400",
textStyle,
size === "SM" ? "h-5 w-5" : "h-6 w-6",
)}

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

@@ -171,12 +171,12 @@ function Terminal({
[
// Base styles
"fixed bottom-0 w-full transform transition duration-500 ease-in-out",
"translate-y-[0px]",
"-translate-y-[0px]",
],
{
"pointer-events-none translate-y-[500px] opacity-100 transition duration-300":
!enableTerminal,
"pointer-events-auto translate-y-[0px] opacity-100 transition duration-300":
"pointer-events-auto -translate-y-[0px] opacity-100 transition duration-300":
enableTerminal,
},
)}

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

@@ -11,7 +11,7 @@ export default function UpdateInProgressStatusCard() {
return (
<div className="w-full select-none opacity-100 transition-all duration-300 ease-in-out">
<GridCard cardClassName="!shadow-xl">
<GridCard cardClassName="shadow-xl!">
<div className="flex items-center justify-between gap-x-3 px-2.5 py-2.5 text-black dark:text-white">
<div className="flex items-center gap-x-3">
<LoadingSpinner className={cx("h-5 w-5", "shrink-0 text-blue-700")} />

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

@@ -150,7 +150,7 @@ export function UsbDeviceSetting() {
return (
<Fieldset disabled={loading} className="space-y-4">
<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" />
<SettingsSectionHeader
title="USB Device"

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

@@ -14,7 +14,7 @@ interface OverlayContentProps {
}
function OverlayContent({ children }: OverlayContentProps) {
return (
<GridCard cardClassName="h-full pointer-events-auto !outline-hidden">
<GridCard cardClassName="h-full pointer-events-auto outline-hidden!">
<div className="flex h-full w-full flex-col items-center justify-center rounded-md border border-slate-800/30 dark:border-slate-300/20">
{children}
</div>
@@ -376,7 +376,7 @@ export function PointerLockBar({ show }: PointerLockBarProps) {
transition={{ duration: 0.5, ease: "easeInOut", delay: 0.5 }}
>
<div>
<Card className="rounded-b-none shadow-none !outline-0">
<Card className="rounded-b-none shadow-none outline-0!">
<div className="flex items-center justify-between border border-slate-800/50 px-4 py-2 outline-0 backdrop-blur-xs dark:border-slate-300/20 dark:bg-slate-800">
<div className="flex items-center space-x-2">
<BsMouseFill className="h-4 w-4 text-blue-700 dark:text-blue-500" />

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

@@ -691,15 +691,15 @@ export default function WebRTCVideo() {
<div
className={cx(
"absolute inset-0 -z-0 bg-blue-50/40 opacity-80 dark:bg-slate-800/40",
"[background-image:radial-gradient(theme(colors.blue.300)_0.5px,transparent_0.5px),radial-gradient(theme(colors.blue.300)_0.5px,transparent_0.5px)] dark:[background-image:radial-gradient(theme(colors.slate.700)_0.5px,transparent_0.5px),radial-gradient(theme(colors.slate.700)_0.5px,transparent_0.5px)]",
"[background-position:0_0,10px_10px]",
"[background-size:20px_20px]",
"bg-[radial-gradient(var(--color-blue-300)_0.5px,transparent_0.5px),radial-gradient(var(--color-blue-300)_0.5px,transparent_0.5px)] dark:bg-[radial-gradient(var(--color-slate-700)_0.5px,transparent_0.5px),radial-gradient(var(--color-slate-700)_0.5px,transparent_0.5px)]",
"bg-position-[0_0,10px_10px]",
"bg-size-[20px_20px]",
)}
/>
<div className="flex h-full flex-col">
<div className="relative flex-grow overflow-hidden">
<div className="relative grow overflow-hidden">
<div className="flex h-full flex-col">
<div className="grid flex-grow grid-rows-(--grid-bodyFooter) overflow-hidden">
<div className="grid 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">
@@ -723,7 +723,7 @@ export default function WebRTCVideo() {
isVideoLoading ||
hdmiError ||
peerConnectionState !== "connected",
"!opacity-60": showPointerLockBar,
"opacity-60!": showPointerLockBar,
"animate-slideUpFade border border-slate-800/30 shadow-xs dark:border-slate-300/20":
isPlaying,
},