✨ load examples on MobileDashboard

client/components/mobile/Header.jsx

@@ -18,7 +18,7 @@ const HeaderDiv = styled.div`
   width: 100%;
   background: ${props => background(props)};
   color: ${textColor};
-  padding: ${remSize(12)};
+  padding: ${props => remSize(props.slim === true ? 2 : 12)};
   padding-left: ${remSize(16)};
   padding-right: ${remSize(16)};
   z-index: 1;
@@ -31,8 +31,10 @@ const HeaderDiv = styled.div`
 
   svg {
     max-height: ${remSize(32)};
-    padding: ${remSize(4)}
+    padding: ${remSize(4)};
   }
+
+  & svg path { fill: ${textColor} !important; }
 `;
 
 const IconContainer = styled.div`
@@ -52,9 +54,10 @@ const TitleContainer = styled.div`
 `;
 
 const Header = ({
-  title, subtitle, leftButton, children, transparent, inverted
+  title, subtitle, leftButton, children,
+  transparent, inverted, slim
 }) => (
-  <HeaderDiv transparent={transparent} inverted={inverted}>
+  <HeaderDiv transparent={transparent} slim={slim} inverted={inverted}>
     {leftButton}
     <TitleContainer padded={subtitle === null}>
       {title && <h2>{title}</h2>}
@@ -72,7 +75,8 @@ Header.propTypes = {
   leftButton: PropTypes.element,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
   transparent: PropTypes.bool,
-  inverted: PropTypes.bool
+  inverted: PropTypes.bool,
+  slim: PropTypes.bool,
 };
 
 Header.defaultProps = {
@@ -81,7 +85,8 @@ Header.defaultProps = {
   leftButton: null,
   children: [],
   transparent: false,
-  inverted: false
+  inverted: false,
+  slim: false
 };
 
 export default Header;

client/modules/Mobile/MobileDashboard.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { bindActionCreators } from 'redux';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
@@ -37,41 +37,50 @@ const FooterTabContainer = styled.div`
 // }
 
 const Panels = {
-  Sketches: () => <SketchList />,
+  Sketches: props => <SketchList {...props} />,
   Collections: () => <CollectionList />,
   Assets: () => <AssetList />
 };
 
-const MobileExamples = () => {
+const MobileDashboard = ({ username }) => {
   // const tabs = ['Sketches', 'Collections', 'Assets'];
   const Tabs = Object.keys(Panels);
   const [selected, selectTab] = useState(Tabs[0]);
+
+  const isExamples = username === 'p5';
+
   return (
     <Screen fullscreen>
-      <Header inverted title="My Stuff">
+      <Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
         <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
 
 
       <Content>
-        {Panels[selected] && Panels[selected]()}
+        {Panels[selected] && Panels[selected]({ username })}
       </Content>
 
 
       <Footer>
-        <FooterTabContainer>
+        {!isExamples &&
-          {Tabs.map(tab => (
+          <FooterTabContainer>
-            <FooterTab
+            {Tabs.map(tab => (
-              key={`tab-${tab}`}
+              <FooterTab
-              selected={tab === selected}
+                key={`tab-${tab}`}
-              onClick={() => selectTab(tab)}
+                selected={tab === selected}
-            >
+                onClick={() => selectTab(tab)}
-              <h3>{tab}</h3>
+              >
-            </FooterTab>))
+                <h3>{(tab === 'Sketches' && username === 'p5') ? 'Examples' : tab}</h3>
-          }
+              </FooterTab>))
-        </FooterTabContainer>
+            }
+          </FooterTabContainer>
+        }
       </Footer>
     </Screen>);
 };
 
-export default MobileExamples;
+MobileDashboard.propTypes = { username: PropTypes.string };
+MobileDashboard.defaultProps = { username: '' };
+
+
+export default MobileDashboard;

client/routes.jsx

@@ -15,10 +15,10 @@ import AccountView from './modules/User/pages/AccountView';
 import CollectionView from './modules/User/pages/CollectionView';
 import DashboardView from './modules/User/pages/DashboardView';
 import createRedirectWithUsername from './components/createRedirectWithUsername';
+import MobileDashboard from './modules/Mobile/MobileDashboard';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
-import MobileExamples from './modules/Mobile/MobileExamples';
 
 const checkAuth = (store) => {
   store.dispatch(getUser());
@@ -61,7 +61,7 @@ const routes = store => (
     <Route path="/mobile" component={MobileIDEView} />
     <Route path="/mobile/preview" component={MobileSketchView} />
     <Route path="/mobile/preferences" component={MobilePreferences} />
-    <Route path="/mobile/examples" component={MobileExamples} />
+    <Route path="/mobile/examples" component={() => <MobileDashboard username="p5" />} />
   </Route>
 );