Change timer styles

Author: nicolelim02

frontend/src/components/Timer/index.tsx

@@ -8,22 +8,27 @@ import {
 type TimerProps = { totalTime: number; timeLeft: number };
 
 const Timer: React.FC<CircularProgressProps & TimerProps> = (props) => {
-  const { totalTime, timeLeft } = props;
+  const { totalTime, timeLeft, thickness, size } = props;
   const percentage = (timeLeft / totalTime) * 100;
+  const minutes = Math.floor(timeLeft / 60);
+  const seconds = timeLeft % 60;
+  const formattedSeconds = String(seconds).padStart(2, "0");
+  const formattedMinutes = String(minutes).padStart(2, "0");
   return (
     <Box sx={{ position: "relative", display: "inline-flex" }}>
       <CircularProgress
         variant="determinate"
-        size={80}
+        size={size}
         value={100}
-        sx={(theme) => ({ color: theme.palette.grey[200] })}
+        sx={{ opacity: 0.4 }}
+        thickness={thickness}
       />
       <CircularProgress
         variant="determinate"
-        disableShrink
         value={percentage}
-        size={80}
+        size={size}
         sx={{ position: "absolute" }}
+        thickness={thickness}
         {...props}
       />
       <Box
@@ -38,7 +43,9 @@ const Timer: React.FC<CircularProgressProps & TimerProps> = (props) => {
           alignItems: "center",
         }}
       >
-        <Typography variant="h6">{timeLeft}</Typography>
+        <Typography variant="h6">
+          {formattedMinutes}:{formattedSeconds}
+        </Typography>
       </Box>
     </Box>
   );

frontend/src/pages/Matching/index.tsx

@@ -23,7 +23,12 @@ const Matching: React.FC = () => {
           Finding your practice partner
         </Typography>
         <img src={matching} style={{ height: 120, width: "auto" }} />
-        <Timer totalTime={totalTime} timeLeft={timeLeft} thickness={4} />
+        <Timer
+          totalTime={totalTime}
+          timeLeft={timeLeft}
+          thickness={4.8}
+          size={120}
+        />
       </Stack>
     </AppMargin>
   );