login page
This commit is contained in:
parent
bd56a99e97
commit
2d79baa9f6
@ -7,8 +7,8 @@ import NavBar from './components/elements/NavBar';
|
|||||||
import Footer from './components/sections/Footer';
|
import Footer from './components/sections/Footer';
|
||||||
import {CHALLENGE_PAGE, CHALLENGES_PAGE} from './utils/globals';
|
import {CHALLENGE_PAGE, CHALLENGES_PAGE} from './utils/globals';
|
||||||
import Challenge from './pages/Challenge';
|
import Challenge from './pages/Challenge';
|
||||||
import Register from './pages/Register';
|
import Register from './pages/auth/Register';
|
||||||
import Login from './pages/Login';
|
import Login from './pages/auth/Login';
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,13 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import AuthHeader from '../components/elements/AuthHeader';
|
|
||||||
import {FlexColumn} from '../utils/containers';
|
|
||||||
|
|
||||||
const Login = () => {
|
|
||||||
return (
|
|
||||||
<FlexColumn width='100%' height='100vh'>
|
|
||||||
<AuthHeader register={false}/>
|
|
||||||
</FlexColumn>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Login;
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {FlexColumn} from '../utils/containers';
|
|
||||||
import AuthHeader from '../components/elements/AuthHeader';
|
|
||||||
import {Body, Medium} from '../utils/fonts';
|
|
||||||
import {Link} from 'react-router-dom';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import AuthOption from '../components/elements/AuthOption';
|
|
||||||
import githubIco from '../assets/github_ico.svg';
|
|
||||||
import emailIco from '../assets/email_ico.svg';
|
|
||||||
import googleIco from '../assets/google_ico.svg';
|
|
||||||
|
|
||||||
const MainContainerStyle = styled(FlexColumn)`
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100vh - 48px);
|
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
||||||
height: calc(100vh - 72px);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const OptionsContainerStyle = styled(FlexColumn)`
|
|
||||||
width: 260px;
|
|
||||||
border: 1px solid ${({theme}) => theme.colors.dark03};
|
|
||||||
gap: 32px;
|
|
||||||
padding: 32px;
|
|
||||||
box-shadow: ${({theme}) => theme.shadow};
|
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
||||||
width: 400px;
|
|
||||||
height: 382px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const LinkStyle = styled(Medium)`
|
|
||||||
cursor: pointer;
|
|
||||||
color: ${({theme}) => theme.colors.green};
|
|
||||||
transition: color 0.3s ease-in-out;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: ${({theme}) => theme.colors.green};
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
||||||
color: ${({theme}) => theme.colors.dark};
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Register = () => {
|
|
||||||
return (
|
|
||||||
<MainContainerStyle as='main'>
|
|
||||||
<AuthHeader register={true}/>
|
|
||||||
<OptionsContainerStyle>
|
|
||||||
<FlexColumn gap='24px'>
|
|
||||||
<AuthOption icon={googleIco}>
|
|
||||||
Sign in with
|
|
||||||
<Medium>
|
|
||||||
Google
|
|
||||||
</Medium>
|
|
||||||
</AuthOption>
|
|
||||||
<AuthOption icon={githubIco}>
|
|
||||||
Sign in with
|
|
||||||
<Medium>
|
|
||||||
Github
|
|
||||||
</Medium>
|
|
||||||
</AuthOption>
|
|
||||||
<AuthOption icon={emailIco}>
|
|
||||||
Sign in with
|
|
||||||
<Medium>
|
|
||||||
Email
|
|
||||||
</Medium>
|
|
||||||
</AuthOption>
|
|
||||||
</FlexColumn>
|
|
||||||
<Body>
|
|
||||||
Have an account?
|
|
||||||
<LinkStyle as={Link} to='/login'>
|
|
||||||
Sign in.
|
|
||||||
</LinkStyle>
|
|
||||||
</Body>
|
|
||||||
</OptionsContainerStyle>
|
|
||||||
</MainContainerStyle>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Register;
|
|
||||||
50
src/pages/auth/Login.js
Normal file
50
src/pages/auth/Login.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {FlexColumn} from '../../utils/containers';
|
||||||
|
import AuthHeader from '../../components/elements/AuthHeader';
|
||||||
|
import {Body, Medium} from '../../utils/fonts';
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
import AuthOption from '../../components/elements/AuthOption';
|
||||||
|
import githubIco from '../../assets/github_ico.svg';
|
||||||
|
import emailIco from '../../assets/email_ico.svg';
|
||||||
|
import googleIco from '../../assets/google_ico.svg';
|
||||||
|
import MainContainerStyle from './styles/MainContainerStyle';
|
||||||
|
import OptionsContainerStyle from './styles/OptionsContainerStyle';
|
||||||
|
import LinkStyle from './styles/LinkStyle';
|
||||||
|
|
||||||
|
const Login = () => {
|
||||||
|
return (
|
||||||
|
<MainContainerStyle as='main'>
|
||||||
|
<AuthHeader register={false}/>
|
||||||
|
<OptionsContainerStyle>
|
||||||
|
<FlexColumn gap='24px'>
|
||||||
|
<AuthOption icon={googleIco}>
|
||||||
|
Sign in with
|
||||||
|
<Medium>
|
||||||
|
Google
|
||||||
|
</Medium>
|
||||||
|
</AuthOption>
|
||||||
|
<AuthOption icon={githubIco}>
|
||||||
|
Sign in with
|
||||||
|
<Medium>
|
||||||
|
Github
|
||||||
|
</Medium>
|
||||||
|
</AuthOption>
|
||||||
|
<AuthOption icon={emailIco}>
|
||||||
|
Sign in with
|
||||||
|
<Medium>
|
||||||
|
Email
|
||||||
|
</Medium>
|
||||||
|
</AuthOption>
|
||||||
|
</FlexColumn>
|
||||||
|
<Body>
|
||||||
|
No account?
|
||||||
|
<LinkStyle as={Link} to='/register'>
|
||||||
|
Create one.
|
||||||
|
</LinkStyle>
|
||||||
|
</Body>
|
||||||
|
</OptionsContainerStyle>
|
||||||
|
</MainContainerStyle>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Login;
|
||||||
50
src/pages/auth/Register.js
Normal file
50
src/pages/auth/Register.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {FlexColumn} from '../../utils/containers';
|
||||||
|
import AuthHeader from '../../components/elements/AuthHeader';
|
||||||
|
import {Body, Medium} from '../../utils/fonts';
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
import AuthOption from '../../components/elements/AuthOption';
|
||||||
|
import githubIco from '../../assets/github_ico.svg';
|
||||||
|
import emailIco from '../../assets/email_ico.svg';
|
||||||
|
import googleIco from '../../assets/google_ico.svg';
|
||||||
|
import MainContainerStyle from './styles/MainContainerStyle';
|
||||||
|
import OptionsContainerStyle from './styles/OptionsContainerStyle';
|
||||||
|
import LinkStyle from './styles/LinkStyle';
|
||||||
|
|
||||||
|
const Register = () => {
|
||||||
|
return (
|
||||||
|
<MainContainerStyle as='main'>
|
||||||
|
<AuthHeader register={true}/>
|
||||||
|
<OptionsContainerStyle>
|
||||||
|
<FlexColumn gap='24px'>
|
||||||
|
<AuthOption icon={googleIco}>
|
||||||
|
Register with
|
||||||
|
<Medium>
|
||||||
|
Google
|
||||||
|
</Medium>
|
||||||
|
</AuthOption>
|
||||||
|
<AuthOption icon={githubIco}>
|
||||||
|
Register with
|
||||||
|
<Medium>
|
||||||
|
Github
|
||||||
|
</Medium>
|
||||||
|
</AuthOption>
|
||||||
|
<AuthOption icon={emailIco}>
|
||||||
|
Register with
|
||||||
|
<Medium>
|
||||||
|
Email
|
||||||
|
</Medium>
|
||||||
|
</AuthOption>
|
||||||
|
</FlexColumn>
|
||||||
|
<Body>
|
||||||
|
Have an account?
|
||||||
|
<LinkStyle as={Link} to='/login'>
|
||||||
|
Sign in.
|
||||||
|
</LinkStyle>
|
||||||
|
</Body>
|
||||||
|
</OptionsContainerStyle>
|
||||||
|
</MainContainerStyle>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Register;
|
||||||
18
src/pages/auth/styles/LinkStyle.js
Normal file
18
src/pages/auth/styles/LinkStyle.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import styled from 'styled-components';
|
||||||
|
import {Medium} from '../../../utils/fonts';
|
||||||
|
|
||||||
|
const LinkStyle = styled(Medium)`
|
||||||
|
cursor: pointer;
|
||||||
|
color: ${({theme}) => theme.colors.green};
|
||||||
|
transition: color 0.3s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${({theme}) => theme.colors.green};
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
|
color: ${({theme}) => theme.colors.dark};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default LinkStyle;
|
||||||
13
src/pages/auth/styles/MainContainerStyle.js
Normal file
13
src/pages/auth/styles/MainContainerStyle.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import styled from 'styled-components';
|
||||||
|
import {FlexColumn} from '../../../utils/containers';
|
||||||
|
|
||||||
|
const MainContainerStyle = styled(FlexColumn)`
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 48px);
|
||||||
|
|
||||||
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
|
height: calc(100vh - 72px);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default MainContainerStyle;
|
||||||
17
src/pages/auth/styles/OptionsContainerStyle.js
Normal file
17
src/pages/auth/styles/OptionsContainerStyle.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import styled from 'styled-components';
|
||||||
|
import {FlexColumn} from '../../../utils/containers';
|
||||||
|
|
||||||
|
const OptionsContainerStyle = styled(FlexColumn)`
|
||||||
|
width: 260px;
|
||||||
|
border: 1px solid ${({theme}) => theme.colors.dark03};
|
||||||
|
gap: 32px;
|
||||||
|
padding: 32px;
|
||||||
|
box-shadow: ${({theme}) => theme.shadow};
|
||||||
|
|
||||||
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
|
width: 400px;
|
||||||
|
height: 382px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default OptionsContainerStyle;
|
||||||
Loading…
Reference in New Issue
Block a user