💄 improve <Header /> component structure and layout

client/components/mobile/Header.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
 import { prop, remSize } from '../../theme';
 
 const background = prop('Panel.default.background');
 const textColor = prop('primaryTextColor');
 
-const Header = styled.div`
+
+const HeaderDiv = styled.div`
   position: fixed;
   width: 100%;
-  background: ${background};
+  background: ${props => (props.transparent ? 'transparent' : background)};
   color: ${textColor};
   padding: ${remSize(12)};
   padding-left: ${remSize(16)};
@@ -23,8 +25,56 @@ const Header = styled.div`
 
   // TODO: 
   svg {
-    height: 2rem;
+    max-height: ${remSize(32)};
+    padding: ${remSize(4)}
   }
 `;
 
+const IconContainer = styled.div`
+  margin-left: ${props => (props.leftButton ? remSize(32) : remSize(4))};
+  display: flex;
+`;
+
+
+const TitleContainer = styled.div`
+  margin-left: ${remSize(4)};
+  margin-right: auto;
+
+  ${props => props.padded && `h2{
+    padding-top: ${remSize(10)};
+    padding-bottom: ${remSize(10)};
+  }`}
+`;
+
+const Header = ({
+  title, subtitle, leftButton, children, transparent
+}) => (
+  <HeaderDiv transparent={transparent}>
+    {leftButton}
+    <TitleContainer padded={subtitle === null}>
+      {title && <h2>{title}</h2>}
+      {subtitle && <h3>{subtitle}</h3>}
+    </TitleContainer>
+    <IconContainer>
+      {children}
+    </IconContainer>
+  </HeaderDiv>
+);
+
+Header.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  leftButton: PropTypes.element,
+  children: PropTypes.arrayOf(PropTypes.element),
+  transparent: PropTypes.bool
+};
+
+Header.defaultProps = {
+  title: null,
+  subtitle: null,
+  leftButton: null,
+  children: [],
+  transparent: false
+};
+
 export default Header;

client/modules/IDE/pages/MobileIDEView.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Link } from 'react-router';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { useState } from 'react';
@@ -30,15 +28,6 @@ import Screen from '../../../components/mobile/MobileScreen';
 import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
 
-const IconContainer = styled.div`
-  marginLeft: 2rem;
-  display: flex;
-`;
-
-const TitleContainer = styled.div`
-
-`;
-
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
 const MobileIDEView = (props) => {
@@ -55,23 +44,21 @@ const MobileIDEView = (props) => {
 
   return (
     <Screen fullscreen>
-      <Header>
+      <Header
+        title={project.name}
+        subtitle={selectedFile.name}
+        leftButton={
           <IconButton to="/mobile" aria-label="Return to original editor">
             <ExitIcon viewBox="0 0 16 16" />
           </IconButton>
-        <div style={{ marginLeft: '1rem' }}>
+        }
-          <h2>{project.name}</h2>
+      >
-          <h3>{selectedFile.name}</h3>
-        </div>
-
-        <IconContainer>
         <IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}>
           <PreferencesIcon focusable="false" aria-hidden="true" />
         </IconButton>
         <IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
           <PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
         </IconButton>
-        </IconContainer>
       </Header>
 
       <IDEWrapper>

client/modules/Mobile/MobilePreferences.jsx

@@ -1,25 +1,20 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { Link, withRouter } from 'react-router';
+import { withRouter } from 'react-router';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import * as PreferencesActions from '../IDE/actions/preferences';
 import * as IdeActions from '../IDE/actions/ide';
 
+import IconButton from '../../components/mobile/IconButton';
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
 import PreferencePicker from '../../components/mobile/PreferencePicker';
 import { ExitIcon } from '../../common/icons';
 import { remSize, prop } from '../../theme';
 
-const IconLinkWrapper = styled(Link)`
-  width: 3rem;
-  margin-right: 1.25rem;
-  margin-left: none;
-`;
-
 const Content = styled.div`
   z-index: 0;
   margin-top: ${remSize(68)};
@@ -32,7 +27,11 @@ const SettingsHeader = styled(Header)`
 
 const SectionHeader = styled.h2`
   color: ${prop('primaryTextColor')};
-  padding-top: 2rem
+  padding-top: ${remSize(32)}
+`;
+
+const SectionSubeader = styled.h3`
+  color: ${prop('primaryTextColor')};
 `;
 
 
@@ -167,15 +166,11 @@ const MobilePreferences = (props) => {
   return (
     <Screen fullscreen>
       <section>
+        <SettingsHeader transparent title="Settings">
 
-        <SettingsHeader>
+          <IconButton to="/mobile" aria-label="Return to ide view">
-          <h1>Settings</h1>
-
-          <div style={{ marginLeft: '2rem' }}>
-            <IconLinkWrapper to="/mobile" aria-label="Return to ide view">
             <ExitIcon />
-            </IconLinkWrapper>
+          </IconButton>
-          </div>
         </SettingsHeader>
         <section className="preferences">
           <Content>
@@ -186,7 +181,7 @@ const MobilePreferences = (props) => {
             { accessibilitySettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
 
             <SectionHeader>Accessible Output</SectionHeader>
-            <h3>Used with screen reader</h3>
+            <SectionSubeader>Used with screen reader</SectionSubeader>
             { outputSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
 
           </Content>

client/modules/Mobile/MobileSketchView.jsx

@@ -49,15 +49,13 @@ const MobileSketchView = (props) => {
 
   return (
     <Screen fullscreen>
-      <Header>
+      <Header
+        leftButton={
           <IconButton to="/mobile" aria-label="Return to original editor">
             <ExitIcon viewBox="0 0 16 16" />
-        </IconButton>
+          </IconButton>}
-        <div style={{ marginLeft: '1rem' }}>
+        title={projectName}
-          <h2>{projectName}</h2>
+      />
-          <h3><br /></h3>
-        </div>
-      </Header>
       <Content>
         <PreviewFrame
           htmlFile={htmlFile}