combining login and create pages

net/web/src/App.js

@@ -15,7 +15,7 @@ import { ViewportContextProvider } from 'context/ViewportContext';
 
 import { AppWrapper } from 'App.styled';
 import { Root } from './root/Root';
-import { Login } from './login/Login';
+import { Access } from './access/Access';
 
 function App() {
 
@@ -34,7 +34,8 @@ function App() {
                           <Router>
                             <Routes>
                               <Route path="/" element={ <Root /> } />
-                              <Route path="/login" element={ <Login /> } />
+                              <Route path="/login" element={ <Access mode="login" /> } />
+                              <Route path="/create" element={ <Access mode="create" /> } />
                             </Routes>
                           </Router>
                         </AppWrapper>

net/web/src/access/Access.jsx

@@ -2,11 +2,11 @@ import React, { useContext, useEffect } from 'react';
 import { useNavigate } from "react-router-dom";
 import { AppContext } from 'context/AppContext';
 import { ViewportContext } from 'context/ViewportContext';
-import { LoginWrapper } from './Login.styled';
+import { AccessWrapper } from './Access.styled';
 
 import login from 'images/login.png'
 
-export function Login() {
+export function Access({ mode }) {
 
   const navigate = useNavigate();
   const app = useContext(AppContext);
@@ -21,13 +21,13 @@ export function Login() {
   }, [app]);
 
   return (
-    <LoginWrapper>
+    <AccessWrapper>
       { (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && (
         <div class="split-layout">
           <div class="left">
             <img class="splash" src={login} alt={login} />
           </div>
-          <div class="right">RIGHT</div>
+          <div class="right">{ mode }</div>
         </div>
       )}
       { (viewport.state.display === 'medium' || viewport.state.display === 'small') && (
@@ -35,7 +35,7 @@ export function Login() {
           <div class="center"></div>
         </div>
       )}
-    </LoginWrapper>
+    </AccessWrapper>
   );
 }
 

net/web/src/access/Access.styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import Colors from 'constants/Colors';
 
-export const LoginWrapper = styled.div`
+export const AccessWrapper = styled.div`
   height: 100%;
 
   .full-layout {