From 58ecd3041793e3825805485ced35101fed27a600 Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Fri, 5 Aug 2022 12:43:53 +0200 Subject: [PATCH] register page on mobile --- src/App.js | 2 + src/assets/email_ico.svg | 3 ++ src/assets/github_ico.svg | 3 ++ src/assets/google_ico.svg | 3 ++ src/components/elements/AuthHeader.js | 25 +++++++++++- src/components/elements/AuthOption.js | 43 ++++++++++++++++++++ src/pages/Login.js | 13 ++++++ src/pages/Register.js | 58 ++++++++++++++++++++++++++- src/utils/fonts.js | 7 ++++ src/utils/theme.js | 1 + 10 files changed, 154 insertions(+), 4 deletions(-) create mode 100644 src/assets/email_ico.svg create mode 100644 src/assets/github_ico.svg create mode 100644 src/assets/google_ico.svg create mode 100644 src/components/elements/AuthOption.js create mode 100644 src/pages/Login.js diff --git a/src/App.js b/src/App.js index a5eebc8..a0349be 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import Footer from './components/sections/Footer'; import {CHALLENGE_PAGE, CHALLENGES_PAGE} from './utils/globals'; import Challenge from './pages/Challenge'; import Register from './pages/Register'; +import Login from './pages/Login'; const App = () => { return ( @@ -15,6 +16,7 @@ const App = () => { + }/> }/> }/> }/> diff --git a/src/assets/email_ico.svg b/src/assets/email_ico.svg new file mode 100644 index 0000000..4d61bc5 --- /dev/null +++ b/src/assets/email_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/github_ico.svg b/src/assets/github_ico.svg new file mode 100644 index 0000000..54eb78f --- /dev/null +++ b/src/assets/github_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/google_ico.svg b/src/assets/google_ico.svg new file mode 100644 index 0000000..73b0844 --- /dev/null +++ b/src/assets/google_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/elements/AuthHeader.js b/src/components/elements/AuthHeader.js index 218b8cd..f670b74 100644 --- a/src/components/elements/AuthHeader.js +++ b/src/components/elements/AuthHeader.js @@ -8,14 +8,35 @@ import PropsTypes from 'prop-types'; const AuthHeaderStyle = styled(FlexRow)` border-width: 1px 1px 0 1px; border-style: solid; - border-color: ${({theme}) => theme.colors.dark05}; + border-color: ${({theme}) => theme.colors.dark03}; width: 260px; height: 48px; - justify-content: space-around; + justify-content: flex-start; + gap: 24px; + padding: 0 20px; + box-shadow: ${({theme}) => theme.authHeaderShadow}; + + @media (min-width: ${({theme}) => theme.overMobile}) { + justify-content: space-around; + } h1 { color: ${({theme}) => theme.colors.green}; } + + a { + font-family: 'Kanit', sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 22px; + color: ${({theme}) => theme.colors.dark}; + text-decoration: none; + + @media (min-width: ${({theme}) => theme.overMobile}) { + font-size: 24px; + line-height: 26px; + } + } `; const AuthHeader = (props) => { diff --git a/src/components/elements/AuthOption.js b/src/components/elements/AuthOption.js new file mode 100644 index 0000000..db13dbc --- /dev/null +++ b/src/components/elements/AuthOption.js @@ -0,0 +1,43 @@ +import React from 'react'; +import {FlexRow, Svg} from '../../utils/containers'; +import theme from '../../utils/theme'; +import PropsTypes from 'prop-types'; +import {Body} from '../../utils/fonts'; +import styled from 'styled-components'; + +const AuthOptionStyle = styled(FlexRow)` + gap: 16px; + padding: 10px 12px; + min-width: 180px; + justify-content: flex-start; + border: 1px solid ${({theme}) => theme.colors.dark03}; + box-shadow: ${({theme}) => theme.shadow}; + cursor: pointer; + + * { + cursor: pointer; + } +`; + +const AuthOption = (props) => { + return ( + + + + {props.children} + + + ); +}; + +AuthOption.propTypes = { + children: PropsTypes.node, + icon: PropsTypes.string, +}; + +AuthOption.defaultProps = { + children: '', + icon: '', +}; + +export default AuthOption; \ No newline at end of file diff --git a/src/pages/Login.js b/src/pages/Login.js new file mode 100644 index 0000000..b128360 --- /dev/null +++ b/src/pages/Login.js @@ -0,0 +1,13 @@ +import React from 'react'; +import AuthHeader from '../components/elements/AuthHeader'; +import {FlexColumn} from '../utils/containers'; + +const Login = () => { + return ( + + + + ); +}; + +export default Login; \ No newline at end of file diff --git a/src/pages/Register.js b/src/pages/Register.js index d50ef3a..f5e0d42 100644 --- a/src/pages/Register.js +++ b/src/pages/Register.js @@ -1,12 +1,66 @@ 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 theme from '../utils/theme'; +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}; +`; const Register = () => { return ( - + - + + + + Sign in with  + + Google + + + + Sign in with  + + Github + + + + Sign in with  + + Email + + + + + Have an account?  + + Sign in. + + + + ); }; diff --git a/src/utils/fonts.js b/src/utils/fonts.js index a008d26..1e61820 100644 --- a/src/utils/fonts.js +++ b/src/utils/fonts.js @@ -2,6 +2,7 @@ import styled from 'styled-components'; import {Container} from './containers'; const H1 = styled(Container)` + display: inline-block; font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 24px; @@ -14,6 +15,7 @@ const H1 = styled(Container)` `; const H2 = styled(Container)` + display: inline-block; font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 20px; @@ -26,6 +28,7 @@ const H2 = styled(Container)` `; const H3 = styled(Container)` + display: inline-block; font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 18px; @@ -38,6 +41,7 @@ const H3 = styled(Container)` `; const Body = styled(Container)` + display: inline-block; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 14px; @@ -51,6 +55,7 @@ const Body = styled(Container)` `; const Medium = styled(Container)` + display: inline-block; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; @@ -64,6 +69,7 @@ const Medium = styled(Container)` `; const Menu = styled(Container)` + display: inline-block; font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 24px; @@ -71,6 +77,7 @@ const Menu = styled(Container)` `; const Label = styled(Menu)` + display: inline-block; font-weight: 300; @media (min-width: ${({theme}) => theme.overMobile}) { diff --git a/src/utils/theme.js b/src/utils/theme.js index 957e03d..a9d9c66 100644 --- a/src/utils/theme.js +++ b/src/utils/theme.js @@ -6,6 +6,7 @@ const theme = { mobile: '(max-width: 768px)', desktop: '(min-width: 769px)', shadow: '1px 2px 4px rgba(52, 52, 52, 0.25)', + authHeaderShadow: '1px -2px 4px rgba(52, 52, 52, 0.25)', navShadow: '0 1px 2px rgba(52, 52, 52, 0.25)', buttonShadow: '0 4px 4px rgba(52, 52, 52, 0.25)', shadowLeft: '-4px 4px 4px rgba(52, 52, 52, 0.25)',