fix colors

concrete-utopia · Feb 14, 2024 · aba8fd4 · aba8fd4
1 parent 94f0078
commit aba8fd4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/utopia-remix/app/components/projectActionContextMenu.tsx b/utopia-remix/app/components/projectActionContextMenu.tsx
@@ -7,6 +7,7 @@ import { ProjectWithoutContent } from '../types'
 import { assertNever } from '../util/assertNever'
 import { projectEditorLink } from '../util/links'
 import { contextMenuItem } from '../styles/contextMenuItem.css'
+import { colors } from '../styles/sprinkles.css'
 
 type ContextMenuEntry =
   | {
@@ -121,19 +122,25 @@ export const ProjectContextMenu = React.memo(
           <DropdownMenu.Content
             style={{
               background: 'white',
-              padding: 10,
+              padding: 4,
               boxShadow: '2px 3px 4px #dddddd',
               border: '1px solid #ccc',
               borderRadius: 4,
               display: 'flex',
               flexDirection: 'column',
               gap: 4,
+              minWidth: 100,
             }}
             sideOffset={5}
           >
             {menuEntries.map((entry, index) => {
               if (entry === 'separator') {
-                return <DropdownMenu.Separator key={`separator-${index}`} />
+                return (
+                  <DropdownMenu.Separator
+                    key={`separator-${index}`}
+                    style={{ backgroundColor: colors.separator, height: 1 }}
+                  />
+                )
               }
               return (
                 <DropdownMenu.Item

diff --git a/utopia-remix/app/styles/contextMenuItem.css.ts b/utopia-remix/app/styles/contextMenuItem.css.ts
@@ -1,5 +1,5 @@
 import { recipe } from '@vanilla-extract/recipes'
-import { sprinkles } from './sprinkles.css'
+import { colors, sprinkles } from './sprinkles.css'
 
 export const contextMenuItem = recipe({
   base: [
@@ -8,9 +8,14 @@ export const contextMenuItem = recipe({
       color: 'lightModeBlack',
     }),
     {
-      padding: '4px 4px',
-      cursor: 'default',
-      border: 'none',
+      outline: 'none',
+      padding: '6px 8px',
+      cursor: 'pointer',
+      border: 'none !important',
+      ':hover': {
+        backgroundColor: colors.primary,
+        color: 'white',
+      },
     },
   ],
 })
diff --git a/utopia-remix/app/styles/sprinkles.css.ts b/utopia-remix/app/styles/sprinkles.css.ts
@@ -1,12 +1,13 @@
 import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles'
 
-const colors = {
+export const colors = {
   black: '#000',
   white: '#fff',
   primary: '#0075F9',
   aqua: '#00E3E3',
   darkModeBlack: '#181C20',
   lightModeBlack: '#2B2B2B',
+  separator: '#dddddd',
 }
 
 const colorProperties = defineProperties({