feat: progress page (#13)

* added success theme for icon and label

* fixed spacing

* updated icons package, modified progress page, add different colors

* removed duplicate button

* code cleanup

* merged from main

* removed continue button

* made font and connector smaller for phone view, change font based on dark/light mode

* rearrange test to correct order, code cleanup on component'

* removed unused variables, formatted with prettier, changed component name

* removed unused import

src/components/ProgressTracker.tsx

@@ -0,0 +1,80 @@
+import { FC } from "react";
+import { Stepper, Typography, Step, StepLabel } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";
+
+const MemoryTestsLabels = [
+  {
+    name: "Memory - Immediate Recall"
+  },
+  {
+    name: 'Visual Paired Associates - Learn'
+  },
+  {
+    name: "Choice Reaction Time"
+  },
+  {
+    name: 'Visual Paired Associates - Test'
+  },
+  {
+    name: "Digit Symbol Matching"
+  },
+  {
+    name: "Spatial Memory"
+  },
+  {
+    name: "Memory - Delayed Recall"
+  }
+];
+
+interface ProgressTrackerProps {
+  id: number;
+}
+
+export const ProgressTracker: FC<ProgressTrackerProps> = (props) => {
+  //check for Dark/Light Mode
+  const dark_light_color = () => {
+    if (window.matchMedia("(prefers-color-scheme: dark").matches) {
+      return "#ffffff";
+    } else {
+      return "#000000";
+    }
+  };
+
+  return (
+    <Stepper activeStep={props.id} orientation="vertical" sx={{ padding: 2 }}>
+      {MemoryTestsLabels.map((step, index) => (
+        <Step key={index}>
+          <StepLabel
+            icon={
+              props.id > index ? (
+                <CheckCircleIcon fontSize="inherit" />
+              ) : (
+                <RadioButtonUncheckedIcon
+                  fontSize="inherit"
+                  sx={{ color: props.id >= index ? "#ffffff" : "#808080" }}
+                />
+              )
+            }
+            sx={{ color: props.id <= index ? "#ffffff" : "#009933" }}
+          >
+            <Typography
+              variant="subtitle1"
+              color={
+                props.id <= index
+                  ? props.id === index
+                    ? dark_light_color
+                    : "#808080"
+                  : "#009933"
+              }
+              overflow={"visible"}
+              sx={{ padding: 0.5 }}
+            >
+              {step.name}
+            </Typography>
+          </StepLabel>
+        </Step>
+      ))}
+    </Stepper>
+  );
+};

src/components/Transition.tsx

@@ -1,5 +1,6 @@
 import { FC, useContext, useState } from "react";
 import { GeneralContext, TestPhase } from "../contexts/general.context";
+import { ProgressTracker } from "./ProgressTracker";
 import { Box, Button, IconButton } from "@mui/material";
 import PlayCircleIcon from "@mui/icons-material/PlayCircle";
 import { playAudioFromS3 } from "../utils/awsUtils";
@@ -34,12 +35,13 @@ export const Transition: FC<TransitionProps> = ({ handleTransition }) => {
 
   return (
     <>
-      {cxt?.testPhase === TestPhase.MEMORY_RECALL_IMMEDIATE && <h2>Memory Recall Placeholder</h2>}
-      {cxt?.testPhase === TestPhase.VISUAL_PAIRS_MEMORIZE && <h2>Visual Pairs Memorize Placeholder</h2>}
-      {cxt?.testPhase === TestPhase.VISUAL_PAIRS_RECALL && <h2>Visual Pairs Recall Placeholder</h2>}
-      {cxt?.testPhase === TestPhase.DIGIT_SYMBOL_MATCHING && <h2>Digit Symbol Coding Placeholder</h2>}
-      {cxt?.testPhase === TestPhase.CHOICE_REACTION_TIME && <h2>Choice Reaction Time Placeholder</h2>}
-      {cxt?.testPhase === TestPhase.SPACIAL_MEMORY && <h2>Spacial Memory Placeholder</h2>}
+      {cxt?.testPhase === TestPhase.MEMORY_RECALL_IMMEDIATE && <ProgressTracker id={0}/>}
+      {cxt?.testPhase === TestPhase.VISUAL_PAIRS_MEMORIZE && <ProgressTracker id={1}/>}
+      {cxt?.testPhase === TestPhase.CHOICE_REACTION_TIME && <ProgressTracker id={2}/>}
+      {cxt?.testPhase === TestPhase.VISUAL_PAIRS_RECALL && <ProgressTracker id={3}/>}
+      {cxt?.testPhase === TestPhase.DIGIT_SYMBOL_MATCHING && <ProgressTracker id={4}/>}
+      {cxt?.testPhase === TestPhase.SPACIAL_MEMORY && <ProgressTracker id={5}/>}
+
       <Box display="flex" flexDirection="column" gap={2}>
         {showPlayButton && cxt?.testPhase === TestPhase.MEMORY_RECALL_IMMEDIATE && (
           <IconButton onClick={playHandler}>
@@ -56,4 +58,4 @@ export const Transition: FC<TransitionProps> = ({ handleTransition }) => {
       </Box>
     </>
   );
-};
+};