diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 206ffae4..8d75c04e 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -21,28 +21,39 @@ import { getHTMLFile } from '../reducers/files'; // Local Imports import Editor from '../components/Editor'; import { prop, remSize } from '../../../theme'; - +import CloseIcon from '../../../images/exit.svg'; const background = prop('Button.default.background'); const textColor = prop('primaryTextColor'); + const Header = styled.div` position: fixed; width: 100%; - background-color: ${background}; + 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: space-between; + 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; -`; -const Footer = styled.div` - width: 100%; - position: fixed; bottom: 0; - background: ${background}; - color: ${textColor}; - padding-left: ${remSize(32)}; `; const Content = styled.div` @@ -50,6 +61,14 @@ const Content = styled.div` margin-top: ${remSize(16)}; `; +const Icon = styled.a` + > svg { + fill: ${textColor}; + color: ${textColor}; + margin: 8px + } +`; + const Screen = ({ children }) => (
@@ -71,9 +90,13 @@ const IDEViewMobile = (props) => { return (
- {/*

Mobile View

*/} -

{project.name}

-

{selectedFile.name}

+
+

{project.name}

+

{selectedFile.name}

+
+ +
{/*
{ [preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning] @@ -116,7 +139,7 @@ const IDEViewMobile = (props) => { provideController={setTmController} /> -

Bottom Bar

+ ); };