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,36 +24,37 @@ export default function ForgotPassword() {
     }
 
     return (
-        <main id="root">
+        <main className="cardContainer">
             <Card className="card">
-                <h3>Forgot Passowrd</h3>
+                    <h3>Forgot Passowrd</h3>
-                <p>
+                    <p>
-                    If you have forgot your password, we can send you an email
+                        If you have forgot your password, we can send you an email
-                    with a link to reset it.
+                        with a link to reset it.
-                </p>
+                    </p>
-                <TextField
+                    <TextField
-                    className="textfield"
+                        className="textfield"
-                    id="email"
+                        id="email"
-                    label="Email"
+                        label="Email"
-                    value={email}
+                        value={email}
-                    onChange={handleEmail}
+                        onChange={handleEmail}
-                />
+                    />
-                <div className="buttons">
+                    <div className="buttons">
-                    <Button
+                        <Button
-                        id="cancel"
+                            id="cancel"
-                        variant="outlined"
+                            variant="outlined"
-                        onClick={buttonCancel}
+                            onClick={buttonCancel}
-                    >
+                        >
-                        Cancel
+                            Cancel
-                    </Button>
+                        </Button>
-                    <Button
+                        <Button
-                        id="submit"
+                            type="submit"
-                        variant="contained"
+                            id="submit"
-                        onClick={buttonSubmit}
+                            variant="contained"
-                    >
+                            onClick={buttonSubmit}
-                        Login
+                        >
-                    </Button>
+                            Submit
-                </div>
+                        </Button>
+                    </div>
             </Card>
         </main>
     );

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;