Recommendation button polish (#73)

* restored progress bar for recording session * progress marks are now blocks * visual changes for recommendation subcomponent * added licences * "uncategorized" questions now [subject] questions Co-authored-by: Jim Alvarez <[email protected]>
mentorpal · Jul 14, 2021 · 4ed6c77 · 4ed6c77
1 parent 650c051
commit 4ed6c77
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 27 deletions.
diff --git a/client/src/components/home/recording-block.tsx b/client/src/components/home/recording-block.tsx
@@ -8,7 +8,7 @@ import React from "react";
 import { Paper, Typography } from "@material-ui/core";
 import { Answer, Question, Status } from "types";
 import AnswerList from "components/home/answer-list";
-import ProgressBar from "components/progress-bar";
+import ProgressChecks from "components/progress-checks";
 
 export interface RecordingBlock {
   name: string;
@@ -42,7 +42,7 @@ export default function RecordingBlockItem(props: {
           data-cy="block-progress"
           style={{ flexGrow: 1, marginLeft: 25, marginRight: 25 }}
         >
-          <ProgressBar value={complete.length} total={answers.length} />
+          <ProgressChecks value={complete.length} total={answers.length} />
         </div>
       </div>
       <Typography data-cy="block-description" className={classes.subtitle}>

diff --git a/client/src/components/my-mentor-card/recommended-action-button.tsx b/client/src/components/my-mentor-card/recommended-action-button.tsx
@@ -5,10 +5,10 @@ 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 { Button, Typography } from "@material-ui/core";
+import { DoubleArrow, PlayCircleFilled } from "@material-ui/icons";
 import React from "react";
 import { Mentor } from "types";
 import { UseWithRecommendedAction } from "./use-with-recommended-action";
-
 export default function RecommendedActionButton(props: {
   setThumbnail: (file: File) => void;
   mentor: Mentor;
@@ -35,32 +35,40 @@ export default function RecommendedActionButton(props: {
           />
           <label htmlFor="thumbnail-upload">
             <Button
-              component="span"
+              size="large"
               fullWidth
+              color="primary"
+              variant="contained"
+              component="span"
               data-cy="recommended-action-thumbnail"
+              startIcon={<PlayCircleFilled />}
             >
               {recommendedAction.text}
             </Button>
           </label>
           <Typography
-            variant="body1"
+            variant="caption"
             color="textSecondary"
             data-cy="recommended-action-reason"
           >
             {recommendedAction.reason}
           </Typography>
         </div>
       ) : (
-        <div>
+        <div color="green">
           <Button
+            size="large"
             fullWidth
+            color="primary"
+            variant="contained"
             data-cy="recommended-action-button"
             onClick={recommendedAction.action}
+            startIcon={<PlayCircleFilled />}
           >
             {recommendedAction.text}
           </Button>
           <Typography
-            variant="body1"
+            variant="caption"
             color="textSecondary"
             data-cy="recommended-action-reason"
           >
@@ -74,7 +82,10 @@ export default function RecommendedActionButton(props: {
           data-cy="skip-action-button"
           onClick={skipRecommendation}
         >
-          next recommendation
+          <Typography variant="caption" color="textPrimary">
+            skip
+          </Typography>
+          <DoubleArrow />
         </Button>
       )}
     </div>

diff --git a/client/src/components/my-mentor-card/use-with-recommended-action.tsx b/client/src/components/my-mentor-card/use-with-recommended-action.tsx
@@ -154,7 +154,7 @@ export function UseWithRecommendedAction(
       subjectName: s.name,
       subject: s._id,
       isRequired: s.isRequired,
-      categoryName: "Uncategorized",
+      categoryName: s.name,
       category: "",
       answers: mentor?.answers.filter((a) =>
         s.questions

diff --git a/client/src/components/progress-bar.tsx b/client/src/components/progress-bar.tsx
@@ -5,33 +5,39 @@ 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 from "react";
+import { Box, LinearProgress, Typography } from "@material-ui/core";
+import { createStyles, withStyles } from "@material-ui/core/styles";
 
-import { Box, Radio, Typography } from "@material-ui/core";
+const LinearProgressBar = withStyles((theme) =>
+  createStyles({
+    root: {
+      height: 10,
+      borderRadius: 5,
+    },
+    colorPrimary: {
+      backgroundColor:
+        theme.palette.grey[theme.palette.type === "light" ? 200 : 700],
+    },
+    bar: {
+      borderRadius: 5,
+      backgroundColor: "#1a90ff",
+    },
+  })
+)(LinearProgress);
 
 export default function ProgressBar(props: {
   value: number;
   total: number;
 }): JSX.Element {
   const percent = Math.round((props.value / props.total) * 100);
-  const questions = [
-    ...Array(props.total)
-      .fill(0)
-      .map((q, i) => {
-        return { complete: i < props.value };
-      }),
-  ];
-
   return (
     <Box display="flex" alignItems="center">
       <Box width="100%" mr={1}>
-        {questions.map((q, i) => (
-          <Radio
-            data-cy={`radio-${i}`}
-            key={i}
-            checked={q.complete}
-            color={q.complete ? "primary" : "default"}
-          />
-        ))}
+        <LinearProgressBar
+          data-cy="progress-bar"
+          variant="determinate"
+          {...{ value: percent }}
+        />
       </Box>
       <Box minWidth={100}>
         <Typography variant="body2" color="textSecondary">

diff --git a/client/src/components/progress-checks.tsx b/client/src/components/progress-checks.tsx
@@ -0,0 +1,48 @@
+/*
+This software is Copyright ©️ 2020 The University of Southern California. All Rights Reserved. 
+Permission to use, copy, modify, and distribute this software and its documentation for educational, research and non-profit purposes, without fee, and without a written agreement is hereby granted, provided that the above copyright notice and subject to the full license file found in the root of this software deliverable. Permission to make commercial use of this software may be obtained by contacting:  USC Stevens Center for Innovation University of Southern California 1150 S. Olive Street, Suite 2300, Los Angeles, CA 90115, USA Email: [email protected]
+
+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 from "react";
+
+import { Box, Radio, Typography } from "@material-ui/core";
+import { Stop, StopOutlined } from "@material-ui/icons";
+
+export default function ProgressChecks(props: {
+  value: number;
+  total: number;
+}): JSX.Element {
+  const percent = Math.round((props.value / props.total) * 100);
+  const questions = [
+    ...Array(props.total)
+      .fill(0)
+      .map((q, i) => {
+        return { complete: i < props.value };
+      }),
+  ];
+
+  return (
+    <Box display="flex" alignItems="center">
+      <Box width="100%" mr={1}>
+        {questions.map((q, i) => (
+          <Radio
+            data-cy={`radio-${i}`}
+            disableRipple
+            icon={<StopOutlined />}
+            checkedIcon={<Stop />}
+            key={i}
+            checked={q.complete}
+            color={q.complete ? "primary" : "default"}
+            size="small"
+          />
+        ))}
+      </Box>
+      <Box minWidth={100}>
+        <Typography variant="body2" color="textSecondary">
+          {props.value} / {props.total} ({percent}%)
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
diff --git a/cypress/cypress/integration/mentor-card.spec.ts b/cypress/cypress/integration/mentor-card.spec.ts
@@ -254,7 +254,7 @@ describe("My Mentor Page", () => {
       });
       cy.visit("/");
       cy.get("[data-cy=recommended-action-button]").contains(
-        "Answer Uncategorized Questions"
+        "Answer extra Questions"
       );
       cy.get("[data-cy=recommended-action-button]")
         .trigger("mouseover")