Merge branch 'main' into export

Author: Shreyanshi210205

client/package-lock.json

@@ -25,7 +25,8 @@
     "socket.io-client": "^4.8.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.14"
+    "tailwindcss": "^4.1.14",
+    "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

client/package.json

@@ -729,4 +729,4 @@ export const Canvas = () => {
       </div>
     </div>
   );
-};
+};

client/src/components/Canvas.jsx

@@ -21,12 +21,32 @@ export const DropdownMenu = ({ trigger, children }) => {
     };
   }, [isOpen]);
 
+  // Wrap children to automatically close on click
+  const enhancedChildren = 
+    children && 
+    Array.isArray(children)
+      ? children.map((child) =>
+          child.props && child.props.onClick
+            ? {
+                ...child,
+                props: {
+                  ...child.props,
+                  onClick: (e) => {
+                    child.props.onClick(e);
+                    setIsOpen(false); // close dropdown
+                  },
+                },
+              }
+            : child
+        )
+      : children;
+
   return (
     <div className="relative" ref={dropdownRef}>
       <div onClick={() => setIsOpen(!isOpen)}>{trigger}</div>
       {isOpen && (
         <div className="absolute top-full mt-2 right-0 bg-white border border-toolbar-border rounded-lg shadow-xl backdrop-blur-sm min-w-[160px] z-50 overflow-hidden">
-          {children}
+          {enhancedChildren}
         </div>
       )}
     </div>
@@ -38,11 +58,19 @@ export const DropdownMenuItem = ({ onClick, children, className }) => {
     <button
       onClick={onClick}
       className={cn(
-        "w-full px-4 py-2 text-left text-sm hover:bg-secondary transition-colors duration-150 flex items-center gap-2",
+        "w-full px-4 py-2 text-left text-sm flex items-center gap-2 rounded-md transition-all duration-150",
+        "hover:bg-secondary/20 hover:scale-105",
+        "focus:outline-none focus:bg-secondary/30",
         className
       )}
     >
-      {children}
+      {/* If there is an SVG (stroke preview), change stroke color on hover */}
+      {children && (
+        <div className="flex items-center gap-2 group">
+          {children}
+        </div>
+      )}
     </button>
   );
 };
+