refactor css and tsx files

code/frontend/src/components/ChangeAvatarDialog.tsx

@@ -18,6 +18,8 @@ import "../styles/fonts.css";
 import "./changeAvatarDialog.css";
 import ButtonRotkehlchen from "./ButtonRotkehlchen";
 import { useFilePicker } from "use-file-picker";
+import Username from "./Username";
+import "./username.css"
 
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiDialogContent-root": {
@@ -65,8 +67,10 @@ export default function AvatarDialog({
 
   return (
     <React.Fragment>
+      <div className="user">
         <Button onClick={handleClickOpen}>
           <Avatar
+            className="profile-avatar"
             alt="Username"
             // current code does not work yet
             // TODO: If no image is selected, return the image already in the database or undefined
@@ -75,11 +79,11 @@ export default function AvatarDialog({
                 ? setImageURL({ newImage: true })
                 : undefined
             }
-          className="profile-avatar"
           >
             U
           </Avatar>
         </Button>
+        <Username username={username} />
         <BootstrapDialog
           onClose={handleClose}
           aria-labelledby="change-profile-picture-dialog"
@@ -89,10 +93,8 @@ export default function AvatarDialog({
             className="small-title orange-text"
             sx={{ m: 1.5, p: 2 }}
             id="change-profile-picture-dialog"
-        > { ownAccount ?
+          >
-          "Change Profile Picture" :
+            {ownAccount ? "Change Profile Picture" : username}
-          username
-        }
           </DialogTitle>
           <IconButton
             aria-label="close"
@@ -164,6 +166,7 @@ export default function AvatarDialog({
             </div>
           )}
         </BootstrapDialog>
+      </div>
     </React.Fragment>
   );
 }

code/frontend/src/components/Username.tsx

@@ -0,0 +1,46 @@
+import { Popover, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import "./username.css";
+
+export default function Username({ username }: { username: string }) {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const openPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const closePopover = () => {
+    setAnchorEl(null);
+  };
+
+  const isPopoverOpen = Boolean(anchorEl);
+  const id = isPopoverOpen ? "simple-popover" : undefined;
+
+  useEffect(() => {
+    console.log("Username component mounted");
+  }, []);
+  return (
+    <>
+      <Popover
+        className="profile-popover"
+        onClose={closePopover}
+        id={id}
+        open={isPopoverOpen}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <Typography sx={{ p: 1 }}>{username}</Typography>
+      </Popover>
+      <span className="profile-username body-bold" onClick={openPopover}>
+        {username}
+      </span>
+    </>
+  );
+}

code/frontend/src/components/changeAvatarDialog.css

@@ -15,20 +15,13 @@
   background-color: var(--transparent-dark-blue);
   backdrop-filter: blur(15px);
   border-radius: 1rem;
-}
-
-.css-10d30g3-MuiPaper-root-MuiDialog-paper {
   color: var(--Rotkehlchen-orange-default);
 }
 
 .profile-avatar {
   width: 40px;
   height: 40px;
-  background-color: aqua;
+  background-color: var(--Rotkehlchen-yellow-default);
-}
-
-.css-53g0n7-MuiButtonBase-root-MuiIconButton-root {
-  color: var(--Rotkehlchen-orange-default);
 }
 
 .change-avatar-button {
@@ -37,10 +30,28 @@
   align-items: end;
 }
 
+.user {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding-bottom: 1rem;
+  margin-top: 1rem;
+  border-radius: 1rem;
+}
+
 @media screen and (min-width: 768px) {
   .profile-avatar {
     width: 5rem;
     height: 5rem;
     background-color: var(--Rotkehlchen-yellow-default);
   }
+
+  .user {
+    width: fit-content;
+    padding-left: 1rem;
+    padding-right: 3rem;
+    padding-bottom: 1rem;
+  }
 }

code/frontend/src/components/quiltedImageList.css

@@ -1,17 +1,13 @@
 .image-list {
   height: fit-content;
-  width: fill-available;
   justify-content: center;
+  margin-bottom: 1rem;
 }
 
-.box {
-  flex-grow: 1;
-  height: fit-content;
-}
 .css-1row2ej-MuiImageListItem-root .MuiImageListItem-img {
   object-fit: cover;
-  width: 5rem;
+  width: 7rem;
-  height: 5rem;
+  height: 7rem;
   margin: -0.1rem;
   cursor: pointer;
 }

code/frontend/src/components/username.css

@@ -0,0 +1,10 @@
+.profile-username {
+  color: var(--Rotkehlchen-orange-default);
+  max-width: 10rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.profile-popover {
+  padding: 1rem;
+}

code/frontend/src/pages/LoginAndSignUpPage.tsx

@@ -4,6 +4,7 @@ import api from "../api/axios";
 import ButtonRotkehlchen from "../components/ButtonRotkehlchen";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useAuth } from "../api/Auth";
+import { createTheme, useMediaQuery } from "@mui/material";
 
 type FormData = {
   username: string;
@@ -83,9 +84,23 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
       [name]: value,
     }));
   };
+  
+  const theme = createTheme({
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 768,
+        md: 960,
+        lg: 1280,
+        xl: 1920,
+      },
+    },
+  });
+  const matchDownMd = useMediaQuery(theme.breakpoints.down('sm'));
+
   return (
     <div className="background">
-      <div className="login-login">
+      <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

@@ -3,66 +3,28 @@ import "../components/bio.css";
 import "./loginAndSignUpPage.css";
 import "../styles/sizes.css";
 import "../styles/fonts.css";
-import { useState } from "react";
 import QuiltedImageList from "../components/QuiltedImageList";
 import {
   StyledEngineProvider,
   Divider,
-  Popover,
-  Typography,
 } from "@mui/material";
 import ChangeAvatarDialog from "../components/ChangeAvatarDialog";
 import Bio from "../components/Bio";
 import RotkehlchenButton from "../components/ButtonRotkehlchen";
 
 function Profile() {
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-
-  const openPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const closePopover = () => {
-    setAnchorEl(null);
-  };
-
-  const isPopoverOpen = Boolean(anchorEl);
-  const id = isPopoverOpen ? "simple-popover" : undefined;
-
   const username = "Username12345678"; /* Get username from database */
-  const ownAccount = false;
+  const ownAccount = true;
 
   return (
     <StyledEngineProvider injectFirst>
       <div className="profile-display">
-        <div className="user-info">
+        <div className="user-info blue-background">
-          <div className="user">
             <ChangeAvatarDialog ownAccount={ownAccount} username={username} />
-            <Popover
-              className="profile-popover"
-              onClose={closePopover}
-              id={id}
-              open={isPopoverOpen}
-              anchorEl={anchorEl}
-              anchorOrigin={{
-                vertical: "top",
-                horizontal: "left",
-              }}
-              transformOrigin={{
-                vertical: "bottom",
-                horizontal: "left",
-              }}
-            >
-              <Typography sx={{ p: 1 }}>{username}</Typography>
-            </Popover>
-            <span className="profile-username body-l" onClick={openPopover}>
-              {username}
-            </span>
-          </div>
           <Bio ownAccount={ownAccount} />
           <Divider variant="middle" className="divider" />
           {/* TODO: Change data to data from Database */}
-          <div className="numeral-data">
+          <div className="numeral-data body-bold">
             <div className="data">
               <span aria-label="current-post-number">50</span>
               <span className="data-label title-h1">Posts</span>

code/frontend/src/pages/loginAndSignUpPage.css

@@ -36,7 +36,6 @@
   width: 100%;
   height: 44px;
   align-items: center;
-  justify-content: flex-start;
 }
 
 .login-div-input:hover {
@@ -95,7 +94,6 @@
     display: flex;
     flex-direction: row;
     border-radius: 4px;
-    background: rgba(13, 10, 56, 0.71);
     box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
     align-items: center;
     justify-content: start;
@@ -103,7 +101,6 @@
     height: 60vh;
     min-height: 400px;
     min-width: 500px;
-    backdrop-filter: blur(8px);
   }
 
   .login-image {

code/frontend/src/pages/profile.css

@@ -1,42 +1,21 @@
 .profile-display {
-  display: flex;
   padding-top: calc(var(--Header-height) + 1rem);
-  flex-direction: column;
 }
 
 .user-info {
-  display: flex;
-  flex-direction: column;
   align-items: center;
   margin-bottom: 1rem;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  border-radius: 1rem;
-  background-color: var(--transparent-dark-blue);
-  backdrop-filter: blur(8px);
   padding-left: 1rem;
   padding-right: 1rem;
-  height: fit-content;
+  margin-left: 0.5rem;
-}
+  margin-right: 0.5rem;
-
-.user {
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  gap: 20px;
-  padding-bottom: 1rem;
-  margin-top: 1rem;
-  border-radius: 1rem;
 }
 
 .numeral-data {
+  justify-content: space-around;
+  color: var(--Rotkehlchen-gray);
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--Rotkehlchen-gray);
-  border-radius: 1rem;
 }
 
 .data {
@@ -51,19 +30,6 @@
   font-weight: 500;
 }
 
-.profile-username {
-  font-weight: 700;
-  font-size: 1.2rem;
-  color: var(--Rotkehlchen-orange-default);
-  max-width: 10rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.profile-popover {
-  padding: 1rem;
-}
-
 .button {
   margin-bottom: 0.5rem;
 }
@@ -73,42 +39,21 @@
 }
 
 @media screen and (min-width: 768px) {
-  .profile-display {
-    flex-direction: row;
-  }
 
   .user-info {
-    display: flex;
-    flex-direction: column;
     position: fixed;
     margin-left: 2rem;
     margin-right: 1.5rem;
   }
 
-  .user {
-    width: fit-content;
-    padding-left: 1rem;
-    padding-right: 3rem;
-    padding-bottom: 1rem;
-  }
-
   .numeral-data {
-    display: flex;
     flex-direction: column;
     margin-top: 1rem;
-    font-weight: 700;
     font-size: 2rem;
   }
 
   .data-label {
-    padding-top: 0.5rem;
     font-size: 1.5rem;
-    font-weight: 500;
   }
 
-  .data {
-    display: flex;
-    flex-direction: column;
-    margin: 1rem;
-  }
 }

code/frontend/src/styles/fonts.css

@@ -63,6 +63,12 @@ h1 {
   font-weight: 400;
 }
 
+.body-bold {
+  font-family: "Inter";
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
 p {
   font-family: "Inter";
 }