diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx index db46bb8..7faaa86 100644 --- a/code/frontend/src/components/Header.tsx +++ b/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() { } + {!user && <> + + + {React.createElement(iconList[5])} + + + + + + + + {React.createElement(iconList[6])} + + + + } @@ -51,7 +70,7 @@ function Header() { return ( <> -
+
featherIcon

Feather Feed diff --git a/code/frontend/src/components/header.css b/code/frontend/src/components/header.css index 946ecc0..360da36 100644 --- a/code/frontend/src/components/header.css +++ b/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); } diff --git a/code/frontend/src/styles/colors.css b/code/frontend/src/styles/colors.css index 7b19fdd..005cda8 100644 --- a/code/frontend/src/styles/colors.css +++ b/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) -} \ No newline at end of file + color: var(--Rotkehlchen-brown-light); +} diff --git a/code/frontend/src/styles/sizes.css b/code/frontend/src/styles/sizes.css index 5ff0480..02cfb77 100644 --- a/code/frontend/src/styles/sizes.css +++ b/code/frontend/src/styles/sizes.css @@ -1,3 +1,5 @@ :root { - --Header-height: 50px; -} \ No newline at end of file + --header-height: 60px; + --header-height-desktop: 48px; + --border-radius: 1rem; +}