Adds menu panel

components/canvas/context-menu/context-menu.tsx

@@ -2,9 +2,15 @@ import * as _ContextMenu from '@radix-ui/react-context-menu'
 import styled from 'styles'
 import {
   IconWrapper,
-  IconButton as _IconButton,
-  RowButton,
   breakpoints,
+  RowButton,
+  ContextMenuArrow,
+  ContextMenuDivider,
+  ContextMenuButton,
+  ContextMenuSubMenu,
+  ContextMenuIconButton,
+  ContextMenuRoot,
+  MenuContent,
 } from 'components/shared'
 import { commandKey, deepCompareArrays, isMobile } from 'utils'
 import state, { useSelector } from 'state'
@@ -93,60 +99,64 @@ export default function ContextMenu({
   const hasThreeOrMore = selectedShapeIds.length > 2
 
   return (
-    <_ContextMenu.Root dir="ltr">
+    <ContextMenuRoot>
       <_ContextMenu.Trigger>{children}</_ContextMenu.Trigger>
-      <StyledContent ref={rContent} isMobile={isMobile()}>
+      <MenuContent
+        as={_ContextMenu.Content}
+        ref={rContent}
+        isMobile={isMobile()}
+      >
         {selectedShapeIds.length ? (
           <>
-            {/* <Button onSelect={() => state.send('COPIED')}>
+            {/* <ContextMenuButton onSelect={() => state.send('COPIED')}>
               <span>Copy</span>
               <kbd>
                 <span>{commandKey()}</span>
                 <span>C</span>
               </kbd>
-            </Button>
-            <Button onSelect={() => state.send('CUT')}>
+            </ContextMenuButton>
+            <ContextMenuButton onSelect={() => state.send('CUT')}>
               <span>Cut</span>
               <kbd>
                 <span>{commandKey()}</span>
                 <span>X</span>
               </kbd>
-            </Button>
+            </ContextMenuButton>
              */}
-            <Button onSelect={() => state.send('DUPLICATED')}>
+            <ContextMenuButton onSelect={() => state.send('DUPLICATED')}>
               <span>Duplicate</span>
               <kbd>
                 <span>{commandKey()}</span>
                 <span>D</span>
               </kbd>
-            </Button>
-            <StyledDivider />
+            </ContextMenuButton>
+            <ContextMenuDivider />
             {hasGroupSelected ||
               (hasTwoOrMore && (
                 <>
                   {hasGroupSelected && (
-                    <Button onSelect={() => state.send('UNGROUPED')}>
+                    <ContextMenuButton onSelect={() => state.send('UNGROUPED')}>
                       <span>Ungroup</span>
                       <kbd>
                         <span>{commandKey()}</span>
                         <span>⇧</span>
                         <span>G</span>
                       </kbd>
-                    </Button>
+                    </ContextMenuButton>
                   )}
                   {hasTwoOrMore && (
-                    <Button onSelect={() => state.send('GROUPED')}>
+                    <ContextMenuButton onSelect={() => state.send('GROUPED')}>
                       <span>Group</span>
                       <kbd>
                         <span>{commandKey()}</span>
                         <span>G</span>
                       </kbd>
-                    </Button>
+                    </ContextMenuButton>
                   )}
                 </>
               ))}
-            <SubMenu label="Move">
-              <Button
+            <ContextMenuSubMenu label="Move">
+              <ContextMenuButton
                 onSelect={() =>
                   state.send('MOVED', {
                     type: MoveType.ToFront,
@@ -159,9 +169,9 @@ export default function ContextMenu({
                   <span>⇧</span>
                   <span>]</span>
                 </kbd>
-              </Button>
+              </ContextMenuButton>
 
-              <Button
+              <ContextMenuButton
                 onSelect={() =>
                   state.send('MOVED', {
                     type: MoveType.Forward,
@@ -173,8 +183,8 @@ export default function ContextMenu({
                   <span>{commandKey()}</span>
                   <span>]</span>
                 </kbd>
-              </Button>
-              <Button
+              </ContextMenuButton>
+              <ContextMenuButton
                 onSelect={() =>
                   state.send('MOVED', {
                     type: MoveType.Backward,
@@ -186,8 +196,8 @@ export default function ContextMenu({
                   <span>{commandKey()}</span>
                   <span>[</span>
                 </kbd>
-              </Button>
-              <Button
+              </ContextMenuButton>
+              <ContextMenuButton
                 onSelect={() =>
                   state.send('MOVED', {
                     type: MoveType.ToBack,
@@ -200,8 +210,8 @@ export default function ContextMenu({
                   <span>⇧</span>
                   <span>[</span>
                 </kbd>
-              </Button>
-            </SubMenu>
+              </ContextMenuButton>
+            </ContextMenuSubMenu>
             {hasTwoOrMore && (
               <AlignDistributeSubMenu
                 hasTwoOrMore={hasTwoOrMore}
@@ -209,150 +219,43 @@ export default function ContextMenu({
               />
             )}
             <MoveToPageMenu />
-            <Button onSelect={() => state.send('COPIED_TO_SVG')}>
+            <ContextMenuButton onSelect={() => state.send('COPIED_TO_SVG')}>
               <span>Copy to SVG</span>
               <kbd>
                 <span>{commandKey()}</span>
                 <span>⇧</span>
                 <span>C</span>
               </kbd>
-            </Button>
-            <StyledDivider />
-            <Button onSelect={() => state.send('DELETED')}>
+            </ContextMenuButton>
+            <ContextMenuDivider />
+            <ContextMenuButton onSelect={() => state.send('DELETED')}>
               <span>Delete</span>
               <kbd>
                 <span>⌫</span>
               </kbd>
-            </Button>
+            </ContextMenuButton>
           </>
         ) : (
           <>
-            <Button onSelect={() => state.send('UNDO')}>
+            <ContextMenuButton onSelect={() => state.send('UNDO')}>
               <span>Undo</span>
               <kbd>
                 <span>{commandKey()}</span>
                 <span>Z</span>
               </kbd>
-            </Button>
-            <Button onSelect={() => state.send('REDO')}>
+            </ContextMenuButton>
+            <ContextMenuButton onSelect={() => state.send('REDO')}>
               <span>Redo</span>
               <kbd>
                 <span>{commandKey()}</span>
                 <span>⇧</span>
                 <span>Z</span>
               </kbd>
-            </Button>
+            </ContextMenuButton>
           </>
         )}
-      </StyledContent>
-    </_ContextMenu.Root>
-  )
-}
-
-const StyledContent = styled(_ContextMenu.Content, {
-  position: 'relative',
-  backgroundColor: '$panel',
-  borderRadius: '4px',
-  overflow: 'hidden',
-  pointerEvents: 'all',
-  userSelect: 'none',
-  zIndex: 200,
-  padding: 3,
-  boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
-  minWidth: 128,
-  font: '$ui',
-
-  '& kbd': {
-    marginLeft: '32px',
-    fontSize: '$1',
-    fontFamily: '$ui',
-    fontWeight: 400,
-  },
-
-  '& kbd > span': {
-    display: 'inline-block',
-    width: '12px',
-  },
-
-  variants: {
-    isMobile: {
-      true: {
-        '& kbd': {
-          display: 'none',
-        },
-      },
-    },
-  },
-})
-
-const StyledDivider = styled(_ContextMenu.Separator, {
-  backgroundColor: '$hover',
-  height: 1,
-  margin: '3px -3px',
-})
-
-function Button({
-  onSelect,
-  children,
-  disabled = false,
-}: {
-  onSelect: () => void
-  disabled?: boolean
-  children: React.ReactNode
-}) {
-  return (
-    <_ContextMenu.Item
-      as={RowButton}
-      disabled={disabled}
-      bp={breakpoints}
-      onSelect={onSelect}
-    >
-      {children}
-    </_ContextMenu.Item>
-  )
-}
-
-function IconButton({
-  onSelect,
-  children,
-  disabled = false,
-}: {
-  onSelect: () => void
-  disabled?: boolean
-  children: React.ReactNode
-}) {
-  return (
-    <_ContextMenu.Item
-      as={_IconButton}
-      bp={breakpoints}
-      disabled={disabled}
-      onSelect={onSelect}
-    >
-      {children}
-    </_ContextMenu.Item>
-  )
-}
-
-function SubMenu({
-  children,
-  label,
-}: {
-  label: string
-  children: React.ReactNode
-}) {
-  return (
-    <_ContextMenu.Root dir="ltr">
-      <_ContextMenu.TriggerItem as={RowButton} bp={breakpoints}>
-        <span>{label}</span>
-        <IconWrapper size="small">
-          <ChevronRightIcon />
-        </IconWrapper>
-      </_ContextMenu.TriggerItem>
-      <StyledContent sideOffset={2} alignOffset={-2} isMobile={isMobile()}>
-        {children}
-        <StyledArrow offset={13} />
-      </StyledContent>
-    </_ContextMenu.Root>
+      </MenuContent>
+    </ContextMenuRoot>
   )
 }
 
@@ -363,7 +266,7 @@ function AlignDistributeSubMenu({
   hasThreeOrMore: boolean
 }) {
   return (
-    <_ContextMenu.Root dir="ltr">
+    <ContextMenuRoot>
       <_ContextMenu.TriggerItem as={RowButton} bp={breakpoints}>
         <span>Align / Distribute</span>
         <IconWrapper size="small">
@@ -371,53 +274,54 @@ function AlignDistributeSubMenu({
         </IconWrapper>
       </_ContextMenu.TriggerItem>
       <StyledGrid
+        as={_ContextMenu.Content}
         sideOffset={2}
         alignOffset={-2}
         isMobile={isMobile()}
         selectedStyle={hasThreeOrMore ? 'threeOrMore' : 'twoOrMore'}
       >
-        <IconButton onSelect={alignLeft}>
+        <ContextMenuIconButton onSelect={alignLeft}>
           <AlignLeftIcon />
-        </IconButton>
-        <IconButton onSelect={alignCenterHorizontal}>
+        </ContextMenuIconButton>
+        <ContextMenuIconButton onSelect={alignCenterHorizontal}>
           <AlignCenterHorizontallyIcon />
-        </IconButton>
-        <IconButton onSelect={alignRight}>
+        </ContextMenuIconButton>
+        <ContextMenuIconButton onSelect={alignRight}>
           <AlignRightIcon />
-        </IconButton>
-        <IconButton onSelect={stretchHorizontally}>
+        </ContextMenuIconButton>
+        <ContextMenuIconButton onSelect={stretchHorizontally}>
           <StretchHorizontallyIcon />
-        </IconButton>
+        </ContextMenuIconButton>
         {hasThreeOrMore && (
-          <IconButton onSelect={distributeHorizontally}>
+          <ContextMenuIconButton onSelect={distributeHorizontally}>
             <SpaceEvenlyHorizontallyIcon />
-          </IconButton>
+          </ContextMenuIconButton>
         )}
 
-        <IconButton onSelect={alignTop}>
+        <ContextMenuIconButton onSelect={alignTop}>
           <AlignTopIcon />
-        </IconButton>
-        <IconButton onSelect={alignCenterVertical}>
+        </ContextMenuIconButton>
+        <ContextMenuIconButton onSelect={alignCenterVertical}>
           <AlignCenterVerticallyIcon />
-        </IconButton>
-        <IconButton onSelect={alignBottom}>
+        </ContextMenuIconButton>
+        <ContextMenuIconButton onSelect={alignBottom}>
           <AlignBottomIcon />
-        </IconButton>
-        <IconButton onSelect={stretchVertically}>
+        </ContextMenuIconButton>
+        <ContextMenuIconButton onSelect={stretchVertically}>
           <StretchVerticallyIcon />
-        </IconButton>
+        </ContextMenuIconButton>
         {hasThreeOrMore && (
-          <IconButton onSelect={distributeVertically}>
+          <ContextMenuIconButton onSelect={distributeVertically}>
             <SpaceEvenlyVerticallyIcon />
-          </IconButton>
+          </ContextMenuIconButton>
         )}
-        <StyledArrow offset={13} />
+        <ContextMenuArrow offset={13} />
       </StyledGrid>
-    </_ContextMenu.Root>
+    </ContextMenuRoot>
   )
 }
 
-const StyledGrid = styled(StyledContent, {
+const StyledGrid = styled(MenuContent, {
   display: 'grid',
   variants: {
     selectedStyle: {
@@ -444,29 +348,30 @@ function MoveToPageMenu() {
   if (sorted.length === 0) return null
 
   return (
-    <_ContextMenu.Root dir="ltr">
-      <_ContextMenu.TriggerItem as={RowButton} bp={breakpoints}>
+    <ContextMenuRoot>
+      <ContextMenuButton>
         <span>Move To Page</span>
         <IconWrapper size="small">
           <ChevronRightIcon />
         </IconWrapper>
-      </_ContextMenu.TriggerItem>
-      <StyledContent sideOffset={2} alignOffset={-2} isMobile={isMobile()}>
+      </ContextMenuButton>
+      <MenuContent
+        as={_ContextMenu.Content}
+        sideOffset={2}
+        alignOffset={-2}
+        isMobile={isMobile()}
+      >
         {sorted.map(({ id, name }) => (
-          <Button
+          <ContextMenuButton
             key={id}
             disabled={id === currentPageId}
             onSelect={() => state.send('MOVED_TO_PAGE', { id })}
           >
             <span>{name}</span>
-          </Button>
+          </ContextMenuButton>
         ))}
-        <StyledArrow offset={13} />
-      </StyledContent>
-    </_ContextMenu.Root>
+        <ContextMenuArrow offset={13} />
+      </MenuContent>
+    </ContextMenuRoot>
   )
 }
-
-const StyledArrow = styled(_ContextMenu.Arrow, {
-  fill: 'white',
-})

components/code-panel/code-editor.tsx

@@ -40,6 +40,7 @@ export default function CodeEditor({
   onKey,
 }: Props): JSX.Element {
   const { theme } = useTheme()
+
   const rEditor = useRef<IMonacoEditor>(null)
   const rMonaco = useRef<IMonaco>(null)
 

components/debug-panel/debug-panel.tsx

@@ -185,17 +185,17 @@ const StylePanelRoot = styled(Panel.Root, {
   overflow: 'hidden',
   position: 'relative',
   border: '1px solid $panel',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
+  boxShadow: '$4',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   pointerEvents: 'all',
-  padding: 2,
+  padding: '$0',
 
   '& hr': {
     marginTop: 2,
     marginBottom: 2,
-    marginLeft: '-2px',
+    marginLeft: '-$0',
     border: 'none',
     height: 1,
     backgroundColor: '$brushFill',

components/editor.tsx

@@ -1,5 +1,6 @@
 import useKeyboardEvents from 'hooks/useKeyboardEvents'
 import useLoadOnMount from 'hooks/useLoadOnMount'
+import Menu from './menu/menu'
 import Canvas from './canvas/canvas'
 import StatusBar from './status-bar'
 import ToolsPanel from './tools-panel/tools-panel'
@@ -16,9 +17,12 @@ export default function Editor({ roomId }: { roomId?: string }): JSX.Element {
 
   return (
     <Layout>
-      <DebugPanel />
-      <CodePanel />
-      <PagePanel />
+      <MenuButtons>
+        <Menu />
+        <DebugPanel />
+        <CodePanel />
+        <PagePanel />
+      </MenuButtons>
       <ControlsPanel />
       <Spacer />
       <StylePanel />
@@ -33,6 +37,11 @@ const Spacer = styled('div', {
   flexGrow: 2,
 })
 
+const MenuButtons = styled('div', {
+  display: 'flex',
+  gap: 8,
+})
+
 const Layout = styled('main', {
   position: 'fixed',
   overflow: 'hidden',

components/icons/redo.tsx

@@ -4,7 +4,7 @@ function SvgRedo(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       viewBox="0 0 15 15"
-      fill="none"
+      fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
@@ -12,13 +12,11 @@ function SvgRedo(props: React.SVGProps<SVGSVGElement>): JSX.Element {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12.5 2.495a.5.5 0 00-.5.5v2.5H9.5a.5.5 0 100 1h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5z"
-        fill="#000"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M7.697 2.049a5 5 0 104.02 6.613.5.5 0 10-.944-.332 4 4 0 11-.946-4.16l.01.01 2.32 2.18a.5.5 0 00.685-.729l-2.314-2.175A5 5 0 007.697 2.05z"
-        fill="#000"
       />
     </svg>
   )

components/icons/trash.tsx

@@ -4,7 +4,7 @@ function SvgTrash(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       viewBox="0 0 15 15"
-      fill="none"
+      fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
@@ -12,19 +12,16 @@ function SvgTrash(props: React.SVGProps<SVGSVGElement>): JSX.Element {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M2 4.656a.5.5 0 01.5-.5h9.7a.5.5 0 010 1H2.5a.5.5 0 01-.5-.5z"
-        fill="#000"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.272 3a.578.578 0 00-.578.578v.578h3.311v-.578A.578.578 0 008.428 3H6.272zm3.733 1.156v-.578A1.578 1.578 0 008.428 2H6.272a1.578 1.578 0 00-1.578 1.578v.578H3.578a.5.5 0 00-.5.5V12.2a1.578 1.578 0 001.577 1.578h5.39a1.578 1.578 0 001.577-1.578V4.656a.5.5 0 00-.5-.5h-1.117zm-5.927 1V12.2a.578.578 0 00.577.578h5.39a.578.578 0 00.577-.578V5.156H4.078z"
-        fill="#000"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.272 6.85a.5.5 0 01.5.5v3.233a.5.5 0 11-1 0V7.35a.5.5 0 01.5-.5zM8.428 6.85a.5.5 0 01.5.5v3.233a.5.5 0 11-1 0V7.35a.5.5 0 01.5-.5z"
-        fill="#000"
       />
     </svg>
   )

components/icons/undo.tsx

@@ -4,7 +4,7 @@ function SvgUndo(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       viewBox="0 0 15 15"
-      fill="none"
+      fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
@@ -12,13 +12,11 @@ function SvgUndo(props: React.SVGProps<SVGSVGElement>): JSX.Element {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M2.5 2.495a.5.5 0 01.5.5v2.5h2.5a.5.5 0 110 1h-3a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5z"
-        fill="#000"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M7.303 2.049a5 5 0 11-4.02 6.613.5.5 0 01.944-.332 4 4 0 10.946-4.16l-.01.01-2.32 2.18a.5.5 0 01-.685-.729l2.314-2.175A5 5 0 017.303 2.05z"
-        fill="#000"
       />
     </svg>
   )

components/menu/menu.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { HamburgerMenuIcon } from '@radix-ui/react-icons'
+import { Trigger, Content } from '@radix-ui/react-dropdown-menu'
+import { memo } from 'react'
+import {
+  FloatingContainer,
+  DropdownMenuRoot,
+  MenuContent,
+  IconButton,
+  breakpoints,
+  DropdownMenuButton,
+  DropdownMenuSubMenu,
+  DropdownMenuDivider,
+} from '../shared'
+import state from 'state'
+import { commandKey } from 'utils'
+
+const handleNew = () => state.send('CREATED_NEW_PROJECT')
+const handleSave = () => state.send('SAVED')
+const handleLoad = () => state.send('LOADED_FROM_FILE_STSTEM')
+const toggleDarkMode = () => state.send('TOGGLED_DARK_MODE')
+
+function Menu() {
+  return (
+    <FloatingContainer>
+      <DropdownMenuRoot>
+        <IconButton as={Trigger} bp={breakpoints}>
+          <HamburgerMenuIcon />
+        </IconButton>
+        <Content as={MenuContent} sideOffset={8}>
+          <DropdownMenuButton onSelect={handleNew}>
+            <span>New Project</span>
+            <kbd>
+              <span>{commandKey()}</span>
+              <span>N</span>
+            </kbd>
+          </DropdownMenuButton>
+          <DropdownMenuDivider />
+          <DropdownMenuButton onSelect={handleLoad}>
+            <span>Open...</span>
+            <kbd>
+              <span>{commandKey()}</span>
+              <span>L</span>
+            </kbd>
+          </DropdownMenuButton>
+          <RecentFiles />
+          <DropdownMenuDivider />
+          <DropdownMenuButton onSelect={handleSave}>
+            <span>Save</span>
+            <kbd>
+              <span>{commandKey()}</span>
+              <span>S</span>
+            </kbd>
+          </DropdownMenuButton>
+          <DropdownMenuButton onSelect={handleSave}>
+            <span>Save As...</span>
+            <kbd>
+              <span>⇧</span>
+              <span>{commandKey()}</span>
+              <span>S</span>
+            </kbd>
+          </DropdownMenuButton>
+          <DropdownMenuDivider />
+          <Preferences />
+        </Content>
+      </DropdownMenuRoot>
+    </FloatingContainer>
+  )
+}
+
+export default memo(Menu)
+
+function RecentFiles() {
+  return (
+    <DropdownMenuSubMenu label="Open Recent...">
+      <DropdownMenuButton>
+        <span>Project A</span>
+      </DropdownMenuButton>
+      <DropdownMenuButton>
+        <span>Project B</span>
+      </DropdownMenuButton>
+      <DropdownMenuButton>
+        <span>Project C</span>
+      </DropdownMenuButton>
+    </DropdownMenuSubMenu>
+  )
+}
+
+function Preferences() {
+  return (
+    <DropdownMenuSubMenu label="Preferences">
+      <DropdownMenuButton onSelect={toggleDarkMode}>
+        <span>Toggle Dark Mode</span>
+        <kbd>
+          <span>⇧</span>
+          <span>{commandKey()}</span>
+          <span>D</span>
+        </kbd>
+      </DropdownMenuButton>
+    </DropdownMenuSubMenu>
+  )
+}

components/page-panel/page-panel.tsx

@@ -106,7 +106,6 @@ export default function PagePanel(): JSX.Element {
 }
 
 const PanelRoot = styled('div', {
-  marginLeft: 8,
   zIndex: 200,
   overflow: 'hidden',
   position: 'relative',
@@ -114,11 +113,11 @@ const PanelRoot = styled('div', {
   flexDirection: 'column',
   alignItems: 'center',
   pointerEvents: 'all',
-  padding: '2px',
+  padding: '$0',
   borderRadius: '4px',
   backgroundColor: '$panel',
   border: '1px solid $panel',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
+  boxShadow: '$4',
   userSelect: 'none',
 })
 
@@ -157,11 +156,11 @@ const StyledRadioItem = styled(DropdownMenu.RadioItem, {
 })
 
 const StyledContextMenuContent = styled(ContextMenu.Content, {
-  padding: '2px',
+  padding: '$0',
   borderRadius: '4px',
   backgroundColor: '$panel',
   border: '1px solid $panel',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
+  boxShadow: '$4',
 })
 
 const StyledContextMenuItem = styled(ContextMenu.Item, {

components/panel.tsx

@@ -9,7 +9,7 @@ export const Root = styled('div', {
   userSelect: 'none',
   zIndex: 200,
   border: '1px solid $panel',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
+  boxShadow: '$4',
   font: '$ui',
 
   variants: {
@@ -27,7 +27,7 @@ export const Root = styled('div', {
     isOpen: {
       true: {},
       false: {
-        padding: 2,
+        padding: '$0',
         height: 38,
         width: 38,
       },
@@ -84,7 +84,7 @@ export const Header = styled('div', {
   width: '100%',
   alignItems: 'center',
   justifyContent: 'space-between',
-  padding: 2,
+  padding: '$0',
   position: 'relative',
 
   '& h3': {

components/shared.tsx

@@ -1,8 +1,11 @@
+import * as ContextMenu from '@radix-ui/react-context-menu'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import * as RadioGroup from '@radix-ui/react-radio-group'
 import * as Panel from './panel'
 import styled from 'styles'
 import { forwardRef } from 'react'
+import { ChevronRightIcon } from '@radix-ui/react-icons'
+import { isMobile } from 'utils'
 
 export const breakpoints: any = { '@initial': 'mobile', '@sm': 'small' }
 
@@ -146,13 +149,13 @@ export const StylePanelRoot = styled(Panel.Root, {
   overflow: 'hidden',
   position: 'relative',
   border: '1px solid $panel',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
+  boxShadow: '$4',
 
   variants: {
     isOpen: {
       true: {},
       false: {
-        padding: 2,
+        padding: '$0',
         height: 38,
         width: 38,
       },
@@ -258,7 +261,7 @@ export const DropdownContent = styled(DropdownMenu.Content, {
   backgroundColor: '$panel',
   borderRadius: 4,
   border: '1px solid $panel',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.28)',
+  boxShadow: '$4',
 
   variants: {
     direction: {
@@ -415,3 +418,256 @@ export const VerticalDivider = styled('hr', {
   border: 'none',
   backgroundColor: '$brushFill',
 })
+
+export const FloatingContainer = styled('div', {
+  backgroundColor: '$panel',
+  border: '1px solid $panel',
+  borderRadius: '4px',
+  boxShadow: '$4',
+  display: 'flex',
+  height: 'fit-content',
+  padding: '$0',
+  pointerEvents: 'all',
+  position: 'relative',
+  userSelect: 'none',
+  zIndex: 200,
+})
+
+/* -------------------------------------------------- */
+/*                        Menus                       */
+/* -------------------------------------------------- */
+
+export const MenuContent = styled('div', {
+  position: 'relative',
+  backgroundColor: '$panel',
+  borderRadius: '4px',
+  overflow: 'hidden',
+  pointerEvents: 'all',
+  userSelect: 'none',
+  zIndex: 180,
+  border: '1px solid $panel',
+  padding: '$0',
+  boxShadow: '$4',
+  minWidth: 200,
+  font: '$ui',
+
+  '& kbd': {
+    marginLeft: '32px',
+    fontSize: '$1',
+    fontFamily: '$ui',
+    fontWeight: 400,
+  },
+
+  '& kbd > span': {
+    display: 'inline-block',
+    width: '12px',
+  },
+
+  variants: {
+    isMobile: {
+      true: {
+        '& kbd': {
+          display: 'none',
+        },
+      },
+    },
+  },
+})
+
+/* -------------------------------------------------- */
+/*                    Dropdown Menu                   */
+/* -------------------------------------------------- */
+
+export function DropdownMenuRoot({
+  isOpen,
+  onOpenChange,
+  children,
+}: {
+  isOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <DropdownMenu.Root dir="ltr" open={isOpen} onOpenChange={onOpenChange}>
+      {children}
+    </DropdownMenu.Root>
+  )
+}
+
+export function DropdownMenuSubMenu({
+  children,
+  label,
+}: {
+  label: string
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <DropdownMenu.Root dir="ltr">
+      <DropdownMenu.TriggerItem as={RowButton} bp={breakpoints}>
+        <span>{label}</span>
+        <IconWrapper size="small">
+          <ChevronRightIcon />
+        </IconWrapper>
+      </DropdownMenu.TriggerItem>
+      <DropdownMenu.Content
+        as={MenuContent}
+        sideOffset={2}
+        alignOffset={-2}
+        isMobile={isMobile()}
+      >
+        {children}
+        <DropdownMenuArrow offset={13} />
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}
+
+export const DropdownMenuDivider = styled(DropdownMenu.Separator, {
+  backgroundColor: '$hover',
+  height: 1,
+  margin: '$2 -$2',
+})
+
+export const DropdownMenuArrow = styled(DropdownMenu.Arrow, {
+  fill: '$panel',
+})
+
+export function DropdownMenuButton({
+  onSelect,
+  children,
+  disabled = false,
+}: {
+  onSelect?: () => void
+  disabled?: boolean
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <DropdownMenu.Item
+      as={RowButton}
+      bp={breakpoints}
+      disabled={disabled}
+      onSelect={onSelect}
+    >
+      {children}
+    </DropdownMenu.Item>
+  )
+}
+
+export function DropdownMenuIconButton({
+  onSelect,
+  children,
+  disabled = false,
+}: {
+  onSelect: () => void
+  disabled?: boolean
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <DropdownMenu.Item
+      as={IconButton}
+      bp={breakpoints}
+      disabled={disabled}
+      onSelect={onSelect}
+    >
+      {children}
+    </DropdownMenu.Item>
+  )
+}
+
+/* -------------------------------------------------- */
+/*                    Context Menu                   */
+/* -------------------------------------------------- */
+
+export function ContextMenuRoot({
+  onOpenChange,
+  children,
+}: {
+  onOpenChange?: (isOpen: boolean) => void
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <ContextMenu.Root dir="ltr" onOpenChange={onOpenChange}>
+      {children}
+    </ContextMenu.Root>
+  )
+}
+
+export function ContextMenuSubMenu({
+  children,
+  label,
+}: {
+  label: string
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <ContextMenu.Root dir="ltr">
+      <ContextMenu.TriggerItem as={RowButton} bp={breakpoints}>
+        <span>{label}</span>
+        <IconWrapper size="small">
+          <ChevronRightIcon />
+        </IconWrapper>
+      </ContextMenu.TriggerItem>
+      <ContextMenu.Content
+        as={MenuContent}
+        sideOffset={2}
+        alignOffset={-2}
+        isMobile={isMobile()}
+      >
+        {children}
+        <ContextMenuArrow offset={13} />
+      </ContextMenu.Content>
+    </ContextMenu.Root>
+  )
+}
+
+export const ContextMenuDivider = styled(ContextMenu.Separator, {
+  backgroundColor: '$hover',
+  height: 1,
+  margin: '$2 -$2',
+})
+
+export const ContextMenuArrow = styled(ContextMenu.Arrow, {
+  fill: '$panel',
+})
+
+export function ContextMenuButton({
+  onSelect,
+  children,
+  disabled = false,
+}: {
+  onSelect?: () => void
+  disabled?: boolean
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <ContextMenu.Item
+      as={RowButton}
+      bp={breakpoints}
+      disabled={disabled}
+      onSelect={onSelect}
+    >
+      {children}
+    </ContextMenu.Item>
+  )
+}
+
+export function ContextMenuIconButton({
+  onSelect,
+  children,
+  disabled = false,
+}: {
+  onSelect: () => void
+  disabled?: boolean
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <ContextMenu.Item
+      as={IconButton}
+      bp={breakpoints}
+      disabled={disabled}
+      onSelect={onSelect}
+    >
+      {children}
+    </ContextMenu.Item>
+  )
+}

components/style-panel/style-panel.tsx

@@ -29,8 +29,6 @@ const handleStylePanelOpen = () => state.send('TOGGLED_STYLE_PANEL_OPEN')
 const handleCopy = () => state.send('COPIED')
 const handlePaste = () => state.send('PASTED')
 const handleCopyToSvg = () => state.send('COPIED_TO_SVG')
-const handleSave = () => state.send('SAVED')
-const handleLoad = () => state.send('LOADED_FROM_FILE_STSTEM')
 
 export default function StylePanel(): JSX.Element {
   const rContainer = useRef<HTMLDivElement>(null)
@@ -99,13 +97,6 @@ function SelectedShapeContent(): JSX.Element {
           <Share2Icon />
         </IconWrapper>
       </RowButton>
-      <hr />
-      <RowButton bp={breakpoints} onClick={handleSave}>
-        <span>Save</span>
-      </RowButton>
-      <RowButton bp={breakpoints} onClick={handleLoad}>
-        <span>Load</span>
-      </RowButton>
     </>
   )
 }
@@ -117,18 +108,18 @@ const StylePanelRoot = styled(motion(Panel.Root), {
   overflow: 'hidden',
   position: 'relative',
   border: '1px solid $panel',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
+  boxShadow: '$4',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   pointerEvents: 'all',
-  padding: 2,
+  padding: '$0',
   zIndex: 300,
 
   '& hr': {
     marginTop: 2,
     marginBottom: 2,
-    marginLeft: '-2px',
+    marginLeft: '-$0',
     border: 'none',
     height: 1,
     backgroundColor: '$brushFill',

components/tools-panel/shared.tsx

@@ -1,3 +1,4 @@
+import { FloatingContainer } from 'components/shared'
 import Tooltip from 'components/tooltip'
 import styled from 'styles'
 
@@ -5,6 +6,7 @@ export const ToolButton = styled('button', {
   position: 'relative',
   height: '32px',
   width: '32px',
+  color: '$text',
   backgroundColor: '$panel',
   borderRadius: '4px',
   padding: '0',
@@ -219,21 +221,8 @@ export function TertiaryButton({
   )
 }
 
-export const Container = styled('div', {
-  backgroundColor: '$panel',
-  border: '1px solid $panel',
-  borderRadius: '4px',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.16)',
-  display: 'flex',
-  height: 'fit-content',
-  padding: 2,
-  pointerEvents: 'all',
-  position: 'relative',
-  userSelect: 'none',
-  zIndex: 200,
-})
-
-export const TertiaryButtonsContainer = styled(Container, {
+export const TertiaryButtonsContainer = styled(FloatingContainer, {
+  boxShadow: '$3',
   variants: {
     bp: {
       mobile: {

components/tools-panel/tools-panel.tsx

@@ -8,7 +8,8 @@ import {
   SquareIcon,
   TextIcon,
 } from '@radix-ui/react-icons'
-import { PrimaryButton, SecondaryButton, Container } from './shared'
+import { PrimaryButton, SecondaryButton } from './shared'
+import { FloatingContainer } from '../shared'
 import React from 'react'
 import state, { useSelector } from 'state'
 import styled from 'styles'
@@ -33,7 +34,7 @@ export default function ToolsPanel(): JSX.Element {
     <ToolsPanelContainer>
       <LeftWrap size={{ '@initial': 'mobile', '@sm': 'small' }}>
         <Zoom />
-        <Container>
+        <FloatingContainer>
           <SecondaryButton
             label={'Select'}
             onClick={selectSelectTool}
@@ -41,10 +42,10 @@ export default function ToolsPanel(): JSX.Element {
           >
             <CursorArrowIcon />
           </SecondaryButton>
-        </Container>
+        </FloatingContainer>
       </LeftWrap>
       <CenterWrap>
-        <Container>
+        <FloatingContainer>
           <PrimaryButton
             label={ShapeType.Draw}
             onClick={selectDrawTool}
@@ -80,10 +81,10 @@ export default function ToolsPanel(): JSX.Element {
           >
             <TextIcon />
           </PrimaryButton>
-        </Container>
+        </FloatingContainer>
       </CenterWrap>
       <RightWrap size={{ '@initial': 'mobile', '@sm': 'small' }}>
-        <Container>
+        <FloatingContainer>
           <SecondaryButton
             label={'Lock Tool'}
             onClick={toggleToolLock}
@@ -91,7 +92,7 @@ export default function ToolsPanel(): JSX.Element {
           >
             {isToolLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
           </SecondaryButton>
-        </Container>
+        </FloatingContainer>
         <UndoRedo />
       </RightWrap>
     </ToolsPanelContainer>

pages/sponsorware.tsx

@@ -80,7 +80,7 @@ const Content = styled('div', {
   backgroundColor: '$panel',
   margin: '32px auto',
   borderRadius: '0px',
-  boxShadow: '0px 2px 24px rgba(0,0,0,.08), 0px 2px 4px rgba(0,0,0,.16)',
+  boxShadow: '$12',
   padding: '16px',
   overflow: 'hidden',
   color: '$text',
@@ -154,7 +154,7 @@ const Button = styled('button', {
         fontWeight: 'bold',
         background: '$bounds',
         color: '$panel',
-        boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
+        boxShadow: '$4',
       },
       secondary: {
         border: '1px solid $overlay',

state/state.ts

@@ -203,6 +203,9 @@ const state = createState({
           unlessAny: ['isReadOnly', 'isInSession'],
           do: 'pasteShapesFromClipboard',
         },
+        TOGGLED_DARK_MODE: {
+          do: 'toggleDarkMode',
+        },
         TOGGLED_SHAPE_LOCK: {
           unlessAny: ['isReadOnly', 'isInSession'],
           if: 'hasSelection',
@@ -1263,6 +1266,7 @@ const state = createState({
     copyDebugLog() {
       logger.copyToJson()
     },
+
     // Networked Room
     addRtShape(data, payload: { pageId: string; shape: Shape }) {
       const { pageId, shape } = payload
@@ -1962,6 +1966,12 @@ const state = createState({
       history.reset()
     },
 
+    /* ------------------- Preferences ------------------ */
+
+    toggleDarkMode(data) {
+      data.settings.isDarkMode = !data.settings.isDarkMode
+    },
+
     /* --------------------- Styles --------------------- */
 
     toggleStylePanel(data) {

styles/stitches.config.ts

@@ -26,7 +26,20 @@ const { styled, global, css, theme, getCssString } = createCss({
       inputBorder: '#ddd',
       lineError: 'rgba(255, 0, 0, .1)',
     },
-    space: {},
+    shadows: {
+      2: '0px 1px 1px rgba(0, 0, 0, 0.14)',
+      3: '0px 2px 3px rgba(0, 0, 0, 0.14)',
+      4: '0px 4px 5px -1px rgba(0, 0, 0, 0.14)',
+      8: '0px 12px 17px rgba(0, 0, 0, 0.14)',
+      12: '0px 12px 17px rgba(0, 0, 0, 0.14)',
+      24: '0px 24px 38px rgba(0, 0, 0, 0.14)',
+    },
+    space: {
+      0: '2px',
+      1: '3px',
+      2: '4px',
+      3: '8px',
+    },
     fontSizes: {
       0: '10px',
       1: '12px',
@@ -43,10 +56,15 @@ const { styled, global, css, theme, getCssString } = createCss({
     lineHeights: {},
     letterSpacings: {},
     sizes: {},
-    borderWidths: {},
+    borderWidths: {
+      0: '$1',
+    },
     borderStyles: {},
-    radii: {},
-    shadows: {},
+    radii: {
+      0: '2px',
+      1: '4px',
+      2: '8px',
+    },
     zIndices: {},
     transitions: {},
   },
@@ -76,7 +94,29 @@ const { styled, global, css, theme, getCssString } = createCss({
 
 const light = theme({})
 
-const dark = theme({})
+const dark = theme({
+  colors: {
+    codeHl: 'rgba(144, 144, 144, .15)',
+    brushFill: 'rgba(0,0,0,.05)',
+    brushStroke: 'rgba(0,0,0,.25)',
+    hint: 'rgba(216, 226, 249, 1.000)',
+    selected: 'rgba(66, 133, 244, 1.000)',
+    bounds: 'rgba(65, 132, 244, 1.000)',
+    boundsBg: 'rgba(65, 132, 244, 0.05)',
+    highlight: 'rgba(65, 132, 244, 0.15)',
+    overlay: 'rgba(0, 0, 0, 0.15)',
+    border: '#aaa',
+    canvas: '#fafafa',
+    panel: '#fefefe',
+    inactive: '#cccccf',
+    hover: '#efefef',
+    text: '#333',
+    muted: '#777',
+    input: '#f3f3f3',
+    inputBorder: '#ddd',
+    lineError: 'rgba(255, 0, 0, .1)',
+  },
+})
 
 const globalStyles = global({
   '*': { boxSizing: 'border-box' },