Federation dark theme improvements

src/resources/destinations.tsx

@@ -1,9 +1,11 @@
+import { get } from "lodash";
 import { MouseEvent } from "react";
 
 import AutorenewIcon from "@mui/icons-material/Autorenew";
 import DestinationsIcon from "@mui/icons-material/CloudQueue";
 import FolderSharedIcon from "@mui/icons-material/FolderShared";
 import ViewListIcon from "@mui/icons-material/ViewList";
+import { blue } from "@mui/material/colors";
 import {
   Button,
   Datagrid,
@@ -27,17 +29,28 @@ import {
   useNotify,
   useRefresh,
   useTranslate,
+  useTheme,
   DateFieldProps,
 } from "react-admin";
 
 import { DATE_FORMAT } from "../components/date";
 
 const DestinationPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;
 
-const destinationRowSx = (record: RaRecord) => ({
+const destinationRowSxLight = (record: RaRecord) => ({
   backgroundColor: record.retry_last_ts > 0 ? "#ffcccc" : "white",
 });
 
+const destinationRowSxDark = (record: RaRecord) => ({
+  backgroundColor: record.retry_last_ts > 0 ? "#ffcccc" : "black",
+  "& > td": {
+    color: record.retry_last_ts > 0 ? "black" : "white",
+    "& > button": {
+      color: blue[600],
+    },
+  },
+});
+
 const destinationFilters = [<SearchInput source="destination" alwaysOn />];
 
 export const DestinationReconnectButton = () => {
@@ -96,12 +109,14 @@ const DestinationTitle = () => {
 const RetryDateField = (props: DateFieldProps) => {
   const record = useRecordContext(props);
   if (props.source && get(record, props.source) === 0) {
-    return <DateField {...props} record={{...record, [props.source]: null}} />
+    return <DateField {...props} record={{ ...record, [props.source]: null }} />;
   }
-  return <DateField {...props} />
-}
+  return <DateField {...props} />;
+};
 
 export const DestinationList = (props: ListProps) => {
+  const [theme] = useTheme();
+  const destinationRowSx = theme === "light" ? destinationRowSxLight : destinationRowSxDark;
   return (
     <List
       {...props}