From 709a23cf09d16decabf67f106e19a9029cbd931c Mon Sep 17 00:00:00 2001
From: dongchengjie <37543964+dongchengjie@users.noreply.github.com>
Date: Sun, 23 Jun 2024 20:40:09 +0800
Subject: [PATCH] chore: fix connection table bg

---
 src/components/connection/connection-table.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/connection/connection-table.tsx b/src/components/connection/connection-table.tsx
index 392fde45..3e8ed26a 100644
--- a/src/components/connection/connection-table.tsx
+++ b/src/components/connection/connection-table.tsx
@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import { useMemo, useState } from "react";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { useThemeMode } from "@/services/states";
 import { truncateStr } from "@/utils/truncate-str";
 import parseTraffic from "@/utils/parse-traffic";
 import { t } from "i18next";
@@ -12,6 +13,9 @@ interface Props {
 
 export const ConnectionTable = (props: Props) => {
   const { connections, onShowDetail } = props;
+  const mode = useThemeMode();
+  const isDark = mode === "light" ? false : true;
+  const backgroundColor = isDark ? "#282A36" : "#ffffff";
 
   const [columnVisible, setColumnVisible] = useState<
     Partial<Record<keyof IConnectionsItem, boolean>>
@@ -96,7 +100,6 @@ export const ConnectionTable = (props: Props) => {
         source: `${metadata.sourceIP}:${metadata.sourcePort}`,
         destinationIP: metadata.destinationIP,
         type: `${metadata.type}(${metadata.network})`,
-
         connectionData: each,
       };
     });
@@ -112,8 +115,8 @@ export const ConnectionTable = (props: Props) => {
       sx={{
         border: "none",
         "div:focus": { outline: "none !important" },
-        "& div[aria-rowindex='1']": {
-          backgroundColor: "inherit !important",
+        "& div[aria-rowindex]": {
+          backgroundColor: `${backgroundColor} !important`,
         },
       }}
       columnVisibilityModel={columnVisible}