Add register layout

packages/concordia-app/src/App.jsx

@@ -6,8 +6,6 @@ import LoadingContainer from './components/LoadingContainer';
 import Routes from './Routes';
 import './intl/index';
 import 'semantic-ui-css/semantic.min.css';
-
-// CSS
 import './assets/css/app.css';
 
 const App = ({ store }) => (

packages/concordia-app/src/Routes.jsx

@@ -1,17 +1,18 @@
 import React, { Fragment, lazy, Suspense } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import CoreLayoutContainer from './layout/CoreLayoutContainer';
+import MainLayout from './layouts/MainLayout';
 import LoadingScreen from './components/LoadingScreen';
 
 const routesConfig = [
   {
     exact: true,
     path: '/404',
+    layout: MainLayout,
     component: lazy(() => import('./components/NotFound')),
   },
   {
     path: '*',
-    layout: CoreLayoutContainer,
+    layout: MainLayout,
     routes: [
       {
         exact: true,

packages/concordia-app/src/assets/css/index.css

@@ -1,4 +0,0 @@
-body {
-    margin: 10em;
-    padding: 0;
-}

packages/concordia-app/src/components/MenuComponent.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { withRouter } from 'react-router';
-import { Menu } from 'semantic-ui-react';
-
-import AppContext from './AppContext';
-
-import appLogo from '../assets/images/app_logo.png';
-import SignUpForm from './SignUpForm';
-
-const MenuComponent = (props) => {
-  const { history: { push } } = props;
-
-  return (
-      <AppContext.Consumer>
-          {() => (
-              <div>
-                  <Menu color="black" inverted>
-                      <Menu.Item
-                        link
-                        name="home"
-                        onClick={() => { push('/'); }}
-                      >
-                          <img src={appLogo} alt="app_logo" />
-                      </Menu.Item>
-
-                      <SignUpForm />
-
-                  </Menu>
-              </div>
-          )}
-      </AppContext.Consumer>
-  );
-};
-
-export default withRouter(MenuComponent);

packages/concordia-app/src/index.jsx

@@ -8,7 +8,6 @@ import AppContext from './components/AppContext';
 import drizzleOptions from './options/drizzleOptions';
 import breezeOptions from './options/breezeOptions';
 import * as serviceWorker from './utils/serviceWorker';
-import './assets/css/index.css';
 import LoadingScreen from './components/LoadingScreen';
 
 const drizzle = new Drizzle(drizzleOptions, store);

packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import { Menu } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
+import AppContext from '../../../components/AppContext';
+import appLogo from '../../../assets/images/app_logo.png';
+
+const MainLayoutMenu = (props) => {
+  const { history: { push } } = props;
+  const { t } = useTranslation();
+
+  return (
+      <AppContext.Consumer>
+          {() => (
+              <div>
+                  <Menu color="black" inverted>
+                      <Menu.Item
+                        link
+                        name="home"
+                        key="home"
+                        onClick={() => { push('/'); }}
+                      >
+                          <img src={appLogo} alt="app_logo" />
+                      </Menu.Item>
+                      <Menu.Item
+                        link
+                        name="register"
+                        key="register"
+                        onClick={() => { push('/register'); }}
+                        position="right"
+                      >
+                          {t('topbar.button.signup')}
+                      </Menu.Item>
+                  </Menu>
+              </div>
+          )}
+      </AppContext.Consumer>
+  );
+};
+
+export default withRouter(MainLayoutMenu);

packages/concordia-app/src/layouts/MainLayout/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import MainLayoutMenu from './MainLayoutMenu';
+
+const MainLayout = (props) => {
+  const { children } = props;
+
+  return (
+      <div id="main-layout">
+          <MainLayoutMenu />
+          {children}
+      </div>
+  );
+};
+
+MainLayout.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export default MainLayout;

packages/concordia-app/src/layout/CoreLayoutContainer.jsx → packages/concordia-app/src/layouts/RegisterLayout/index.jsx

@@ -1,21 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import MenuComponent from '../components/MenuComponent';
+const RegisterLayout = (props) => {
-
-const CoreLayout = (props) => {
   const { children } = props;
 
   return (
-      <div>
+      <div id="register-layout">
-          <MenuComponent />
           {children}
       </div>
   );
 };
 
-CoreLayout.propTypes = {
+RegisterLayout.propTypes = {
   children: PropTypes.element.isRequired,
 };
 
-export default CoreLayout;
+export default RegisterLayout;