UI cleanup: thumbnail/upload, welcome slide text (#306)

* UI cleanup: thumbnail/upload, welcome slide text * edit name pencil cleanup, remove modal grey overlay * recommender doesn't recommend subjects or goals if locked
mentorpal · Sep 25, 2023 · 57eec2b · 57eec2b
1 parent 8d7761c
commit 57eec2b
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 78 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
@@ -16,14 +16,6 @@ const ColorTooltip = withStyles(Tooltip, {
   },
 });
 
-const useStyles = makeStyles({ name: { MentorThumbnail } })(() => ({
-  homeThumbnail: {
-    position: "relative",
-    width: "60%",
-    height: 180,
-  },
-}));
-
 function MentorThumbnail(props: {
   handleOpen: () => void;
   editedMentor: Mentor;
@@ -48,6 +40,14 @@ function MentorThumbnail(props: {
     idxTooltip,
     hasSeenTooltips,
   } = props;
+
+  const useStyles = makeStyles({ name: { MentorThumbnail } })(() => ({
+    homeThumbnail: {
+      position: "relative",
+      width: "300px",
+      height: "auto",
+    },
+  }));
   const { getData } = useActiveMentor();
   const mentorId = getData((ms) => ms.data?._id || "");
   const isArchived = getData((ms) => ms.data?.isArchived);
@@ -61,15 +61,29 @@ function MentorThumbnail(props: {
   return (
     <Grid container alignItems="center" justifyContent="center">
       {/* Mentor info / left column */}
-      <Grid data-cy="thumbnail-wrapper" thumbnail-src={thumbnail} item xs={10}>
+      <Grid
+        data-cy="thumbnail-wrapper"
+        thumbnail-src={thumbnail}
+        item
+        xs={10}
+        width={"400px"}
+      >
         <Typography
           gutterBottom
           variant="h5"
           component="h2"
           className="mentorName"
+          flexDirection="row"
+          justifyContent="center"
         >
-          <div style={{ display: "flex" }}>
-            <div style={{ margin: "10px 0 0 0" }}>
+          <div style={{ display: "flex", justifyContent: "center" }}>
+            <div
+              style={{
+                margin: "10px 0 0 0",
+                justifyContent: "center",
+                position: "relative",
+              }}
+            >
               <IconButton
                 data-cy="edit-mentor-data"
                 color="primary"
@@ -78,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={
@@ -125,7 +145,7 @@ function MentorThumbnail(props: {
                 }}
               >
                 <b
-                  style={{ margin: "0 0 0 12px" }}
+                  style={{ margin: 0 }}
                   onMouseEnter={() => {
                     hasSeenTooltips && setProfileTooltipOpen(true);
                   }}
@@ -136,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 0 0 38px" }}
-        >
-          {editedMentor.title}
+          <EditMentorInfoModal
+            handleClose={handleClose}
+            editMentor={editMentor}
+            editedMentor={editedMentor}
+            open={open}
+          />
         </Typography>
       </Grid>
       {/* Thumbnail */}
@@ -162,8 +182,14 @@ function MentorThumbnail(props: {
         item
         xs={10}
         className="thumbnail-wrapper"
+        width={"400px"}
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
       >
-        <div style={{ display: "flex" }}>
+        <div style={{ position: "relative", width: "fit-content" }}>
           <Avatar
             data-cy={thumbnail ? "uploaded-thumbnail" : "placeholder-thumbnail"}
             variant={thumbnail ? "rounded" : "square"}
@@ -176,7 +202,7 @@ function MentorThumbnail(props: {
               position: "absolute",
               zIndex: 2,
               bottom: -2,
-              right: 73,
+              right: -40,
             }}
           >
             <IconButton color="primary" component="span" size="large">
@@ -199,8 +225,8 @@ function MentorThumbnail(props: {
       </Grid>
       <Grid
         container
-        alignItems="flex-start"
-        justifyContent="flex-start"
+        alignItems="center"
+        justifyContent="center"
         style={{ marginTop: 5 }}
       >
         <Grid item>

diff --git a/client/src/components/nav-bar.tsx b/client/src/components/nav-bar.tsx
@@ -248,44 +248,45 @@ function NavMenu(props: {
         <ListItemText primary="Chat with Mentor" />
       </ListItem>
       <Divider style={{ marginTop: 15 }} />
-      <ListSubheader className={classes.menuHeader}>Authoring</ListSubheader>
-      <NavItem
-        text={"Create/Edit Subjects"}
-        link={"/author/subjects"}
-        icon={<EditIcon />}
-        onNav={props.onNav}
-      />
-      {editPermission ? (
-        <NavItem
-          text={"Users"}
-          link={"/users"}
-          icon={<PersonIcon />}
-          onNav={props.onNav}
-        />
-      ) : undefined}
-      <NavItem
-        text={"Organizations"}
-        link={"/organizations"}
-        icon={<GroupIcon />}
-        onNav={props.onNav}
-      />
       {editPermission ? (
-        <NavItem
-          text={"Config"}
-          link={"/config"}
-          icon={<SettingsIcon />}
-          onNav={props.onNav}
-        />
-      ) : undefined}
-      {editPermission ? (
-        <NavItem
-          text={"LRS Reports"}
-          link={"/lrsreports"}
-          icon={<LRSIcon />}
-          onNav={props.onNav}
-        />
+        <>
+          <ListSubheader className={classes.menuHeader}>
+            Management Tools
+          </ListSubheader>
+          <NavItem
+            text={"Create/Edit Subjects"}
+            link={"/author/subjects"}
+            icon={<EditIcon />}
+            onNav={props.onNav}
+          />
+          <NavItem
+            text={"Users"}
+            link={"/users"}
+            icon={<PersonIcon />}
+            onNav={props.onNav}
+          />
+          <NavItem
+            text={"Organizations"}
+            link={"/organizations"}
+            icon={<GroupIcon />}
+            onNav={props.onNav}
+          />
+          <NavItem
+            text={"Config"}
+            link={"/config"}
+            icon={<SettingsIcon />}
+            onNav={props.onNav}
+          />
+          <NavItem
+            text={"LRS Reports"}
+            link={"/lrsreports"}
+            icon={<LRSIcon />}
+            onNav={props.onNav}
+          />
+
+          <Divider style={{ marginTop: 15 }} />
+        </>
       ) : undefined}
-      <Divider style={{ marginTop: 15 }} />
       <ListSubheader className={classes.menuHeader}>Account</ListSubheader>
       <ListItem button onClick={onLogout}>
         <ListItemIcon>

diff --git a/client/src/components/setup/welcome-slide.tsx b/client/src/components/setup/welcome-slide.tsx
@@ -16,7 +16,20 @@ export function WelcomeSlide(props: {
   mentorConfig?: MentorConfig;
 }): JSX.Element {
   const { classes, docSetupUrl, mentorConfig } = props;
-
+  function generateWelcomeTextDisplay(welcomeText: string): JSX.Element {
+    return (
+      <div>
+        {welcomeText
+          .split(".")
+          .filter((text) => text.length > 1)
+          .map((text, index) => (
+            <Typography variant="h6" className={classes.text} key={index}>
+              {text}.
+            </Typography>
+          ))}
+      </div>
+    );
+  }
   return (
     <Slide
       classes={classes}
@@ -27,8 +40,10 @@ export function WelcomeSlide(props: {
             It&apos;s nice to meet you, {props.userName}!
           </Typography>
           <Typography variant="h6" className={classes.text}>
-            {mentorConfig?.welcomeSlideText ||
-              "Let's get started setting up your new mentor."}
+            {generateWelcomeTextDisplay(
+              mentorConfig?.welcomeSlideText ||
+                "Let's get started setting up your new mentor."
+            )}
           </Typography>
           <Typography
             data-cy="walkthrough-intro"

diff --git a/client/src/hooks/mentor-recommender/use-with-mentor-recommender.tsx b/client/src/hooks/mentor-recommender/use-with-mentor-recommender.tsx
@@ -96,7 +96,10 @@ export function useWithMentorRecommender(
       return !state.mentorData.title || !state.mentorData.name;
     };
     const goalMissing = (state: RecommenderState) => {
-      return !state.mentorData.goal;
+      return (
+        !state.mentorData.goal &&
+        !state.mentorData.mentorConfig?.disableMyGoalSlide
+      );
     };
     const keywordsMissing = (state: RecommenderState) => {
       return !state.mentorData.keywords.length;
@@ -682,6 +685,9 @@ export function useWithMentorRecommender(
       const completeMentorAnswers = state.mentorData.answers.filter((answer) =>
         isAnswerComplete(answer, undefined, state.mentorData.mentorType)
       );
+      if (state.mentorData.mentorConfig?.subjects.length) {
+        return false;
+      }
       // mentorData.answers contains complete AND incomplete answers.
       return targetAnswerAmount
         ? state.mentorData.answers.length < targetAnswerAmount

diff --git a/client/src/pages/setup.tsx b/client/src/pages/setup.tsx
@@ -66,7 +66,7 @@ const useStyles = makeStyles({ name: { SetupPage } })(() => ({
     justifyContent: "center",
     alignItems: "center",
     alignContent: "center",
-    height: "500px",
+    height: "700px",
     width: "100%",
     overflow: "visible",
   },

diff --git a/client/src/styles/layout.css b/client/src/styles/layout.css
@@ -34,7 +34,7 @@ div.jsoneditor {
 
 .mentorName,
 .mentorTitle {
-  text-align: left !important;
+  text-align: center !important;
 }
 
 .mentorTitle {
@@ -48,7 +48,7 @@ div.jsoneditor {
 
 .thumbnail-wrapper {
   position: relative;
-  width: auto;
+  width: 120px
 }
 
 .upload-thumbnail {