Skip to content

Commit ce8cc73

Browse files
johnwagejohnwage
authored
Merge pull request #23 from oslabs-beta/cyrus-styling
Login/Sign Up styling
2 parents 20c78f1 + 132b5c6 commit ce8cc73

File tree

6 files changed

+209
-113
lines changed

6 files changed

+209
-113
lines changed

‎app/src/components/login/SignIn.tsx

Lines changed: 101 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,28 @@
11
import React, { useCallback, useEffect, useState } from 'react';
22
import { RouteComponentProps, Link as RouteLink } from 'react-router-dom';
3-
import {
4-
SigninDark,
5-
SigninLight
6-
} from '../../../../app/src/public/styles/theme';
3+
import { SigninDark } from '../../../../app/src/public/styles/theme';
74
import {
85
StyledEngineProvider,
96
Theme,
107
ThemeProvider
118
} from '@mui/material/styles';
12-
import { useDispatch, useSelector } from 'react-redux';
13-
14-
import Avatar from '@mui/material/Avatar';
15-
import Box from '@mui/material/Box';
16-
import Brightness3Icon from '@mui/icons-material/Brightness3';
17-
import Brightness5Icon from '@mui/icons-material/Brightness5';
18-
import Button from '@mui/material/Button';
19-
import Container from '@mui/material/Container';
20-
import CssBaseline from '@mui/material/CssBaseline';
21-
import Grid from '@mui/material/Grid';
9+
import { useDispatch } from 'react-redux';
2210
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
2311
import { LoginInt } from '../../interfaces/Interfaces';
24-
import { RootState } from '../../redux/store';
25-
import TextField from '@mui/material/TextField';
26-
import Typography from '@mui/material/Typography';
27-
import serverConfig from "../../serverConfig.js";
28-
29-
// const config = require('../../../../config.js');
12+
import serverConfig from '../../serverConfig.js';
3013
import makeStyles from '@mui/styles/makeStyles';
31-
import { newUserIsCreated } from '../../helperFunctions/auth';
32-
import randomPassword from '../../helperFunctions/randomPassword';
3314
import { sessionIsCreated } from '../../helperFunctions/auth';
15+
import {
16+
Divider,
17+
Box,
18+
Avatar,
19+
Button,
20+
Container,
21+
CssBaseline,
22+
Grid,
23+
TextField,
24+
Typography
25+
} from '@mui/material';
3426

3527
const { API_BASE_URL } = serverConfig;
3628

@@ -55,7 +47,7 @@ const useStyles = makeStyles((theme) => ({
5547
alignItems: 'center'
5648
},
5749
avatar: {
58-
backgroundColor: '#3EC1AC'
50+
backgroundColor: 'white'
5951
},
6052
form: {
6153
width: '100%'
@@ -65,7 +57,7 @@ const useStyles = makeStyles((theme) => ({
6557
},
6658
root: {
6759
'& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
68-
borderColor: '#3EC1AC'
60+
borderColor: 'white'
6961
}
7062
}
7163
}));
@@ -180,14 +172,25 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
180172
return (
181173
<StyledEngineProvider injectFirst>
182174
<ThemeProvider theme={SigninDark}>
183-
<Container component="main" maxWidth="xs">
175+
<Container
176+
component="main"
177+
maxWidth="xs"
178+
sx={{
179+
marginTop: '10vh'
180+
}}
181+
>
184182
<CssBaseline />
185183
<div className={classes.paper}>
186-
<Avatar className={classes.avatar} sx={{ marginTop: '10vh' }}>
184+
<Avatar className={classes.avatar} sx={{ margin: '2vh' }}>
187185
<LockOutlinedIcon />
188186
</Avatar>
189-
<Typography component="h1" variant="h5" color="textPrimary">
190-
Sign in
187+
<Typography
188+
component="h1"
189+
variant="h5"
190+
color="textPrimary"
191+
sx={{ marginBottom: '10px' }}
192+
>
193+
Log in
191194
</Typography>
192195
<TextField
193196
className={classes.root}
@@ -199,7 +202,6 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
199202
label="Username"
200203
name="username"
201204
autoComplete="username"
202-
autoFocus
203205
value={username}
204206
onChange={handleChange}
205207
helperText={invalidUserMsg}
@@ -229,14 +231,18 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
229231
id="SignIn"
230232
variant="contained"
231233
color="primary"
232-
className={classes.submit}
233234
onClick={(e) => handleLogin(e)}
234235
sx={{
236+
backgroundColor: '#2997ff',
235237
marginBottom: '5px',
236-
marginTop: '20px'
238+
marginTop: '20px',
239+
textTransform: 'none',
240+
fontSize: '1rem',
241+
'$:hover': {
242+
cursor: 'pointer'
243+
}
237244
}}
238245
>
239-
Sign In
240246
<svg
241247
xmlns="http://www.w3.org/2000/svg"
242248
width="16"
@@ -249,19 +255,31 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
249255
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
250256
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z" />
251257
</svg>
258+
Log In
252259
</Button>
253-
<Button
260+
261+
<Divider sx={{ color: 'gray', margin: '1rem', zIndex: '1500' }}>
262+
OR
263+
</Divider>
264+
265+
<Typography
266+
className="other-options"
254267
fullWidth
255268
id="SignInWithGithub"
256-
variant="contained"
257-
color="primary"
258-
className={classes.submit}
269+
variant=""
259270
onClick={(e) => handleGithubLogin(e)}
260271
sx={{
261-
marginBottom: '5px'
272+
marginBottom: '1rem',
273+
textTransform: 'none',
274+
fontSize: '1rem',
275+
color: 'white',
276+
'$:hover': {
277+
cursor: 'pointer',
278+
color: 'black',
279+
textDecoration: 'underline'
280+
}
262281
}}
263282
>
264-
Sign In With Github
265283
<svg
266284
xmlns="http://www.w3.org/2000/svg"
267285
width="16"
@@ -273,8 +291,10 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
273291
>
274292
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
275293
</svg>
276-
</Button>
277-
<Button
294+
Sign In With Github
295+
</Typography>
296+
<Typography
297+
className="other-options"
278298
fullWidth
279299
variant="contained"
280300
color="primary"
@@ -284,10 +304,16 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
284304
window.location.assign(`${API_BASE_URL}/auth/google`);
285305
}}
286306
sx={{
287-
marginBottom: '5px'
307+
marginBottom: '1rem',
308+
textTransform: 'none',
309+
fontSize: '1rem',
310+
color: 'white',
311+
'$:hover': {
312+
cursor: 'pointer',
313+
color: 'black'
314+
}
288315
}}
289316
>
290-
Sign in With Google
291317
<svg
292318
xmlns="http://www.w3.org/2000/svg"
293319
width="16"
@@ -299,18 +325,25 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
299325
>
300326
<path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
301327
</svg>
302-
</Button>
303-
<Button
328+
Sign in With Google
329+
</Typography>
330+
<Typography
304331
fullWidth
305-
variant="contained"
332+
variant=""
333+
className="other-options"
306334
color="primary"
307-
className={classes.submit}
308335
onClick={(e) => handleLoginGuest(e)}
309336
sx={{
310-
marginBottom: '5px'
337+
marginBottom: '1rem',
338+
textTransform: 'none',
339+
fontSize: '1rem',
340+
color: 'white',
341+
'$:hover': {
342+
cursor: 'pointer',
343+
color: 'black'
344+
}
311345
}}
312346
>
313-
Continue as Guest
314347
<svg
315348
xmlns="http://www.w3.org/2000/svg"
316349
width="16"
@@ -326,28 +359,26 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
326359
d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
327360
/>
328361
</svg>
329-
</Button>
330-
<Grid container justifyContent="flex-end">
331-
{/* forgot password currently not implemented
332-
<Grid item xs>
333-
<RouteLink
334-
style={{ color: '#aaaaaa' }}
335-
to={`/signup`}
336-
className="nav_link"
337-
>
338-
Forgot password?
339-
</RouteLink>
340-
</Grid> */}
341-
<Grid item>
342-
<RouteLink
343-
style={{ color: '#aaaaaa' }}
344-
to={`/signup`}
345-
className="nav_link"
346-
>
347-
Don't have an account? Sign Up
348-
</RouteLink>
349-
</Grid>
350-
</Grid>
362+
Continue as Guest
363+
</Typography>
364+
<RouteLink
365+
style={{ color: '#aaaaaa' }}
366+
to={`/signup`}
367+
className="nav_link"
368+
>
369+
Forgot password?
370+
</RouteLink>
371+
372+
<RouteLink
373+
style={{ color: '#aaaaaa' }}
374+
to={`/signup`}
375+
className="nav_link"
376+
>
377+
<span>
378+
Don't have an account?
379+
<span className="blue-accent-text"> Sign Up</span>
380+
</span>
381+
</RouteLink>
351382
</div>
352383
<Box mt={8}>
353384
<Copyright />

0 commit comments

Comments
 (0)