fix(editor): Restore correct node icon colors in nodes panel (#23152)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Csaba Tuncsik
2025-12-19 17:57:45 +01:00
committed by GitHub
co-authored by Claude Opus 4.5
parent cec256f124
commit ed65ef9231
9 changed files with 16 additions and 11 deletions
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="none"><path fill="currentColor" d="M47.267 22.554c-.002.31-.126.608-.344.829l-6.805 6.796a1.13 1.13 0 0 1-.828.344 1.15 1.15 0 0 1-.828-.344 1.18 1.18 0 0 1 0-1.656l5.977-5.969-1.313-1.312-1.383 1.414L28.595 35.78l-4.617.781.781-4.617.336-.336 2.563 2.555c.214.227.515.351.828.343.311.006.611-.119.828-.343a1.18 1.18 0 0 0 0-1.657l-2.563-2.562 8.25-8.273 4.29-4.29 3.757 3.711 1.617-1.617 2.258 2.258c.218.218.342.512.344.82m-17.282 15.15 3.032-3.032v8.297a1.56 1.56 0 0 1-1.563 1.563H4.298a1.56 1.56 0 0 1-1.563-1.563V14.843c0-.405.157-.794.438-1.086l6.304-6.531v5.344H6.251a1.172 1.172 0 1 0 0 2.344h4.43a1.17 1.17 0 0 0 1.171-1.172V5.468h19.602a1.56 1.56 0 0 1 1.563 1.563v13.281L22.86 30.468a1.24 1.24 0 0 0-.328.633l-1.102 6.61c-.06.373.062.753.329 1.023.22.22.517.343.828.343h.195l6.602-1.101a1.16 1.16 0 0 0 .601-.274m-21-16a1.18 1.18 0 0 0 1.172 1.172h15.266a1.172 1.172 0 1 0 0-2.344H10.157a1.17 1.17 0 0 0-1.172 1.172m10.711 14.766a1.17 1.17 0 0 0-1.172-1.172h-8.367a1.172 1.172 0 1 0 0 2.343h8.367a1.17 1.17 0 0 0 1.172-1.172m.86-7.391a1.17 1.17 0 0 0-1.172-1.172h-9.227a1.172 1.172 0 1 0 0 2.344h9.227a1.164 1.164 0 0 0 1.171-1.172M45.75 18.617a1.563 1.563 0 0 0 0-2.203l-1.64-1.64a1.563 1.563 0 0 0-2.204 0l-.93.929 3.852 3.828z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M35 37c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4"/><path fill="currentColor" d="M35 43c-3 0-5.9-1.4-7.8-3.7l3.1-2.5c1.1 1.4 2.9 2.3 4.7 2.3 3.3 0 6-2.7 6-6s-2.7-6-6-6c-1 0-2 .3-2.9.7l-1.7 1L23.3 16l3.5-1.9 5.3 9.4c1-.3 2-.5 3-.5 5.5 0 10 4.5 10 10S40.5 43 35 43"/><path fill="currentColor" d="M14 43C8.5 43 4 38.5 4 33c0-4.6 3.1-8.5 7.5-9.7l1 3.9C9.9 27.9 8 30.3 8 33c0 3.3 2.7 6 6 6s6-2.7 6-6v-2h15v4H23.8c-.9 4.6-5 8-9.8 8"/><path fill="currentColor" d="M14 37c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4"/><path fill="currentColor" d="M25 19c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4"/><path fill="currentColor" d="m15.7 34-3.4-2 5.9-9.7c-2-1.9-3.2-4.5-3.2-7.3 0-5.5 4.5-10 10-10s10 4.5 10 10c0 .9-.1 1.7-.3 2.5l-3.9-1c.1-.5.2-1 .2-1.5 0-3.3-2.7-6-6-6s-6 2.7-6 6c0 2.1 1.1 4 2.9 5.1l1.7 1z"/></svg>

After

Width:  |  Height:  |  Size: 904 B

@@ -4,6 +4,7 @@ import BoltFilled from './custom/bolt-filled.svg';
import Continue from './custom/continue.svg';
import EmptyOutput from './custom/empty-output.svg';
import FilledSquare from './custom/filled-square.svg';
import Form from './custom/form.svg';
import GripLinesVertical from './custom/grip-lines-vertical.svg';
import Lovable from './custom/lovable.svg';
import Mcp from './custom/mcp.svg';
@@ -33,6 +34,7 @@ import Text from './custom/text.svg';
import Toolbox from './custom/toolbox.svg';
import Triangle from './custom/triangle.svg';
import VectorSquare from './custom/vector-square.svg';
import Webhook from './custom/webhook.svg';
import IconLucideAlignRight from '~icons/lucide/align-right';
import IconLucideArchive from '~icons/lucide/archive';
@@ -481,6 +483,8 @@ export const updatedIconSet = {
mcp: Mcp,
lovable: Lovable,
resolver: Resolver,
form: Form,
webhook: Webhook,
// lucide
'align-right': IconLucideAlignRight,
@@ -89,6 +89,9 @@ const nodeTypeName = computed(() =>
<style lang="scss" module>
.nodeIcon {
--node--icon--color: var(--canvas-node--icon-color, v-bind(iconColor));
--node--icon--color: var(
--node-creator--icon--color,
var(--canvas-node--icon-color, v-bind(iconColor))
);
}
</style>
@@ -40,6 +40,7 @@ const subcategoryName = computed(() => camelCase(props.item.subcategory || props
<style lang="scss" module>
.subCategory {
--action--arrow--color: var(--color--text--tint-1);
--node--icon--color: var(--node-creator--icon--color);
margin-left: 15px;
margin-right: 12px;
}
@@ -27,6 +27,7 @@ defineProps<Props>();
<style lang="scss" module>
.view {
--action--arrow--color: var(--color--text--tint-1);
--node--icon--color: var(--node-creator--icon--color);
margin-left: var(--spacing--sm);
margin-right: var(--spacing--xs);
}
@@ -208,7 +208,7 @@ onClickOutside(
}
.nodeCreator {
--node-creator--width: #{$node-creator-width};
--node--icon--color: var(--color--text);
--node-creator--icon--color: var(--node--icon--color--neutral);
position: fixed;
top: $header-height;
bottom: 0;
@@ -285,7 +285,7 @@ function onBackButton() {
}
.nodeIcon {
--node--icon--size: 20px;
--node--icon--color: var(--color--text);
--node-creator--icon--color: var(--node--icon--color--neutral);
margin-right: var(--spacing--sm);
}
.renderedItems {
@@ -429,10 +429,7 @@ export function TriggerView() {
name: WEBHOOK_NODE_TYPE,
displayName: i18n.baseText('nodeCreator.triggerHelperPanel.webhookTriggerDisplayName'),
description: i18n.baseText('nodeCreator.triggerHelperPanel.webhookTriggerDescription'),
iconData: {
type: 'file',
fileBuffer: '/static/webhook-icon.svg',
},
iconData: { type: 'icon', icon: 'webhook' },
},
},
{
@@ -444,10 +441,7 @@ export function TriggerView() {
name: FORM_TRIGGER_NODE_TYPE,
displayName: i18n.baseText('nodeCreator.triggerHelperPanel.formTriggerDisplayName'),
description: i18n.baseText('nodeCreator.triggerHelperPanel.formTriggerDescription'),
iconData: {
type: 'file',
fileBuffer: '/static/form-grey.svg',
},
iconData: { type: 'icon', icon: 'form' },
},
},
{