👌 make toast appear below header and look thinner

Author: ghalestrilo

client/components/mobile/MobileScreen.jsx

@@ -1,19 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { remSize } from '../../theme';
 
-const Screen = ({ children, fullscreen }) => (
-  <div className={fullscreen && 'fullscreen-preview'}>
+const ScreenWrapper = styled.div`
+  .toast {
+    margin-top: ${props => remSize(props.slimheader ? 49 : 68)};
+    font-size: ${remSize(12)};
+    z-index: 0.5;
+    width: 100%;
+    padding: ${remSize(8)};
+  }
+`;
+
+const Screen = ({ children, fullscreen, slimheader }) => (
+  <ScreenWrapper className={fullscreen && 'fullscreen-preview'} slimheader={slimheader}>
     {children}
-  </div>
+  </ScreenWrapper>
 );
 
 Screen.defaultProps = {
-  fullscreen: false
+  fullscreen: false,
+  slimheader: false,
 };
 
 Screen.propTypes = {
   children: PropTypes.node.isRequired,
-  fullscreen: PropTypes.bool
+  fullscreen: PropTypes.bool,
+  slimheader: PropTypes.bool
 };
 
 export default Screen;

client/modules/App/App.jsx

@@ -41,7 +41,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/IDE/pages/MobileIDEView.jsx

@@ -249,7 +249,6 @@ const MobileIDEView = (props) => {
 
   return (
     <Screen fullscreen>
-      {toast.isVisible && <Toast />}
       <Explorer />
       <Header
         title={withChangeDot(project.name, unsavedChanges)}
@@ -268,6 +267,7 @@ const MobileIDEView = (props) => {
           <IconButton to="/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
         </li>
       </Header>
+      {toast.isVisible && <Toast />}
 
       <IDEWrapper>
         <Editor provideController={setCmController} />