From f664f507722bb39326f9970395ad2d193b7502d2 Mon Sep 17 00:00:00 2001
From: Niklas <198754647+BlankAccountsUsername@users.noreply.github.com>
Date: Tue, 24 Jun 2025 21:41:46 +0200
Subject: [PATCH] use styledEngineProvider injectfirst and css classes for
 styling MUI elements (not finished yet)

---
 code/frontend/src/components/Header.tsx | 34 ++++++++++---------------
 code/frontend/src/components/header.css | 16 ++++++++++++
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx
index 03d9ab1..1b3c1a2 100644
--- a/code/frontend/src/components/Header.tsx
+++ b/code/frontend/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import "./header.css";
 import React, { useState, useRef } from "react";
-import { createTheme, List, ListItem, ListItemButton, ListItemIcon, ListItemText, SwipeableDrawer, ThemeProvider } from '@mui/material';
+import { createTheme, List, ListItem, ListItemButton, ListItemIcon, ListItemText, StyledEngineProvider, SwipeableDrawer, ThemeProvider } from '@mui/material';
 import Box from '@mui/material/Box';
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
@@ -31,38 +31,30 @@ function Header() {
   const routerLinksList = ["/","/createpost","/profile","/about","/"]
 
   const DrawerList = (
-    <Box sx={{ width: 250 }} role="presentation" onClick={() => setIsOpen(false)}>
-      <ThemeProvider
-        theme={createTheme({
-          palette: {
-            mode: 'dark',
-            primary: { main: '#FFFF' },
-            background: { paper: 'rgb(5, 30, 52)' },
-          },
-        })}
-      >
-      <List sx={{height:'100vh', bgcolor: 'background.paper'}}>
+    <StyledEngineProvider injectFirst>
+    <Box role="menu" onClick={() => setIsOpen(false)}>
+      <List className="drawer-list">
         {["Feed", "Create Post", "Profile", "About Us"].map((text, index) => (
-          <ListItem sx={{height: '10vh'}} key={text} disablePadding>
-            <ListItemButton sx={{height: '10vh'}} component={Link} to={routerLinksList[index]} >
-              <ListItemIcon>
+          <ListItem className="drawer-list-item" key={text} disablePadding>
+            <ListItemButton className="drawer-list-item-button" component={Link} to={routerLinksList[index]} >
+              <ListItemIcon className="drawer-list-item">
               {React.createElement(iconList[index])}
               </ListItemIcon>
-              <ListItemText primary={text} slotProps={{primary: {color: 'primary'}}}/>
+              <ListItemText className="drawer-list-item" primary={text}/>
             </ListItemButton>
           </ListItem>
         ))}
-        <ListItem sx={{height: '10vh'}} key={"Log Out"} disablePadding>
-            <ListItemButton sx={{height: '10vh'}} onClick={logOut}>
-              <ListItemIcon>
+        <ListItem className="drawer-list-item-button" key={"Log Out"} disablePadding>
+            <ListItemButton className="drawer-list-item-button" onClick={logOut}>
+              <ListItemIcon className="drawer-list-item">
               {React.createElement(iconList[4])}
               </ListItemIcon>
-              <ListItemText primary={"Log Out"} slotProps={{primary: {color: 'primary'}}}/>
+              <ListItemText className="drawer-list-item" primary={"Log Out"}/>
             </ListItemButton>
           </ListItem>
       </List>
-      </ThemeProvider>
     </Box>
+    </StyledEngineProvider>
   );
 
   return (
diff --git a/code/frontend/src/components/header.css b/code/frontend/src/components/header.css
index 0f5bc45..f05f3b9 100644
--- a/code/frontend/src/components/header.css
+++ b/code/frontend/src/components/header.css
@@ -52,3 +52,19 @@
   background-size: cover;
   background-repeat: no-repeat;
 }
+
+.drawer-list {
+  background-color: #2f325e;
+  min-height: 100vh;
+}
+
+.drawer-list-item {
+  color: white;
+}
+
+.drawer-list-item-button {
+  height: 10vh;
+}
+.drawer-list-item-button:hover {
+  background-color: #555b90;
+}