From ca0d953b808a65c358cd51830bf3039d78185584 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 9 Jun 2020 16:51:57 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9B=8F=20=20create=20basic=20header=20and=20?=
 =?UTF-8?q?footer=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/modules/IDE/pages/IDEViewMobile.jsx | 34 ++++++++++++++++++++--
 client/routes.jsx                          |  7 +++--
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx
index d8bb3e33..b603e758 100644
--- a/client/modules/IDE/pages/IDEViewMobile.jsx
+++ b/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>
+);
diff --git a/client/routes.jsx b/client/routes.jsx
index 061e537c..02cdaa07 100644
--- a/client/routes.jsx
+++ b/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)} />