From dd8494f247af20149d0e61cc29e8e811beaba3b9 Mon Sep 17 00:00:00 2001
From: Christopher Chiche <christopher.chiche@orbitalize.com>
Date: Wed, 13 Sep 2023 13:21:14 +0200
Subject: [PATCH 1/2] Cleanup participant selector and dark mode

---
 reports/src/ThemeContext.tsx                   |  2 +-
 reports/src/capability/CapabilityTable.tsx     | 18 ++++++------------
 reports/src/capability/ParticipantSelector.tsx | 14 +++++++-------
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/reports/src/ThemeContext.tsx b/reports/src/ThemeContext.tsx
index b48e7c9..df8c71d 100644
--- a/reports/src/ThemeContext.tsx
+++ b/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],
       },
     };
   };
diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx
index 00c6f64..0b30743 100644
--- a/reports/src/capability/CapabilityTable.tsx
+++ b/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>
diff --git a/reports/src/capability/ParticipantSelector.tsx b/reports/src/capability/ParticipantSelector.tsx
index b07493c..a4a3a35 100644
--- a/reports/src/capability/ParticipantSelector.tsx
+++ b/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 ussId = parseInt(location.pathname.split("/")[1]);
 
   const handleUsspSelect = (event: SelectChangeEvent<number>) => {
     const id = event.target.value;
     navigate(`/${id}`);
   };
-  if (hideIfNoParticipant && Number.isNaN(ussp)) {
+  if (hideIfNoParticipant && Number.isNaN(ussId)) {
     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}
+        label="Participant"
+        value={ussId}
         onChange={handleUsspSelect}
-        labelId="ussp-select-label"
+        sx={{ minWidth: 90 }}
       >
         {report.participants?.map((p, i) => (
-          <MenuItem value={i} key={i}>
+          <MenuItem value={i} key={i} sx={{ minWidth: 30 }}>
             {p}
           </MenuItem>
         ))}

From 6df5c6a8a61eae6d269162df5beeebb9a41c499c Mon Sep 17 00:00:00 2001
From: Christopher Chiche <christopher.chiche@orbitalize.com>
Date: Wed, 13 Sep 2023 13:45:26 +0200
Subject: [PATCH 2/2] Cleanup code according to Michael's suggestions

---
 reports/src/capability/ParticipantSelector.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/reports/src/capability/ParticipantSelector.tsx b/reports/src/capability/ParticipantSelector.tsx
index a4a3a35..18ee0e8 100644
--- a/reports/src/capability/ParticipantSelector.tsx
+++ b/reports/src/capability/ParticipantSelector.tsx
@@ -17,13 +17,13 @@ export const ParticipantSelector = ({
 }) => {
   const location = useLocation();
   const navigate = useNavigate();
-  const ussId = 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(ussId)) {
+  if (hideIfNoParticipant && Number.isNaN(participantId)) {
     return null;
   }
   return (
@@ -32,8 +32,8 @@ export const ParticipantSelector = ({
       <Select
         displayEmpty={true}
         label="Participant"
-        value={ussId}
-        onChange={handleUsspSelect}
+        value={participantId}
+        onChange={handleParticipantSelect}
         sx={{ minWidth: 90 }}
       >
         {report.participants?.map((p, i) => (