app/web/src/components/EditorMenu/AllShortcutsModal.tsx

@@ -1,5 +1,5 @@
 import { Menu } from '@headlessui/react'
-import { useEffect, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { makeStyles } from '@material-ui/core/styles'
 import Dialog from '@material-ui/core/Dialog'
@@ -14,19 +14,37 @@ const useStyles = makeStyles({
   },
 })
 
+interface ShortcutsModalContextType {
+  open: boolean
+  toggleOpen: () => any
+}
+
+export const ShortcutsModalContext = createContext<ShortcutsModalContextType>({
+  open: false,
+  toggleOpen: () => {},
+})
+
+export function useShortcutsModalContext() {
+  return useContext(ShortcutsModalContext)
+}
+
 const AllShortcutsModal = () => {
   const classes = useStyles()
-  const [open, setOpen] = useState(false)
-  useHotkeys(SHORTCUT, () => setOpen(!open), [open])
+  const { open, toggleOpen } = useShortcutsModalContext()
 
   return (
     <>
       <Dialog
         open={open}
-        onClose={() => setOpen(false)}
-        className={classes.root}
+        onClose={() => toggleOpen()}
+        className={classes.root + ' bg-transparent'}
+        PaperProps={{
+          style: {
+            backgroundColor: 'transparent',
+          },
+        }}
       >
-        <div className="bg-ch-gray-700 font-fira-sans max-w-7xl rounded shadow-lg text-ch-gray-300 p-4">
+        <div className="bg-ch-gray-700 font-fira-sans shadow-lg text-ch-gray-300 p-4">
           <h2 className="text-2xl mb-4">All Shortcuts</h2>
           {editorMenuConfig
             .filter((menu) => menu.items.length)
@@ -35,7 +53,7 @@ const AllShortcutsModal = () => {
                 <h3 className="text-xl border-b-2 pb-2 mb-2">{menu.label}</h3>
                 {menu.items.map((item) => (
                   <div
-                    className="flex gap-8 justify-between"
+                    className="flex gap-16 justify-between"
                     key={'allshortcuts-' + menu.name + '-' + item.label}
                   >
                     <p>{item.label}</p>

app/web/src/components/EditorMenu/menuConfig.tsx

@@ -3,6 +3,7 @@ import { useRender } from 'src/components/IdeWrapper/useRender'
 import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 import { DropdownItem } from './Dropdowns'
+import { useShortcutsModalContext } from './AllShortcutsModal'
 
 export function cmdOrCtrl() {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl'
@@ -83,8 +84,8 @@ const viewMenuConfig = {
       shortcutLabel: 'Ctrl Shift /',
       component: (props) => {
         const { config } = props
-        const [open, setOpen] = useShortcutModalContext()
-        config.callback = () => setOpen(true)
+        const { toggleOpen } = useShortcutsModalContext()
+        config.callback = toggleOpen
         return <DropdownItem {...props} />
       },
     },

app/web/src/components/IdeWrapper/IdeWrapper.tsx

@@ -8,6 +8,7 @@ import Svg from 'src/components/Svg/Svg'
 import { useIdeInit } from 'src/components/EncodedUrl/helpers'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
+import { ShortcutsModalContext } from 'src/components/EditorMenu/AllShortcutsModal'
 
 interface Props {
   cadPackage: string
@@ -22,18 +23,25 @@ const IdeWrapper = ({ cadPackage }: Props) => {
     saveCode({ code: state.code })
   }
   useIdeInit(cadPackage, project?.code || state?.code)
+  const [shortcutModalOpen, setShortcutModalOpen] = useState(false)
+  const shortcutModalContextValues = {
+    open: shortcutModalOpen,
+    toggleOpen: () => setShortcutModalOpen(!shortcutModalOpen),
+  }
 
   return (
     <div className="h-full flex">
-      <div className="w-16 bg-ch-gray-700 flex-shrink-0">
-        <IdeSideBar />
-      </div>
-      <div className="h-full flex flex-grow flex-col">
-        <nav className="flex">
-          <IdeHeader handleRender={onRender} />
-        </nav>
-        <IdeContainer />
-      </div>
+      <ShortcutsModalContext.Provider value={shortcutModalContextValues}>
+        <div className="w-16 bg-ch-gray-700 flex-shrink-0">
+          <IdeSideBar />
+        </div>
+        <div className="h-full flex flex-grow flex-col">
+          <nav className="flex">
+            <IdeHeader handleRender={onRender} />
+          </nav>
+          <IdeContainer />
+        </div>
+      </ShortcutsModalContext.Provider>
     </div>
   )
 }