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:
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

View File

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

View File

@ -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={

View File

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

View File

@ -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={{