add login and sign up button in drawer

code/frontend/src/components/Header.tsx

@@ -7,8 +7,11 @@ 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 { Link } from "react-router-dom";
 import { useAuth } from "../api/Auth";
+import { ExitToApp } from "@mui/icons-material";
 
 // TODO: Dinge so umstrukturieren, dass der State für das offene menü in Header ist und das Menü auch in Header, sodass es mit width 100% die volle breite einnehmen kann
 
@@ -18,8 +21,8 @@ function Header() {
     setIsOpen(!isOpen);
   };
   const { logout, user } = useAuth();
-  const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon];
-  const routerLinksList = ["/feed","/createpost","/profile","/about"]
+  const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon, ExitToAppIcon, FollowTheSignsIcon];
+  const routerLinksList = ["/feed","/createpost","/profile","/about","/login","/register"]
 
   // TODO: Logout nur anzeigen wenn user eingeloggt ist
 
@@ -44,6 +47,22 @@ function Header() {
               <ListItemText className="drawer-list-item" primary={"Log Out"}/>
             </ListItemButton>
         </ListItem> }
+        {!user && <> <ListItem className="drawer-list-item-button" key={"Login"} disablePadding>
+            <ListItemButton className="drawer-list-item-button" component={Link} to={routerLinksList[4]}>
+              <ListItemIcon className="drawer-list-item">
+              {React.createElement(iconList[5])}
+              </ListItemIcon>
+              <ListItemText className="drawer-list-item" primary={"Login"}/>
+            </ListItemButton>
+        </ListItem>
+        <ListItem className="drawer-list-item-button" key={"Sign up"} disablePadding>
+            <ListItemButton className="drawer-list-item-button" component={Link} to={routerLinksList[5]}>
+              <ListItemIcon className="drawer-list-item">
+              {React.createElement(iconList[6])}
+              </ListItemIcon>
+              <ListItemText className="drawer-list-item" primary={"Sign up"}/>
+            </ListItemButton>
+        </ListItem> </> }
         
       </List>
     </Box>
@@ -51,7 +70,7 @@ function Header() {
 
   return (
     <>
-      <header className="base-header">
+      <header className="base-header blue-background">
         <div className="header-icon"> <img className="header-icon-feather" src='/assets/icons/BirdIconO.ico' alt="featherIcon" /> </div>
         <p className="header-title">
           Feather Feed

code/frontend/src/components/header.css

@@ -1,9 +1,3 @@
-:root {
-	--Rotkehlchen-gray: #e7ecf2;
-	--Rotkehlchen-brown1: #a28d7a;
-	--Rotkehlchen-orange-default: #e79a0e;
-}
-
 .base-header {
 	z-index: 10;
 	width: 100vw;
@@ -12,12 +6,11 @@
 	justify-content: space-between;
 	align-items: center;
 	flex-shrink: 0;
-	background: hsla(244, 70%, 13%, 0.71);
-	backdrop-filter: blur(8px);
 	position: fixed;
 	top: 0;
 	left: 0;
 	z-index: 1000;
+	border-radius: 0rem !important;
 }
 @media only screen and (min-width: 768px) {
 	.base-header {
@@ -60,7 +53,7 @@
 }
 
 .drawer-list {
-	background-color: #12103d;
+	background-color: var(--dark-blue);
 	min-height: 100vh;
 	min-width: 13rem;
 }
@@ -73,5 +66,5 @@
 	height: 10vh;
 }
 .drawer-list-item-button:hover {
-	background-color: #232451;
+	background-color: var(--dark-blue-hover);
 }

code/frontend/src/styles/colors.css

@@ -1,40 +1,42 @@
 :root {
-  --Rotkehlchen-gray: #e7ecf2;
-  --Rotkehlchen-gray-hover: #D5D7DA;;
-  --Rotkehlchen-brown-light: #a28d7a;
-  --Rotkehlchen-brown-middle: #7f6d6d;
-  --Rotkehlchen-brown-dark: #4c4141;
-  --Rotkehlchen-yellow-default: #fed640;
-  --Rotkehlchen-yellow-hover: #eac22a;
-  --Rotkehlchen-orange-default: #e79a0e;
-  --gradient-blue-backround-mobile: linear-gradient(
-      270deg,
-      rgba(20, 15, 86, 0.27) 0%,
-      rgba(20, 15, 86, 0.58) 24%,
-      rgba(20, 15, 86, 0.74) 43%,
-      rgba(17, 13, 71, 0.82) 56%,
-      rgba(13, 10, 56, 0.9) 68%
-    ),
-    url("../../public/assets/images/BirdsSky.jpg") lightgray 50% / cover
-      no-repeat;
-    --transparent-dark-blue: hsla(244, 70%, 13%, 0.71);
+	--Rotkehlchen-gray: #e7ecf2;
+	--Rotkehlchen-gray-hover: #d5d7da;
+	--Rotkehlchen-brown-light: #a28d7a;
+	--Rotkehlchen-brown-middle: #7f6d6d;
+	--Rotkehlchen-brown-dark: #4c4141;
+	--Rotkehlchen-yellow-default: #fed640;
+	--Rotkehlchen-yellow-hover: #eac22a;
+	--Rotkehlchen-orange-default: #e79a0e;
+	--gradient-blue-backround-mobile: linear-gradient(
+			270deg,
+			rgba(20, 15, 86, 0.27) 0%,
+			rgba(20, 15, 86, 0.58) 24%,
+			rgba(20, 15, 86, 0.74) 43%,
+			rgba(17, 13, 71, 0.82) 56%,
+			rgba(13, 10, 56, 0.9) 68%
+		),
+		url("../../public/assets/images/BirdsSky.jpg") lightgray 50% / cover
+			no-repeat;
+	--transparent-dark-blue: hsla(244, 70%, 13%, 0.71);
+	--dark-blue: hsl(244, 70%, 13%);
+	--dark-blue-hover: #232451;
 }
 
-body{
-  height: 100vh; /* Full viewport height */
-  width: 100vw; /* Full viewport width */
-  background: var(--gradient-blue-backround-mobile);
-  z-index: -1;
-  background-attachment: fixed;
+body {
+	height: 100vh; /* Full viewport height */
+	width: 100vw; /* Full viewport width */
+	background: var(--gradient-blue-backround-mobile);
+	z-index: -1;
+	background-attachment: fixed;
 }
 
 .blue-background {
-  border-radius: 1rem;
-  background-color: var(--transparent-dark-blue);
-  backdrop-filter: blur(8px);
-  height: fit-content;
+	border-radius: var(--border-radius);
+	background-color: var(--transparent-dark-blue);
+	backdrop-filter: blur(8px);
+	height: fit-content;
 }
 
 .edit-icon {
-  color: var(--Rotkehlchen-brown-light)
+	color: var(--Rotkehlchen-brown-light);
 }

code/frontend/src/styles/sizes.css

@@ -1,3 +1,5 @@
 :root {
-    --Header-height: 50px;
+	--header-height: 60px;
+	--header-height-desktop: 48px;
+	--border-radius: 1rem;
 }