diff --git a/CHANGELOG.md b/CHANGELOG.md index cc8d3dbf7..31f1d28be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ - Plugin cards and pages use the dashboard look everywhere, with shared lines between sections instead of separate boxes with gaps - The Plugins tab and plugin pages use the same look +- List rows in plugins follow the host list status colors: accent for good, dark for offline or bad - Line charts that cover a few minutes show seconds in their times - Plugins a new release adds to the image start on only when they are recommended. The rest are installed and left off for an admin to turn on diff --git a/src/ui/components/list-kit.tsx b/src/ui/components/list-kit.tsx index 09d84281f..7810eeb31 100644 --- a/src/ui/components/list-kit.tsx +++ b/src/ui/components/list-kit.tsx @@ -4,6 +4,7 @@ import { ChevronRight, Plus, Trash2 } from "lucide-react"; import { useTranslation } from "react-i18next"; import { cn } from "@/lib/utils"; import { Button } from "@/components/button"; +import { useStatusColorScheme } from "@/hooks/use-status-color-scheme"; export type ListRowTone = "brand" | "muted" | "success" | "warning" | "destructive" | "none"; @@ -17,6 +18,16 @@ const STRIPE: Record = { none: "bg-transparent", }; +// Accent scheme, like the host list: good is the accent, anything else is dim. +const ACCENT_STRIPE: Record = { + brand: "bg-accent-brand/60", + muted: "bg-muted-foreground/30", + success: "bg-accent-brand/60", + warning: "bg-muted-foreground/30", + destructive: "bg-muted-foreground/30", + none: "bg-transparent", +}; + /** Scrolling list body. Rows sit flush, divided by their own borders. */ export function PanelList({ empty, @@ -96,6 +107,7 @@ export function ListRow({ React.HTMLAttributes, "title" | "onClick" | "children" >) { + const stripes = useStatusColorScheme() === "status" ? STRIPE : ACCENT_STRIPE; return (