streamlined folder structure and updated imports

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() {

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;

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<string>(bioText || "");

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": {

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) {

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 }) {

code/frontend/src/footer/footer.css

@@ -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;
-  }
-}

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();

code/frontend/src/pages/feed/feed.css

@@ -34,7 +34,6 @@
   color: white;
 }
 
-/* Desktop view*/
 @media (min-width: 768px) {
   .feedContainer {
     display: grid;

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 = {

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 {

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: {

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;

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}
           />
           <Divider variant="middle" className="divider" />
-          {/* TODO: Change data to data from Database */}
           <div className="numeral-data body-bold">
             <div className="data">
               <span aria-label="current-post-number">{userData?.posts}</span>

code/frontend/src/styles/globalStyles.css

@@ -0,0 +1,3 @@
+@import "./colors.css";
+@import "./fonts.css";
+@import "./sizes.css";