MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2025-02-25 12:29:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

Revert "use secondary colors in date pickers"

Browse Source 
This reverts commit d273a99f83ece9c5857d6e18bb26a1808874d240.
This accidentally increased the density by making my global CSS
overrides ineffective. I'm struggling to achieve both, and I'd rather
have my desired sizing.
This commit is contained in:
Scott Lamb 2021-03-17 11:10:39 -07:00
parent 76ef6e58b8
commit 85da157cf4
1 changed files with 33 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
ui/src/List/TimerangeSelector.tsx
View File

@ -9,11 +9,7 @@ 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 {
ThemeProvider,
createMuiTheme,
useTheme,
} from "@material-ui/core/styles";
import { 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";
@ -217,17 +213,6 @@ 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,
@ -275,25 +260,21 @@ const TimerangeSelector = ({
<Card sx={{ padding: theme.spacing(1) }}>
<div>
<FormLabel component="legend">From</FormLabel>
<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>
<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" />}
/>
<MyTimePicker
value={startTime}
onChange={(newValue) => {
@ -328,25 +309,23 @@ const TimerangeSelector = ({
/>
</RadioGroup>
<Collapse in={days.endType === "other-day"}>
<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>
<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" />
)}
/>
</Collapse>
<MyTimePicker
value={endTime}