diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index 35ccf538..559f2efa 100644 --- a/client/components/mobile/Header.jsx +++ b/client/components/mobile/Header.jsx @@ -11,8 +11,8 @@ const Header = styled.div` background: ${background}; color: ${textColor}; padding: ${remSize(12)}; - padding-left: ${remSize(32)}; - padding-right: ${remSize(32)}; + padding-left: ${remSize(16)}; + padding-right: ${remSize(16)}; z-index: 1; display: flex; @@ -20,6 +20,11 @@ const Header = styled.div` flex-direction: row; justify-content: flex-start; align-items: center; + + // TODO: + svg { + height: 2rem; + } `; export default Header; diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx index 1057d952..0aeed2b7 100644 --- a/client/components/mobile/IconButton.jsx +++ b/client/components/mobile/IconButton.jsx @@ -7,14 +7,14 @@ const ButtonWrapper = styled(Button)` width: 3rem; > svg { width: 100%; - height: auto; + height: 100%; } `; -const IconButton = ({ children }) => ( (); IconButton.propTypes = { diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index a16a27f1..58845f1d 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -30,10 +30,13 @@ import Screen from '../../../components/mobile/MobileScreen'; import Footer from '../../../components/mobile/Footer'; import IDEWrapper from '../../../components/mobile/IDEWrapper'; -const IconLinkWrapper = styled(Link)` - width: 3rem; - margin-right: 1.25rem; - margin-left: none; +const IconContainer = styled.div` + marginLeft: 2rem; + display: flex; +`; + +const TitleContainer = styled.div` + `; const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); @@ -53,30 +56,22 @@ const IDEViewMobile = (props) => { return (
- - - -
+ + + +

{project.name}

{selectedFile.name}

-
+ setOverlay('preferences')}> - { - // alert('starting sketch'); - startSketch(); - }} - > - - - -
+ { startSketch(); }}> + +
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 366c68bf..e48ec8b1 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import styled from 'styled-components'; import Header from '../../components/mobile/Header'; +import IconButton from '../../components/mobile/IconButton'; import PreviewFrame from '../IDE/components/PreviewFrame'; import Screen from '../../components/mobile/MobileScreen'; import * as ProjectActions from '../IDE/actions/project'; @@ -25,12 +26,6 @@ const Content = styled.div` margin-top: ${remSize(68)}; `; -const IconLinkWrapper = styled(Link)` - width: 2rem; - margin-right: 1.25rem; - margin-left: none; -`; - const MobileSketchView = (props) => { // TODO: useSelector requires react-redux ^7.1.0 // const htmlFile = useSelector(state => getHTMLFile(state.files)); @@ -55,9 +50,9 @@ const MobileSketchView = (props) => { return (
- + - +

{projectName}