Merge branch 'form_io' of github.com:logspace-ai/langflow into form_io

src/frontend/src/contexts/tabsContext.tsx

@@ -539,11 +539,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   const updateEdges = (edges) => {
     edges.forEach((edge) => {
-      edge.style = { stroke: "inherit" };
       edge.className =
-        edge.targetHandle.split("|")[0] === "Text"
+        (edge.targetHandle.split("|")[0] === "Text"
           ? "stroke-gray-800 "
-          : "stroke-gray-900 ";
+          : "stroke-gray-900 ") + " stroke-connection";
       edge.animated = edge.targetHandle.split("|")[0] === "Text";
     });
   };

src/frontend/src/index.css

@@ -27,8 +27,7 @@
   --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
   --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
   --radius: 0.5rem;
-  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-  
+  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */  
   --round-btn-shadow: #00000063;
   
   --error-background: #fef2f2;
@@ -55,6 +54,8 @@
   --status-yellow: #eab308;
   --status-green: #4ade80;
   --status-blue:#2563eb;
+  --connection: #555;
+
 }
 
 .dark {
@@ -113,6 +114,8 @@
   --status-yellow: #eab308;
   --status-green: #4ade80;
   --status-blue: #2563eb;
+  --connection: #555;
+
 }}
 
 @layer base {

src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx

@@ -12,9 +12,8 @@ const ConnectionLineComponent = ({
       <path
         fill="none"
         // ! Replace hash # colors here
-        stroke="#222"
         strokeWidth={1.5}
-        className="animated "
+        className="animated stroke-connection "
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
         style={connectionLineStyle}
       />

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -184,11 +184,11 @@ export default function Page({ flow }: { flow: FlowType }) {
         addEdge(
           {
             ...params,
-            style: { stroke: "inherit" },
+            style: { stroke: "#555" },
             className:
-              params.targetHandle.split("|")[0] === "Text"
+              (params.targetHandle.split("|")[0] === "Text"
                 ? "stroke-foreground "
-                : "stroke-foreground ",
+                : "stroke-foreground ") + " stroke-connection",
             animated: params.targetHandle.split("|")[0] === "Text",
           },
           eds

src/frontend/tailwind.config.js

@@ -43,6 +43,7 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
       colors: {
+        connection: "var(--connection)",
         "almost-dark-gray": "var(--almost-dark-gray)",
         "almost-light-blue": "var(--almost-light-blue)",
         "almost-medium-blue": "var(--almost-medium-blue)",