Update styles of handles and edges

packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte

@@ -5,7 +5,7 @@
     EdgeLabelRenderer,
     useSvelteFlow,
   } from "@xyflow/svelte"
-  import { Icon } from "@budibase/bbui"
+  import { Icon, ActionButton } from "@budibase/bbui"
   import { onMount } from "svelte"
 
   export let sourceX
@@ -104,6 +104,9 @@
     background: var(--background-color);
     color: var(--spectrum-global-color-gray-600);
   }
+  .edge-label :global(svg) {
+    padding: 8px;
+  }
   :global(.svelte-flow__edge:hover .svelte-flow__edge-path),
   :global(.svelte-flow__edge-path.hovered) {
     stroke: var(--spectrum-global-color-blue-400);

packages/builder/src/components/backend/RoleEditor/RoleEditor.svelte

@@ -70,6 +70,8 @@
     --handle-color: var(--spectrum-global-color-gray-600);
     --selected-color: var(--spectrum-global-color-blue-400);
   }
+
+  /* Customise svelte-flow theme */
   .flow :global(.svelte-flow) {
     /* Panel */
     --xy-background-color: var(--background-color);
@@ -87,5 +89,6 @@
     /* Edges */
     --xy-edge-stroke: var(--edge-color);
     --xy-edge-stroke-selected: var(--edge-color);
+    --xy-edge-stroke-width: 2px;
   }
 </style>

packages/builder/src/components/backend/RoleEditor/RoleNode.svelte

@@ -212,6 +212,11 @@
   .node:hover .buttons {
     display: flex;
   }
+  .node :global(.svelte-flow__handle) {
+    width: 6px;
+    height: 6px;
+    border-width: 2px;
+  }
   .node :global(.svelte-flow__handle.target) {
     background: var(--background-color);
   }