🚧 add background overlay to modals

client/components/useAsModal.jsx

@@ -1,11 +1,24 @@
 import React from 'react';
+import styled from 'styled-components';
 import { useModalBehavior } from '../utils/custom-hooks';
 
+const BackgroundOverlay = styled.div`
+  position: absolute;
+  z-index: 2;
+  width: 100% !important;
+  height: 100% !important;
   
-export default (component) => {
-  const [visible, trigger, setRef] = useModalBehavior();
+  background: black;
+  opacity: 0.3;
+`;
 
-  const wrapper = () => <div ref={setRef}> {visible && component} </div>; // eslint-disable-line
+export default (component, hasOverlay = false) => {
+  const [visible, toggle, setRef] = useModalBehavior();
 
-  return [trigger, wrapper];
+  const wrapper = () => (<div>
+    {hasOverlay && visible && <BackgroundOverlay />}
+    <div ref={setRef}> {visible && component} </div>
+  </div>); // eslint-disable-line
+
+  return [toggle, wrapper];
 };

client/modules/IDE/pages/MobileIDEView.jsx

@@ -99,7 +99,7 @@ const MobileIDEView = (props) => {
   const [toggleExplorer, Explorer] = useAsModal(<Sidebar
     title="hahaha"
     onPressClose={() => {}}
-  />);
+  />, true);
 
   // toggle sidebar starting opened
   useEffect(toggleExplorer, []);