🚧 Improve Footer, Emplace Console component

Author: ghalestrilo

client/components/mobile/Footer.jsx

@@ -1,20 +1,43 @@
 import React from 'react';
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
 import { prop, remSize } from '../../theme';
 
+
 const background = prop('MobilePanel.default.background');
 const textColor = prop('primaryTextColor');
 
-const Footer = styled.div`
+const FooterWrapper = styled.div`
   position: fixed;
   width: 100%;
+  bottom: 0;
+`;
+
+const FooterContent = styled.div`
   background: ${background};
   color: ${textColor};
   padding: ${remSize(12)};
   padding-left: ${remSize(32)};
-  z-index: 1;
-
-  bottom: 0;
 `;
 
+
+const Footer = ({ before, children }) => (
+  <FooterWrapper>
+    {before}
+    <FooterContent>
+      {children}
+    </FooterContent>
+  </FooterWrapper>
+);
+
+Footer.propTypes = {
+  before: PropTypes.element,
+  children: PropTypes.element
+};
+
+Footer.defaultProps = {
+  before: <></>,
+  children: <></>
+};
+
 export default Footer;

client/modules/App/App.jsx

@@ -36,6 +36,7 @@ class App extends React.Component {
       <div className="app">
         {/* FIXME: remove "false &&" from line below */}
         {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {/* {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />} */}
         {this.props.children}
       </div>
     );

client/modules/IDE/pages/MobileIDEView.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { useState } from 'react';
+import styled from 'styled-components';
 
 // Imports to be Refactored
 import { bindActionCreators } from 'redux';
@@ -25,6 +26,8 @@ import Header from '../../../components/mobile/Header';
 import Screen from '../../../components/mobile/MobileScreen';
 import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
+import Console from '../components/Console';
+import { remSize } from '../../../theme';
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
@@ -40,6 +43,11 @@ const MobileIDEView = (props) => {
   const [tmController, setTmController] = useState(null); // eslint-disable-line
   const [overlay, setOverlay] = useState(null); // eslint-disable-line
 
+  // FIXME:
+  const dispatchConsoleEvent = () => {};
+  const expandConsole = () => {};
+  const collapseConsole = () => {};
+
   return (
     <Screen fullscreen>
       <Header
@@ -94,7 +102,19 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
         />
       </IDEWrapper>
-      <Footer><h2>Bottom Bar</h2></Footer>
+      <Footer before={<Console
+        fontSize={preferences.fontSize}
+        consoleEvents={console}
+        isExpanded={ide.consoleIsExpanded}
+        clearConsole={clearConsole}
+        theme={preferences.theme}
+        dispatchConsoleEvent={dispatchConsoleEvent}
+        expandConsole={expandConsole}
+        collapseConsole={collapseConsole}
+      />}
+      >
+        <h2>Bottom Bar</h2>
+      </Footer>
     </Screen>
   );
 };