Merge pull request #38 from Aviral09/dev

Fixes modal issue

Author: pradeeban

src/GraphArea.jsx

@@ -9,9 +9,11 @@ function Graph({
     const [instance, setInstance] = useState(null);
     const ref = useRef();
     const setContainerDim = (element) => {
-        const elToAss = element;
-        elToAss.style.width = `${graphContainerRef.current.offsetWidth - 2}px`;
-        elToAss.style.height = `${graphContainerRef.current.offsetHeight - 2}px`;
+        if (element) {
+            const elToAss = element;
+            elToAss.style.width = `${graphContainerRef.current.offsetWidth - 2}px`;
+            elToAss.style.height = `${graphContainerRef.current.offsetHeight - 2}px`;
+        }
     };
 
     const initialiseNewGraph = () => {

src/component/HeaderComps.jsx

@@ -62,8 +62,8 @@ const ActionButton = ({
         onKeyDown={(ev) => active && ev.key === ' ' && action()}
         data-tip={hotkey ? hotkey.split(',')[0] : ''}
     >
-        <div className="icon"><Icon size="25" /></div>
-        <div style={{ fontSize: 16 }}>{text}</div>
+        <div className="icon"><Icon size="20" /></div>
+        <div style={{ fontSize: 14 }}>{text}</div>
     </div>
 );
 

src/component/fileBrowser.jsx

@@ -47,7 +47,7 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
             if (valueSubDir.kind === 'file') {
                 const fileData = await valueSubDir.getFile();
                 state = state.concat([{
-                    key: `${topLevel}/${value.name}/${key}`,
+                    key: `${topKey}/${value.name}/${key}`,
                     modified: fileData.lastModified,
                     size: fileData.size,
                     fileObj: fileData,

src/component/header.css

@@ -17,14 +17,14 @@
     padding-bottom: 5px;
     display: inline-flex;
     flex-direction: column;
-    min-width: 64px;
+    min-width: 60px;
     align-items: center;
     cursor: pointer;
     justify-content: space-between;
     box-sizing: border-box;
     color: rgba(0, 0, 0, 0.3);
     transition: none;
-    height: 64px;
+    height: 60px;
 }
 
 .toolbar .tool.active {

src/component/modals/ParentModal.jsx

@@ -33,7 +33,7 @@ const Modal = ({
         <ReactModal
             isOpen={isOpen}
             contentLabel="onRequestClose Example"
-            onRequestClose={closeModal}
+            // onRequestClose={closeModal} // prevent modal from closing when clicked outside
             className="Modal"
             overlayClassName={`Overlay ${curClass}`}
         >