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,105 +67,106 @@ export default function AvatarDialog({
 
   return (
     <React.Fragment>
-      <Button onClick={handleClickOpen}>
+      <div className="user">
-        <Avatar
+        <Button onClick={handleClickOpen}>
-          alt="Username"
+          <Avatar
-          // current code does not work yet
+            className="profile-avatar"
-          // TODO: If no image is selected, return the image already in the database or undefined
+            alt="Username"
-          src={
+            // current code does not work yet
-            filesContent.length > 0
+            // TODO: If no image is selected, return the image already in the database or undefined
-              ? setImageURL({ newImage: true })
+            src={
-              : undefined
+              filesContent.length > 0
-          }
+                ? setImageURL({ newImage: true })
-          className="profile-avatar"
+                : undefined
-        >
+            }
-          U
-        </Avatar>
-      </Button>
-      <BootstrapDialog
-        onClose={handleClose}
-        aria-labelledby="change-profile-picture-dialog"
-        open={open}
-      >
-        <DialogTitle
-          className="small-title orange-text"
-          sx={{ m: 1.5, p: 2 }}
-          id="change-profile-picture-dialog"
-        > { ownAccount ?
-          "Change Profile Picture" :
-          username
-        }
-        </DialogTitle>
-        <IconButton
-          aria-label="close"
-          onClick={handleClose}
-          sx={(theme) => ({
-            position: "absolute",
-            right: 8,
-            top: 8,
-            color: theme.palette.grey[500],
-          })}
-        >
-          <CloseIcon />
-        </IconButton>
-        <Divider variant="middle" className="divider" />
-        <DialogContent>
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              objectFit: "cover",
-              maxWidth: "30rem",
-              maxHeight: "30rem",
-            }}
           >
-            {filesContent.map((file) => (
+            U
-              <img
+          </Avatar>
-                alt={file.name}
+        </Button>
-                src={file.content}
+        <Username username={username} />
-                style={{
+        <BootstrapDialog
-                  maxWidth: "30rem",
+          onClose={handleClose}
-                  maxHeight: "30rem",
+          aria-labelledby="change-profile-picture-dialog"
-                  width: "100%",
+          open={open}
-                  height: "100%",
+        >
-                  objectFit: "cover",
+          <DialogTitle
-                }}
+            className="small-title orange-text"
-              ></img>
+            sx={{ m: 1.5, p: 2 }}
-            ))}
+            id="change-profile-picture-dialog"
-          </Box>
+          >
+            {ownAccount ? "Change Profile Picture" : username}
+          </DialogTitle>
+          <IconButton
+            aria-label="close"
+            onClick={handleClose}
+            sx={(theme) => ({
+              position: "absolute",
+              right: 8,
+              top: 8,
+              color: theme.palette.grey[500],
+            })}
+          >
+            <CloseIcon />
+          </IconButton>
+          <Divider variant="middle" className="divider" />
+          <DialogContent>
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                objectFit: "cover",
+                maxWidth: "30rem",
+                maxHeight: "30rem",
+              }}
+            >
+              {filesContent.map((file) => (
+                <img
+                  alt={file.name}
+                  src={file.content}
+                  style={{
+                    maxWidth: "30rem",
+                    maxHeight: "30rem",
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                  }}
+                ></img>
+              ))}
+            </Box>
+            {ownAccount && (
+              <div className="change-avatar-button">
+                <IconButton
+                  aria-label="upload picture"
+                  onClick={() => openFilePicker()}
+                >
+                  <EditSquareIcon className="edit-icon" />
+                </IconButton>
+              </div>
+            )}
+          </DialogContent>
           {ownAccount && (
-            <div className="change-avatar-button">
+            <div>
-              <IconButton
+              <Divider variant="middle" className="divider" />
-                aria-label="upload picture"
+              <DialogActions>
-                onClick={() => openFilePicker()}
+                <ButtonRotkehlchen
-              >
+                  style="primary"
-                <EditSquareIcon className="edit-icon" />
+                  label="Save Changes"
-              </IconButton>
+                  type="submit"
+                  onClick={handleSaveChanges}
+                />
+                <ButtonRotkehlchen
+                  style="secondary"
+                  label="Cancel"
+                  type="reset"
+                  onClick={handleClose}
+                />
+              </DialogActions>
             </div>
           )}
-        </DialogContent>
+        </BootstrapDialog>
-        {ownAccount && (
+      </div>
-          <div>
-            <Divider variant="middle" className="divider" />
-            <DialogActions>
-              <ButtonRotkehlchen
-                style="primary"
-                label="Save Changes"
-                type="submit"
-                onClick={handleSaveChanges}
-              />
-              <ButtonRotkehlchen
-                style="secondary"
-                label="Cancel"
-                type="reset"
-                onClick={handleClose}
-              />
-            </DialogActions>
-          </div>
-        )}
-      </BootstrapDialog>
     </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";
 }