feat: update FlowgramNodeRenderer port colors and add hover effects for improved interactivity

web/app/dashboard/ai-workflows/_components/flowgram-node-renderer.tsx

@@ -29,9 +29,10 @@ export function FlowgramNodeRenderer(props: WorkflowNodeProps) {
         selected ? "border-(--g-selection-background)" : "border-transparent"
       )}
       style={{ padding: 0 }}
-      portPrimaryColor="var(--g-selection-background)"
+      portClassName="workflow-node-port"
+      portPrimaryColor="#2575FC"
       portSecondaryColor="#c9cdd4"
-      portBackgroundColor="hsl(var(--background))"
+      portBackgroundColor="#FFFFFF"
     >
       {form?.render()}
     </WorkflowNodeRenderer>

web/app/globals.css

@@ -366,3 +366,15 @@
     @apply font-sans;
   }
 }
+
+.workflow-node-port:hover .bg:not(.hasError),
+.workflow-node-port.hovered .bg:not(.hasError) {
+  cursor: crosshair;
+  transform: scale(1, 1) !important;
+  background: #2575fc !important;
+}
+
+.workflow-node-port:hover .bg > .symbol,
+.workflow-node-port.hovered .bg > .symbol {
+  opacity: 1 !important;
+}