context menu gets a recipe

concrete-utopia · Feb 16, 2024 · bd944f4 · bd944f4
1 parent 8cc99f7
commit bd944f4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 26 deletions.
diff --git a/utopia-remix/app/components/projectActionContextMenu.tsx b/utopia-remix/app/components/projectActionContextMenu.tsx
@@ -2,7 +2,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { useFetcher } from '@remix-run/react'
 import React from 'react'
 import { useProjectsStore } from '../store'
-import { contextMenuItem } from '../styles/contextMenuItem.css'
+import { contextMenuDropdown, contextMenuItem } from '../styles/contextMenu.css'
 import { colors } from '../styles/sprinkles.css'
 import { ProjectWithoutContent } from '../types'
 import { assertNever } from '../util/assertNever'
@@ -118,17 +118,8 @@ export const ProjectContextMenu = React.memo(({ project }: { project: ProjectWit
   return (
     <DropdownMenu.Portal>
       <DropdownMenu.Content
+        className={contextMenuDropdown()}
         style={{
-          background: 'white',
-          padding: 4,
-          boxShadow: '2px 3px 4px #00000030',
-          border: '1px solid #ccc',
-          borderRadius: 4,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 4,
-          minWidth: 170,
-          position: 'relative',
           right: 75,
         }}
         sideOffset={5}

diff --git a/utopia-remix/app/components/sortProjectsContextMenu.tsx b/utopia-remix/app/components/sortProjectsContextMenu.tsx
@@ -1,8 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import React from 'react'
-import { useState } from 'react'
 import { useProjectsStore } from '../store'
-import { contextMenuItem } from '../styles/contextMenuItem.css'
+import { contextMenuDropdown, contextMenuItem } from '../styles/contextMenu.css'
 import { colors } from '../styles/sprinkles.css'
 import { CheckIcon } from '@radix-ui/react-icons'
 
@@ -15,18 +14,8 @@ export const SortingContextMenu = React.memo(() => {
   return (
     <DropdownMenu.Portal>
       <DropdownMenu.Content
+        className={contextMenuDropdown()}
         style={{
-          background: 'white',
-          color: 'black',
-          padding: 4,
-          boxShadow: '2px 3px 4px #00000030',
-          border: '1px solid #ccc',
-          borderRadius: 4,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 4,
-          minWidth: 170,
-          position: 'relative',
           right: 30,
         }}
         sideOffset={5}

diff --git a/utopia-remix/app/routes/projects.tsx b/utopia-remix/app/routes/projects.tsx
@@ -340,7 +340,14 @@ const ProjectsHeader = React.memo(({ projects }: { projects: ProjectWithoutConte
         </div>
       </div>
 
-      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+      <div
+        style={{
+          display: projects.length === 0 ? 'none' : 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 10,
+        }}
+      >
         <CategoryActions projects={projects} />
         <DropdownMenu.Root>
           <DropdownMenu.Trigger asChild>
@@ -392,7 +399,7 @@ const CategoryTrashActions = React.memo(({ projects }: { projects: ProjectWithou
   return (
     <>
       <div
-        className={button({color: 'subtle'})}
+        className={button({ color: 'subtle' })}
         onClick={handleEmptyTrash}
         style={{ display: projects.length === 0 ? 'none' : 'block' }}
       >

diff --git a/...a-remix/app/styles/contextMenuItem.css.ts → utopia-remix/app/styles/contextMenu.css.ts b/...a-remix/app/styles/contextMenuItem.css.ts → utopia-remix/app/styles/contextMenu.css.ts
@@ -23,3 +23,24 @@ export const contextMenuItem = recipe({
     },
   ],
 })
+
+export const contextMenuDropdown = recipe({
+  base: [
+    sprinkles({
+      borderRadius: 'small',
+      background: 'white',
+      color: 'lightModeBlack'
+    }),
+    {
+
+      padding: 4,
+      boxShadow: '2px 3px 4px #00000030',
+      border: '1px solid #ccc',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 4,
+      minWidth: 170,
+      position: 'relative',
+    },
+  ],
+})