Refine theme and app bar

Orbitalize · Sep 8, 2023 · d02d1ce · d02d1ce
1 parent 6183bca
commit d02d1ce
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/reports/src/App.tsx b/reports/src/App.tsx
@@ -20,7 +20,7 @@ function App() {
   const router = createHashRouter(nav);
   return (
     <CustomThemeProvider>
-      <RouterProvider router={router} />;
+      <RouterProvider router={router} />
     </CustomThemeProvider>
   );
 }

diff --git a/reports/src/ThemeContext.tsx b/reports/src/ThemeContext.tsx
@@ -56,6 +56,12 @@ export const CustomThemeProvider = ({
         ? theme.palette.grey[500]
         : theme.palette.grey[700];
     return {
+      body: {
+        backgroundColor:
+          theme.palette.mode === "light"
+            ? theme.palette.grey[100]
+            : theme.palette.grey[900],
+      },
       table: {
         borderCollapse: "collapse",
         border: `1px solid ${borderColor}`,
@@ -69,6 +75,7 @@ export const CustomThemeProvider = ({
       },
       td: {
         border: `1px solid ${borderColor}`,
+        padding: 8,
       },
     };
   };

diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx
@@ -181,7 +181,7 @@ export const ChildCapabilityRow = ({
           {capability.name} ({capability.participant_id})
         </Link>
       </td>
-      <td style={{ padding: 8 }}>
+      <td>
         <Chip
           label={pass ? "PASS" : "FAIL"}
           color={pass ? "success" : "error"}
@@ -254,7 +254,7 @@ export const CapabilityTable = ({ capability }: CapabilityTableProps) => {
   }
   return (
     <>
-      <AppBar position="static">
+      <AppBar position="fixed">
         <Toolbar>
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             InterUSS report explorer
@@ -271,10 +271,11 @@ export const CapabilityTable = ({ capability }: CapabilityTableProps) => {
             theme.palette.mode === "light"
               ? theme.palette.grey[100]
               : theme.palette.grey[900],
-          flexGrow: 1,
-          height: "100vh",
-          overflow: "auto",
+          // flexGrow: 1,
+          // height: "100vh",
+          // overflow: "auto",
           padding: 8,
+          paddingTop: 10,
         }}
       >
         <CapabilityBreadcrumbs />