[backport cloud/1.41] fix: sync advanced inputs button color with node header (#10429)

Backport of #10427 to `cloud/1.41`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10429-backport-cloud-1-41-fix-sync-advanced-inputs-button-color-with-node-header-32d6d73d365081eea462d909ea863ea4)
by [Unito](https://www.unito.io)

Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com>

src/renderer/extensions/vueNodes/components/NodeFooter.vue

@@ -28,7 +28,7 @@
           '-z-10 bg-node-component-header-surface'
         )
       "
-      :style="{ backgroundColor: headerColor }"
+      :style="headerColorStyle"
       @click.stop="$emit('enterSubgraph')"
     >
       <div class="ml-auto flex h-full w-1/2 items-center justify-center gap-2">
@@ -73,6 +73,7 @@
           '-z-10 bg-node-component-header-surface'
         )
       "
+      :style="headerColorStyle"
       @click.stop="$emit('toggleAdvanced')"
     >
       <div class="ml-auto flex h-full w-1/2 items-center justify-center gap-2">
@@ -124,7 +125,7 @@
           '-z-10 bg-node-component-header-surface'
         )
       "
-      :style="{ backgroundColor: headerColor }"
+      :style="headerColorStyle"
       @click.stop="$emit('enterSubgraph')"
     >
       <div class="flex size-full items-center justify-center gap-2">
@@ -145,6 +146,7 @@
         '-z-10 bg-node-component-header-surface'
       )
     "
+    :style="headerColorStyle"
     @click.stop="$emit('toggleAdvanced')"
   >
     <div class="flex size-full items-center justify-center gap-2">
@@ -233,6 +235,10 @@ const getTabStyles = (isBackground = false) => {
   )
 }
 
+const headerColorStyle = computed(() =>
+  props.headerColor ? { backgroundColor: props.headerColor } : undefined
+)
+
 // Case 1 context: Split widths
 const errorTabWidth = 'w-[calc(50%+4px)]'
 const enterTabFullWidth = 'w-[calc(100%+8px)]'