start of lazy loading

code/frontend/src/App.tsx

@@ -5,6 +5,7 @@ import LoginAndSignUpPage from "./pages/LoginAndSignUpPage";
 import Footer from "./components/Footer";
 import Header from "./components/header";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Profile from "./pages/Profile";
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
             path="/register"
             element={<LoginAndSignUpPage signupProp={true} />}
           ></Route>
+          <Route path="/profile" element={<Profile />}></Route>
         </Routes>
         <Footer />
       </div>

code/frontend/src/components/QuiltedImageList.tsx

@@ -7,7 +7,7 @@ import {
   StyledEngineProvider,
   ThemeProvider,
 } from "@mui/material/styles";
-import './quiltedImageList.css';
+import "./quiltedImageList.css";
 
 export default function StandardImageList() {
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -16,7 +16,7 @@ export default function StandardImageList() {
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
-        <ImageList className="image-list" variant="quilted" cols={isSmallScreen ? 3 : isLargeScreen ? 4 : 5} rowHeight={180}>
+        <div className="image-list">
           {itemData.map((item) => (
             <ImageListItem key={item.img}>
               <img
@@ -27,7 +27,7 @@ export default function StandardImageList() {
               />
             </ImageListItem>
           ))}
-        </ImageList>
+        </div>
       </ThemeProvider>
     </StyledEngineProvider>
   );
@@ -47,11 +47,11 @@ const theme = createTheme({
 
 const itemData = [
   { img: "/assets/images/BirdLogin.jpg", title: "Bird" },
-  { img: "/assets/images/BirdsSky.jpg", title: "Bird Sky" },
+  { img: "../../assets/images/BirdsSky.jpg", title: "Bird Sky" },
-  { img: "/assets/images/evening.jpg", title: "Evening" },
+  { img: "../../assets/images/evening.jpg", title: "Evening" },
-  { img: "/assets/images/PortraitForestAndStreet.jpg", title: "Forest" },
+  { img: "../../assets/images/PortraitForestAndStreet.jpg", title: "Forest" },
-  { img: "/assets/images/IceBirdLogin.jpg", title: "Ice Bird" },
+  { img: "../../assets/images/IceBirdLogin.jpg", title: "Ice Bird" },
-  { img: "/assets/images/SummerOwlSignup.jpg", title: "Summer Owl" },
+  { img: "../../assets/images/SummerOwlSignup.jpg", title: "Summer Owl" },
 
   {
     img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",

code/frontend/src/components/bio.css

@@ -4,7 +4,7 @@
 
 /* Root class for the input field */
 .bio-input .MuiOutlinedInput-root {
-  color: var(--Rotkehlchen-gray-default);
+  color: var(--Rotkehlchen-gray);
 }
 /* Class for the border around the input field */
 .bio-input .MuiOutlinedInput-notchedOutline {
@@ -20,7 +20,7 @@
 }
 /* Disabled input field text and border color */
 .bio-input .css-w4nesw-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled {
-  -webkit-text-fill-color: var(--Rotkehlchen-gray-default);
+  -webkit-text-fill-color: var(--Rotkehlchen-gray);
 }
 .bio-input
   .MuiInputBase-root.MuiOutlinedInput-root.Mui-disabled

code/frontend/src/components/header.css

@@ -16,6 +16,7 @@
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 1000;
 }
 .header-title {
   display: flex;

code/frontend/src/components/quiltedImageList.css

@@ -0,0 +1,17 @@
+.imageList {    
+    height: 100vh;
+    width: fit-content;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+  
+  @media only screen and (min-width: 768px) {
+    .image-list {
+      height:  90vh;
+      position: relative;
+      width: fit-content;
+      margin-left: 1rem;
+      margin-right: 10ch;
+      flex-direction: column;
+  }
+}

code/frontend/src/pages/Profile.tsx

@@ -1,31 +1,29 @@
 import "./profile.css";
-import "./bio.css";
+import "../components/bio.css";
 import "./loginAndSignUpPage.css";
+import "../styles/sizes.css";
+import "../styles/colors.css";
+import "../styles/fonts.css";
 import { useState } from "react";
 import Avatar from "@mui/material/Avatar";
-import QuiltedImageList from "./QuiltedImageList";
+import QuiltedImageList from "../components/QuiltedImageList";
-import { deepOrange } from "@mui/material/colors";
-import Hashtags from "./Hashtags";
 import TextField from "@mui/material/TextField";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import {
   Box,
-  IconButton,
   StyledEngineProvider,
   createTheme,
   ThemeProvider,
   Divider,
   Button,
 } from "@mui/material";
-import EditIcon from "@mui/icons-material/EditSquare";
+import Bio from "../components/Bio";
 
 function Profile() {
   const toggleEditMode = (event: React.MouseEvent<HTMLElement>) => {
-    event.preventDefault();
     isEditable(!editMode);
   };
-  const [editMode, isEditable] = useState(false);
+  const [editMode, isEditable] = useState(true);
-  const [text, setText] = useState("");
 
   const theme = createTheme({
     breakpoints: {
@@ -53,7 +51,7 @@ function Profile() {
               >
                 U
               </Avatar>
-              <span className="profile-username body-m">Username</span>
+              <span className="profile-username body-l">Username</span>
             </div>
             <div>
               <Box
@@ -75,7 +73,7 @@ function Profile() {
                   multiline
                   maxRows={4}
                   disabled={editMode}
-                  onDoubleClick={toggleEditMode}
+                  onClick={editMode ? toggleEditMode :  undefined}
                 />
               </Box>
               {!editMode && <Button variant="contained" className="button" onClick={toggleEditMode}>Ok</Button>}
@@ -84,15 +82,15 @@ function Profile() {
             <div className="numeral-data">
               <div className="data">
                 <span aria-label="current-post-number">50</span>
-                <span className="data-label">Posts</span>
+                <span className="data-label title-h1">Posts</span>
               </div>
               <div className="data">
                 <span aria-label="current-follower-number">100</span>
-                <span className="data-label">Followers</span>
+                <span className="data-label title-h1">Followers</span>
               </div>
               <div className="data">
                 <span aria-label="current-following-number">50</span>
-                <span className="data-label">Following</span>
+                <span className="data-label title-h1">Following</span>
               </div>
             </div>
           </div>

code/frontend/src/pages/profile.css

@@ -1,25 +1,6 @@
 .profile-display {
-  display: flex;
-  flex-direction: column;
-  height: 100vh; /* Full viewport height */
-  width: 100vw; /* Full viewport width */
-  position: absolute;
-  background: var(
-    --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
-  );
-  align-items: center;
-  background-attachment: fixed;
   padding-top: var(--Header-hight);
-  z-index: -1;
+  flex-direction: column;
 }
 
 .user-info {
@@ -28,7 +9,9 @@
     border-radius: 1rem;
     background-color: hsla(244, 70%, 13%, 0.71);
     backdrop-filter: blur(8px);
-    margin-top: 1rem;
+    margin-top: calc(var(--Header-height) + 1rem);
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 
 .user {
@@ -45,7 +28,7 @@
     flex-direction: row;
     font-size: 18px;
     font-weight: 500;   
-    color: var(--Rotkehlchen-gray-default);
+    color: var(--Rotkehlchen-gray);
     border-radius: 1rem;
   }
 
@@ -62,34 +45,24 @@
   }
 
   .profile-username {
-    font-size: 24px;
     font-weight: 700;
     color: var(--Rotkehlchen-orange-default);
   }
 
-  .edit-profile {
+  .button {
-    color: var(--Rotkehlchen-orange-default);
+    margin-bottom: 0.5rem;
-    font-size: 25px;
-  }
-
-  .bio {
-    display: flex;
-    align-content: start;
-    padding: 2px;
-    border: 1px solid var(--Rotkehlchen-brown-light);
-    color: aliceblue;
   }
 
   .divider {
-    border-color: var(--Rotkehlchen-brown-light);
+    border-color: var(--Rotkehlchen-orange-default);
   }
 
 @media screen and (min-width: 768px) {
 .profile-display {
-    display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: baseline;
+    padding-top: 1rem;
 }
 
   .user-info {
@@ -99,10 +72,7 @@
     border-radius: 1rem;
     background-color: hsla(244, 70%, 13%, 0.71);
     align-self: top;
-  }
+    padding-bottom: 1rem;
-
-  .button {
-    margin-bottom: 0.5rem;
   }
 
   .user {
@@ -115,11 +85,13 @@
     display: flex;
     flex-direction: column;
     margin-top: 2rem;
-    font-size: 26px;
+    font-weight: 700;
-    font-weight: 750;
+    font-size: 2rem;
   }
 
   .data-label {
+    padding-top: 0.5rem;
+    font-size: 1.5rem;
     font-weight: 500;
   }
 
@@ -129,18 +101,9 @@
     margin: 1rem;
   }
 
-  .profile-username {
-    font-size: 24px;
-    font-weight: 700;
-  }
-
   .profile-avatar {
     width: 5rem;
     height: 5rem;
     background-color: aqua;
   }
-
-  .edit-profile {
-    font-size: 35px;
-  }
 }

code/frontend/src/quiltedImageList.css

@@ -1,16 +0,0 @@
-.imageList {    
-    height: 100vh;
-    width: fit-content;
-    margin-left: 1rem;
-    margin-right: 1rem;
-}
-
-@media only screen and (min-width: 768px) {
-  .image-list {
-    height:  90vh;
-    position: relative;
-    width: fit-content;
-    margin-left: 1rem;
-    margin-right: 10ch;
-  }
-}

code/frontend/src/styles/colors.css

@@ -17,3 +17,11 @@
     url("../../public/assets/images/BirdsSky.jpg") lightgray 50% / cover
       no-repeat;
 }
+
+body{
+  height: 100vh; /* Full viewport height */
+  width: 100vw; /* Full viewport width */
+  background: var(--gradient-blue-backround-mobile);
+  z-index: -1;
+  background-attachment: fixed;
+}

code/frontend/src/styles/sizes.css

@@ -0,0 +1,3 @@
+:root {
+    --Header-height: 50px;
+}

code/frontend/src/test.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
-import './header.css';
+import './components/header.css';
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
-import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import List from "@mui/material/List";
 import Divider from "@mui/material/Divider";