👌 refactor <Footer />

client/components/mobile/Footer.jsx

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

client/modules/IDE/pages/MobileIDEView.jsx

@@ -31,6 +31,11 @@ import { remSize } from '../../../theme';
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
+const BottomBarContent = styled.h2`
+  padding: ${remSize(12)};
+  padding-left: ${remSize(32)};
+`;
+
 const MobileIDEView = (props) => {
   const {
     preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
@@ -97,8 +102,9 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
         />
       </IDEWrapper>
-      <Footer before={<Console />} >
+      <Footer>
-        <h2>Bottom Bar</h2>
+        <Console />
+        <BottomBarContent>Bottom Bar</BottomBarContent>
       </Footer>
     </Screen>
   );