From d273a99f83ece9c5857d6e18bb26a1808874d240 Mon Sep 17 00:00:00 2001
From: Scott Lamb <slamb@slamb.org>
Date: Tue, 16 Mar 2021 21:57:55 -0700
Subject: [PATCH] use secondary colors in date pickers

---
 ui/src/List/TimerangeSelector.tsx | 87 +++++++++++++++++++------------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/ui/src/List/TimerangeSelector.tsx b/ui/src/List/TimerangeSelector.tsx
index c3046bc..018cfb1 100644
--- a/ui/src/List/TimerangeSelector.tsx
+++ b/ui/src/List/TimerangeSelector.tsx
@@ -9,7 +9,11 @@ import { zonedTimeToUtc } from "date-fns-tz";
 import { addDays, addMilliseconds, differenceInMilliseconds } from "date-fns";
 import startOfDay from "date-fns/startOfDay";
 import Card from "@material-ui/core/Card";
-import { useTheme } from "@material-ui/core/styles";
+import {
+  ThemeProvider,
+  createMuiTheme,
+  useTheme,
+} from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import FormLabel from "@material-ui/core/FormLabel";
@@ -213,6 +217,17 @@ const TimerangeSelector = ({
   setRange90k,
 }: Props) => {
   const theme = useTheme();
+
+  // StaticDatePicker doesn't have an obvious way to use the secondary theme
+  // colors, so make a new theme with swapped colors.
+  const swappedTheme = createMuiTheme({
+    ...theme,
+    palette: {
+      ...theme.palette,
+      primary: theme.palette.secondary,
+      secondary: theme.palette.primary,
+    },
+  });
   const [days, updateDays] = React.useReducer(daysStateReducer, {
     allowed: null,
     rangeMillis: null,
@@ -260,21 +275,25 @@ const TimerangeSelector = ({
     <Card sx={{ padding: theme.spacing(1) }}>
       <div>
         <FormLabel component="legend">From</FormLabel>
-        <StaticDatePicker
-          displayStaticWrapperAs="desktop"
-          value={startDate}
-          shouldDisableDate={shouldDisableDate}
-          maxDate={
-            days.allowed === null ? today : new Date(days.allowed.maxMillis)
-          }
-          minDate={
-            days.allowed === null ? today : new Date(days.allowed.minMillis)
-          }
-          onChange={(d: Date | null) => {
-            updateDays({ op: "set-start-day", newStartDate: d });
-          }}
-          renderInput={(params) => <TextField {...params} variant="outlined" />}
-        />
+        <ThemeProvider theme={swappedTheme}>
+          <StaticDatePicker
+            displayStaticWrapperAs="desktop"
+            value={startDate}
+            shouldDisableDate={shouldDisableDate}
+            maxDate={
+              days.allowed === null ? today : new Date(days.allowed.maxMillis)
+            }
+            minDate={
+              days.allowed === null ? today : new Date(days.allowed.minMillis)
+            }
+            onChange={(d: Date | null) => {
+              updateDays({ op: "set-start-day", newStartDate: d });
+            }}
+            renderInput={(params) => (
+              <TextField {...params} variant="outlined" />
+            )}
+          />
+        </ThemeProvider>
         <MyTimePicker
           value={startTime}
           onChange={(newValue) => {
@@ -309,23 +328,25 @@ const TimerangeSelector = ({
           />
         </RadioGroup>
         <Collapse in={days.endType === "other-day"}>
-          <StaticDatePicker
-            displayStaticWrapperAs="desktop"
-            value={endDate}
-            shouldDisableDate={(d: Date | null) =>
-              days.endType !== "other-day" || shouldDisableDate(d)
-            }
-            maxDate={
-              startDate === null ? today : new Date(days.allowed!.maxMillis)
-            }
-            minDate={startDate === null ? today : startDate}
-            onChange={(d: Date | null) => {
-              updateDays({ op: "set-end-day", newEndDate: d! });
-            }}
-            renderInput={(params) => (
-              <TextField {...params} variant="outlined" />
-            )}
-          />
+          <ThemeProvider theme={swappedTheme}>
+            <StaticDatePicker
+              displayStaticWrapperAs="desktop"
+              value={endDate}
+              shouldDisableDate={(d: Date | null) =>
+                days.endType !== "other-day" || shouldDisableDate(d)
+              }
+              maxDate={
+                startDate === null ? today : new Date(days.allowed!.maxMillis)
+              }
+              minDate={startDate === null ? today : startDate}
+              onChange={(d: Date | null) => {
+                updateDays({ op: "set-end-day", newEndDate: d! });
+              }}
+              renderInput={(params) => (
+                <TextField {...params} variant="outlined" />
+              )}
+            />
+          </ThemeProvider>
         </Collapse>
         <MyTimePicker
           value={endTime}