mirror of
https://github.com/prometheus/prometheus.git
synced 2025-08-05 13:47:10 +02:00
mantine-ui: fix /alerts accordian theme colors (#16043)
* 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:
parent
472f0de661
commit
f8508ccafa
3
web/ui/mantine-ui/src/pages/AlertsPage.module.css
Normal file
3
web/ui/mantine-ui/src/pages/AlertsPage.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.item {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
|
||||
}
|
@ -37,6 +37,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.
|
||||
@ -272,20 +273,11 @@ 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
|
||||
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}
|
||||
value={j.toString()}
|
||||
className={
|
||||
|
3
web/ui/mantine-ui/src/pages/RulesPage.module.css
Normal file
3
web/ui/mantine-ui/src/pages/RulesPage.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.item {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
|
||||
}
|
@ -42,6 +42,7 @@ import {
|
||||
import { useSettings } from "../state/settingsSlice";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import CustomInfiniteScroll from "../components/CustomInfiniteScroll";
|
||||
import classes from "./RulesPage.module.css";
|
||||
import { useDebouncedValue, useLocalStorage } from "@mantine/hooks";
|
||||
import { KVSearch } from "@nexucis/kvsearch";
|
||||
import { StateMultiSelect } from "../components/StateMultiSelect";
|
||||
@ -230,19 +231,10 @@ export default function RulesPage() {
|
||||
<CustomInfiniteScroll
|
||||
allItems={g.rules}
|
||||
child={({ items }) => (
|
||||
<Accordion multiple variant="separated">
|
||||
<Accordion multiple variant="separated" classNames={classes}>
|
||||
{items.map((r, j) => (
|
||||
<Accordion.Item
|
||||
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}
|
||||
value={j.toString()}
|
||||
style={{
|
||||
|
Loading…
Reference in New Issue
Block a user