Extra change for Moonfire WebUI

ui/src/List/DisplaySelector.tsx

@@ -8,8 +8,8 @@ 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 { useTheme } from "@mui/material/styles";
 import FormControlLabel from "@mui/material/FormControlLabel";
+import { CardContent } from "@mui/material";
 
 interface Props {
   split90k?: number;
@@ -33,15 +33,14 @@ 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={{
-        padding: theme.spacing(1),
         display: "flex",
         flexDirection: "column",
       }}
     >
+      <CardContent>
       <FormControl fullWidth variant="outlined">
         <InputLabel id="split90k-label" shrink>
           Max video duration
@@ -97,7 +96,8 @@ const DisplaySelector = (props: Props) => {
           />
         }
         label="Timestamp track"
-      />
+        />
+      </CardContent>
     </Card>
   );
 };

ui/src/List/StreamMultiSelector.tsx

@@ -6,8 +6,8 @@ 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 { useTheme } from "@mui/material/styles";
 import { ToplevelResponse } from "../api";
+import { CardContent } from "@mui/material";
 
 interface Props {
   toplevel: ToplevelResponse;
@@ -17,7 +17,6 @@ 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) {
@@ -92,10 +91,8 @@ const StreamMultiSelector = ({ toplevel, selected, setSelected }: Props) => {
   });
   return (
     <Card
-      sx={{
-        padding: theme.spacing(1),
-      }}
     >
+      <CardContent>
       <Box
         component="table"
         sx={{
@@ -124,7 +121,8 @@ const StreamMultiSelector = ({ toplevel, selected, setSelected }: Props) => {
           </tr>
         </thead>
         <tbody>{cameraRows}</tbody>
-      </Box>
+        </Box>
+      </CardContent>
     </Card>
   );
 };

ui/src/List/TimerangeSelector.tsx

@@ -60,7 +60,6 @@ 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 { useTheme } from "@mui/material/styles";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormLabel from "@mui/material/FormLabel";
 import Radio from "@mui/material/Radio";
@@ -68,6 +67,7 @@ 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";
 
 interface Props {
   selectedStreams: Set<Stream>;
@@ -140,7 +140,7 @@ const SmallStaticDatePicker = (props: StaticDatePickerProps<Date>) => {
         },
       }}
     >
-      <StaticDatePicker {...props} />
+      <StaticDatePicker {...props} sx={{ background: "transparent" }} />
     </Box>
   );
 };
@@ -326,7 +326,6 @@ const TimerangeSelector = ({
   timeZoneName,
   setRange90k,
 }: Props) => {
-  const theme = useTheme();
   const [days, updateDays] = React.useReducer(daysStateReducer, {
     allowed: null,
     rangeMillis: null,
@@ -371,8 +370,9 @@ const TimerangeSelector = ({
     endDate = new Date(days.rangeMillis[1]);
   }
   return (
-    <Card sx={{ padding: theme.spacing(1) }}>
-      <div>
+    <Card>
+      <CardContent>
+        <Box>
         <FormLabel component="legend">From</FormLabel>
         <SmallStaticDatePicker
           displayStaticWrapperAs="desktop"
@@ -398,9 +398,9 @@ const TimerangeSelector = ({
           }}
           disabled={days.allowed === null}
         />
-      </div>
-      <div>
-        <FormLabel component="legend">To</FormLabel>
+        </Box>
+        <Box>
+          <FormLabel sx={{ mt: 1 }} component="legend">To</FormLabel>
         <RadioGroup
           row
           value={days.endType}
@@ -447,7 +447,8 @@ const TimerangeSelector = ({
           }}
           disabled={days.allowed === null}
         />
-      </div>
+        </Box>
+      </CardContent>
     </Card>
   );
 };

ui/src/List/index.tsx

@@ -240,6 +240,7 @@ const Main = ({ toplevel, timeZoneName, Frame }: Props) => {
     <TableContainer
       component={Paper}
       sx={{
+        mx: 1,
         flexGrow: 1,
         width: "max-content",
         height: "max-content",
@@ -272,6 +273,7 @@ const Main = ({ toplevel, timeZoneName, Frame }: Props) => {
           aria-label="selectors"
           onClick={toggleShowSelectors}
           color="inherit"
+          sx={showSelectors ? { border: `1px solid #eee` } : {}}
           size="small"
         >
           <FilterList />
@@ -287,12 +289,12 @@ const Main = ({ toplevel, timeZoneName, Frame }: Props) => {
       >
         <Box
           sx={{
-            display: showSelectors ? "block" : "none",
-            width: "max-content",
-            "& .MuiCard-root": {
-              marginRight: theme.spacing(2),
-              marginBottom: theme.spacing(2),
-            },
+            display: showSelectors ? "flex" : "none",
+            maxWidth: { xs: "100%", sm: "300px", md: "300px" },
+
+            gap: 1,
+            mb: 2,
+            flexDirection: "column",
           }}
         >
           <StreamMultiSelector