From 51c3bf3b8f948e2b1f29f5e8e473ae02f97452b1 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 10 Jul 2023 22:54:06 -0300
Subject: [PATCH] fix dark mode for connections

---
 src/frontend/src/contexts/tabsContext.tsx                  | 5 ++---
 src/frontend/src/index.css                                 | 7 +++++--
 .../FlowPage/components/ConnectionLineComponent/index.tsx  | 3 +--
 .../src/pages/FlowPage/components/PageComponent/index.tsx  | 6 +++---
 src/frontend/tailwind.config.js                            | 1 +
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index fee9aa3df..a7ddf11f8 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/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";
     });
   };
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 5af8ff70a..007effc15 100644
--- a/src/frontend/src/index.css
+++ b/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 {
diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index bc78bc5bd..61a493613 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/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}
       />
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 23033d174..810836307 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/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
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 739308b92..0408cc053 100644
--- a/src/frontend/tailwind.config.js
+++ b/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)",