UI updates

client/src/api.ts

@@ -254,6 +254,7 @@ export async function fetchConfig(): Promise<Config> {
       query FetchConfig{
         config {
           classifierLambdaEndpoint
+          filterEmailMentorAddress
           uploadLambdaEndpoint
           subjectRecordPriority
           videoRecorderMaxLength
@@ -354,6 +355,8 @@ export async function fetchUsers(
                     viewPermission
                     editPermission
                   }
+                  idleRecordingDuration
+                  introRecordingText
                   loginHeaderText
                   welcomeSlideHeader
                   welcomeSlideText
@@ -1088,6 +1091,8 @@ export async function fetchMentorById(
             lockedToSubjects
             publiclyVisible
             mentorType
+            idleRecordingDuration
+            introRecordingText
             orgPermissions{
               org
               viewPermission
@@ -1271,6 +1276,8 @@ export async function fetchMentorConfig(
             lockedToSubjects
             publiclyVisible
             mentorType
+            introRecordingText
+            idleRecordingDuration
             orgPermissions{
               org
               viewPermission
@@ -2833,6 +2840,7 @@ export async function fetchOrganizations(
                 }
                 config {
                   classifierLambdaEndpoint
+                  filterEmailMentorAddress
                   uploadLambdaEndpoint
                   subjectRecordPriority
                   videoRecorderMaxLength
@@ -2932,6 +2940,7 @@ export async function addOrUpdateOrganization(
             }
             config {
               classifierLambdaEndpoint
+              filterEmailMentorAddress
               uploadLambdaEndpoint
               subjectRecordPriority
               videoRecorderMaxLength
@@ -3016,6 +3025,7 @@ export async function updateOrgConfig(
         me {
           updateOrgConfig(id: $id, config: $config) {
             classifierLambdaEndpoint
+            filterEmailMentorAddress
             uploadLambdaEndpoint
             subjectRecordPriority
             videoRecorderMaxLength
@@ -3073,6 +3083,7 @@ export async function updateOrgConfig(
         id,
         config: {
           styleHeaderTitle: config.styleHeaderTitle,
+          filterEmailMentorAddress: config.filterEmailMentorAddress,
           styleHeaderText: config.styleHeaderText,
           styleHeaderColor: config.styleHeaderColor,
           styleHeaderTextColor: config.styleHeaderTextColor,
@@ -3131,6 +3142,7 @@ export async function updateConfig(
         me {
           updateConfig(config: $config) {
             classifierLambdaEndpoint
+            filterEmailMentorAddress
             uploadLambdaEndpoint
             subjectRecordPriority
             videoRecorderMaxLength
@@ -3187,6 +3199,7 @@ export async function updateConfig(
       variables: {
         config: {
           styleHeaderTitle: config.styleHeaderTitle,
+          filterEmailMentorAddress: config.filterEmailMentorAddress,
           styleHeaderText: config.styleHeaderText,
           styleHeaderColor: config.styleHeaderColor,
           styleHeaderTextColor: config.styleHeaderTextColor,

client/src/components/config/other-settings.tsx

@@ -161,6 +161,18 @@ export function Settings(props: {
           shrink: true,
         }}
       />
+      <TextField
+        fullWidth
+        data-cy="org-email-input"
+        data-test={config.filterEmailMentorAddress}
+        variant="outlined"
+        label="'Email Mentor' Email Address"
+        value={config.filterEmailMentorAddress}
+        onChange={(e) =>
+          updateConfig({ filterEmailMentorAddress: e.target.value })
+        }
+        style={{ marginBottom: 20 }}
+      />
       <FormControl variant="outlined" fullWidth>
         <InputLabel>Question Sort Order</InputLabel>
         <Select

client/src/components/home/answer-item.tsx

@@ -22,8 +22,16 @@ function AnswerItem(props: {
   question: QuestionEdits;
   onEditQuestion: (question: QuestionEdits) => void;
   onRecordOne: (question: QuestionEdits) => void;
+  isCompleteAnswer: boolean;
 }): JSX.Element {
-  const { mentorId, answer, question, onEditQuestion, onRecordOne } = props;
+  const {
+    mentorId,
+    answer,
+    question,
+    onEditQuestion,
+    onRecordOne,
+    isCompleteAnswer,
+  } = props;
   const [questionInput, setQuestionInput] = useState<string>(
     question.newQuestionText
   );
@@ -78,7 +86,9 @@ function AnswerItem(props: {
         </span>
       ) : (
         <ListItemText
-          primary={question?.originalQuestion.question}
+          primary={
+            question?.customQuestionText || question.originalQuestion.question
+          }
           secondary={`${answer.transcript.substring(0, 100)}${
             answer.transcript.length > 100 ? "..." : ""
           }`}
@@ -93,7 +103,7 @@ function AnswerItem(props: {
           endIcon={<PlayArrowIcon />}
           onClick={() => onRecordOne(question)}
         >
-          Record
+          {isCompleteAnswer ? "Edit" : "Record"}
         </Button>
       </ListItemSecondaryAction>
     </div>

client/src/components/home/answer-list.tsx

@@ -22,6 +22,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Answer } from "types";
 import AnswerItem from "./answer-item";
 import { QuestionEdits } from "hooks/graphql/use-with-review-answer-state";
+import { COMPLETE_ANSWER_HEADER } from "./recording-block";
 
 function AnswerList(props: {
   classes: Record<string, string>;
@@ -47,6 +48,7 @@ function AnswerList(props: {
     onAddQuestion,
   } = props;
   const [isExpanded, setExpanded] = React.useState(false);
+  const isCompleteAnswers = header === COMPLETE_ANSWER_HEADER;
 
   useEffect(() => {
     setExpanded(props.expandLists);
@@ -83,7 +85,7 @@ function AnswerList(props: {
               onClick={onRecordAll}
               disabled={answers.length === 0}
             >
-              Record All
+              {isCompleteAnswers ? "Review All" : "Record All"}
             </Button>
             {onAddQuestion ? (
               <Button
@@ -129,6 +131,7 @@ function AnswerList(props: {
                     question={question}
                     onEditQuestion={onEditQuestion}
                     onRecordOne={onRecordOne}
+                    isCompleteAnswer={isCompleteAnswers}
                   />
                 </ListItem>
               );

client/src/components/home/recording-block.tsx

@@ -15,6 +15,9 @@ import {
 } from "hooks/graphql/use-with-review-answer-state";
 import { isAnswerComplete } from "helpers";
 
+export const INCOMPLETE_ANSWER_HEADER = "Incomplete";
+export const COMPLETE_ANSWER_HEADER = "Complete";
+
 export default function RecordingBlockItem(props: {
   classes: Record<string, string>;
   block: RecordingBlock;
@@ -79,7 +82,7 @@ export default function RecordingBlockItem(props: {
             classes={classes}
             subjectId={block.subject}
             mentorId={props.mentorId}
-            header="Complete"
+            header={COMPLETE_ANSWER_HEADER}
             answers={complete}
             questions={questionEdits}
             expandLists={props.expandAllRecordingBlocks}
@@ -97,7 +100,7 @@ export default function RecordingBlockItem(props: {
           <AnswerList
             classes={classes}
             subjectId={block.subject}
-            header="Incomplete"
+            header={INCOMPLETE_ANSWER_HEADER}
             answers={incomplete}
             questions={questionEdits}
             expandLists={props.expandAllRecordingBlocks}

client/src/components/record/video-recorder.tsx

@@ -507,11 +507,11 @@ function VideoRecorder(props: {
           style={{
             color: "white",
             position: "absolute",
-            top: height / 2,
+            top: height / 4,
             bottom: height / 2,
             left: width / 2,
             right: width / 2,
-            visibility: countdownInProgress ? "visible" : "hidden",
+            visibility: countdownInProgress ? "visible" : "visible",
           }}
         >
           {recordStartCountdown ||
@@ -525,6 +525,23 @@ function VideoRecorder(props: {
             ) ||
             ""}
         </Typography>
+        {recordStartCountdown && (
+          <Typography
+            data-cy="countdown-message"
+            variant="h2"
+            align="center"
+            style={{
+              color: "white",
+              position: "absolute",
+
+              bottom: 0,
+              width: width,
+              visibility: countdownInProgress ? "visible" : "visible",
+            }}
+          >
+            Press Spacebar to stop recording.
+          </Typography>
+        )}
       </div>
       <div
         data-cy="controls"

client/src/components/setup/mentor-goal-slide.tsx

@@ -22,15 +22,31 @@ export function MentorGoalSlide(props: {
       classes={props.classes}
       title="My Goal"
       content={
-        <div>
-          <Typography variant="h4">
-            What do you really want someone to take away from talking to your
-            mentor? (1-2 sentences)
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%",
+          }}
+        >
+          <Typography
+            variant="h4"
+            style={{
+              width: "80%",
+              textAlign: "center",
+              alignSelf: "center",
+            }}
+          >
+            Think how you would describe yourself to a mentee, what do you
+            really want someone to take away from talking to your mentor?
           </Typography>
           <TextField
             required
             data-cy="goal-input"
             variant="outlined"
+            placeholder="Enter your goal here..."
             multiline
             minRows={6}
             value={mentor.goal || ""}

client/src/components/setup/mentor-info-slide.tsx

@@ -5,11 +5,11 @@ Permission to use, copy, modify, and distribute this software and its documentat
 The full terms of this copyright and license should always be found in the root directory of this software deliverable as "license.txt" and if these terms are not found with this software, please contact the USC Stevens Center for the full license.
 */
 import React, { useEffect, useState } from "react";
-import { Checkbox, FormControlLabel, TextField } from "@mui/material";
+import { Checkbox, FormControlLabel, TextField, Tooltip } from "@mui/material";
 import { Mentor } from "types";
 import { Slide } from "./slide";
 import { onTextInputChanged } from "helpers";
-
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 export function MentorInfoSlide(props: {
   classes: Record<string, string>;
   mentor: Mentor;
@@ -37,7 +37,13 @@ export function MentorInfoSlide(props: {
       classes={props.classes}
       title="Tell us a little about yourself."
       content={
-        <div>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+          }}
+        >
           <TextField
             style={{
               width: "90%",
@@ -100,19 +106,44 @@ export function MentorInfoSlide(props: {
             }}
             className={classes.inputField}
           />
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={mentor.allowContact}
-                onChange={() =>
-                  editMentor({ allowContact: !mentor.allowContact })
-                }
-                color="secondary"
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+            }}
+          >
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={mentor.allowContact}
+                  onChange={() =>
+                    editMentor({ allowContact: !mentor.allowContact })
+                  }
+                  color="secondary"
+                />
+              }
+              label="Allow people to contact me"
+              style={{
+                width: "fit-content",
+                alignSelf: "flex-start",
+                marginLeft: 0,
+                marginRight: 2,
+              }}
+            />
+            <Tooltip
+              title="Your organization will screen emails before you receive them."
+              placement="top"
+            >
+              <HelpOutlineIcon
+                style={{
+                  color: "gray",
+                  cursor: "pointer",
+                  margin: 0,
+                }}
               />
-            }
-            label="Allow people to contact me"
-            style={{ width: "89%", alignSelf: "left" }}
-          />
+            </Tooltip>
+          </div>
         </div>
       }
     />