From 68e751d4265d6689835e33895b07b4b71a0a9ce6 Mon Sep 17 00:00:00 2001 From: MisbehavedNinjaRadiator <120029998+MisbehavedNinjaRadiator@users.noreply.github.com> Date: Thu, 3 Jul 2025 11:11:31 +0200 Subject: [PATCH] streamlined folder structure and updated imports --- code/frontend/src/App.tsx | 13 +-- code/frontend/src/components/UserAvatar.tsx | 2 +- .../src/components/profile/{ => bio}/Bio.tsx | 10 +- .../src/components/profile/{ => bio}/bio.css | 0 .../ChangeAvatarDialog.tsx | 13 ++- .../changeAvatarDialog.css | 0 .../QuiltedImageList.tsx | 12 +-- .../quiltedImageList.css | 0 .../profile/{ => username}/Username.tsx | 2 +- .../profile/{ => username}/username.css | 0 code/frontend/src/components/userAvatar.css | 0 ...ace45 (Renamed footer and created folders) | 0 code/frontend/src/footer/footer.css | 94 ------------------- code/frontend/src/pages/{ => about}/About.tsx | 2 +- code/frontend/src/pages/{ => about}/about.css | 0 code/frontend/src/pages/feed/feed.css | 1 - .../LoginAndSignUpPage.tsx | 6 +- .../loginAndSignUpPage.css | 5 +- .../pages/{ => postCreation}/PostCreation.tsx | 24 +++-- .../pages/{ => postCreation}/postCreation.css | 2 +- .../src/pages/{ => profile}/Profile.tsx | 21 ++--- .../src/pages/{ => profile}/profile.css | 0 code/frontend/src/styles/globalStyles.css | 3 + 23 files changed, 54 insertions(+), 156 deletions(-) rename code/frontend/src/components/profile/{ => bio}/Bio.tsx (95%) rename code/frontend/src/components/profile/{ => bio}/bio.css (100%) rename code/frontend/src/components/profile/{ => changeAvatarDialog}/ChangeAvatarDialog.tsx (94%) rename code/frontend/src/components/profile/{ => changeAvatarDialog}/changeAvatarDialog.css (100%) rename code/frontend/src/components/profile/{ => quiltedImageList}/QuiltedImageList.tsx (92%) rename code/frontend/src/components/profile/{ => quiltedImageList}/quiltedImageList.css (100%) rename code/frontend/src/components/profile/{ => username}/Username.tsx (100%) rename code/frontend/src/components/profile/{ => username}/username.css (100%) delete mode 100644 code/frontend/src/components/userAvatar.css delete mode 100644 code/frontend/src/components~4face45 (Renamed footer and created folders) delete mode 100644 code/frontend/src/footer/footer.css rename code/frontend/src/pages/{ => about}/About.tsx (100%) rename code/frontend/src/pages/{ => about}/about.css (100%) rename code/frontend/src/pages/{ => loginAndSignUpPage}/LoginAndSignUpPage.tsx (97%) rename code/frontend/src/pages/{ => loginAndSignUpPage}/loginAndSignUpPage.css (94%) rename code/frontend/src/pages/{ => postCreation}/PostCreation.tsx (93%) rename code/frontend/src/pages/{ => postCreation}/postCreation.css (98%) rename code/frontend/src/pages/{ => profile}/Profile.tsx (87%) rename code/frontend/src/pages/{ => profile}/profile.css (100%) create mode 100644 code/frontend/src/styles/globalStyles.css diff --git a/code/frontend/src/App.tsx b/code/frontend/src/App.tsx index d7df421..768cfd3 100644 --- a/code/frontend/src/App.tsx +++ b/code/frontend/src/App.tsx @@ -1,14 +1,11 @@ import "./App.css"; -import LoginAndSignUpPage from "./pages/LoginAndSignUpPage"; -import PostCreation from "./pages/PostCreation"; -import "./App.css"; -import "./styles/colors.css"; -import "./styles/fonts.css"; -import "./styles/sizes.css"; +import "./styles/globalStyles.css"; +import LoginAndSignUpPage from "./pages/loginAndSignUpPage/LoginAndSignUpPage"; +import PostCreation from "./pages/postCreation/PostCreation"; import Footer from "./components/footer/Footer"; import Feed, { UserFeedRoute } from "./pages/feed/Feed"; import Header from "./components/header/Header"; -import Profile from "./pages/Profile"; +import Profile from "./pages/profile/Profile"; import { BrowserRouter as Router, Routes, @@ -16,7 +13,7 @@ import { Navigate, } from "react-router-dom"; import { Auth } from "./api/Auth"; -import About from "./pages/About"; +import About from "./pages/about/About"; import { NotFound } from "./pages/404Page/NotFoundPage"; function App() { diff --git a/code/frontend/src/components/UserAvatar.tsx b/code/frontend/src/components/UserAvatar.tsx index 48a51c3..f915d33 100644 --- a/code/frontend/src/components/UserAvatar.tsx +++ b/code/frontend/src/components/UserAvatar.tsx @@ -1,6 +1,6 @@ +import { useState, useEffect } from "react"; import { Avatar, Box, Typography } from "@mui/material"; import api from "../api/axios"; -import { useState, useEffect } from "react"; interface UserAvatarProps { username: string | null; diff --git a/code/frontend/src/components/profile/Bio.tsx b/code/frontend/src/components/profile/bio/Bio.tsx similarity index 95% rename from code/frontend/src/components/profile/Bio.tsx rename to code/frontend/src/components/profile/bio/Bio.tsx index 24e91d7..78b2ccd 100644 --- a/code/frontend/src/components/profile/Bio.tsx +++ b/code/frontend/src/components/profile/bio/Bio.tsx @@ -1,12 +1,12 @@ +import { useState } from "react"; import Box from "@mui/material/Box"; import TextField from "@mui/material/TextField"; -import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider"; -import { useState } from "react"; -import "./bio.css"; import IconButton from "@mui/material/IconButton"; +import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider"; import EditSquareIcon from "@mui/icons-material/EditSquare"; -import ButtonPrimary from "../buttons/buttonRotkehlchen/ButtonRotkehlchen"; -import api from "../../api/axios"; +import ButtonPrimary from "../../buttons/buttonRotkehlchen/ButtonRotkehlchen"; +import api from "../../../api/axios"; +import "./bio.css"; export default function BioTextField({ ownAccount, bioText, setBio } : { ownAccount: boolean, bioText: string | undefined, setBio: (bio: string) => void }) { const [oldBio, setOldbio] = useState(bioText || ""); diff --git a/code/frontend/src/components/profile/bio.css b/code/frontend/src/components/profile/bio/bio.css similarity index 100% rename from code/frontend/src/components/profile/bio.css rename to code/frontend/src/components/profile/bio/bio.css diff --git a/code/frontend/src/components/profile/ChangeAvatarDialog.tsx b/code/frontend/src/components/profile/changeAvatarDialog/ChangeAvatarDialog.tsx similarity index 94% rename from code/frontend/src/components/profile/ChangeAvatarDialog.tsx rename to code/frontend/src/components/profile/changeAvatarDialog/ChangeAvatarDialog.tsx index 8fa07d5..44ceadb 100644 --- a/code/frontend/src/components/profile/ChangeAvatarDialog.tsx +++ b/code/frontend/src/components/profile/changeAvatarDialog/ChangeAvatarDialog.tsx @@ -1,4 +1,5 @@ -import * as React from "react"; +import React from "react"; +import { useState, ChangeEvent } from "react"; import { Button, styled, @@ -13,13 +14,11 @@ import { } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; import EditSquareIcon from "@mui/icons-material/EditSquare"; +import ButtonRotkehlchen from "../../buttons/buttonRotkehlchen/ButtonRotkehlchen"; +import Username from "../username/Username"; +import api from "../../../api/axios"; +import { UserProfile } from "../../../types/UserProfile"; import "./changeAvatarDialog.css"; -import ButtonRotkehlchen from "../buttons/buttonRotkehlchen/ButtonRotkehlchen"; -import Username from "./Username"; -import "./username.css"; -import api from "../../api/axios"; -import { ChangeEvent, useState } from "react"; -import { UserProfile } from "../../types/UserProfile"; const BootstrapDialog = styled(Dialog)(({ theme }) => ({ "& .MuiDialogContent-root": { diff --git a/code/frontend/src/components/profile/changeAvatarDialog.css b/code/frontend/src/components/profile/changeAvatarDialog/changeAvatarDialog.css similarity index 100% rename from code/frontend/src/components/profile/changeAvatarDialog.css rename to code/frontend/src/components/profile/changeAvatarDialog/changeAvatarDialog.css diff --git a/code/frontend/src/components/profile/QuiltedImageList.tsx b/code/frontend/src/components/profile/quiltedImageList/QuiltedImageList.tsx similarity index 92% rename from code/frontend/src/components/profile/QuiltedImageList.tsx rename to code/frontend/src/components/profile/quiltedImageList/QuiltedImageList.tsx index 3330d9a..84c06c4 100644 --- a/code/frontend/src/components/profile/QuiltedImageList.tsx +++ b/code/frontend/src/components/profile/quiltedImageList/QuiltedImageList.tsx @@ -1,11 +1,10 @@ -import ImageListItem from "@mui/material/ImageListItem"; -import { StyledEngineProvider } from "@mui/material/styles"; -import "./quiltedImageList.css"; -import { Box, Grid, Skeleton } from "@mui/material"; -import api from "../../api/axios"; import { useEffect, useState } from "react"; -import { UserProfile } from "../../types/UserProfile"; import { useNavigate } from "react-router-dom"; +import { Box, Grid, Skeleton, StyledEngineProvider } from "@mui/material"; +import ImageListItem from "@mui/material/ImageListItem"; +import api from "../../../api/axios"; +import { UserProfile } from "../../../types/UserProfile"; +import "./quiltedImageList.css"; type Post = { id: string; @@ -50,7 +49,6 @@ export default function StandardImageList({ user }: { user: UserProfile }) { id: post.id, description: post.description || "", createdAt: post.createdAt, - }; } } catch (error) { diff --git a/code/frontend/src/components/profile/quiltedImageList.css b/code/frontend/src/components/profile/quiltedImageList/quiltedImageList.css similarity index 100% rename from code/frontend/src/components/profile/quiltedImageList.css rename to code/frontend/src/components/profile/quiltedImageList/quiltedImageList.css diff --git a/code/frontend/src/components/profile/Username.tsx b/code/frontend/src/components/profile/username/Username.tsx similarity index 100% rename from code/frontend/src/components/profile/Username.tsx rename to code/frontend/src/components/profile/username/Username.tsx index f6bd1c5..f58ec6e 100644 --- a/code/frontend/src/components/profile/Username.tsx +++ b/code/frontend/src/components/profile/username/Username.tsx @@ -1,5 +1,5 @@ -import { Popover, Typography } from "@mui/material"; import { useState } from "react"; +import { Popover, Typography } from "@mui/material"; import "./username.css"; export default function Username({ username }: { username: string }) { diff --git a/code/frontend/src/components/profile/username.css b/code/frontend/src/components/profile/username/username.css similarity index 100% rename from code/frontend/src/components/profile/username.css rename to code/frontend/src/components/profile/username/username.css diff --git a/code/frontend/src/components/userAvatar.css b/code/frontend/src/components/userAvatar.css deleted file mode 100644 index e69de29..0000000 diff --git a/code/frontend/src/components~4face45 (Renamed footer and created folders) b/code/frontend/src/components~4face45 (Renamed footer and created folders) deleted file mode 100644 index e69de29..0000000 diff --git a/code/frontend/src/footer/footer.css b/code/frontend/src/footer/footer.css deleted file mode 100644 index bbe35f1..0000000 --- a/code/frontend/src/footer/footer.css +++ /dev/null @@ -1,94 +0,0 @@ -/*mobile style first*/ -.footer { - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: space-between; - background-color: var(--Rotkehlchen-gray); - padding: 1rem; - gap: 2rem; - text-align: center; - text-decoration: none; -} - -.footer-left { - display: flex; - flex-direction: column; - gap: 2rem; - align-items: flex-start; -} - -.footer-link { - display: flex; - align-items: center; - gap: 0.5rem; /*Gap between icon and logo */ - text-decoration: none; /*prevents constant underline*/ - color: black; - font-weight: 500; - cursor: pointer; -} - -.footer-link.feather img { - width: 20px; - height: 20px; - transform: scale(1.5); -} - -.footer-link img { - height: 1.5rem; - object-fit: unset; - vertical-align: middle; -} - -.footer-link.feather span { - color: var(--Rotkehlchen-orange-default); - font-weight: bold; -} - -.footer-right { - display: flex; - flex-direction: column; - gap: 0.4rem; /*gap between the links*/ - align-items: flex-end; -} - -.footer-column a { - color: black; - text-decoration: none; - font-weight: 500; -} - -.footer-link:hover, -.footer-link:active { - text-decoration: underline; -} -.footer-link.feather:hover, -.footer-link.feather:active { - text-decoration-color: var(--Rotkehlchen-orange-default); -} - -/*@media adjusts styles for desktop */ - -@media (min-width: 768px) { - .footer { - flex-direction: row; - justify-content: space-between; - align-items: center; - text-align: left; - padding: 2rem 4rem; - } - - .footer-left { - align-items: flex-start; - } - - .footer-right { - flex-direction: row; - gap: 4rem; - align-items: flex-start; - } - - .footer-column { - align-items: flex-start; - } -} diff --git a/code/frontend/src/pages/About.tsx b/code/frontend/src/pages/about/About.tsx similarity index 100% rename from code/frontend/src/pages/About.tsx rename to code/frontend/src/pages/about/About.tsx index 757a007..54e4ace 100644 --- a/code/frontend/src/pages/About.tsx +++ b/code/frontend/src/pages/about/About.tsx @@ -1,5 +1,5 @@ -import "./about.css"; import { useNavigate } from "react-router-dom"; +import "./about.css"; function About() { const navigate = useNavigate(); diff --git a/code/frontend/src/pages/about.css b/code/frontend/src/pages/about/about.css similarity index 100% rename from code/frontend/src/pages/about.css rename to code/frontend/src/pages/about/about.css diff --git a/code/frontend/src/pages/feed/feed.css b/code/frontend/src/pages/feed/feed.css index 2fc3dfa..36014a9 100644 --- a/code/frontend/src/pages/feed/feed.css +++ b/code/frontend/src/pages/feed/feed.css @@ -34,7 +34,6 @@ color: white; } -/* Desktop view*/ @media (min-width: 768px) { .feedContainer { display: grid; diff --git a/code/frontend/src/pages/LoginAndSignUpPage.tsx b/code/frontend/src/pages/loginAndSignUpPage/LoginAndSignUpPage.tsx similarity index 97% rename from code/frontend/src/pages/LoginAndSignUpPage.tsx rename to code/frontend/src/pages/loginAndSignUpPage/LoginAndSignUpPage.tsx index 6cb1d68..8d14cfc 100644 --- a/code/frontend/src/pages/LoginAndSignUpPage.tsx +++ b/code/frontend/src/pages/loginAndSignUpPage/LoginAndSignUpPage.tsx @@ -1,9 +1,9 @@ import "./loginAndSignUpPage.css"; import { useEffect, useState } from "react"; -import api from "../api/axios"; -import ButtonRotkehlchen from "../components/buttons/buttonRotkehlchen/ButtonRotkehlchen"; +import api from "../../api/axios"; +import ButtonRotkehlchen from "../../components/buttons/buttonRotkehlchen/ButtonRotkehlchen"; import { useLocation, useNavigate } from "react-router-dom"; -import { useAuth } from "../api/Auth"; +import { useAuth } from "../../api/Auth"; import { createTheme, useMediaQuery } from "@mui/material"; type FormData = { diff --git a/code/frontend/src/pages/loginAndSignUpPage.css b/code/frontend/src/pages/loginAndSignUpPage/loginAndSignUpPage.css similarity index 94% rename from code/frontend/src/pages/loginAndSignUpPage.css rename to code/frontend/src/pages/loginAndSignUpPage/loginAndSignUpPage.css index 4568adb..b253d1c 100644 --- a/code/frontend/src/pages/loginAndSignUpPage.css +++ b/code/frontend/src/pages/loginAndSignUpPage/loginAndSignUpPage.css @@ -114,7 +114,7 @@ border-radius: 8px; border: 5px solid var(--Rotkehlchen-gray); - background-image: url("../../public/assets/images/IceBirdLogin.jpg"); + background-image: url("../../../public/assets/images/IceBirdLogin.jpg"); background-size: cover; background-position: 75%; } @@ -130,9 +130,8 @@ border-radius: 8px; border: 5px solid var(--Rotkehlchen-gray); - background-image: url("../../public/assets/images/SummerOwlSignup.jpg"); + background-image: url("../../../public/assets/images/SummerOwlSignup.jpg"); background-size: cover; - /*background-position: 75%;*/ } .login-part { diff --git a/code/frontend/src/pages/PostCreation.tsx b/code/frontend/src/pages/postCreation/PostCreation.tsx similarity index 93% rename from code/frontend/src/pages/PostCreation.tsx rename to code/frontend/src/pages/postCreation/PostCreation.tsx index 5e3f042..f2b037e 100644 --- a/code/frontend/src/pages/PostCreation.tsx +++ b/code/frontend/src/pages/postCreation/PostCreation.tsx @@ -1,17 +1,15 @@ -import "./postCreation.css"; -import "./loginAndSignUpPage.css"; -import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef } from "react"; import { useNavigate } from "react-router-dom"; -import Chip from '@mui/material/Chip'; -import Autocomplete from '@mui/material/Autocomplete'; -import TextField from '@mui/material/TextField'; -import ButtonPrimary from "../components/buttons/buttonRotkehlchen/ButtonRotkehlchen"; - -import api from "../api/axios"; -import { useAuth } from "../api/Auth"; -import {Box,Card,CardMedia,CardActionArea,IconButton, Typography} from '@mui/material'; -import CloseIcon from '@mui/icons-material/Close'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { Box, Card, CardMedia, CardActionArea, IconButton, Typography } from "@mui/material"; +import Chip from "@mui/material/Chip"; +import Autocomplete from "@mui/material/Autocomplete"; +import TextField from "@mui/material/TextField"; +import CloseIcon from "@mui/icons-material/Close"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; +import api from "../../api/axios"; +import { useAuth } from "../../api/Auth"; +import ButtonPrimary from "../../components/buttons/buttonRotkehlchen/ButtonRotkehlchen"; +import "./postCreation.css"; const theme = createTheme({ palette: { diff --git a/code/frontend/src/pages/postCreation.css b/code/frontend/src/pages/postCreation/postCreation.css similarity index 98% rename from code/frontend/src/pages/postCreation.css rename to code/frontend/src/pages/postCreation/postCreation.css index ed3b2f4..1109b93 100644 --- a/code/frontend/src/pages/postCreation.css +++ b/code/frontend/src/pages/postCreation/postCreation.css @@ -77,7 +77,7 @@ background-position: center; background-size: cover; overflow: hidden; - background-image: url("../../public/assets/images/BirdLogin.jpg"); + background-image: url("../../../public/assets/images/BirdLogin.jpg"); filter: grayscale(); width: 100%; max-width: 600px; diff --git a/code/frontend/src/pages/Profile.tsx b/code/frontend/src/pages/profile/Profile.tsx similarity index 87% rename from code/frontend/src/pages/Profile.tsx rename to code/frontend/src/pages/profile/Profile.tsx index 116dd69..2ca13bf 100644 --- a/code/frontend/src/pages/Profile.tsx +++ b/code/frontend/src/pages/profile/Profile.tsx @@ -1,14 +1,14 @@ -import "./profile.css"; -import QuiltedImageList from "../components/profile/QuiltedImageList"; -import { StyledEngineProvider, Divider } from "@mui/material"; -import ChangeAvatarDialog from "../components/profile/ChangeAvatarDialog"; -import Bio from "../components/profile/Bio"; -import RotkehlchenButton from "../components/buttons/buttonRotkehlchen/ButtonRotkehlchen"; -import api, { redirectToLogin } from "../api/axios"; -import { useAuth } from "../api/Auth"; -import { useNavigate, useParams } from "react-router-dom"; import { useEffect, useState } from "react"; -import { UserProfile } from "../types/UserProfile"; +import { useNavigate, useParams } from "react-router-dom"; +import { StyledEngineProvider, Divider } from "@mui/material"; +import QuiltedImageList from "../../components/profile/quiltedImageList/QuiltedImageList"; +import ChangeAvatarDialog from "../../components/profile/changeAvatarDialog/ChangeAvatarDialog"; +import Bio from "../../components/profile/bio/Bio"; +import RotkehlchenButton from "../../components/buttons/buttonRotkehlchen/ButtonRotkehlchen"; +import api, { redirectToLogin } from "../../api/axios"; +import { useAuth } from "../../api/Auth"; +import { UserProfile } from "../../types/UserProfile"; +import "./profile.css"; function Profile() { const { user } = useAuth(); @@ -83,7 +83,6 @@ function Profile() { setBio={setBio} /> - {/* TODO: Change data to data from Database */}
{userData?.posts} diff --git a/code/frontend/src/pages/profile.css b/code/frontend/src/pages/profile/profile.css similarity index 100% rename from code/frontend/src/pages/profile.css rename to code/frontend/src/pages/profile/profile.css diff --git a/code/frontend/src/styles/globalStyles.css b/code/frontend/src/styles/globalStyles.css new file mode 100644 index 0000000..655aa9c --- /dev/null +++ b/code/frontend/src/styles/globalStyles.css @@ -0,0 +1,3 @@ +@import "./colors.css"; +@import "./fonts.css"; +@import "./sizes.css"; \ No newline at end of file