style updates

beszel/site/src/components/charts/gpu-power-chart.tsx

@@ -104,7 +104,7 @@ export default memo(function GpuPowerChart({ chartData }: { chartData: ChartData
 							isAnimationActive={false}
 						/>
 					))}
-					{colors.length < 12 && <ChartLegend content={<ChartLegendContent />} />}
+					{colors.length > 1 && <ChartLegend content={<ChartLegendContent />} />}
 				</LineChart>
 			</ChartContainer>
 		</div>

beszel/site/src/components/login/login.tsx

@@ -7,11 +7,13 @@ import ForgotPassword from "./forgot-pass-form"
 import { $router } from "../router"
 import { AuthMethodsList } from "pocketbase"
 import { t } from "@lingui/macro"
+import { useTheme } from "../theme-provider"
 
 export default function () {
 	const page = useStore($router)
 	const [isFirstRun, setFirstRun] = useState(false)
 	const [authMethods, setAuthMethods] = useState<AuthMethodsList>()
+	const { theme } = useTheme()
 
 	useEffect(() => {
 		document.title = t`Login` + " / Beszel"
@@ -45,7 +47,11 @@ export default function () {
 
 	return (
 		<div className="min-h-svh grid items-center py-12">
-			<div className="grid gap-5 w-full px-4 mx-auto" style={{ maxWidth: "22em" }}>
+			<div
+				className="grid gap-5 w-full px-4 mx-auto"
+				// @ts-ignore
+				style={{ maxWidth: "22em", "--border": theme == "light" ? "30 8% 80%" : "220 3% 20%" }}
+			>
 				<div className="text-center">
 					<h1 className="mb-3">
 						<Logo className="h-7 fill-foreground mx-auto" />

beszel/site/src/components/routes/settings/sidebar-nav.tsx

@@ -45,21 +45,26 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
 
 			{/* Desktop View */}
 			<nav className={cn("hidden md:grid gap-1", className)} {...props}>
-				{items.map((item) => (
+				{items.map((item) => {
-					<Link
+					if (item.admin && !isAdmin()) {
-						key={item.href}
+						return null
-						href={item.href}
+					}
-						className={cn(
+					return (
-							buttonVariants({ variant: "ghost" }),
+						<Link
-							"flex items-center gap-3",
+							key={item.href}
-							page?.path === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted/50",
+							href={item.href}
-							"justify-start"
+							className={cn(
-						)}
+								buttonVariants({ variant: "ghost" }),
-					>
+								"flex items-center gap-3",
-						{item.icon && <item.icon className="h-4 w-4" />}
+								page?.path === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted/50",
-						{item.title}
+								"justify-start"
-					</Link>
+							)}
-				))}
+						>
+							{item.icon && <item.icon className="h-4 w-4" />}
+							{item.title}
+						</Link>
+					)
+				})}
 			</nav>
 		</>
 	)

beszel/site/src/components/routes/system.tsx

@@ -656,7 +656,7 @@ function ChartCard({
 				<CardDescription>{description}</CardDescription>
 				{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:end-3.5">{cornerEl}</div>}
 			</CardHeader>
-			<div className="ps-0 w-[calc(100%-1.5em)] h-52 relative">
+			<div className="ps-0 w-[calc(100%-1.5em)] h-48 md:h-52 relative">
 				{<Spinner msg={empty ? t`Waiting for enough records to display` : undefined} />}
 				{isIntersecting && children}
 			</div>

beszel/site/src/components/systems-table/systems-table.tsx

@@ -352,7 +352,7 @@ export default function SystemsTable() {
 			<CardContent className="max-sm:p-2">
 				<div className="rounded-md border overflow-hidden">
 					<Table>
-						<TableHeader className="bg-muted/40">
+						<TableHeader>
 							{table.getHeaderGroups().map((headerGroup) => (
 								<TableRow key={headerGroup.id}>
 									{headerGroup.headers.map((header) => {

beszel/site/src/components/ui/table.tsx

@@ -12,7 +12,9 @@ const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableE
 Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-	({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+	({ className, ...props }, ref) => (
+		<thead ref={ref} className={cn("bg-muted/30 [&_tr]:border-b", className)} {...props} />
+	)
 )
 TableHeader.displayName = "TableHeader"
 
@@ -35,7 +37,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
 		<tr
 			ref={ref}
 			className={cn(
-				"border-b border-border/60 hover:bg-muted/40 dark:hover:bg-muted/30 data-[state=selected]:bg-muted",
+				"border-b border-border/60 hover:bg-muted/40 dark:hover:bg-muted/20 data-[state=selected]:bg-muted",
 				className
 			)}
 			{...props}
@@ -49,7 +51,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
 		<th
 			ref={ref}
 			className={cn(
-				"h-12 px-4 text-start align-middle font-medium dark:bg-muted/25 text-muted-foreground [&:has([role=checkbox])]:pe-0",
+				"h-12 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0",
 				className
 			)}
 			{...props}

beszel/site/src/index.css

@@ -34,25 +34,25 @@
 
 	.dark {
 		color-scheme: dark;
-		--background: 220 8% 9.2%;
+		--background: 220 5.5% 9.5%;
 		--foreground: 220 2% 97%;
-		--card: 220 10 11.2%;
+		--card: 220 5.5% 11%;
 		--card-foreground: 220 2% 97%;
-		--popover: 220 8% 9.5%;
+		--popover: 220 5.5% 9.5%;
 		--popover-foreground: 220 2% 97%;
 		--primary: 220 2% 96%;
-		--primary-foreground: 220 5.88% 10%;
+		--primary-foreground: 220 4% 10%;
-		--secondary: 220 8% 16%;
+		--secondary: 220 4% 16%;
 		--secondary-foreground: 220 0% 98%;
-		--muted: 220 14% 16%;
+		--muted: 220 6% 16%;
-		--muted-foreground: 220 5% 67%;
+		--muted-foreground: 220 4% 67%;
-		--accent: 220 8% 15.5%;
+		--accent: 220 5% 15.5%;
-		--accent-foreground: 220 0% 98%;
+		--accent-foreground: 220 2% 98%;
 		--destructive: 0 62% 46%;
 		--destructive-foreground: 0 0% 97%;
-		--border: 220 4% 16%;
+		--border: 220 3% 16%;
-		--input: 220 6% 22%;
+		--input: 220 4% 22%;
-		--ring: 220 5% 80%;
+		--ring: 220 4% 80%;
 		--radius: 0.8rem;
 	}
 }

beszel/site/tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
 			center: true,
 			padding: "1rem",
 			screens: {
-				"2xl": "1400px",
+				"2xl": "1420px",
 			},
 		},
 		extend: {