Improve workflow arrows' design (#9619)

Old design:

![CleanShot_2024-11-12_at_17 37
33](https://github.com/user-attachments/assets/1fcaba6d-f23c-4679-b038-d051abeb0bbd)


New design:

![CleanShot 2025-01-14 at 18 22
10@2x](https://github.com/user-attachments/assets/a683163d-2e3c-42ed-8abd-1f1fd31bf7db)

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx

@@ -48,7 +48,7 @@ const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>`
 
   position: relative;
   box-shadow: ${({ variant, theme }) =>
-    variant === 'placeholder' ? 'none' : theme.boxShadow.superHeavy};
+    variant === 'placeholder' ? 'none' : theme.boxShadow.strong};
 
   .selectable.selected &,
   .selectable:focus &,
@@ -63,7 +63,7 @@ const StyledStepNodeLabel = styled.div<{ variant?: Variant }>`
   display: flex;
   font-size: ${({ theme }) => theme.font.size.lg};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  column-gap: ${({ theme }) => theme.spacing(3)};
+  column-gap: ${({ theme }) => theme.spacing(2)};
   color: ${({ variant, theme }) =>
     variant === 'placeholder'
       ? theme.font.color.extraLight
@@ -72,7 +72,10 @@ const StyledStepNodeLabel = styled.div<{ variant?: Variant }>`
 `;
 
 const StyledSourceHandle = styled(Handle)`
-  background-color: ${({ theme }) => theme.color.gray50};
+  background-color: ${({ theme }) => theme.grayScale.gray25};
+  border: none;
+  width: 4px;
+  height: 4px;
 `;
 
 export const StyledTargetHandle = styled(Handle)`

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx

@@ -1,6 +1,7 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
 import { WorkflowVersionStatus } from '@/workflow/types/Workflow';
+import { WorkflowDiagramCustomMarkers } from '@/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers';
 import { WorkflowVersionStatusTag } from '@/workflow/workflow-diagram/components/WorkflowVersionStatusTag';
 import { useRightDrawerState } from '@/workflow/workflow-diagram/hooks/useRightDrawerState';
 import { workflowDiagramState } from '@/workflow/workflow-diagram/states/workflowDiagramState';
@@ -46,6 +47,14 @@ const StyledResetReactflowStyles = styled.div`
     white-space: nowrap;
   }
 
+  .react-flow__handle {
+    min-height: 0;
+    min-width: 0;
+  }
+  .react-flow__handle.connectionindicator {
+    cursor: pointer;
+  }
+
   --xy-node-border-radius: none;
   --xy-node-border: none;
   --xy-node-background-color: none;
@@ -182,6 +191,8 @@ export const WorkflowDiagramCanvasBase = ({
 
   return (
     <StyledResetReactflowStyles ref={containerRef}>
+      <WorkflowDiagramCustomMarkers />
+
       <ReactFlow
         ref={(node) => {
           if (isDefined(node)) {
@@ -214,6 +225,7 @@ export const WorkflowDiagramCanvasBase = ({
         edgesFocusable={false}
         nodesDraggable={false}
         onPaneClick={closeCommandMenu}
+        nodesConnectable={false}
         paneClickDistance={10} // Fix small unwanted user dragging does not select node
       >
         <Background color={theme.border.color.medium} size={2} />

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx

@@ -2,16 +2,20 @@ import styled from '@emotion/styled';
 import { Handle, Position } from '@xyflow/react';
 import { IconButton, IconPlus } from 'twenty-ui';
 
+const StyledContainer = styled.div`
+  padding-top: ${({ theme }) => theme.spacing(1)};
+`;
+
 export const StyledTargetHandle = styled(Handle)`
   visibility: hidden;
 `;
 
 export const WorkflowDiagramCreateStepNode = () => {
   return (
-    <>
+    <StyledContainer>
       <StyledTargetHandle type="target" position={Position.Top} />
 
       <IconButton Icon={IconPlus} size="medium" />
-    </>
+    </StyledContainer>
   );
 };

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers.tsx

@@ -0,0 +1,25 @@
+import { EDGE_ROUNDED_ARROW_MARKER_ID } from '@/workflow/workflow-diagram/constants/EdgeRoundedArrowMarkerId';
+import { useTheme } from '@emotion/react';
+
+export const WorkflowDiagramCustomMarkers = () => {
+  const theme = useTheme();
+
+  return (
+    <svg style={{ position: 'absolute', top: 0, left: 0 }}>
+      <defs>
+        <marker
+          id={EDGE_ROUNDED_ARROW_MARKER_ID}
+          markerHeight={5}
+          markerWidth={6}
+          refX={3}
+          refY={2.5}
+        >
+          <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}
+          />
+        </marker>
+      </defs>
+    </svg>
+  );
+};