register with email page

src/App.js

@@ -10,6 +10,7 @@ import Challenge from './pages/Challenge';
 import Register from './pages/auth/Register';
 import Login from './pages/auth/Login';
 import LoginWithEmail from './pages/auth/LoginWithEmail';
+import RegisterWithEmail from './pages/auth/RegisterWithEmail';
 
 const App = () => {
     return (
@@ -17,6 +18,7 @@ const App = () => {
             <ThemeProvider theme={theme}>
                 <NavBar/>
                 <Routes>
+                    <Route path='/register-email' element={<RegisterWithEmail/>}/>
                     <Route path='/login-email' element={<LoginWithEmail/>}/>
                     <Route path='/login' element={<Login/>}/>
                     <Route path='/register' element={<Register/>}/>

src/pages/auth/Register.js

@@ -29,7 +29,7 @@ const Register = () => {
                             Github
                         </Medium>
                     </AuthOption>
-                    <AuthOption icon={emailIco}>
+                    <AuthOption to='/register-email' icon={emailIco}>
                         Register with&nbsp;
                         <Medium>
                             Email

src/pages/auth/RegisterWithEmail.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import AuthHeader from '../../components/elements/AuthHeader';
+import OptionsContainerStyle from './styles/OptionsContainerStyle';
+import AuthInput from '../../components/elements/AuthInput';
+import Media from 'react-media';
+import theme from '../../utils/theme';
+import {FlexRow} from '../../utils/containers';
+import Button from '../../components/elements/Button';
+import MainContainerStyle from './styles/MainContainerStyle';
+
+const RegisterWithEmail = () => {
+    return (
+        <MainContainerStyle as='main'>
+            <AuthHeader register={true}/>
+            <OptionsContainerStyle>
+                <AuthInput label='Email address'/>
+                <AuthInput label='Username'/>
+                <AuthInput label='Type password'/>
+                <AuthInput label='Repeat password'/>
+                <Media query={theme.mobile}>
+                    <FlexRow width='100%' alignmentX='flex-end'>
+                        <Button>
+                            Register
+                        </Button>
+                    </FlexRow>
+                </Media>
+                <Media query={theme.desktop}>
+                    <Button width='112px' height='36px'>
+                        Register
+                    </Button>
+                </Media>
+            </OptionsContainerStyle>
+        </MainContainerStyle>
+    );
+};
+
+export default RegisterWithEmail;

src/pages/auth/styles/MainContainerStyle.js

@@ -3,10 +3,10 @@ import {FlexColumn} from '../../../utils/containers';
 
 const MainContainerStyle = styled(FlexColumn)`
   width: 100%;
-  height: calc(100vh - 48px);
+  min-height: calc(100vh - 48px);
 
   @media (min-width: ${({theme}) => theme.overMobile}) {
-    height: calc(100vh - 72px);
+    min-height: calc(100vh - 72px);
   }
 `;
 

src/pages/auth/styles/OptionsContainerStyle.js

@@ -10,7 +10,8 @@ const OptionsContainerStyle = styled(FlexColumn)`
 
   @media (min-width: ${({theme}) => theme.overMobile}) {
     width: 400px;
-    height: 382px;
+    min-height: 382px;
+    padding: 48px;
   }
 `;