From 1c961d4b0bfcf4fdc0fedde953e408591f4992c2 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Wed, 13 Oct 2021 10:00:36 +0200
Subject: [PATCH] update connector styling

---
 packages/editor-ui/src/n8n-theme.scss     |  1 +
 packages/editor-ui/src/views/NodeView.vue | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 5540152567..a848d7b6d3 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -2,6 +2,7 @@
 
 @import "~n8n-design-system/theme/dist/index.css";
 
+
 body {
 	background-color: $--custom-node-view-background;
 }
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index f25cba8442..63cf899873 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1335,7 +1335,7 @@ export default mixins(
 				];
 
 				this.instance.importDefaults({
-					Connector: ['Flowchart', { cornerRadius: 8, stub: 60, gap: 5, alwaysRespectStubs: false}],
+					Connector: ['Bezier', { curviness: 150 }],
 					Endpoint: ['Dot', { radius: 5 }],
 					DragOptions: { cursor: 'pointer', zIndex: 5000 },
 					PaintStyle: { strokeWidth: 2, stroke: getStyleTokenValue('--color-foreground-dark') },
@@ -1362,6 +1362,16 @@ export default mixins(
 				});
 
 				this.instance.bind('connection', (info: OnConnectionBindInfo) => {
+					info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: 60, gap: 5, alwaysRespectStubs: false}]);
+					info.connection.addOverlay([
+						'Arrow',
+						{
+							location: 1,
+							width: 12,
+							foldback: 1,
+							length: 10,
+						},
+					]);
 					// @ts-ignore
 					const sourceInfo = info.sourceEndpoint.getParameters();
 					// @ts-ignore