mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix-alerts-accordion-theme

Browse source 
Signed-off-by: amanycodes <amanycodes@gmail.com>
This commit is contained in:
amanycodes 2025-02-15 17:07:03 +05:30
parent a5ffa83be8
commit 28e3de1b7c
2 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/ui/mantine-ui/src/pages/AlertsPage.module.css Normal file
View file

@ -0,0 +1,8 @@
.item {
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
}
.item[data-active] {
background-color: light-dark(var(--mantine-color-body-light), var(--mantine-color-body-dark));
}

12
web/ui/mantine-ui/src/pages/AlertsPage.tsx
View file

@ -36,6 +36,7 @@ import { useDebouncedValue } from "@mantine/hooks";
import { KVSearch } from "@nexucis/kvsearch";
import { inputIconStyle } from "../styles";
import CustomInfiniteScroll from "../components/CustomInfiniteScroll";
import classes from "./AlertsPage.module.css";
type AlertsPageData = {
// How many rules are in each state across all groups.
@ -276,19 +277,10 @@ export default function AlertsPage() {
<CustomInfiniteScroll
allItems={g.rules}
child={({ items }) => (
<Accordion multiple variant="separated">
<Accordion multiple variant="separated" classNames={classes}>
{items.map((r, j) => {
return (
<Accordion.Item
styles={{
item: {
// TODO: This transparency hack is an OK workaround to make the collapsed items
// have a different background color than their surrounding group card in dark mode,
// but it would be better to use CSS to override the light/dark colors for
// collapsed/expanded accordion items.
backgroundColor: "#c0c0c015",
},
}}
key={j}
value={j.toString()}
className={