merge logic

1 files changed, 19 insertions, 3 deletions

diff --git a/frontend/src/components/ContextMenu.tsx b/frontend/src/components/ContextMenu.tsx
index 459641b..8104f8c 100644
--- a/frontend/src/components/ContextMenu.tsx
+++ b/frontend/src/components/ContextMenu.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import useFlowStore from '../store/flowStore';
 
 interface ContextMenuProps {
   x: number;
@@ -8,16 +9,31 @@ interface ContextMenuProps {
 }
 
 export const ContextMenu: React.FC<ContextMenuProps> = ({ x, y, items, onClose }) => {
+  const { theme } = useFlowStore();
+  const isDark = theme === 'dark';
+
   return (
     <div 
-      className="fixed z-50 bg-white border border-gray-200 shadow-lg rounded-md py-1 min-w-[150px]"
+      className={`fixed z-50 shadow-lg rounded-md py-1 min-w-[150px] ${
+        isDark 
+          ? 'bg-gray-800 border border-gray-600' 
+          : 'bg-white border border-gray-200'
+      }`}
       style={{ top: y, left: x }}
-      onClick={(e) => e.stopPropagation()} // Prevent click through
+      onClick={(e) => e.stopPropagation()}
     >
       {items.map((item, idx) => (
         <button
           key={idx}
-          className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 ${item.danger ? 'text-red-600 hover:bg-red-50' : 'text-gray-700'}`}
+          className={`w-full text-left px-4 py-2 text-sm transition-colors ${
+            item.danger 
+              ? isDark 
+                ? 'text-red-400 hover:bg-red-900/50' 
+                : 'text-red-600 hover:bg-red-50'
+              : isDark 
+                ? 'text-gray-200 hover:bg-gray-700' 
+                : 'text-gray-700 hover:bg-gray-100'
+          }`}
           onClick={() => {
             item.onClick();
             onClose();