added prettierrc.yaml and reformatted the code

.prettierrc.yaml

@@ -0,0 +1,3 @@
+trailingComma: "es5"
+tabWidth: 4
+arrowParens: "avoid"

src/components/App.tsx

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

src/components/ErrorPage.tsx

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

src/components/ForgotPassword.tsx

@@ -1,6 +1,6 @@
 import React, { useState, ChangeEvent, MouseEvent } from "react";
-import { Card, Button, TextField } from "@mui/material"
+import { Card, Button, TextField } from "@mui/material";
-import "@scss/forgot_password.scss"
+import "@scss/forgot_password.scss";
 
 export default function ForgotPassword() {
     const [email, setEmail] = useState("");
@@ -12,20 +12,41 @@ export default function ForgotPassword() {
 
     function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
         e.preventDefault();
-        console.log(`Sumbitting email "${email}" to which send a link.`)
+        console.log(`Sumbitting email "${email}" to which send a link.`);
     }
 
     return (
         <main id="root">
             <Card className="card">
                 <h3>Forgot Passowrd</h3>
-                <p>If you have forgot your password, we can send you an email with a link to reset it.</p>
+                <p>
-                <TextField id="email" label="Email" value={email} onChange={handleEmail} />
+                    If you have forgot your password, we can send you an email
+                    with a link to reset it.
+                </p>
+                <TextField
+                    className="textfield"
+                    id="email"
+                    label="Email"
+                    value={email}
+                    onChange={handleEmail}
+                />
                 <div className="buttons">
-                    <Button id="cancel" variant="outlined" onClick={buttonSubmit}>Cancel</Button>
+                    <Button
-                    <Button id="submit" variant="contained" onClick={buttonSubmit}>Login</Button>
+                        id="cancel"
+                        variant="outlined"
+                        onClick={buttonSubmit}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        id="submit"
+                        variant="contained"
+                        onClick={buttonSubmit}
+                    >
+                        Login
+                    </Button>
                 </div>
             </Card>
         </main>
-    )
+    );
-}
+}

src/components/Login.tsx

@@ -29,11 +29,11 @@ export default function Login() {
         <main id="root">
             <Card className="card">
                 <h3>Login</h3>
-                <TextField id="email" label="Email" value={email} onChange={handleEmail} />
+                <TextField className="textfield" id="email" label="Email" value={email} onChange={handleEmail} />
-                <TextField id="password" label="Password" type="password" value={password} onChange={handlePassword}/>
+                <TextField className="textfield" id="password" label="Password" type="password" value={password} onChange={handlePassword}/>
                 <Button id="submit" variant="contained" onClick={buttonSubmit}>Login</Button>
                 <p>Forgot your <a href="/">password</a>?</p>
             </Card>
         </main>
     )
-}
+}