From c4fddecbeb6a20aa118b3007b995c46a25f313a7 Mon Sep 17 00:00:00 2001
From: aaronshiel <ashiel408@gmail.com>
Date: Thu, 2 May 2024 16:06:47 -0700
Subject: [PATCH] small UI edits

---
 client/src/components/home/answer-item.tsx    | 12 ++++++++--
 client/src/components/home/answer-list.tsx    |  5 +++-
 .../src/components/home/recording-block.tsx   |  7 ++++--
 .../src/components/record/video-recorder.tsx  | 21 ++++++++++++++--
 .../components/setup/mentor-goal-slide.tsx    | 24 +++++++++++++++----
 .../setup/select-keywords-slide.tsx           |  3 +++
 6 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/client/src/components/home/answer-item.tsx b/client/src/components/home/answer-item.tsx
index bb0ad9ec..c75e1fba 100644
--- a/client/src/components/home/answer-item.tsx
+++ b/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
   );
@@ -95,7 +103,7 @@ function AnswerItem(props: {
           endIcon={<PlayArrowIcon />}
           onClick={() => onRecordOne(question)}
         >
-          Record
+          {isCompleteAnswer ? "Edit" : "Record"}
         </Button>
       </ListItemSecondaryAction>
     </div>
diff --git a/client/src/components/home/answer-list.tsx b/client/src/components/home/answer-list.tsx
index a3528fa1..325486f6 100644
--- a/client/src/components/home/answer-list.tsx
+++ b/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>
               );
diff --git a/client/src/components/home/recording-block.tsx b/client/src/components/home/recording-block.tsx
index de4e6cab..8614895c 100644
--- a/client/src/components/home/recording-block.tsx
+++ b/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}
diff --git a/client/src/components/record/video-recorder.tsx b/client/src/components/record/video-recorder.tsx
index 125a389c..3b9ca949 100644
--- a/client/src/components/record/video-recorder.tsx
+++ b/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"
diff --git a/client/src/components/setup/mentor-goal-slide.tsx b/client/src/components/setup/mentor-goal-slide.tsx
index 1372d5ce..d9ce4e0b 100644
--- a/client/src/components/setup/mentor-goal-slide.tsx
+++ b/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 || ""}
diff --git a/client/src/components/setup/select-keywords-slide.tsx b/client/src/components/setup/select-keywords-slide.tsx
index 36d4bd7f..fe74bf89 100644
--- a/client/src/components/setup/select-keywords-slide.tsx
+++ b/client/src/components/setup/select-keywords-slide.tsx
@@ -117,6 +117,9 @@ export function SelectKeywordsSlide(props: {
                       renderInput={(params) => (
                         <TextField
                           {...params}
+                          style={{
+                            marginLeft: 10,
+                          }}
                           variant="outlined"
                           placeholder={`Choose ${kw.type.toLowerCase()}`}
                         />