edit name pencil cleanup, remove modal grey overlay

mentorpal · Sep 25, 2023 · a53c55a · a53c55a
1 parent bb8b7cb
commit a53c55a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/client/src/components/my-mentor-card/top-mentor-card/edit-mentor-info-modal.tsx b/client/src/components/my-mentor-card/top-mentor-card/edit-mentor-info-modal.tsx
@@ -60,9 +60,14 @@ function EditMentorInfoModal(props: {
             open={open}
             onClose={handleClose}
             closeAfterTransition
-            BackdropComponent={Backdrop}
-            BackdropProps={{
-              timeout: 500,
+            slots={{
+              backdrop: Backdrop,
+            }}
+            slotProps={{
+              backdrop: {
+                timeout: 500,
+                sx: { backgroundColor: "rgba(0, 0, 0, 0)" },
+              },
             }}
             data-cy="edit-mentor-data-modal"
           >

diff --git a/client/src/components/my-mentor-card/top-mentor-card/mentor-thumbnail.tsx b/client/src/components/my-mentor-card/top-mentor-card/mentor-thumbnail.tsx
@@ -73,11 +73,17 @@ function MentorThumbnail(props: {
           variant="h5"
           component="h2"
           className="mentorName"
+          flexDirection="row"
           justifyContent="center"
-          alignItems="center"
         >
           <div style={{ display: "flex", justifyContent: "center" }}>
-            <div style={{ margin: "10px 0 0 0", justifyContent: "center" }}>
+            <div
+              style={{
+                margin: "10px 0 0 0",
+                justifyContent: "center",
+                position: "relative",
+              }}
+            >
               <IconButton
                 data-cy="edit-mentor-data"
                 color="primary"
@@ -86,10 +92,16 @@ function MentorThumbnail(props: {
                 className="edit-pencil-icon"
                 onClick={handleOpen}
                 size="large"
+                style={{
+                  margin: "10px",
+                  position: "absolute",
+                  left: -50,
+                  top: 0,
+                  bottom: 0,
+                }}
               >
                 <CreateIcon />
               </IconButton>
-
               <ColorTooltip
                 data-cy="profile-tooltip"
                 open={
@@ -133,7 +145,7 @@ function MentorThumbnail(props: {
                 }}
               >
                 <b
-                  style={{ margin: "0 0 0 12px" }}
+                  style={{ margin: 0 }}
                   onMouseEnter={() => {
                     hasSeenTooltips && setProfileTooltipOpen(true);
                   }}
@@ -144,23 +156,23 @@ function MentorThumbnail(props: {
                   {editedMentor.name}
                 </b>
               </ColorTooltip>
+              <Typography
+                gutterBottom
+                variant="h6"
+                component="h4"
+                className="mentorTitle"
+                style={{ margin: 0, padding: 0 }}
+              >
+                {editedMentor.title}
+              </Typography>
             </div>
-            <EditMentorInfoModal
-              handleClose={handleClose}
-              editMentor={editMentor}
-              editedMentor={editedMentor}
-              open={open}
-            />
           </div>
-        </Typography>
-        <Typography
-          gutterBottom
-          variant="h6"
-          component="h4"
-          className="mentorTitle"
-          style={{ margin: 0 }}
-        >
-          {editedMentor.title}
+          <EditMentorInfoModal
+            handleClose={handleClose}
+            editMentor={editMentor}
+            editedMentor={editedMentor}
+            open={open}
+          />
         </Typography>
       </Grid>
       {/* Thumbnail */}