Merge pull request #16 from CPSC319-Winter-term-2/mbalsdon-touchups

Small fix to spacing and font on login page
This commit is contained in:
Jincheng Lu 2022-03-11 23:52:52 -08:00 committed by GitHub
commit adc1dc248f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useContext } from "react"; import { useRef, useState, useEffect, useContext } from "react";
import { useLocation, Link, useNavigate } from "react-router-dom"; import { useLocation, Link, useNavigate } from "react-router-dom";
import { Stack } from "@mui/material"; import { Stack, Typography } from "@mui/material";
import Container from "@mui/material/Container"; import Container from "@mui/material/Container";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
@ -49,11 +49,13 @@ const Login: React.FC = () => {
<TextField className="username-input" id="outlined-basic" label="Username" variant="outlined" placeholder="Username" onChange={(event) => {setUsername(event.target.value)}}/> <TextField className="username-input" id="outlined-basic" label="Username" variant="outlined" placeholder="Username" onChange={(event) => {setUsername(event.target.value)}}/>
<TextField className="password-input" id="outlined-basic" label="Password" variant="outlined" placeholder="Password" type="password" onChange={(event) => {setPassword(event.target.value)}}/> <TextField className="password-input" id="outlined-basic" label="Password" variant="outlined" placeholder="Password" type="password" onChange={(event) => {setPassword(event.target.value)}}/>
<Stack direction="row" justifyContent="space-between" spacing={2}> <Stack direction="row" justifyContent="space-between" spacing={2}>
<a className="register-btn" href="#">Forgotten Your Password?</a> <a className="register-btn" href="#">
<Typography sx={{ ml: 1, mb: 1 }}>Forgot your password?</Typography>
</a>
<Button endIcon={<LoginIcon />} className="login-btn" variant="contained" type="submit" onClick={handleLogin}>Login</Button> <Button endIcon={<LoginIcon />} className="login-btn" variant="contained" type="submit" onClick={handleLogin}>Login</Button>
</Stack> </Stack>
<Stack direction="row" justifyContent="space-between" spacing={2}> <Stack direction="row" justifyContent="space-between" spacing={2}>
<label>Login with</label> <Typography sx={{ ml: 1 }}>Login with</Typography>
<a className="zoom-logo" href="#"> <a className="zoom-logo" href="#">
<img src={zoomLogo} alt="Zoom Logo"/> <img src={zoomLogo} alt="Zoom Logo"/>
</a> </a>