fix styles and routes

This commit is contained in:
luisa.bellitto 2025-06-30 15:46:26 +02:00 committed by Rudi Regentonne
parent d4bbb71fc3
commit b5cf9a210a
7 changed files with 135 additions and 129 deletions

View file

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

View file

@ -36,25 +36,25 @@ function Header() {
{ {
text: "Feed", text: "Feed",
icon: DynamicFeedIcon, icon: DynamicFeedIcon,
onClick: () => navigate("/feed", { replace: true }), onClick: () => navigate("/"),
onlyShowWhen: "always", onlyShowWhen: "always",
}, },
{ {
text: "Create Post", text: "Create Post",
icon: AddAPhotoIcon, icon: AddAPhotoIcon,
onClick: () => navigate("/createpost", { replace: true }), onClick: () => navigate("/createpost"),
onlyShowWhen: "loggedIn", onlyShowWhen: "loggedIn",
}, },
{ {
text: "Profile", text: "Profile",
icon: PersonIcon, icon: PersonIcon,
onClick: () => navigate("/profile", { replace: true }), onClick: () => navigate(`/profile/${user?.username}`),
onlyShowWhen: "loggedIn", onlyShowWhen: "loggedIn",
}, },
{ {
text: "About", text: "About",
icon: InfoIcon, icon: InfoIcon,
onClick: () => navigate("/about", { replace: true }), onClick: () => navigate("/about"),
onlyShowWhen: "always", onlyShowWhen: "always",
}, },
{ {
@ -66,13 +66,13 @@ function Header() {
{ {
text: "Log In", text: "Log In",
icon: ExitToAppIcon, icon: ExitToAppIcon,
onClick: () => navigate("/login", { replace: true }), onClick: () => navigate("/login"),
onlyShowWhen: "loggedOut", onlyShowWhen: "loggedOut",
}, },
{ {
text: "Sign Up", text: "Sign Up",
icon: FollowTheSignsIcon, icon: FollowTheSignsIcon,
onClick: () => navigate("/register", { replace: true }), onClick: () => navigate("/register"),
onlyShowWhen: "loggedOut", onlyShowWhen: "loggedOut",
}, },
]; ];
@ -115,8 +115,11 @@ function Header() {
className="header-icon header-icon-feather" className="header-icon header-icon-feather"
src="/assets/icons/BirdIconO.ico" src="/assets/icons/BirdIconO.ico"
alt="featherIcon" 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 <img
className="header-icon header-icon-menu" className="header-icon header-icon-menu"
src="/assets/icons/menu_orange.svg" src="/assets/icons/menu_orange.svg"

View file

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

View file

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

View file

@ -64,7 +64,7 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
localStorage.setItem("refreshToken", refreshToken); localStorage.setItem("refreshToken", refreshToken);
} }
await setUserState(); await setUserState();
navigate(returnTo, { replace: true }); navigate(returnTo);
} catch (err: any) { } catch (err: any) {
if (err.response?.data) { if (err.response?.data) {
setErrorMessages(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 ( return (
<div className="background"> <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="login-part">
<div className={signup ? "signup-image" : "login-image"}></div> <div className={signup ? "signup-image" : "login-image"}></div>
</div> </div>

View file

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

View file

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