From 03f3ccd0603df7e9cef9518917478e6c5553ad8f Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Wed, 29 Jan 2025 18:04:32 +0100
Subject: [PATCH] Fix workflow edges color (#9917)

Fixes
https://discord.com/channels/1130383047699738754/1333831150535442462
---
 .../components/WorkflowDiagramBaseStepNode.tsx                | 1 +
 .../workflow-diagram/components/WorkflowDiagramCanvasBase.tsx | 2 ++
 .../components/WorkflowDiagramCustomMarkers.tsx               | 2 +-
 .../constants/WorkflowVisualizerEdgeDefaultConfiguration.ts   | 4 ----
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
index be2e2b956..42ed61867 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
@@ -78,6 +78,7 @@ export const StyledHandle = styled(Handle)`
 `;
 
 const StyledSourceHandle = styled(StyledHandle)`
+  background-color: ${({ theme }) => theme.border.color.strong};
   left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
 `;
 
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
index 6007f2268..4c6e70700 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
@@ -61,6 +61,8 @@ const StyledResetReactflowStyles = styled.div`
     cursor: pointer;
   }
 
+  --xy-edge-stroke: ${({ theme }) => theme.border.color.strong};
+
   --xy-node-border-radius: none;
   --xy-node-border: none;
   --xy-node-background-color: none;
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers.tsx
index 127b25c2c..8de5b08d4 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers.tsx
@@ -16,7 +16,7 @@ export const WorkflowDiagramCustomMarkers = () => {
         >
           <path
             d="M0.31094 1.1168C0.178029 0.917434 0.320947 0.650391 0.560555 0.650391H5.43945C5.67905 0.650391 5.82197 0.917434 5.68906 1.1168L3.62404 4.21433C3.32717 4.65963 2.67283 4.65963 2.37596 4.21433L0.31094 1.1168Z"
-            fill={theme.grayScale.gray25}
+            fill={theme.border.color.strong}
           />
         </marker>
       </defs>
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration.ts
index 6ab64cc44..298b2ff6b 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/WorkflowVisualizerEdgeDefaultConfiguration.ts
@@ -1,12 +1,8 @@
 import { EDGE_ROUNDED_ARROW_MARKER_ID } from '@/workflow/workflow-diagram/constants/EdgeRoundedArrowMarkerId';
 import { WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
-import { THEME_COMMON } from 'twenty-ui';
 
 export const WORKFLOW_VISUALIZER_EDGE_DEFAULT_CONFIGURATION = {
   markerEnd: EDGE_ROUNDED_ARROW_MARKER_ID,
-  style: {
-    stroke: THEME_COMMON.grayScale.gray25,
-  },
   deletable: false,
   selectable: false,
 } satisfies Partial<WorkflowDiagramEdge>;