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) => (
-					<Link
-						key={item.href}
-						href={item.href}
-						className={cn(
-							buttonVariants({ variant: "ghost" }),
-							"flex items-center gap-3",
-							page?.path === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted/50",
-							"justify-start"
-						)}
-					>
-						{item.icon && <item.icon className="h-4 w-4" />}
-						{item.title}
-					</Link>
-				))}
+				{items.map((item) => {
+					if (item.admin && !isAdmin()) {
+						return null
+					}
+					return (
+						<Link
+							key={item.href}
+							href={item.href}
+							className={cn(
+								buttonVariants({ variant: "ghost" }),
+								"flex items-center gap-3",
+								page?.path === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted/50",
+								"justify-start"
+							)}
+						>
+							{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}