list ui selector layout fixes

* The `DisplaySelector` wasn't getting the correct flex layout.
  Before this was done by a manual style on a `Paper` element. That
  broke when adding the inner `<CardContent>` to because that's the
  container that needs the `display: "flex"`. But really, it's clearer
  to do this with `<FormGroup>` anyway, so do that.

* Switch from `<Card><CardContent>` to `<Paper sx={{ padding: ... }}>`.
  The card content has extra padding (16 px in general, 24 at the bottom
  of the last element to fit with an action). I'm not quite sure the
  best way to remove it, and the simpler `<Paper>` seems fine for this
  use anyway.

ui/src/List/DisplaySelector.tsx

@@ -2,14 +2,15 @@
 // Copyright (C) 2021 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
-import Card from "@mui/material/Card";
 import Checkbox from "@mui/material/Checkbox";
 import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import CardContent from "@mui/material/CardContent/CardContent";
+import FormGroup from "@mui/material/FormGroup";
+import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
 
 interface Props {
   split90k?: number;
@@ -33,14 +34,10 @@ export const DEFAULT_DURATION = DURATIONS[0][1];
  * Returns a card for setting options relating to how videos are displayed.
  */
 const DisplaySelector = (props: Props) => {
+  const theme = useTheme();
   return (
-    <Card
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <CardContent>
+    <Paper style={{ padding: theme.spacing(1) }}>
+      <FormGroup>
         <FormControl fullWidth variant="outlined">
           <InputLabel id="split90k-label" shrink>
             Max video duration
@@ -101,8 +98,8 @@ const DisplaySelector = (props: Props) => {
           }
           label="Timestamp track"
         />
-      </CardContent>
-    </Card>
+      </FormGroup>
+    </Paper>
   );
 };
 

ui/src/List/StreamMultiSelector.tsx

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
 import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
 import { Camera, Stream, StreamType } from "../types";
 import Checkbox from "@mui/material/Checkbox";
 import { ToplevelResponse } from "../api";
-import CardContent from "@mui/material/CardContent/CardContent";
+import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
 
 interface Props {
   toplevel: ToplevelResponse;
@@ -17,6 +17,7 @@ interface Props {
 
 /** Returns a table which allows selecting zero or more streams. */
 const StreamMultiSelector = ({ toplevel, selected, setSelected }: Props) => {
+  const theme = useTheme();
   const setStream = (s: Stream, checked: boolean) => {
     const updated = new Set(selected);
     if (checked) {
@@ -90,39 +91,37 @@ const StreamMultiSelector = ({ toplevel, selected, setSelected }: Props) => {
     );
   });
   return (
-    <Card>
-      <CardContent>
-        <Box
-          component="table"
-          sx={{
-            fontSize: "0.9rem",
-            "& td:first-of-type": {
-              paddingRight: "3px",
-            },
-            "& td:not(:first-of-type)": {
-              textAlign: "center",
-            },
+    <Paper sx={{ padding: theme.spacing(1) }}>
+      <Box
+        component="table"
+        sx={{
+          fontSize: "0.9rem",
+          "& td:first-of-type": {
+            paddingRight: "3px",
+          },
+          "& td:not(:first-of-type)": {
+            textAlign: "center",
+          },
+          "& .MuiCheckbox-root": {
+            padding: "3px",
+          },
+          "@media (pointer: fine)": {
             "& .MuiCheckbox-root": {
-              padding: "3px",
+              padding: "0px",
             },
-            "@media (pointer: fine)": {
-              "& .MuiCheckbox-root": {
-                padding: "0px",
-              },
-            },
-          }}
-        >
-          <thead>
-            <tr>
-              <td />
-              <td onClick={() => toggleType("main")}>main</td>
-              <td onClick={() => toggleType("sub")}>sub</td>
-            </tr>
-          </thead>
-          <tbody>{cameraRows}</tbody>
-        </Box>
-      </CardContent>
-    </Card>
+          },
+        }}
+      >
+        <thead>
+          <tr>
+            <td />
+            <td onClick={() => toggleType("main")}>main</td>
+            <td onClick={() => toggleType("sub")}>sub</td>
+          </tr>
+        </thead>
+        <tbody>{cameraRows}</tbody>
+      </Box>
+    </Paper>
   );
 };
 

ui/src/List/TimerangeSelector.tsx

@@ -59,7 +59,6 @@ import React, { useEffect } from "react";
 import { zonedTimeToUtc } from "date-fns-tz";
 import { addDays, addMilliseconds, differenceInMilliseconds } from "date-fns";
 import startOfDay from "date-fns/startOfDay";
-import Card from "@mui/material/Card";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormLabel from "@mui/material/FormLabel";
 import Radio from "@mui/material/Radio";
@@ -67,7 +66,8 @@ import RadioGroup from "@mui/material/RadioGroup";
 import { TimePicker, TimePickerProps } from "@mui/x-date-pickers/TimePicker";
 import Collapse from "@mui/material/Collapse";
 import Box from "@mui/material/Box";
-import CardContent from "@mui/material/CardContent/CardContent";
+import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
 
 interface Props {
   selectedStreams: Set<Stream>;
@@ -326,6 +326,7 @@ const TimerangeSelector = ({
   timeZoneName,
   setRange90k,
 }: Props) => {
+  const theme = useTheme();
   const [days, updateDays] = React.useReducer(daysStateReducer, {
     allowed: null,
     rangeMillis: null,
@@ -370,88 +371,86 @@ const TimerangeSelector = ({
     endDate = new Date(days.rangeMillis[1]);
   }
   return (
-    <Card>
-      <CardContent>
-        <Box>
-          <FormLabel component="legend">From</FormLabel>
+    <Paper sx={{ padding: theme.spacing(1) }}>
+      <Box>
+        <FormLabel component="legend">From</FormLabel>
+        <SmallStaticDatePicker
+          displayStaticWrapperAs="desktop"
+          value={startDate}
+          disabled={days.allowed === null}
+          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 });
+          }}
+        />
+        <MyTimePicker
+          value={startTime}
+          onChange={(newValue) => {
+            if (newValue === null || isFinite((newValue as Date).getTime())) {
+              setStartTime(newValue);
+            }
+          }}
+          disabled={days.allowed === null}
+        />
+      </Box>
+      <Box>
+        <FormLabel sx={{ mt: 1 }} component="legend">
+          To
+        </FormLabel>
+        <RadioGroup
+          row
+          value={days.endType}
+          onChange={(e) => {
+            updateDays({
+              op: "set-end-type",
+              newEndType: e.target.value as EndDayType,
+            });
+          }}
+        >
+          <FormControlLabel
+            value="same-day"
+            control={<Radio size="small" color="secondary" />}
+            label="Same day"
+          />
+          <FormControlLabel
+            value="other-day"
+            control={<Radio size="small" color="secondary" />}
+            label="Other day"
+          />
+        </RadioGroup>
+        <Collapse in={days.endType === "other-day"}>
           <SmallStaticDatePicker
             displayStaticWrapperAs="desktop"
-            value={startDate}
-            disabled={days.allowed === null}
-            shouldDisableDate={shouldDisableDate}
+            value={endDate}
+            shouldDisableDate={(d: Date | null) =>
+              days.endType !== "other-day" || shouldDisableDate(d)
+            }
             maxDate={
-              days.allowed === null ? today : new Date(days.allowed.maxMillis)
-            }
-            minDate={
-              days.allowed === null ? today : new Date(days.allowed.minMillis)
+              startDate === null ? today : new Date(days.allowed!.maxMillis)
             }
+            minDate={startDate === null ? today : startDate}
             onChange={(d: Date | null) => {
-              updateDays({ op: "set-start-day", newStartDate: d });
+              updateDays({ op: "set-end-day", newEndDate: d! });
             }}
           />
-          <MyTimePicker
-            value={startTime}
-            onChange={(newValue) => {
-              if (newValue === null || isFinite((newValue as Date).getTime())) {
-                setStartTime(newValue);
-              }
-            }}
-            disabled={days.allowed === null}
-          />
-        </Box>
-        <Box>
-          <FormLabel sx={{ mt: 1 }} component="legend">
-            To
-          </FormLabel>
-          <RadioGroup
-            row
-            value={days.endType}
-            onChange={(e) => {
-              updateDays({
-                op: "set-end-type",
-                newEndType: e.target.value as EndDayType,
-              });
-            }}
-          >
-            <FormControlLabel
-              value="same-day"
-              control={<Radio size="small" color="secondary" />}
-              label="Same day"
-            />
-            <FormControlLabel
-              value="other-day"
-              control={<Radio size="small" color="secondary" />}
-              label="Other day"
-            />
-          </RadioGroup>
-          <Collapse in={days.endType === "other-day"}>
-            <SmallStaticDatePicker
-              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! });
-              }}
-            />
-          </Collapse>
-          <MyTimePicker
-            value={endTime}
-            onChange={(newValue) => {
-              if (newValue === null || isFinite((newValue as Date).getTime())) {
-                setEndTime(newValue);
-              }
-            }}
-            disabled={days.allowed === null}
-          />
-        </Box>
-      </CardContent>
-    </Card>
+        </Collapse>
+        <MyTimePicker
+          value={endTime}
+          onChange={(newValue) => {
+            if (newValue === null || isFinite((newValue as Date).getTime())) {
+              setEndTime(newValue);
+            }
+          }}
+          disabled={days.allowed === null}
+        />
+      </Box>
+    </Paper>
   );
 };