Federation dark theme improvements

Awesome-Technologies · Jul 18, 2024 · 299f284 · 299f284
1 parent fc1a02b
commit 299f284
Showing 1 changed file with 16 additions and 1 deletion.
diff --git 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}