refactor css and tsx files

2025-07-06 15:18:48 +00:00 · 2025-06-26 09:18:22 +02:00 · 2025-06-26 09:18:22 +02:00 · 5fc8d3324e
commit 5fc8d3324e
parent 2214a64a58
10 changed files with 205 additions and 214 deletions
--- a/code/frontend/src/components/ChangeAvatarDialog.tsx
+++ b/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}>
-        <Avatar
-          alt="Username"
-          // current code does not work yet
-          // TODO: If no image is selected, return the image already in the database or undefined
-          src={
-            filesContent.length > 0
-              ? setImageURL({ newImage: true })
-              : undefined
-          }
-          className="profile-avatar"
-        >
-          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",
-            }}
+      <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
+            src={
+              filesContent.length > 0
+                ? setImageURL({ newImage: true })
+                : undefined
+            }
          >
-            {filesContent.map((file) => (
-              <img
-                alt={file.name}
-                src={file.content}
-                style={{
-                  maxWidth: "30rem",
-                  maxHeight: "30rem",
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "cover",
-                }}
-              ></img>
-            ))}
-          </Box>
+            U
+          </Avatar>
+        </Button>
+        <Username username={username} />
+        <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) => (
+                <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">
-              <IconButton
-                aria-label="upload picture"
-                onClick={() => openFilePicker()}
-              >
-                <EditSquareIcon className="edit-icon" />
-              </IconButton>
+            <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>
          )}
-        </DialogContent>
-        {ownAccount && (
-          <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>
+        </BootstrapDialog>
+      </div>
    </React.Fragment>
  );
 }
--- a/code/frontend/src/components/Username.tsx
+++ b/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>
+    </>
+  );
+}
--- a/code/frontend/src/components/changeAvatarDialog.css
+++ b/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;
-}
-
-.css-53g0n7-MuiButtonBase-root-MuiIconButton-root {
-  color: var(--Rotkehlchen-orange-default);
+  background-color: var(--Rotkehlchen-yellow-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;
+  }
 }
--- a/code/frontend/src/components/quiltedImageList.css
+++ b/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;
-  height: 5rem;
+  width: 7rem;
+  height: 7rem;
  margin: -0.1rem;
  cursor: pointer;
 }
--- a/code/frontend/src/components/username.css
+++ b/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;
+}
--- a/code/frontend/src/pages/LoginAndSignUpPage.tsx
+++ b/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>
--- a/code/frontend/src/pages/Profile.tsx
+++ b/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">
+        <div className="user-info blue-background">
            <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>
--- a/code/frontend/src/pages/loginAndSignUpPage.css
+++ b/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 {
--- a/code/frontend/src/pages/profile.css
+++ b/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;
-}
-
-.user {
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  gap: 20px;
-  padding-bottom: 1rem;
-  margin-top: 1rem;
-  border-radius: 1rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }

 .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;
-  }
 }
--- a/code/frontend/src/styles/fonts.css
+++ b/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";
 }