fix styles and routes

code/frontend/src/components/Footer.tsx

@@ -41,7 +41,7 @@ function Footer() {
             </Link>
           </>
         )}
-        <Link className="footer-link" to="/">
+        <Link className="footer-link" to="/createPost">
           Create Post
         </Link>
         <Link className="footer-link" to="/about">

code/frontend/src/components/Header.tsx

@@ -36,25 +36,25 @@ function Header() {
     {
       text: "Feed",
       icon: DynamicFeedIcon,
-			onClick: () => navigate("/feed", { replace: true }),
+      onClick: () => navigate("/"),
       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: () => navigate(`/profile/${user?.username}`),
       onlyShowWhen: "loggedIn",
     },
     {
       text: "About",
       icon: InfoIcon,
-			onClick: () => navigate("/about", { replace: true }),
+      onClick: () => navigate("/about"),
       onlyShowWhen: "always",
     },
     {
@@ -66,13 +66,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",
     },
   ];
@@ -115,8 +115,11 @@ function Header() {
           className="header-icon header-icon-feather"
           src="/assets/icons/BirdIconO.ico"
           alt="featherIcon"
+          onClick={() => navigate("/")}
         />
-				<p className="header-title small-title">Feather Feed</p>
+        <p className="header-title small-title" onClick={() => navigate("/")}>
+          Feather Feed
+        </p>
         <img
           className="header-icon header-icon-menu"
           src="/assets/icons/menu_orange.svg"

code/frontend/src/components/header.css

@@ -19,12 +19,12 @@
 
 .header-title {
   color: var(--Rotkehlchen-orange-default);
+  cursor: pointer;
 }
 .header-icon-feather {
   height: 35px;
 }
 .header-icon-menu {
-  cursor: pointer;
   height: 45px;
 }
 
@@ -34,6 +34,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 }
 @media only screen and (min-width: 768px) {
   .header-icon {

code/frontend/src/components/profile/QuiltedImageList.tsx

@@ -69,7 +69,7 @@ export default function StandardImageList({ user }: { user: UserProfile }) {
                     src={item.imageUrl}
                     alt={item.description}
                     onClick={
-                      () => navigate("/feed", { replace: true })
+                      () => navigate("/feed")
                       // anchor to post that was clicked
                     }
                     loading="lazy"

code/frontend/src/pages/LoginAndSignUpPage.tsx

@@ -64,7 +64,7 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
         localStorage.setItem("refreshToken", refreshToken);
       }
       await setUserState();
-      navigate(returnTo, { replace: true });
+      navigate(returnTo);
     } catch (err: any) {
       if (err.response?.data) {
         setErrorMessages(err.response.data);
@@ -96,11 +96,13 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
       },
     },
   });
-  const matchDownMd = useMediaQuery(theme.breakpoints.down('sm'));
+  const matchDownMd = useMediaQuery(theme.breakpoints.down("sm"));
 
   return (
     <div className="background">
-      <div className={matchDownMd ? "login-login" : "login-login blue-background"}>
+      <div
+        className={matchDownMd ? "login-login" : "login-login blue-background"}
+      >
         <div className="login-part">
           <div className={signup ? "signup-image" : "login-image"}></div>
         </div>

code/frontend/src/pages/Profile.tsx

@@ -32,7 +32,7 @@ function Profile() {
       setUserData(response.data.data);
       return;
     } catch (error) {
-      navigate("/", { replace: true }); /* replace to 404 page */
+      navigate("/"); /* replace to 404 page */
       console.error("Error fetching user profile:", error);
       return null;
     }
@@ -40,8 +40,9 @@ function Profile() {
 
   const ownAccount = username === user?.username;
   useEffect(() => {
+    setUserData(null);
     userProfile();
-  }, []);
+  }, [username]);
 
   const setBio = (bio: string) => {
     setUserData((prevData) => {
@@ -66,7 +67,6 @@ function Profile() {
     }
   };
 
- 
   return (
     <StyledEngineProvider injectFirst>
       <div className="profile-display">

code/frontend/src/pages/postCreation.css

@@ -61,7 +61,7 @@
 .create-post-image{
     height: 40vh;
     width: 100%;
-    object-fit: cover;
+    object-fit: contain;
     overflow: hidden;
     max-width: 600px;
     display: block;