From 0877d39a658a066c3e708f814aa004d8266eafce Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 16 Jun 2020 17:38:43 -0300
Subject: [PATCH] :construction: split components into files

---
 client/components/mobile/Footer.jsx        | 20 +++++++++
 client/components/mobile/Header.jsx        | 25 +++++++++++
 client/components/mobile/IconButton.jsx    | 17 ++++++++
 client/components/mobile/MobileScreen.jsx  | 13 ++++++
 client/modules/IDE/pages/IDEViewMobile.jsx | 50 ++--------------------
 5 files changed, 79 insertions(+), 46 deletions(-)
 create mode 100644 client/components/mobile/Footer.jsx
 create mode 100644 client/components/mobile/Header.jsx
 create mode 100644 client/components/mobile/IconButton.jsx
 create mode 100644 client/components/mobile/MobileScreen.jsx

diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx
new file mode 100644
index 00000000..84e50d1b
--- /dev/null
+++ b/client/components/mobile/Footer.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+import { prop, remSize } from '../../theme';
+
+const background = prop('Button.default.background');
+const textColor = prop('primaryTextColor');
+
+const Footer = styled.div`
+  position: fixed;
+  width: 100%;
+  background: ${background};
+  color: ${textColor};
+  padding: ${remSize(12)};
+  padding-left: ${remSize(32)};
+  z-index: 1;
+
+  bottom: 0;
+`;
+
+export default Footer;
diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx
new file mode 100644
index 00000000..d638c1ac
--- /dev/null
+++ b/client/components/mobile/Header.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { prop, remSize } from '../../theme';
+
+const background = prop('Button.default.background');
+const textColor = prop('primaryTextColor');
+
+const Header = styled.div`
+  position: fixed;
+  width: 100%;
+  background: ${background};
+  color: ${textColor};
+  padding: ${remSize(12)};
+  padding-left: ${remSize(32)};
+  padding-right: ${remSize(32)};
+  z-index: 1;
+
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+export default Header;
diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx
new file mode 100644
index 00000000..ce758376
--- /dev/null
+++ b/client/components/mobile/IconButton.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+import { prop, remSize } from '../../theme';
+
+const textColor = prop('primaryTextColor');
+
+const IconButton = styled.button`
+width: 3rem;
+> svg {
+  width: 100%;
+  height: auto;
+  fill: ${textColor};
+  stroke: ${textColor};
+}
+`;
+
+export default IconButton;
diff --git a/client/components/mobile/MobileScreen.jsx b/client/components/mobile/MobileScreen.jsx
new file mode 100644
index 00000000..1e50f80a
--- /dev/null
+++ b/client/components/mobile/MobileScreen.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Screen = ({ children }) => (
+  <div className="fullscreen-preview">
+    {children}
+  </div>
+);
+Screen.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default Screen;
diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx
index a8149d3b..cd0f5cf2 100644
--- a/client/modules/IDE/pages/IDEViewMobile.jsx
+++ b/client/modules/IDE/pages/IDEViewMobile.jsx
@@ -26,61 +26,19 @@ import { CloseIcon } from '../../../common/Icons';
 import PreferencesIcon from '../../../images/preferences.svg';
 import PlayIcon from '../../../images/triangle-arrow-right.svg';
 
+import IconButton from '../../../components/mobile/IconButton';
+import Header from '../../../components/mobile/Header';
+import Screen from '../../../components/mobile/MobileScreen';
+import Footer from '../../../components/mobile/Footer';
 
 const background = prop('Button.default.background');
 const textColor = prop('primaryTextColor');
 
-
-const Header = styled.div`
-  position: fixed;
-  width: 100%;
-  background: ${background};
-  color: ${textColor};
-  padding: ${remSize(12)};
-  padding-left: ${remSize(32)};
-  padding-right: ${remSize(32)};
-  z-index: 1;
-  
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-`;
-
-const Footer = styled.div`
-  position: fixed;
-  width: 100%;
-  background: ${background};
-  color: ${textColor};
-  padding: ${remSize(12)};
-  padding-left: ${remSize(32)};
-  z-index: 1;
-
-  bottom: 0;
-`;
-
 const Content = styled.div`
   z-index: 0;
   margin-top: ${remSize(16)};
 `;
 
-const IconButton = styled.button`
-  width: 3rem;
-  > svg {
-    width: 100%;
-    height: auto;
-  }
-`;
-
-const Screen = ({ children }) => (
-  <div className="fullscreen-preview">
-    {children}
-  </div>
-);
-Screen.propTypes = {
-  children: PropTypes.node.isRequired
-};
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);