Rebase and minor adjustments

code/frontend/src/components/Header.tsx

@@ -1,142 +0,0 @@
-import "./header.css";
-import React, { useState } from "react";
-import {
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  SwipeableDrawer,
-} from "@mui/material";
-import Box from "@mui/material/Box";
-import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
-import DynamicFeedIcon from "@mui/icons-material/DynamicFeed";
-import PersonIcon from "@mui/icons-material/Person";
-import InfoIcon from "@mui/icons-material/Info";
-import LogoutIcon from "@mui/icons-material/Logout";
-import ExitToAppIcon from "@mui/icons-material/ExitToApp";
-import FollowTheSignsIcon from "@mui/icons-material/FollowTheSigns";
-import { useNavigate } from "react-router-dom";
-import { useAuth } from "../api/Auth";
-
-function Header() {
-  interface ListItemAttributes {
-    text: string;
-    icon: React.ElementType;
-    onClick: () => void;
-    onlyShowWhen: "loggedIn" | "loggedOut" | "always";
-  }
-  const navigate = useNavigate();
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleMenu = () => {
-    setIsOpen(!isOpen);
-  };
-  const { logout, user } = useAuth();
-  const ListItems: ListItemAttributes[] = [
-    {
-      text: "Feed",
-      icon: DynamicFeedIcon,
-      onClick: () => navigate("/"),
-      onlyShowWhen: "always",
-    },
-    {
-      text: "Create Post",
-      icon: AddAPhotoIcon,
-      onClick: () => navigate("/createpost"),
-      onlyShowWhen: "loggedIn",
-    },
-    {
-      text: "Profile",
-      icon: PersonIcon,
-      onClick: () => navigate(`/profile/${user?.username}`),
-      onlyShowWhen: "loggedIn",
-    },
-    {
-      text: "About",
-      icon: InfoIcon,
-      onClick: () => navigate("/about"),
-      onlyShowWhen: "always",
-    },
-    {
-      text: "Log Out",
-      icon: LogoutIcon,
-      onClick: logout,
-      onlyShowWhen: "loggedIn",
-    },
-    {
-      text: "Log In",
-      icon: ExitToAppIcon,
-      onClick: () => navigate("/login"),
-      onlyShowWhen: "loggedOut",
-    },
-    {
-      text: "Sign Up",
-      icon: FollowTheSignsIcon,
-      onClick: () => navigate("/register"),
-      onlyShowWhen: "loggedOut",
-    },
-  ];
-
-  const DrawerList = (
-    <Box role="menu" onClick={() => setIsOpen(false)}>
-      <List className="drawer-list">
-        {ListItems.map((ListItemObject, index) =>
-          ListItemObject.onlyShowWhen == "always" ||
-          (ListItemObject.onlyShowWhen == "loggedIn" && user) ||
-          (ListItemObject.onlyShowWhen == "loggedOut" && !user) ? (
-            <ListItem
-              className="drawer-list-item"
-              key={ListItemObject.text}
-              disablePadding
-            >
-              <ListItemButton
-                className="drawer-list-item-button"
-                onClick={ListItemObject.onClick}
-              >
-                <ListItemIcon className="drawer-list-item">
-                  {React.createElement(ListItemObject.icon)}
-                </ListItemIcon>
-                <ListItemText
-                  className="drawer-list-item"
-                  primary={ListItemObject.text}
-                />
-              </ListItemButton>
-            </ListItem>
-          ) : null
-        )}
-      </List>
-    </Box>
-  );
-
-  return (
-    <>
-      <header className="base-header blue-background">
-        <img
-          className="header-icon header-icon-feather"
-          src="/assets/icons/BirdIconO.ico"
-          alt="featherIcon"
-          onClick={() => navigate("/")}
-        />
-        <p className="header-title small-title" onClick={() => navigate("/")}>
-          Feather Feed
-        </p>
-        <img
-          className="header-icon header-icon-menu"
-          src="/assets/icons/menu_orange.svg"
-          alt="menu"
-          onClick={toggleMenu}
-        />
-      </header>
-      <SwipeableDrawer
-        anchor={"right"}
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        onOpen={() => setIsOpen(true)}
-      >
-        {DrawerList}
-      </SwipeableDrawer>
-    </>
-  );
-}
-
-export default Header;

code/frontend/src/components/buttons/SignUpButton.tsx

@@ -9,7 +9,7 @@ export default function LogInButton() {
       style={"secondary"}
       label={"Sign Up"}
       type={"button"}
-      onClick={() => navigate("/login")}
+      onClick={() => navigate("/register")}
     />
   );
 }

code/frontend/src/components/footer/Footer.tsx

@@ -1,6 +1,6 @@
 import "./footer.css";
 import { Link } from "react-router-dom";
-import { useAuth } from "../api/Auth";
+import { useAuth } from "../../api/Auth";
 function Footer() {
   const { user } = useAuth();
   const { logout } = useAuth();

code/frontend/src/components/footer/footer.css

@@ -1,4 +1,4 @@
-/*mobile style first*/
+
 .footer {
   display: flex;
   flex-direction: row;
@@ -21,8 +21,8 @@
 .footer-link {
   display: flex;
   align-items: center;
-  gap: 0.5rem; /*Gap between icon and logo */
+  gap: 0.5rem; 
-  text-decoration: none; /*prevents constant underline*/
+  text-decoration: none; 
   color: black;
   font-weight: 500;
   cursor: pointer;
@@ -48,7 +48,7 @@
 .footer-right {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem; /*gap between the links*/
+  gap: 0.4rem; 
   align-items: flex-end;
 }
 
@@ -67,7 +67,7 @@
   text-decoration-color: var(--Rotkehlchen-orange-default);
 }
 
-/*@media adjusts styles for desktop */
+
 
 @media (min-width: 768px) {
   .footer {

code/frontend/src/components/header/Header.tsx

@@ -32,29 +32,30 @@ function Header() {
     setIsOpen(!isOpen);
   };
   const { logout, user } = useAuth();
+
   const ListItems: ListItemAttributes[] = [
     {
       text: "Feed",
       icon: DynamicFeedIcon,
-			onClick: () => navigate("/feed", { replace: true }),
+      onClick: () => navigate("/feed"),
       onlyShowWhen: "always",
     },
     {
       text: "Create Post",
       icon: AddAPhotoIcon,
-			onClick: () => navigate("/createpost", { replace: true }),
+      onClick: () => navigate("/createpost"),
       onlyShowWhen: "loggedIn",
     },
     {
       text: "Profile",
       icon: PersonIcon,
-			onClick: () => navigate("/profile", { replace: true }),
+      onClick: () => user?.username && navigate(`/profile/${user.username}`),
       onlyShowWhen: "loggedIn",
     },
     {
       text: "About",
       icon: InfoIcon,
-			onClick: () => navigate("/about", { replace: true }),
+      onClick: () => navigate("/about"),
       onlyShowWhen: "always",
     },
     {
@@ -66,13 +67,13 @@ function Header() {
     {
       text: "Log In",
       icon: ExitToAppIcon,
-			onClick: () => navigate("/login", { replace: true }),
+      onClick: () => navigate("/login"),
       onlyShowWhen: "loggedOut",
     },
     {
       text: "Sign Up",
       icon: FollowTheSignsIcon,
-			onClick: () => navigate("/register", { replace: true }),
+      onClick: () => navigate("/register"),
       onlyShowWhen: "loggedOut",
     },
   ];
@@ -80,10 +81,10 @@ function Header() {
   const DrawerList = (
     <Box role="menu" onClick={() => setIsOpen(false)}>
       <List className="drawer-list">
-				{ListItems.map((ListItemObject, index) =>
+        {ListItems.map((ListItemObject) =>
-					ListItemObject.onlyShowWhen == "always" ||
+          ListItemObject.onlyShowWhen === "always" ||
-					(ListItemObject.onlyShowWhen == "loggedIn" && user) ||
+          (ListItemObject.onlyShowWhen === "loggedIn" && user) ||
-					(ListItemObject.onlyShowWhen == "loggedOut" && !user) ? (
+          (ListItemObject.onlyShowWhen === "loggedOut" && !user) ? (
             <ListItem
               className="drawer-list-item"
               key={ListItemObject.text}
@@ -115,8 +116,14 @@ function Header() {
           className="header-icon header-icon-feather"
           src="/assets/icons/BirdIconO.ico"
           alt="featherIcon"
+          onClick={() => navigate("/feed")}
         />
-				<p className="header-title small-title">Feather Feed</p>
+        <p
+          className="header-title small-title"
+          onClick={() => navigate("/feed")}
+        >
+          Feather Feed
+        </p>
         <img
           className="header-icon header-icon-menu"
           src="/assets/icons/menu_orange.svg"