From 299f2841a65699cc7cca9239387fb1f41892af5e Mon Sep 17 00:00:00 2001
From: rkfg <rkfg@rkfg.me>
Date: Thu, 18 Jul 2024 12:53:26 +0300
Subject: [PATCH] Federation dark theme improvements

---
 src/resources/destinations.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/resources/destinations.tsx b/src/resources/destinations.tsx
index 89c7a9c8..4242e560 100644
--- a/src/resources/destinations.tsx
+++ b/src/resources/destinations.tsx
@@ -27,17 +27,30 @@ import {
   useNotify,
   useRefresh,
   useTranslate,
+  useTheme,
   DateFieldProps,
 } from "react-admin";
 
 import { DATE_FORMAT } from "../components/date";
+import { blue } from '@mui/material/colors';
+import { get } from 'lodash';
 
 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 = () => {
@@ -102,6 +115,8 @@ const RetryDateField = (props: DateFieldProps) => {
 }
 
 export const DestinationList = (props: ListProps) => {
+  const [theme] = useTheme();
+  const destinationRowSx = theme === 'light' ? destinationRowSxLight : destinationRowSxDark;
   return (
     <List
       {...props}