⛏ create basic header and footer components

Author: ghalestrilo

client/modules/IDE/pages/IDEViewMobile.jsx

@@ -1,5 +1,33 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
 
-export default () => (<div>
-  <h1>Test</h1>
-</div>); //eslint-disable-line
+const Header = styled.div`
+  width: 100%;
+  color: orange;
+  background: red;
+`;
+
+const Footer = styled.div`
+  width: 100%;
+  color: orange;
+  background: blue;
+  position: absolute;
+  bottom: 0;
+`;
+
+const Screen = ({ children }) => (
+  <div className="fullscreen-preview">
+    {children}
+  </div>
+);
+Screen.propTypes = {
+  children: PropTypes.element.isRequired
+};
+
+export default () => (
+  <Screen>
+    <Header><h1>Test</h1></Header>
+    <Footer><h1>Actionbar</h1></Footer>
+  </Screen>
+);

client/routes.jsx

@@ -1,8 +1,8 @@
 import { Route, IndexRoute } from 'react-router';
 import React from 'react';
 import App from './modules/App/App';
-import IDEView from './modules/IDE/pages/IDEView';
-import IDEViewMobile from './modules/IDE/pages/IDEViewMobile';
+import IDEViewScreen from './modules/IDE/pages/IDEView';
+import IDEViewMobileScreen from './modules/IDE/pages/IDEViewMobile';
 import FullView from './modules/IDE/pages/FullView';
 import LoginView from './modules/User/pages/LoginView';
 import SignupView from './modules/User/pages/SignupView';
@@ -26,10 +26,11 @@ const onRouteChange = (store) => {
 };
 
 const isMobile = () => window.innerWidth <= 760;
+const IDEView = isMobile() ? IDEViewMobileScreen : IDEViewScreen;
 
 const routes = store => (
   <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
-    <IndexRoute component={isMobile() ? IDEViewMobile : IDEView} onEnter={checkAuth(store)} />
+    <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
     <Route path="/login" component={userIsNotAuthenticated(LoginView)} />
     <Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
     <Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />