Add stop matching button

Author: nicolelim02

frontend/src/App.tsx

@@ -41,7 +41,7 @@ function App() {
               </ProfileContextProvider>
             }
           />
-          <Route path="match">
+          <Route path="match" element={<ProtectedRoutes />}>
             <Route index element={<Matching />} />
           </Route>
           <Route path="*" element={<PageNotFound />} />

frontend/src/components/Navbar/index.tsx

@@ -35,6 +35,8 @@ const Navbar: React.FC<NavbarProps> = (props) => {
   const location = useLocation();
   const path = location.pathname;
 
+  console.log(path);
+
   const auth = useAuth();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
@@ -62,63 +64,76 @@ const Navbar: React.FC<NavbarProps> = (props) => {
       }}
     >
       <AppMargin>
-        <Toolbar sx={{ padding: 0 }}>
+        <Toolbar sx={{ padding: 0, justifyContent: "space-between" }}>
           <Typography
             component={Box}
             variant="h5"
-            sx={[{ flexGrow: 1, "&:hover": { cursor: "pointer" } }]}
+            sx={{ "&:hover": { cursor: "pointer" } }}
             onClick={() => navigate("/")}
           >
             PeerPrep
           </Typography>
-          <Stack direction={"row"} alignItems={"center"} spacing={2}>
-            {navbarItems
-              .filter((item) => !item.needsLogin || (item.needsLogin && user))
-              .map((item) => (
-                <Link
-                  key={item.label}
-                  href={item.link}
-                  underline="none"
-                  sx={{ color: "common.black" }}
-                >
-                  {path == item.link ? <b>{item.label}</b> : item.label}
-                </Link>
-              ))}
-            {user ? (
-              <>
-                <Tooltip title={"Account settings"}>
-                  <IconButton onClick={handleClick} data-testid="profile">
-                    <Avatar src={user.profilePictureUrl}/>
-                  </IconButton>
-                </Tooltip>
-                <Menu
-                  anchorEl={anchorEl}
-                  open={!!anchorEl}
-                  onClose={handleClose}
-                  onClick={handleClose}
-                >
-                  <MenuItem
-                    onClick={() => {
-                      handleClose();
-                      navigate(`/profile/${user.id}`);
-                    }}
+          {path !== "/match" ? (
+            <Stack direction={"row"} alignItems={"center"} spacing={2}>
+              {navbarItems
+                .filter((item) => !item.needsLogin || (item.needsLogin && user))
+                .map((item) => (
+                  <Link
+                    key={item.label}
+                    href={item.link}
+                    underline="none"
+                    sx={{ color: "common.black" }}
+                  >
+                    {path == item.link ? <b>{item.label}</b> : item.label}
+                  </Link>
+                ))}
+              {user ? (
+                <>
+                  <Tooltip title={"Account settings"}>
+                    <IconButton onClick={handleClick} data-testid="profile">
+                      <Avatar src={user.profilePictureUrl} />
+                    </IconButton>
+                  </Tooltip>
+                  <Menu
+                    anchorEl={anchorEl}
+                    open={!!anchorEl}
+                    onClose={handleClose}
+                    onClick={handleClose}
+                  >
+                    <MenuItem
+                      onClick={() => {
+                        handleClose();
+                        navigate(`/profile/${user.id}`);
+                      }}
+                    >
+                      Profile
+                    </MenuItem>
+                    <MenuItem onClick={logout}>Logout</MenuItem>
+                  </Menu>
+                </>
+              ) : (
+                <>
+                  <Button
+                    variant="contained"
+                    onClick={() => navigate("/signup")}
                   >
-                    Profile
-                  </MenuItem>
-                  <MenuItem onClick={logout}>Logout</MenuItem>
-                </Menu>
-              </>
-            ) : (
-              <>
-                <Button variant="contained" onClick={() => navigate("/signup")}>
-                  Sign up
-                </Button>
-                <Button variant="outlined" onClick={() => navigate("/login")}>
-                  Log in
-                </Button>
-              </>
-            )}
-          </Stack>
+                    Sign up
+                  </Button>
+                  <Button variant="outlined" onClick={() => navigate("/login")}>
+                    Log in
+                  </Button>
+                </>
+              )}
+            </Stack>
+          ) : (
+            <Button
+              variant="outlined"
+              color="error"
+              onClick={() => navigate("/home")}
+            >
+              Stop matching
+            </Button>
+          )}
         </Toolbar>
       </AppMargin>
     </AppBar>

frontend/src/components/Timer/index.tsx

@@ -8,7 +8,7 @@ import {
 type TimerProps = { totalTime: number; timeLeft: number };
 
 const Timer: React.FC<CircularProgressProps & TimerProps> = (props) => {
-  const { totalTime, timeLeft, thickness, size } = props;
+  const { totalTime, timeLeft, thickness, size, ...rest } = props;
   const percentage = (timeLeft / totalTime) * 100;
   const minutes = Math.floor(timeLeft / 60);
   const seconds = timeLeft % 60;
@@ -29,7 +29,6 @@ const Timer: React.FC<CircularProgressProps & TimerProps> = (props) => {
         size={size}
         sx={{ position: "absolute" }}
         thickness={thickness}
-        {...props}
       />
       <Box
         sx={{