Open file dialog (#170)

* add open dialog

* update the dialog

* build update

* test file open method

* reduce the scope of the warning dialog

* simplify

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs-ai",
-  "version": "1.0.0-r260",
+  "version": "1.0.0-r268",
   "main": "src/index.jsx",
   "homepage": "https://github.com/bldrs-ai/Share",
   "bugs": {

src/Components/BaseGroup.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import {makeStyles} from '@mui/styles'
 import AboutControl from './AboutControl'
-import {TooltipToggleButton} from './Buttons'
-import OpenIcon from '../assets/2D_Icons/Open.svg'
+import OpenModelControl from './OpenModelControl'
 
 
 /**
@@ -16,11 +15,7 @@ export default function BaseGroup({installPrefix, fileOpen}) {
   const classes = useStyles()
   return (
     <div className={classes.root}>
-      <TooltipToggleButton
-        title='Upload model'
-        icon={<OpenIcon/>}
-        onClick={fileOpen}
-        placement='top'/>
+      <OpenModelControl installPrefix={installPrefix} fileOpen = {fileOpen}/>
       <AboutControl installPrefix={installPrefix}/>
     </div>
   )

src/Components/OpenModelControl.jsx

@@ -0,0 +1,95 @@
+import React, {useState} from 'react'
+import {makeStyles} from '@mui/styles'
+import Dialog from './Dialog'
+import OpenIcon from '../assets/2D_Icons/Open.svg'
+import LocalFileOpen from '../assets/2D_Icons/LocalFileOpen.svg'
+import {ControlButton} from './Buttons'
+
+
+/**
+ * Displays open warning.
+ * @return {Object} React component
+ */
+export default function OpenModelControl({fileOpen}) {
+  const [isDialogDisplayed, setIsDialogDisplayed] = useState(false)
+  return (
+    <ControlButton
+      title='Shortcut keys'
+      isDialogDisplayed={isDialogDisplayed}
+      setIsDialogDisplayed={setIsDialogDisplayed}
+      icon={<OpenIcon/>}
+      dialog={
+        <OpenModelDialog
+          fileOpen={fileOpen}
+          isDialogDisplayed={isDialogDisplayed}
+          setIsDialogDisplayed={setIsDialogDisplayed}/>}/>)
+}
+
+
+/**
+ * @param {boolean} isDialogDisplayed
+ * @param {function} setIsDialogDisplayed
+ * @return {Object} React component
+ */
+function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen}) {
+  const classes = useStyles()
+  return (
+    <Dialog
+      icon={<OpenIcon/>}
+      headerText='Model Access'
+      isDialogDisplayed={isDialogDisplayed}
+      setIsDialogDisplayed={setIsDialogDisplayed}
+      content={
+        <div className={classes.content}>
+          {/* <LocalFileOpen/>
+          <p className={classes.bullet}>
+            To take advantage of all features of BLDRS, we recommend using GitHub for model hosting.
+            <br/>
+            For more info visit our &nbsp;
+            <a
+              className = {classes.link}
+              target="_blank"
+              href = 'https://github.com/bldrs-ai/Share/wiki/GitHub-model-hosting'
+              rel="noreferrer">wiki</a>
+            <br/>
+            <b>To access models hosted on GitHub, paste the model link into the search bar.</b>
+          </p> */}
+          <LocalFileOpen/>
+          <p className={classes.bullet}>
+            <b>Models accessed from local drive cannot be saved or shared.</b>
+            <br/>
+            <span
+              className = {classes.link}
+              role = 'button'
+              tabIndex={0}
+              onKeyPress = {()=>{
+                fileOpen()
+                setIsDialogDisplayed(false)
+              }}
+              onClick = {()=>{
+                fileOpen()
+                setIsDialogDisplayed(false)
+              }}> open</span>
+          </p>
+        </div>
+      }/>
+  )
+}
+
+
+const useStyles = makeStyles({
+  content: {
+    width: '270px',
+  },
+  bullet: {
+    textAlign: 'left',
+  },
+  link: {
+    color: 'blue',
+    borderBottom: '1px solid blue',
+    cursor: 'pointer',
+  },
+  openIcon: {
+    textAlign: 'center',
+  },
+})