sign in with email design
This commit is contained in:
parent
2d79baa9f6
commit
9d186b66f1
@ -9,6 +9,7 @@ import {CHALLENGE_PAGE, CHALLENGES_PAGE} from './utils/globals';
|
||||
import Challenge from './pages/Challenge';
|
||||
import Register from './pages/auth/Register';
|
||||
import Login from './pages/auth/Login';
|
||||
import LoginWithEmail from './pages/auth/LoginWithEmail';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
@ -16,6 +17,7 @@ const App = () => {
|
||||
<ThemeProvider theme={theme}>
|
||||
<NavBar/>
|
||||
<Routes>
|
||||
<Route path='/login-email' element={<LoginWithEmail/>}/>
|
||||
<Route path='/login' element={<Login/>}/>
|
||||
<Route path='/register' element={<Register/>}/>
|
||||
<Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/>
|
||||
|
36
src/components/elements/AuthInput.js
Normal file
36
src/components/elements/AuthInput.js
Normal file
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import {FlexColumn, FlexRow} from '../../utils/containers';
|
||||
import styled from 'styled-components';
|
||||
import {Medium} from '../../utils/fonts';
|
||||
|
||||
const AuthInputStyle = styled(Medium)`
|
||||
width: 188px;
|
||||
height: 36px;
|
||||
padding: 4px;
|
||||
border: 1px solid ${({theme}) => theme.colors.dark05};
|
||||
`;
|
||||
|
||||
const AuthLabel = styled(FlexRow)`
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 14px;
|
||||
background-color: ${({theme}) => theme.colors.white};
|
||||
font-size: 10px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
padding: 4px;
|
||||
z-index: 2;
|
||||
`;
|
||||
|
||||
const AuthInput = (props) => {
|
||||
return (
|
||||
<FlexColumn position='relative'>
|
||||
<AuthLabel as='label' htmlFor={props.label}>
|
||||
{props.label}
|
||||
</AuthLabel>
|
||||
<AuthInputStyle as='input' id={props.label} name={props.label}/>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthInput;
|
@ -4,6 +4,7 @@ import theme from '../../utils/theme';
|
||||
import PropsTypes from 'prop-types';
|
||||
import {Body} from '../../utils/fonts';
|
||||
import styled from 'styled-components';
|
||||
import {Link} from 'react-router-dom';
|
||||
|
||||
const AuthOptionStyle = styled(FlexRow)`
|
||||
gap: 16px;
|
||||
@ -33,7 +34,7 @@ const AuthOptionStyle = styled(FlexRow)`
|
||||
|
||||
const AuthOption = (props) => {
|
||||
return (
|
||||
<AuthOptionStyle as='button'>
|
||||
<AuthOptionStyle as={Link} to={props.to}>
|
||||
<Svg width='20px' height='20px' src={props.icon} backgroundColor={theme.colors.dark}/>
|
||||
<Body>
|
||||
{props.children}
|
||||
@ -45,11 +46,13 @@ const AuthOption = (props) => {
|
||||
AuthOption.propTypes = {
|
||||
children: PropsTypes.node,
|
||||
icon: PropsTypes.string,
|
||||
to: PropsTypes.string,
|
||||
};
|
||||
|
||||
AuthOption.defaultProps = {
|
||||
children: '',
|
||||
icon: '',
|
||||
to: '#'
|
||||
};
|
||||
|
||||
export default AuthOption;
|
@ -57,13 +57,13 @@ const MobileNavMenu = (props) => {
|
||||
Challenges
|
||||
</Menu>
|
||||
</FlexRow>
|
||||
<FlexRow as={Link} to='/' gap='16px'>
|
||||
<FlexRow as={Link} to='/register' gap='16px'>
|
||||
<Svg width='16px' height='16px' src={registerIco}/>
|
||||
<Menu as='li'>
|
||||
Register
|
||||
</Menu>
|
||||
</FlexRow>
|
||||
<FlexRow as={Link} to='/' gap='16px'>
|
||||
<FlexRow as={Link} to='/login' gap='16px'>
|
||||
<Svg width='16px' height='16px' src={loginIco}/>
|
||||
<Menu as='li'>
|
||||
Sign in
|
||||
|
@ -29,7 +29,7 @@ const Login = () => {
|
||||
Github
|
||||
</Medium>
|
||||
</AuthOption>
|
||||
<AuthOption icon={emailIco}>
|
||||
<AuthOption to='/login-email' icon={emailIco}>
|
||||
Sign in with
|
||||
<Medium>
|
||||
Email
|
||||
|
39
src/pages/auth/LoginWithEmail.js
Normal file
39
src/pages/auth/LoginWithEmail.js
Normal file
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import AuthHeader from '../../components/elements/AuthHeader';
|
||||
import OptionsContainerStyle from './styles/OptionsContainerStyle';
|
||||
import MainContainerStyle from './styles/MainContainerStyle';
|
||||
import AuthInput from '../../components/elements/AuthInput';
|
||||
import Button from '../../components/elements/Button';
|
||||
import {FlexRow} from '../../utils/containers';
|
||||
import LinkStyle from './styles/LinkStyle';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {Body} from '../../utils/fonts';
|
||||
import theme from '../../utils/theme';
|
||||
|
||||
const LoginWithEmail = () => {
|
||||
return (
|
||||
<MainContainerStyle as='main'>
|
||||
<AuthHeader register={false}/>
|
||||
<OptionsContainerStyle>
|
||||
<AuthInput label='Email / Username'/>
|
||||
<AuthInput label='Password'/>
|
||||
<FlexRow width='100%' alignmentX='flex-end'>
|
||||
<Button>
|
||||
Sign in
|
||||
</Button>
|
||||
</FlexRow>
|
||||
</OptionsContainerStyle>
|
||||
<Body margin='32px 0 0 0'>
|
||||
Forgot
|
||||
<LinkStyle as={Link} to='#' color={theme.colors.dark}>
|
||||
Username
|
||||
</LinkStyle> /
|
||||
<LinkStyle as={Link} to='#' color={theme.colors.dark}>
|
||||
Password
|
||||
</LinkStyle>?
|
||||
</Body>
|
||||
</MainContainerStyle>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginWithEmail;
|
@ -3,7 +3,7 @@ import {Medium} from '../../../utils/fonts';
|
||||
|
||||
const LinkStyle = styled(Medium)`
|
||||
cursor: pointer;
|
||||
color: ${({theme}) => theme.colors.green};
|
||||
color: ${({theme, color}) => color ? color : theme.colors.green};
|
||||
transition: color 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
|
@ -14,12 +14,8 @@ const H1 = styled(Container)`
|
||||
}
|
||||
`;
|
||||
|
||||
const H2 = styled(Container)`
|
||||
display: inline-block;
|
||||
font-family: 'Kanit', sans-serif;
|
||||
font-weight: 400;
|
||||
const H2 = styled(H1)`
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
|
||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||
font-size: 32px;
|
||||
@ -27,10 +23,7 @@ const H2 = styled(Container)`
|
||||
}
|
||||
`;
|
||||
|
||||
const H3 = styled(Container)`
|
||||
display: inline-block;
|
||||
font-family: 'Kanit', sans-serif;
|
||||
font-weight: 400;
|
||||
const H3 = styled(H1)`
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
|
||||
@ -54,16 +47,10 @@ const Body = styled(Container)`
|
||||
}
|
||||
`;
|
||||
|
||||
const Medium = styled(Container)`
|
||||
display: inline-block;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
const Medium = styled(Body)`
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user