From 2e07990293136d347c4d6fef8c7380f46c950dc7 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 20 Jul 2020 18:51:42 -0300
Subject: [PATCH] :ok_hand: refactor <Footer />

---
 client/components/mobile/Footer.jsx        | 31 ++--------------------
 client/modules/IDE/pages/MobileIDEView.jsx | 10 +++++--
 2 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx
index a90079cc..25f10c1d 100644
--- a/client/components/mobile/Footer.jsx
+++ b/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, remSize } from '../../theme';
+import { prop } 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;
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 917415e2..943c980e 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/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 />} >
-        <h2>Bottom Bar</h2>
+      <Footer>
+        <Console />
+        <BottomBarContent>Bottom Bar</BottomBarContent>
       </Footer>
     </Screen>
   );