register page on mobile

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 = () => {
             <ThemeProvider theme={theme}>
                 <NavBar/>
                 <Routes>
+                    <Route path='/login' element={<Login/>}/>
                     <Route path='/register' element={<Register/>}/>
                     <Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/>
                     <Route path={CHALLENGES_PAGE} element={<Challenges/>}/>

src/assets/email_ico.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.125 0C19.1602 0 20 1.11927 20 2.5C20 3.28646 19.7227 4.02604 19.25 4.5L10.75 13C10.3047 13.4427 9.69531 13.4427 9.25 13L0.75 4.5C0.277852 4.02604 0 3.28646 0 2.5C0 1.11927 0.839453 0 1.875 0H18.125ZM8.5 14.3333C9.39062 15.224 10.6094 15.224 11.5 14.3333L20 5.83333V16.6667C20 18.5052 18.8789 20 17.5 20H2.5C1.11914 20 0 18.5052 0 16.6667V5.83333L8.5 14.3333Z" fill="#343434"/>
+</svg>

src/assets/github_ico.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.68952 16.104C6.68952 16.1867 6.59677 16.2529 6.47984 16.2529C6.34677 16.2653 6.25403 16.1991 6.25403 16.104C6.25403 16.0213 6.34677 15.9551 6.46371 15.9551C6.58468 15.9427 6.68952 16.0089 6.68952 16.104ZM5.43548 15.9179C5.40726 16.0006 5.4879 16.0957 5.60887 16.1205C5.71371 16.1619 5.83468 16.1205 5.85887 16.0378C5.88306 15.9551 5.80645 15.86 5.68548 15.8228C5.58065 15.7938 5.46371 15.8352 5.43548 15.9179ZM7.21774 15.8476C7.10081 15.8765 7.02016 15.9551 7.03226 16.0502C7.04435 16.1329 7.14919 16.1867 7.27016 16.1577C7.3871 16.1288 7.46774 16.0502 7.45564 15.9675C7.44355 15.8889 7.33468 15.8352 7.21774 15.8476ZM9.87097 0C4.27823 0 0 4.35477 0 10.0908C0 14.6772 2.81452 18.6019 6.83468 19.9832C7.35081 20.0783 7.53226 19.7516 7.53226 19.4827C7.53226 19.2263 7.52016 17.812 7.52016 16.9435C7.52016 16.9435 4.69758 17.5638 4.10484 15.7111C4.10484 15.7111 3.64516 14.5076 2.98387 14.1975C2.98387 14.1975 2.06048 13.5482 3.04839 13.5606C3.04839 13.5606 4.05242 13.6433 4.60484 14.6276C5.4879 16.2239 6.96774 15.7649 7.54435 15.4919C7.6371 14.8302 7.89919 14.3712 8.18952 14.0982C5.93548 13.8418 3.66129 13.5068 3.66129 9.52839C3.66129 8.3911 3.96774 7.82039 4.6129 7.09253C4.50806 6.82372 4.16532 5.71538 4.71774 4.28447C5.56048 4.01565 7.5 5.40107 7.5 5.40107C8.30645 5.16948 9.17339 5.04955 10.0323 5.04955C10.8911 5.04955 11.7581 5.16948 12.5645 5.40107C12.5645 5.40107 14.504 4.01152 15.3468 4.28447C15.8992 5.71951 15.5565 6.82372 15.4516 7.09253C16.0968 7.82453 16.4919 8.39524 16.4919 9.52839C16.4919 13.5192 14.1169 13.8377 11.8629 14.0982C12.2339 14.4249 12.5484 15.0453 12.5484 16.0171C12.5484 17.4108 12.5363 19.1354 12.5363 19.4745C12.5363 19.7433 12.7218 20.07 13.2339 19.9749C17.2661 18.6019 20 14.6772 20 10.0908C20 4.35477 15.4637 0 9.87097 0ZM3.91935 14.2636C3.86694 14.305 3.87903 14.4001 3.94758 14.4787C4.0121 14.5449 4.10484 14.5738 4.15726 14.52C4.20968 14.4787 4.19758 14.3836 4.12903 14.305C4.06452 14.2388 3.97177 14.2099 3.91935 14.2636ZM3.48387 13.9287C3.45565 13.9824 3.49597 14.0486 3.57661 14.0899C3.64113 14.1313 3.72177 14.1189 3.75 14.061C3.77823 14.0072 3.7379 13.9411 3.65726 13.8997C3.57661 13.8749 3.5121 13.8873 3.48387 13.9287ZM4.79032 15.4009C4.72581 15.4547 4.75 15.5788 4.84274 15.6573C4.93548 15.7524 5.05242 15.7649 5.10484 15.6987C5.15726 15.6449 5.13306 15.5209 5.05242 15.4423C4.96371 15.3472 4.84274 15.3348 4.79032 15.4009ZM4.33065 14.793C4.26613 14.8343 4.26613 14.9419 4.33065 15.037C4.39516 15.1321 4.50403 15.1735 4.55645 15.1321C4.62097 15.0783 4.62097 14.9708 4.55645 14.8757C4.5 14.7806 4.39516 14.7392 4.33065 14.793Z" fill="#343434"/>
+</svg>

src/assets/google_ico.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 10.2339C20 15.9395 16.0287 20 10.1639 20C4.54098 20 0 15.5323 0 10C0 4.46774 4.54098 0 10.1639 0C12.9016 0 15.2049 0.987903 16.9795 2.61694L14.2131 5.23387C10.5943 1.79839 3.86475 4.37903 3.86475 10C3.86475 13.4879 6.69672 16.3145 10.1639 16.3145C14.1885 16.3145 15.6967 13.4758 15.9344 12.004H10.1639V8.56452H19.8402C19.9344 9.07661 20 9.56855 20 10.2339Z" fill="#343434"/>
+</svg>

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) => {

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 (
+        <AuthOptionStyle as='button'>
+            <Svg width='20px' height='20px' src={props.icon} backgroundColor={theme.colors.dark}/>
+            <Body>
+                {props.children}
+            </Body>
+        </AuthOptionStyle>
+    );
+};
+
+AuthOption.propTypes = {
+    children: PropsTypes.node,
+    icon: PropsTypes.string,
+};
+
+AuthOption.defaultProps = {
+    children: '',
+    icon: '',
+};
+
+export default AuthOption;

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 (
+        <FlexColumn width='100%' height='100vh'>
+            <AuthHeader register={false}/>
+        </FlexColumn>
+    );
+};
+
+export default Login;

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 (
-        <FlexColumn width='100%' height='100vh'>
+        <MainContainerStyle as='main'>
             <AuthHeader register={true}/>
-        </FlexColumn>
+            <OptionsContainerStyle>
+                <FlexColumn gap='24px'>
+                    <AuthOption icon={googleIco}>
+                        Sign in with&nbsp;
+                        <Medium>
+                            Google
+                        </Medium>
+                    </AuthOption>
+                    <AuthOption icon={githubIco}>
+                        Sign in with&nbsp;
+                        <Medium>
+                            Github
+                        </Medium>
+                    </AuthOption>
+                    <AuthOption icon={emailIco}>
+                        Sign in with&nbsp;
+                        <Medium>
+                            Email
+                        </Medium>
+                    </AuthOption>
+                </FlexColumn>
+                <Body>
+                    Have an account?&nbsp;
+                    <Medium as={Link} color={theme.colors.green} cursor='pointer'
+                            display='inline-block' to='/login'>
+                        Sign in.
+                    </Medium>
+                </Body>
+            </OptionsContainerStyle>
+        </MainContainerStyle>
     );
 };
 

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}) {

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)',