From 2ad60507b70753ba5beab8e2e5c7caf263fa4218 Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Tue, 19 Aug 2025 19:48:25 -0400
Subject: [PATCH] small style updates

---
 .../alerts/{alerts-system.tsx => alerts-dialog.tsx}       | 0
 .../site/src/components/routes/settings/sidebar-nav.tsx   | 4 ++--
 beszel/site/src/components/routes/system.tsx              | 4 ++--
 .../components/systems-table/systems-table-columns.tsx    | 1 +
 beszel/site/src/components/ui/button.tsx                  | 2 +-
 beszel/site/src/components/ui/checkbox.tsx                | 2 +-
 beszel/site/src/components/ui/command.tsx                 | 2 +-
 beszel/site/src/components/ui/dropdown-menu.tsx           | 8 ++++----
 beszel/site/src/components/ui/select.tsx                  | 2 +-
 beszel/site/src/index.css                                 | 2 +-
 beszel/site/tailwind.config.js                            | 3 +++
 11 files changed, 17 insertions(+), 13 deletions(-)
 rename beszel/site/src/components/alerts/{alerts-system.tsx => alerts-dialog.tsx} (100%)

diff --git a/beszel/site/src/components/alerts/alerts-system.tsx b/beszel/site/src/components/alerts/alerts-dialog.tsx
similarity index 100%
rename from beszel/site/src/components/alerts/alerts-system.tsx
rename to beszel/site/src/components/alerts/alerts-dialog.tsx
diff --git a/beszel/site/src/components/routes/settings/sidebar-nav.tsx b/beszel/site/src/components/routes/settings/sidebar-nav.tsx
index 2421476..ed0663e 100644
--- a/beszel/site/src/components/routes/settings/sidebar-nav.tsx
+++ b/beszel/site/src/components/routes/settings/sidebar-nav.tsx
@@ -56,8 +56,8 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
 							href={item.href}
 							className={cn(
 								buttonVariants({ variant: "ghost" }),
-								"flex items-center gap-3 justify-start truncate",
-								page?.path === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted/50"
+								"flex items-center gap-3 justify-start truncate duration-50",
+								page?.path === item.href ? "bg-muted hover:bg-accent/70" : "hover:bg-accent/50"
 							)}
 						>
 							{item.icon && <item.icon className="size-4 shrink-0" />}
diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx
index 4f7c3dc..b487689 100644
--- a/beszel/site/src/components/routes/system.tsx
+++ b/beszel/site/src/components/routes/system.tsx
@@ -456,9 +456,9 @@ export default function SystemDetail({ name }: { name: string }) {
 											onClick={() => setGrid(!grid)}
 										>
 											{grid ? (
-												<LayoutGridIcon className="h-[1.2rem] w-[1.2rem] opacity-85" />
+												<LayoutGridIcon className="h-[1.2rem] w-[1.2rem] opacity-75" />
 											) : (
-												<Rows className="h-[1.3rem] w-[1.3rem] opacity-85" />
+												<Rows className="h-[1.3rem] w-[1.3rem] opacity-75" />
 											)}
 										</Button>
 									</TooltipTrigger>
diff --git a/beszel/site/src/components/systems-table/systems-table-columns.tsx b/beszel/site/src/components/systems-table/systems-table-columns.tsx
index cb4a1b3..77112c4 100644
--- a/beszel/site/src/components/systems-table/systems-table-columns.tsx
+++ b/beszel/site/src/components/systems-table/systems-table-columns.tsx
@@ -188,6 +188,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 								[STATUS_COLORS.up]: threshold === MeterState.Good,
 								[STATUS_COLORS.pending]: threshold === MeterState.Warn,
 								[STATUS_COLORS.down]: threshold === MeterState.Crit,
+								[STATUS_COLORS.paused]: status !== "up",
 							})}
 						/>
 						{loadAverages?.map((la, i) => (
diff --git a/beszel/site/src/components/ui/button.tsx b/beszel/site/src/components/ui/button.tsx
index 55e0d3c..d8c991f 100644
--- a/beszel/site/src/components/ui/button.tsx
+++ b/beszel/site/src/components/ui/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
 				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 				outline: "border bg-background hover:bg-accent/70 dark:hover:bg-accent/50 hover:text-accent-foreground",
 				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
+				ghost: "hover:bg-accent/70 hover:text-accent-foreground",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
diff --git a/beszel/site/src/components/ui/checkbox.tsx b/beszel/site/src/components/ui/checkbox.tsx
index 75f69fd..8221978 100644
--- a/beszel/site/src/components/ui/checkbox.tsx
+++ b/beszel/site/src/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
-			"peer size-4 flex items-center justify-center shrink-0 rounded-[.3em] border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			"peer size-4 flex items-center justify-center shrink-0 rounded-[.3em] border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
 
 			className
 		)}
diff --git a/beszel/site/src/components/ui/command.tsx b/beszel/site/src/components/ui/command.tsx
index d44c434..8d336c9 100644
--- a/beszel/site/src/components/ui/command.tsx
+++ b/beszel/site/src/components/ui/command.tsx
@@ -105,7 +105,7 @@ const CommandItem = React.forwardRef<
 	<CommandPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default opacity-70 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:opacity-90 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+			"relative flex cursor-default opacity-70 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent/70 aria-selected:opacity-90 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
 			className
 		)}
 		{...props}
diff --git a/beszel/site/src/components/ui/dropdown-menu.tsx b/beszel/site/src/components/ui/dropdown-menu.tsx
index 854cc0f..6610406 100644
--- a/beszel/site/src/components/ui/dropdown-menu.tsx
+++ b/beszel/site/src/components/ui/dropdown-menu.tsx
@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
-			"flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+			"flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none focus:bg-accent/70 data-[state=open]:bg-accent/70",
 			inset && "ps-8",
 			className
 		)}
@@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none focus:bg-accent/70 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 			inset && "ps-8",
 			className
 		)}
@@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent/70 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 			className
 		)}
 		checked={checked}
@@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 	<DropdownMenuPrimitive.RadioItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent/70 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 			className
 		)}
 		{...props}
diff --git a/beszel/site/src/components/ui/select.tsx b/beszel/site/src/components/ui/select.tsx
index b48eddb..7be267c 100644
--- a/beszel/site/src/components/ui/select.tsx
+++ b/beszel/site/src/components/ui/select.tsx
@@ -105,7 +105,7 @@ const SelectItem = React.forwardRef<
 	<SelectPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent/70 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 			className
 		)}
 		{...props}
diff --git a/beszel/site/src/index.css b/beszel/site/src/index.css
index 3912179..6b88fa7 100644
--- a/beszel/site/src/index.css
+++ b/beszel/site/src/index.css
@@ -4,7 +4,7 @@
 
 @layer base {
 	:root {
-		--background: 30 8% 98.5%;
+		--background: 30 8% 98%;
 		--foreground: 30 0% 0%;
 		--card: 30 0% 100%;
 		--card-foreground: 240 6.67% 2.94%;
diff --git a/beszel/site/tailwind.config.js b/beszel/site/tailwind.config.js
index 680a533..7b663af 100644
--- a/beszel/site/tailwind.config.js
+++ b/beszel/site/tailwind.config.js
@@ -69,6 +69,9 @@ module.exports = {
 					foreground: "hsl(var(--card-foreground))",
 				},
 			},
+			transitionDuration: {
+				50: "50ms",
+			},
 			borderRadius: {
 				lg: "var(--radius)",
 				md: "calc(var(--radius) - 2px)",