Refactored styles and started working on the app pages

This commit is contained in:
Arnaud Fauconnet 2022-10-15 10:40:52 +02:00
parent b9db3d34b9
commit e0c3b5c0c3
8 changed files with 112 additions and 60 deletions

View File

@ -1,28 +1,11 @@
import React from 'react' 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 variables from "@scss/variables.module.scss"
import "@scss/style.scss" import "@scss/style.scss"
export default function App() { export default function App() {
let boxStyle = {
width: "50%",
height: "50%",
border: '1px dashed grey',
backgroundColor: variables.boxBg,
display: "flex",
alignItems: "center",
justifyContent: "center"
}
return ( 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>
); );
} }

View File

@ -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>
)
}

View File

@ -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)}"`)
}
export default function Login(){
return ( return (
<main id="root"> <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> </main>
) )
} }

17
src/scss/cards.scss Normal file
View File

@ -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;
}
}

View File

@ -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;
}
}

3
src/scss/login.scss Normal file
View File

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

View File

@ -1,33 +1,12 @@
@import "variables.module.scss"; @import "variables.module.scss";
*, body {
padding: 0;
margin: 0;
}
body { 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;
}
}
} }

View File

@ -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;
}