From 28e3de1b7c9474b97c402d026bcc4f502622e2e1 Mon Sep 17 00:00:00 2001
From: amanycodes <amanycodes@gmail.com>
Date: Sat, 15 Feb 2025 17:07:03 +0530
Subject: [PATCH] fix-alerts-accordion-theme

Signed-off-by: amanycodes <amanycodes@gmail.com>
---
 web/ui/mantine-ui/src/pages/AlertsPage.module.css |  8 ++++++++
 web/ui/mantine-ui/src/pages/AlertsPage.tsx        | 12 ++----------
 2 files changed, 10 insertions(+), 10 deletions(-)
 create mode 100644 web/ui/mantine-ui/src/pages/AlertsPage.module.css

diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.module.css b/web/ui/mantine-ui/src/pages/AlertsPage.module.css
new file mode 100644
index 0000000000..4b41d467bd
--- /dev/null
+++ b/web/ui/mantine-ui/src/pages/AlertsPage.module.css
@@ -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));
+  }
+  
\ No newline at end of file
diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.tsx b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
index 4ce42d9059..c9530788dc 100644
--- a/web/ui/mantine-ui/src/pages/AlertsPage.tsx
+++ b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
@@ -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={