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

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;
-}
-
-.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;
+  }
 }

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

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