Merge pull request #7 from bramstroker/feat/profile-page

Implement separate profile page

Author: bramstroker

.idea/codeStyles/codeStyleConfig.xml

@@ -6,7 +6,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^6.2.0",
-    "@mui/material": "^6.2.0",
+    "@mui/material": "^6.4.4",
     "@mui/styles": "^6.2.0",
     "@mui/x-date-pickers": "^7.23.2",
     "@tanstack/react-query": "^5.29.2",

package-lock.json

@@ -5,30 +5,26 @@ import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
 import Logo from "./Logo";
 import {
-  MRT_GlobalFilterTextField,
+  MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton,
   MRT_TableInstance,
 } from "material-react-table";
 import { PowerProfile } from "../types/PowerProfile";
-import { useColorScheme } from "@mui/material/styles";
-import { IconButton } from "@mui/material";
-import Brightness4Icon from "@mui/icons-material/Brightness4";
-import Brightness7Icon from "@mui/icons-material/Brightness7";
 import { useTheme } from "@mui/material";
+import {indigo} from "@mui/material/colors";
 
 type HeaderProps = {
-  total: number;
-  table: MRT_TableInstance<PowerProfile>;
+  total?: number;
+  table?: MRT_TableInstance<PowerProfile>;
 };
 
 export function Header({ total, table }: HeaderProps) {
   const theme = useTheme();
-  const { mode, setMode } = useColorScheme();
 
   return (
     <AppBar
       position="static"
       enableColorOnDark
-      sx={{ justifyContent: "center" }}
+      sx={{ justifyContent: "center", backgroundColor: indigo[700] }}
     >
       <Container maxWidth="xl">
         <Toolbar
@@ -72,24 +68,13 @@ export function Header({ total, table }: HeaderProps) {
             </Typography>
           </Box>
 
-          <MRT_GlobalFilterTextField table={table} sx={{ mr: 2 }} />
+          { table && <MRT_GlobalFilterTextField table={table} sx={{ mr: 2 }} /> }
 
-          <Box sx={{ flexGrow: 0, display: { xs: "none", md: "flex" } }}>
-            <Typography noWrap>{total} profiles</Typography>
-          </Box>
+          { table && <MRT_ShowHideColumnsButton table={table} /> }
 
-          <IconButton
-            sx={{
-              ml: 1,
-              display: { xs: "none", sm: "flex" },
-            }}
-            onClick={() => {
-              setMode(mode === "light" ? "dark" : "light");
-            }}
-            color="inherit"
-          >
-            {mode === "light" ? <Brightness7Icon /> : <Brightness4Icon />}
-          </IconButton>
+          { table && <Box sx={{ flexGrow: 0, display: { xs: "none", md: "flex" } }}>
+            <Typography noWrap>{total} profiles</Typography>
+          </Box> }
         </Toolbar>
       </Container>
     </AppBar>