Refactored styles and started working on the app pages

src/components/App.tsx

@@ -1,28 +1,11 @@
 import React from 'react'
-import { Button, Box } from "@mui/material"
+import Login from "@components/Login"
+import ForgotPassword from "@components/ForgotPassword"
 import variables from "@scss/variables.module.scss"
 import "@scss/style.scss"
 
 export default function App() {
-    let boxStyle = {
-        width: "50%",
-        height: "50%",
-        border: '1px dashed grey',
-        backgroundColor: variables.boxBg,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-    }
-
     return (
-        <main id="root">
+        <ForgotPassword />
-            <h1>React with Webpack</h1>
-            <Button variant="contained">Hello world</Button>
-            <div id="container">
-                <Box sx={boxStyle}>
-                    This box should be centered <br />(and also this this text)
-                </Box>
-            </div>
-        </main>
     );
 }

src/components/ForgotPassword.tsx

@@ -0,0 +1,31 @@
+import React, { useState, ChangeEvent, MouseEvent } from "react";
+import { Card, Button, TextField } from "@mui/material"
+import "@scss/forgot_password.scss"
+
+export default function ForgotPassword() {
+    const [email, setEmail] = useState("");
+
+    function handleEmail(e: ChangeEvent<HTMLInputElement>) {
+        setEmail(e.target.value);
+        console.log(email);
+    }
+
+    function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
+        e.preventDefault();
+        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>
+                <TextField id="email" label="Email" value={email} onChange={handleEmail} />
+                <div className="buttons">
+                    <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

@@ -1,10 +1,39 @@
-import React from "react";
+import React, { useState, ChangeEvent, MouseEvent } from "react";
-import { Card } from "@mui/material"
+import { Card, Button, TextField } from "@mui/material"
+import "@scss/login.scss"
 
 export default function Login() {
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+
+    function hash(s: string){
+        return s;
+    }
+
+    function handleEmail(e: ChangeEvent<HTMLInputElement>){
+        setEmail(e.target.value);
+        console.log(email);
+    }
+
+    function handlePassword(e: ChangeEvent<HTMLInputElement>){
+        setPassword(e.target.value);
+        console.log(hash(password));
+    }
+
+    function buttonSubmit(e: MouseEvent<HTMLButtonElement>){
+        e.preventDefault();
+        console.log(`Sumbitting username "${email}" and password "${hash(password)}"`)
+    }
+
     return (
         <main id="root">
-            
+            <Card className="card">
+                <h3>Login</h3>
+                <TextField id="email" label="Email" value={email} onChange={handleEmail} />
+                <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>
     )
 }

src/scss/cards.scss

@@ -0,0 +1,17 @@
+main {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .card {
+        width: 20vw;
+        height: 50vh;
+        padding: 3em;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+    }
+}

src/scss/forgot_password.scss

@@ -0,0 +1,15 @@
+@use "style.scss";
+@use "cards.scss";
+
+
+main {
+    .email {
+        width: 100%;
+    }
+    .buttons {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        // align-items: center;
+    }
+}

src/scss/login.scss

@@ -0,0 +1,3 @@
+@use "@scss/style.scss";
+@use "@scss/cards.scss";
+

src/scss/style.scss

@@ -1,33 +1,12 @@
 @import "variables.module.scss";
 
+
+*, body {
+    padding: 0;
+    margin: 0;
+}
+
 body {
-    background: #333;
+    background: $bg1;
-    color: #c5c8c6;
+    color: $fg1;
-}
-
-main {
-    h1 {
-        color: $title-color;
-        text-align: center;
-    }
-
-
-    #container {
-        display: flex;
-        background-color: $container-background;
-        width: 100vw;
-        height: 50vh;
-        align-items: center;
-        justify-content: center;
-
-        #box {
-            width: 50%;
-            height: 50%;
-            background-color: $box-background;
-            display: flex;
-            text-align: center;
-            align-items: center;
-            justify-content: center;
-        }
-    }
 }

src/scss/variables.module.scss

@@ -1,9 +1,4 @@
-$box-background: blue;
+$bg1: #333;
-$container-background: lime;
+$fg1: #c5c8c6;
-$title-color: cyan;
 
-:export {
+// :export {}
-    boxBg: $box-background;
-    containerBg: $container-background;
-    titleCol: $title-color;
-}