From eab262c3f738a23ea749d817569e167c3804b873 Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Mon, 11 Nov 2024 12:55:44 -0500
Subject: [PATCH] dark theme updates

---
 beszel/site/src/components/navbar.tsx         |  2 +-
 .../routes/settings/notifications.tsx         |  2 +-
 .../site/src/components/ui/alert-dialog.tsx   |  2 +-
 beszel/site/src/components/ui/button.tsx      |  2 +-
 beszel/site/src/components/ui/card.tsx        |  6 ++-
 beszel/site/src/components/ui/chart.tsx       |  2 +-
 beszel/site/src/components/ui/dialog.tsx      |  2 +-
 beszel/site/src/components/ui/input-tags.tsx  |  2 +-
 beszel/site/src/components/ui/input.tsx       |  2 +-
 beszel/site/src/components/ui/select.tsx      |  2 +-
 beszel/site/src/components/ui/table.tsx       |  7 +++-
 beszel/site/src/components/ui/textarea.tsx    |  2 +-
 beszel/site/src/index.css                     | 38 +++++++++----------
 13 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/beszel/site/src/components/navbar.tsx b/beszel/site/src/components/navbar.tsx
index 80b8e9e..e23da19 100644
--- a/beszel/site/src/components/navbar.tsx
+++ b/beszel/site/src/components/navbar.tsx
@@ -35,7 +35,7 @@ const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 
 export default function Navbar() {
 	return (
-		<div className="flex items-center h-14 md:h-16 bg-card px-4 pe-3 sm:px-6 border bt-0 rounded-md my-4">
+		<div className="flex items-center h-14 md:h-16 bg-card px-4 pe-3 sm:px-6 border border-border/60 bt-0 rounded-md my-4">
 			<Link href="/" aria-label="Home" className="p-2 ps-0 me-3">
 				<Logo className="h-[1.1rem] md:h-5 fill-foreground" />
 			</Link>
diff --git a/beszel/site/src/components/routes/settings/notifications.tsx b/beszel/site/src/components/routes/settings/notifications.tsx
index 61beed7..d7499a3 100644
--- a/beszel/site/src/components/routes/settings/notifications.tsx
+++ b/beszel/site/src/components/routes/settings/notifications.tsx
@@ -193,7 +193,7 @@ const ShoutrrrUrlCard = ({ url, onUrlChange, onRemove }: ShoutrrrUrlCardProps) =
 	}
 
 	return (
-		<Card className="bg-muted/30 p-2 md:p-3">
+		<Card className="bg-muted/70 p-2 md:p-3">
 			<div className="flex items-center gap-1">
 				<Input
 					type="url"
diff --git a/beszel/site/src/components/ui/alert-dialog.tsx b/beszel/site/src/components/ui/alert-dialog.tsx
index a9dd589..9f5e35a 100644
--- a/beszel/site/src/components/ui/alert-dialog.tsx
+++ b/beszel/site/src/components/ui/alert-dialog.tsx
@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<AlertDialogPrimitive.Overlay
 		className={cn(
-			"fixed inset-0 z-50 bg-black/50  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			"fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 			className
 		)}
 		{...props}
diff --git a/beszel/site/src/components/ui/button.tsx b/beszel/site/src/components/ui/button.tsx
index fda7b25..55e0d3c 100644
--- a/beszel/site/src/components/ui/button.tsx
+++ b/beszel/site/src/components/ui/button.tsx
@@ -11,7 +11,7 @@ const buttonVariants = cva(
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",
 				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-				outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+				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",
 				link: "text-primary underline-offset-4 hover:underline",
diff --git a/beszel/site/src/components/ui/card.tsx b/beszel/site/src/components/ui/card.tsx
index 42122d0..e1e1905 100644
--- a/beszel/site/src/components/ui/card.tsx
+++ b/beszel/site/src/components/ui/card.tsx
@@ -3,7 +3,11 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+	<div
+		ref={ref}
+		className={cn("rounded-lg border border-border/60 bg-card text-card-foreground shadow-sm", className)}
+		{...props}
+	/>
 ))
 Card.displayName = "Card"
 
diff --git a/beszel/site/src/components/ui/chart.tsx b/beszel/site/src/components/ui/chart.tsx
index 5520b3d..091f699 100644
--- a/beszel/site/src/components/ui/chart.tsx
+++ b/beszel/site/src/components/ui/chart.tsx
@@ -334,7 +334,7 @@ const xAxis = function ({ domain, ticks, chartTime }: ChartData) {
 			allowDataOverflow
 			type="number"
 			scale="time"
-			minTickGap={15}
+			minTickGap={12}
 			tickMargin={8}
 			axisLine={false}
 			tickFormatter={chartTimeData[chartTime].format}
diff --git a/beszel/site/src/components/ui/dialog.tsx b/beszel/site/src/components/ui/dialog.tsx
index a099cbe..29f7b4d 100644
--- a/beszel/site/src/components/ui/dialog.tsx
+++ b/beszel/site/src/components/ui/dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
 	<DialogPrimitive.Overlay
 		ref={ref}
 		className={cn(
-			"fixed inset-0 z-50 bg-black/50  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			"fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 			className
 		)}
 		{...props}
diff --git a/beszel/site/src/components/ui/input-tags.tsx b/beszel/site/src/components/ui/input-tags.tsx
index 853da1c..fe97d89 100644
--- a/beszel/site/src/components/ui/input-tags.tsx
+++ b/beszel/site/src/components/ui/input-tags.tsx
@@ -33,7 +33,7 @@ const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
 		return (
 			<div
 				className={cn(
-					"bg-background min-h-10 flex w-full flex-wrap gap-2 rounded-md border border-input px-3 py-2 text-sm  placeholder:text-muted-foreground has-[:focus-visible]:outline-none ring-offset-background has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					"bg-background min-h-10 flex w-full flex-wrap gap-2 rounded-md border px-3 py-2 text-sm  placeholder:text-muted-foreground has-[:focus-visible]:outline-none ring-offset-background has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 					className
 				)}
 			>
diff --git a/beszel/site/src/components/ui/input.tsx b/beszel/site/src/components/ui/input.tsx
index e74fa55..249ad35 100644
--- a/beszel/site/src/components/ui/input.tsx
+++ b/beszel/site/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
 		<input
 			type={type}
 			className={cn(
-				"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 				className
 			)}
 			ref={ref}
diff --git a/beszel/site/src/components/ui/select.tsx b/beszel/site/src/components/ui/select.tsx
index ebfb3a3..b48eddb 100644
--- a/beszel/site/src/components/ui/select.tsx
+++ b/beszel/site/src/components/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 			className
 		)}
 		{...props}
diff --git a/beszel/site/src/components/ui/table.tsx b/beszel/site/src/components/ui/table.tsx
index 8634615..ed43e5c 100644
--- a/beszel/site/src/components/ui/table.tsx
+++ b/beszel/site/src/components/ui/table.tsx
@@ -34,7 +34,10 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
 	({ className, ...props }, ref) => (
 		<tr
 			ref={ref}
-			className={cn("border-b hover:bg-muted/40 dark:hover:bg-muted/30 data-[state=selected]:bg-muted", className)}
+			className={cn(
+				"border-b border-border/60 hover:bg-muted/40 dark:hover:bg-muted/30 data-[state=selected]:bg-muted",
+				className
+			)}
 			{...props}
 		/>
 	)
@@ -46,7 +49,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
 		<th
 			ref={ref}
 			className={cn(
-				"h-12 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0",
+				"h-12 px-4 text-start align-middle font-medium dark:bg-muted/25 text-muted-foreground [&:has([role=checkbox])]:pe-0",
 				className
 			)}
 			{...props}
diff --git a/beszel/site/src/components/ui/textarea.tsx b/beszel/site/src/components/ui/textarea.tsx
index a87080f..9f1813d 100644
--- a/beszel/site/src/components/ui/textarea.tsx
+++ b/beszel/site/src/components/ui/textarea.tsx
@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
 	return (
 		<textarea
 			className={cn(
-				"flex min-h-14 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				"flex min-h-14 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 				className
 			)}
 			ref={ref}
diff --git a/beszel/site/src/index.css b/beszel/site/src/index.css
index a8615b5..ddede7f 100644
--- a/beszel/site/src/index.css
+++ b/beszel/site/src/index.css
@@ -34,25 +34,25 @@
 
 	.dark {
 		color-scheme: dark;
-		--background: 240 10% 6.2%;
-		--foreground: 0 0% 98.04%;
-		--card: 240 8.57% 8%;
-		--card-foreground: 0 0% 98.04%;
-		--popover: 240 10% 6.2%;
-		--popover-foreground: 0 0% 98.04%;
-		--primary: 0 0% 98.04%;
-		--primary-foreground: 240 5.88% 10%;
-		--secondary: 240 3.7% 15.88%;
-		--secondary-foreground: 0 0% 98.04%;
-		--muted: 240 3.7% 15.88%;
-		--muted-foreground: 240 5.03% 64.9%;
-		--accent: 240 3.7% 15.88%;
-		--accent-foreground: 0 0% 98.04%;
-		--destructive: 0 59% 46%;
-		--destructive-foreground: 0 0% 98.04%;
-		--border: 240 2.86% 12%;
-		--input: 240 3.7% 15.88%;
-		--ring: 240 4.88% 86%;
+		--background: 220 8% 10%;
+		--foreground: 220 2% 97%;
+		--card: 220 10 12%;
+		--card-foreground: 220 2% 97%;
+		--popover: 220 10% 10%;
+		--popover-foreground: 220 2% 97%;
+		--primary: 220 2% 96%;
+		--primary-foreground: 220 5.88% 10%;
+		--secondary: 220 8% 16%;
+		--secondary-foreground: 220 0% 98%;
+		--muted: 220 14% 17%;
+		--muted-foreground: 220 5% 68%;
+		--accent: 220 8% 17%;
+		--accent-foreground: 220 0% 98%;
+		--destructive: 0 62% 48%;
+		--destructive-foreground: 0 0% 97%;
+		--border: 220 2% 17%;
+		--input: 220 6% 22%;
+		--ring: 220 4.88% 86%;
 		--radius: 0.8rem;
 	}
 }