diff --git a/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte b/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte index b4076e2281..243e4b988b 100644 --- a/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte +++ b/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); diff --git a/packages/builder/src/components/backend/RoleEditor/RoleEditor.svelte b/packages/builder/src/components/backend/RoleEditor/RoleEditor.svelte index d24810f468..e64ac7d935 100644 --- a/packages/builder/src/components/backend/RoleEditor/RoleEditor.svelte +++ b/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; } diff --git a/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte b/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte index 2614d609f6..97ded3c2ea 100644 --- a/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte +++ b/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); }