diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index 9a40f170..750a3afa 100644 --- a/client/components/mobile/Header.jsx +++ b/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 }) => ( - + {leftButton} {title &&

{title}

} @@ -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; diff --git a/client/modules/Mobile/MobileExamples.jsx b/client/modules/Mobile/MobileDashboard.jsx similarity index 67% rename from client/modules/Mobile/MobileExamples.jsx rename to client/modules/Mobile/MobileDashboard.jsx index 0ecbae27..c08a01ee 100644 --- a/client/modules/Mobile/MobileExamples.jsx +++ b/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: () => , + Sketches: props => , Collections: () => , Assets: () => }; -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 ( -
+
- {Panels[selected] && Panels[selected]()} + {Panels[selected] && Panels[selected]({ username })}
- - {Tabs.map(tab => ( - selectTab(tab)} - > -

{tab}

-
)) - } -
+ {!isExamples && + + {Tabs.map(tab => ( + selectTab(tab)} + > +

{(tab === 'Sketches' && username === 'p5') ? 'Examples' : tab}

+
)) + } +
+ }
); }; -export default MobileExamples; +MobileDashboard.propTypes = { username: PropTypes.string }; +MobileDashboard.defaultProps = { username: '' }; + + +export default MobileDashboard; diff --git a/client/routes.jsx b/client/routes.jsx index b3a61193..d801e838 100644 --- a/client/routes.jsx +++ b/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 => ( - + } /> );