upgrade material-ui to latest beta

This is a surprisingly complex upgrade. Some relevant changes from
[their CHANGELOG](https://github.com/mui-org/material-ui/blob/v5.0.0-beta.3/CHANGELOG.md):

* @material-ui/core/styles no longer re-exports some stuff from
  @material-ui/styles
* there's no more defaultTheme, so tests need to provide one
* select's onChange has a new type; match that. I haven't actually
  tried that the string form (apparently from autofill) works correctly.
* checkboxes no longer default to the secondary color; explicitly
  request this in some places.
* checkbox no longer has a checked argument; use event.target.checked
  instead.
* date pickers have switched to the new style system, so I had to
  redo how I was overridding their spacing for desktop.
* LoadingButton now has a loading property, not pending
* createMuiTheme is no createTheme

ui/src/List/DisplaySelector.tsx

@@ -53,7 +53,13 @@ const DisplaySelector = (props: Props) => {
           id="split90k"
           size="small"
           value={props.split90k}
-          onChange={(e) => props.setSplit90k(e.target.value)}
+          onChange={(e) =>
+            props.setSplit90k(
+              typeof e.target.value === "string"
+                ? parseInt(e.target.value)
+                : e.target.value
+            )
+          }
           displayEmpty
         >
           {DURATIONS.map(([l, d]) => (
@@ -72,10 +78,9 @@ const DisplaySelector = (props: Props) => {
           <Checkbox
             checked={props.trimStartAndEnd}
             size="small"
-            onChange={(_, checked: boolean) =>
-              props.setTrimStartAndEnd(checked)
-            }
+            onChange={(event) => props.setTrimStartAndEnd(event.target.checked)}
             name="trim-start-and-end"
+            color="secondary"
           />
         }
         label="Trim start and end"
@@ -87,8 +92,9 @@ const DisplaySelector = (props: Props) => {
           <Checkbox
             checked={props.timestampTrack}
             size="small"
-            onChange={(_, checked: boolean) => props.setTimestampTrack(checked)}
+            onChange={(event) => props.setTimestampTrack(event.target.checked)}
             name="timestamp-track"
+            color="secondary"
           />
         }
         label="Timestamp track"

ui/src/List/StreamMultiSelector.tsx

@@ -5,7 +5,8 @@
 import Card from "@material-ui/core/Card";
 import { Camera, Stream, StreamType } from "../types";
 import Checkbox from "@material-ui/core/Checkbox";
-import { makeStyles, useTheme } from "@material-ui/core/styles";
+import { useTheme } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/styles";
 
 interface Props {
   cameras: Camera[];
@@ -86,14 +87,17 @@ const StreamMultiSelector = ({ cameras, selected, setSelected }: Props) => {
     function checkbox(st: StreamType) {
       const s = c.streams[st];
       if (s === undefined) {
-        return <Checkbox className={classes.check} disabled />;
+        return (
+          <Checkbox className={classes.check} color="secondary" disabled />
+        );
       }
       return (
         <Checkbox
           className={classes.check}
           size="small"
           checked={selected.has(s)}
-          onChange={(_, checked: boolean) => setStream(s, checked)}
+          color="secondary"
+          onChange={(event) => setStream(s, event.target.checked)}
         />
       );
     }

ui/src/List/TimerangeSelector.tsx

@@ -3,7 +3,9 @@
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
 import { Stream } from "../types";
-import StaticDatePicker from "@material-ui/lab/StaticDatePicker";
+import StaticDatePicker, {
+  StaticDatePickerProps,
+} from "@material-ui/lab/StaticDatePicker";
 import React, { useEffect } from "react";
 import { zonedTimeToUtc } from "date-fns-tz";
 import { addDays, addMilliseconds, differenceInMilliseconds } from "date-fns";
@@ -17,6 +19,7 @@ import Radio from "@material-ui/core/Radio";
 import RadioGroup from "@material-ui/core/RadioGroup";
 import TimePicker, { TimePickerProps } from "@material-ui/lab/TimePicker";
 import Collapse from "@material-ui/core/Collapse";
+import Box from "@material-ui/core/Box";
 
 interface Props {
   selectedStreams: Set<Stream>;
@@ -39,6 +42,47 @@ const MyTimePicker = (
   />
 );
 
+const SmallStaticDatePicker = (props: StaticDatePickerProps<Date>) => {
+  // The spacing defined at https://material.io/components/date-pickers#specs
+  // seems plenty big enough (on desktop). Not sure why material-ui wants
+  // to make it bigger but that doesn't work well with our layout.
+  // This adjustment is a fragile hack but seems to work for now.
+  const DATE_SIZE = 32;
+  return (
+    <Box
+      sx={{
+        "@media (pointer: fine)": {
+          "& > div": {
+            minWidth: 256,
+          },
+          "& > div > div, & > div > div > div, & .MuiCalendarPicker-root": {
+            width: 256,
+          },
+          "& .MuiTypography-caption": {
+            width: DATE_SIZE,
+            margin: 0,
+          },
+          "& .PrivatePickersSlideTransition-root": {
+            minHeight: DATE_SIZE * 6,
+          },
+          '& .PrivatePickersSlideTransition-root [role="row"]': {
+            margin: 0,
+          },
+          "& .MuiPickersDay-dayWithMargin": {
+            margin: 0,
+          },
+          "& .MuiPickersDay-root": {
+            width: DATE_SIZE,
+            height: DATE_SIZE,
+          },
+        },
+      }}
+    >
+      <StaticDatePicker {...props} />
+    </Box>
+  );
+};
+
 /**
  * Combines the date-part of <tt>dayMillis</tt> and the time part of
  * <tt>time</tt>. If <tt>time</tt> is null, assume it reaches the end of the
@@ -260,7 +304,7 @@ const TimerangeSelector = ({
     <Card sx={{ padding: theme.spacing(1) }}>
       <div>
         <FormLabel component="legend">From</FormLabel>
-        <StaticDatePicker
+        <SmallStaticDatePicker
           displayStaticWrapperAs="desktop"
           value={startDate}
           shouldDisableDate={shouldDisableDate}
@@ -299,17 +343,17 @@ const TimerangeSelector = ({
         >
           <FormControlLabel
             value="same-day"
-            control={<Radio size="small" />}
+            control={<Radio size="small" color="secondary" />}
             label="Same day"
           />
           <FormControlLabel
             value="other-day"
-            control={<Radio size="small" />}
+            control={<Radio size="small" color="secondary" />}
             label="Other day"
           />
         </RadioGroup>
         <Collapse in={days.endType === "other-day"}>
-          <StaticDatePicker
+          <SmallStaticDatePicker
             displayStaticWrapperAs="desktop"
             value={endDate}
             shouldDisableDate={(d: Date | null) =>

ui/src/List/index.tsx

@@ -5,7 +5,8 @@
 import Box from "@material-ui/core/Box";
 import Modal from "@material-ui/core/Modal";
 import Paper from "@material-ui/core/Paper";
-import { makeStyles, Theme } from "@material-ui/core/styles";
+import { Theme } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/styles";
 import Table from "@material-ui/core/Table";
 import TableContainer from "@material-ui/core/TableContainer";
 import utcToZonedTime from "date-fns-tz/utcToZonedTime";