Fixed style conflicting

src/components/App.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import Login from "@components/Login"
-// import variables from "@scss/variables.module.scss"
-import "@scss/style.scss"
-
-export default function App() {
-    return (
-        <Login />
-    );
-}

src/components/ErrorPage.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { useRouteError } from "react-router-dom";
 import "@scss/error.scss"
 
@@ -7,7 +7,7 @@ export default function ErrorPage() {
     console.error(error);
 
     return (
-        <main id="root">
+        <main>
             <div id="error-page">
                 <h1>Oops!</h1>
                 <p>Sorry, an unexpected error has occurred.</p>

src/components/ForgotPassword.tsx

@@ -14,7 +14,7 @@ export default function ForgotPassword() {
 
     function buttonCancel(e: MouseEvent<HTMLButtonElement>) {
         e.preventDefault();
-        navigate("/")
+        navigate("/login")
     }
 
     function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
@@ -24,7 +24,7 @@ export default function ForgotPassword() {
     }
 
     return (
-        <main id="root">
+        <main className="cardContainer">
             <Card className="card">
                     <h3>Forgot Passowrd</h3>
                     <p>
@@ -47,11 +47,12 @@ export default function ForgotPassword() {
                             Cancel
                         </Button>
                         <Button
+                            type="submit"
                             id="submit"
                             variant="contained"
                             onClick={buttonSubmit}
                         >
-                        Login
+                            Submit
                         </Button>
                     </div>
             </Card>

src/components/Login.tsx

@@ -1,7 +1,7 @@
-import React, { useState, ChangeEvent, MouseEvent } from "react";
+import React, { useState, ChangeEvent, MouseEvent, useEffect } from "react";
 import { Card, Button, TextField } from "@mui/material"
 import "@scss/login.scss"
-import { Link, Navigate, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 export default function Login() {
     const [email, setEmail] = useState("");
@@ -25,11 +25,11 @@ export default function Login() {
     function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
         e.preventDefault();
         console.log(`Sumbitting username "${email}" and password "${hash(password)}"`)
-        navigate("/main")
+        navigate("/")
     }
 
     return (
-        <main id="root">
+        <main className="cardContainer">
             <Card className="card">
                 <h3>Login</h3>
                 <TextField className="textfield" id="email" label="Email" value={email} onChange={handleEmail} />

src/components/Reset.tsx

@@ -26,7 +26,7 @@ export default function Reset() {
         e.preventDefault();
         if (password == confirmPassword && password.length != 0){
             console.log(`Sumbitting password "${hash(password)}"`)
-            navigate("/")
+            navigate("/login")
         }
         else{
             console.warn("Passwords are not matching or are empty");
@@ -34,7 +34,7 @@ export default function Reset() {
     }
 
     return (
-        <main id="root">
+        <main className="cardContainer">
             <Card className="card">
                 <h3>Reset Password</h3>
                 <TextField className="textfield" id="password" label="Password" type="password" value={password} onChange={handlePassword} />

src/components/index.tsx

@@ -1,7 +1,6 @@
-import App from "@components/App";
 import Login from "@components/Login";
 import ForgotPassword from "@components/ForgotPassword";
 import Reset from "@components/Reset";
 import ErrorPage from "@components/ErrorPage";
 
-export { App, Login, ForgotPassword, Reset, ErrorPage };
+export { Login, ForgotPassword, Reset, ErrorPage };

src/scss/cards.scss

@@ -1,4 +1,4 @@
-main {
+main.cardContainer {
     height: 100vh;
     display: flex;
     justify-content: center;