mirrors/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-08-07 14:47:11 +02:00
Code Issues Projects Releases Wiki Activity

mantine-ui: fix /alerts accordian theme colors (#16043)

Browse Source 
* fix-alerts-accordion-theme

Signed-off-by: amanycodes <amanycodes@gmail.com>

* fixes

Signed-off-by: amanycodes <amanycodes@gmail.com>

* added changes to /rules page

Signed-off-by: amanycodes <amanycodes@gmail.com>

* more fixes

Signed-off-by: amanycodes <amanycodes@gmail.com>

---------

Signed-off-by: amanycodes <amanycodes@gmail.com>
Signed-off-by: Aman <95525722+amanycodes@users.noreply.github.com>
This commit is contained in:
Aman 2025-06-12 13:53:04 +05:30 committed by GitHub
parent 472f0de661
commit f8508ccafa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 10 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,3 @@
.item {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
}

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

@ -37,6 +37,7 @@ import { useDebouncedValue } from "@mantine/hooks";
import { KVSearch } from "@nexucis/kvsearch"; import { KVSearch } from "@nexucis/kvsearch";
import { inputIconStyle } from "../styles"; import { inputIconStyle } from "../styles";
import CustomInfiniteScroll from "../components/CustomInfiniteScroll"; import CustomInfiniteScroll from "../components/CustomInfiniteScroll";
import classes from "./AlertsPage.module.css";
type AlertsPageData = { type AlertsPageData = {
// How many rules are in each state across all groups. // How many rules are in each state across all groups.
@ -272,20 +273,11 @@ export default function AlertsPage() {
<CustomInfiniteScroll <CustomInfiniteScroll
allItems={g.rules} allItems={g.rules}
child={({ items }) => ( child={({ items }) => (
<Accordion multiple variant="separated"> <Accordion multiple variant="separated" classNames={classes}>
{items.map((r, j) => { {items.map((r, j) => {
return ( return (
<Accordion.Item <Accordion.Item
mt={rem(5)} mt={rem(5)}
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} key={j}
value={j.toString()} value={j.toString()}
className={ className={

3
web/ui/mantine-ui/src/pages/RulesPage.module.css Normal file
View File

@ -0,0 +1,3 @@
.item {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
}

12
web/ui/mantine-ui/src/pages/RulesPage.tsx
View File

@ -42,6 +42,7 @@ import {
import { useSettings } from "../state/settingsSlice"; import { useSettings } from "../state/settingsSlice";
import { useEffect, useMemo } from "react"; import { useEffect, useMemo } from "react";
import CustomInfiniteScroll from "../components/CustomInfiniteScroll"; import CustomInfiniteScroll from "../components/CustomInfiniteScroll";
import classes from "./RulesPage.module.css";
import { useDebouncedValue, useLocalStorage } from "@mantine/hooks"; import { useDebouncedValue, useLocalStorage } from "@mantine/hooks";
import { KVSearch } from "@nexucis/kvsearch"; import { KVSearch } from "@nexucis/kvsearch";
import { StateMultiSelect } from "../components/StateMultiSelect"; import { StateMultiSelect } from "../components/StateMultiSelect";
@ -230,19 +231,10 @@ export default function RulesPage() {
<CustomInfiniteScroll <CustomInfiniteScroll
allItems={g.rules} allItems={g.rules}
child={({ items }) => ( child={({ items }) => (
<Accordion multiple variant="separated"> <Accordion multiple variant="separated" classNames={classes}>
{items.map((r, j) => ( {items.map((r, j) => (
<Accordion.Item <Accordion.Item
mt={rem(5)} mt={rem(5)}
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} key={j}
value={j.toString()} value={j.toString()}
style={{ style={{