Merge pull request #60 from nicolelim02/feat/users

Add forget password button

Author: guanquann

frontend/src/pages/LogIn/index.tsx

@@ -1,4 +1,12 @@
-import { Box, Button, Stack, TextField, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  Stack,
+  styled,
+  TextField,
+  Typography,
+  TypographyProps,
+} from "@mui/material";
 import LogInSvg from "../../assets/login.svg?react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthContext";
@@ -12,6 +20,10 @@ import {
   USE_AUTH_ERROR_MESSAGE,
 } from "../../utils/constants";
 
+const StyledTypography = styled((props: TypographyProps) => {
+  return <Typography {...props} component={"span"} />;
+})({ fontSize: 14 });
+
 const LogIn: React.FC = () => {
   const navigate = useNavigate();
   const auth = useAuth();
@@ -99,26 +111,36 @@ const LogIn: React.FC = () => {
           <Stack
             direction="row"
             spacing={0.5}
-            sx={{ justifyContent: "flex-end" }}
+            sx={{ justifyContent: "space-between" }}
           >
-            <Typography component="span" sx={{ fontSize: 14 }}>
-              Don't have an account?
-            </Typography>
-            <Typography
-              component="span"
+            <StyledTypography
               role="button"
               tabIndex={0}
               sx={{
-                fontSize: 14,
                 cursor: "pointer",
                 "&:hover": {
                   textDecoration: "underline",
                 },
               }}
-              onClick={() => navigate("/signup")}
             >
-              Sign up
-            </Typography>
+              Forget password
+            </StyledTypography>
+            <Box>
+              <StyledTypography>Don't have an account? &nbsp;</StyledTypography>
+              <StyledTypography
+                role="button"
+                tabIndex={0}
+                sx={{
+                  cursor: "pointer",
+                  "&:hover": {
+                    textDecoration: "underline",
+                  },
+                }}
+                onClick={() => navigate("/signup")}
+              >
+                Sign up
+              </StyledTypography>
+            </Box>
           </Stack>
         </Stack>
       </Box>