Fix admin feedback width and profile pic hover

Author: ji-mmyliu

frontend/src/components/common/navbar/UserButton.tsx

@@ -5,12 +5,14 @@ import ResetPassword from "../../auth/ResetPassword";
 import Logout from "../../auth/Logout";
 import MyAccountButton from "../../auth/MyAccountButton";
 import ProfilePicture from "../../profile/ProfilePicture";
+import { useUser } from "../../../hooks/useUser";
 
 const UserButton = () => {
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
     null,
   );
   const theme = useTheme();
+  const { profilePicture } = useUser();
 
   const open = Boolean(anchorEl);
   const id = open ? "simple-popover" : undefined;
@@ -31,7 +33,7 @@ const UserButton = () => {
         onClick={handleClick}
         sx={{ color: theme.palette.Neutral[400] }}
       >
-        <ProfilePicture size={24} />
+        <ProfilePicture size={24} sourceUrl={profilePicture} />
       </IconButton>
       <Popover
         id={id}

frontend/src/components/feedback/feedback-admin-view/FeedbackAdminView.tsx

@@ -212,13 +212,19 @@ const FeedbackAdminView = () => {
       <Stack
         direction="column"
         gap="32px"
+        width="100%"
         padding="48px"
         alignItems="flex-start"
         flex="1 0 0"
         alignSelf="stretch"
         sx={{ overflow: "auto", minHeight: 0 }}
       >
-        <Stack direction="column" alignItems="flex-start" gap="16px">
+        <Stack
+          direction="column"
+          alignItems="flex-start"
+          gap="16px"
+          width="100%"
+        >
           <Stack direction="row" justifyContent="space-between" width="100%">
             <Stack
               direction="column"

frontend/src/components/profile/ProfilePicture.tsx

@@ -21,12 +21,22 @@ const ProfilePicture = ({
   return (
     <Box
       sx={{
+        position: "relative",
         display: "flex",
         width: `${size}px`,
         height: `${size}px`,
         justifyContent: "center",
         alignItems: "center",
         borderRadius: "5000px",
+        cursor: setUploadModalOpen ? "pointer" : "default",
+        ...(!!setUploadModalOpen && {
+          "&:hover .avatar-overlay": {
+            opacity: 1,
+          },
+          "&:hover .avatar-text": {
+            display: "none",
+          },
+        }),
       }}
       onClick={() => {
         if (setUploadModalOpen) {
@@ -39,23 +49,11 @@ const ProfilePicture = ({
           width: "100%",
           height: "100%",
           bgcolor: theme.palette[user.role].Light.Hover,
-          ...(!!setUploadModalOpen && {
-            "&:hover": {
-              backgroundColor: "rgba(0, 0, 0, 0.6)",
-
-              "& .avatar-text": {
-                display: "none",
-              },
-
-              "& .camera-icon": {
-                display: "block",
-              },
-            },
-          }),
         }}
         src={sourceUrl}
       >
         <Typography
+          className="avatar-text"
           sx={{
             color: theme.palette[user.role].Dark.Default,
             fontSize: 0.375 * size,
@@ -65,16 +63,33 @@ const ProfilePicture = ({
         >
           {`${user.firstName.charAt(0) || ""}${user.lastName.charAt(0) || ""}`}
         </Typography>
-        <CameraAlt
-          className="camera-icon"
+      </Avatar>
+      {!!setUploadModalOpen && (
+        <Box
+          className="avatar-overlay"
           sx={{
             position: "absolute",
-            display: "none",
-            color: "white",
-            fontSize: 0.4 * size,
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%",
+            backgroundColor: "rgba(0, 0, 0, 0.6)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            opacity: 0,
+            transition: "opacity 0.2s",
           }}
-        />
-      </Avatar>
+        >
+          <CameraAlt
+            sx={{
+              color: "white",
+              fontSize: 0.4 * size,
+            }}
+          />
+        </Box>
+      )}
     </Box>
   );
 };