Cleanup participant selector and dark mode

reports/src/ThemeContext.tsx

@@ -65,7 +65,7 @@ export const CustomThemeProvider = ({
         backgroundColor:
           theme.palette.mode === "light"
             ? theme.palette.grey[100]
-            : theme.palette.grey[900],
+            : theme.palette.grey[800],
       },
     };
   };

reports/src/capability/CapabilityTable.tsx

@@ -1,15 +1,14 @@
 import {
   Box,
   Breadcrumbs,
+  Link,
   List,
   ListItem,
-  ListItemButton,
-  ListItemText,
   Paper,
   Typography,
 } from "@mui/material";
 import { Capability } from "./capabilityTypes";
-import { useMatches, useNavigate } from "react-router-dom";
+import { Link as RouterLink, useMatches } from "react-router-dom";
 import { ReactNode } from "react";
 import { Report } from "./capabilityTypes";
 import { CapabilityTableHeader } from "./CapabilityTableHeader";
@@ -46,7 +45,6 @@ export const CapabilityTable = ({
   report,
   participantMissing,
 }: CapabilityTableProps) => {
-  const navigate = useNavigate();
   if (!capability) {
     return <span>Capability not found</span>;
   }
@@ -57,26 +55,22 @@ export const CapabilityTable = ({
       <Box
         component="main"
         sx={{
-          backgroundColor: (theme) =>
-            theme.palette.mode === "light"
-              ? theme.palette.grey[100]
-              : theme.palette.grey[900],
           padding: 8,
           paddingTop: 10,
         }}
       >
         {participantMissing ? (
           <>
-            <Typography variant="h3" gutterBottom>
+            <Typography variant="h4" gutterBottom>
               {report.participants?.length ? "Participants" : "Participant"}
             </Typography>
             <Paper>
               <List>
                 {report.participants?.map((p, i) => (
                   <ListItem key={i}>
-                    <ListItemButton onClick={() => navigate(`/${i}`)}>
-                      <ListItemText primary={p} />
-                    </ListItemButton>
+                    <Link component={RouterLink} to={`/${i}`}>
+                      {p}
+                    </Link>
                   </ListItem>
                 ))}
               </List>

reports/src/capability/ParticipantSelector.tsx

@@ -17,27 +17,27 @@ export const ParticipantSelector = ({
 }) => {
   const location = useLocation();
   const navigate = useNavigate();
-  const ussp = parseInt(location.pathname.split("/")[1]);
+  const participantId = parseInt(location.pathname.split("/")[1]);
 
-  const handleUsspSelect = (event: SelectChangeEvent<number>) => {
+  const handleParticipantSelect = (event: SelectChangeEvent<number>) => {
     const id = event.target.value;
     navigate(`/${id}`);
   };
-  if (hideIfNoParticipant && Number.isNaN(ussp)) {
+  if (hideIfNoParticipant && Number.isNaN(participantId)) {
     return null;
   }
   return (
     <FormControl size="small">
-      <InputLabel id="ussp-select-label">USSP</InputLabel>
+      <InputLabel id="ussp-select-label">Participant</InputLabel>
       <Select
         displayEmpty={true}
-        label="USSP"
-        value={ussp}
-        onChange={handleUsspSelect}
-        labelId="ussp-select-label"
+        label="Participant"
+        value={participantId}
+        onChange={handleParticipantSelect}
+        sx={{ minWidth: 90 }}
       >
         {report.participants?.map((p, i) => (
-          <MenuItem value={i} key={i}>
+          <MenuItem value={i} key={i} sx={{ minWidth: 30 }}>
             {p}
           </MenuItem>
         ))}