From bd6825a274a6ce1232a5c2d1abb78154003eda17 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Fri, 14 Nov 2025 11:11:58 +0900
Subject: [PATCH] [style] Fix missing node modal styling (#6672)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- Fix background and border colors in the missing nodes modal to use
semantic theme values
- Replace `ContentDivider` component with Tailwind border utilities for
cleaner code
- Update widget background from `bg-component-node-widget-background` to
`bg-secondary-background`
- Update text color from `text-text-secondary` to
`text-muted-foreground`
- Add root-level dialog styling to ensure proper background and border
colors

## Test plan
- [x] Open a workflow with missing nodes
- [x] Verify the missing nodes modal displays with correct background
colors
- [x] Verify border colors match the design system
- [x] Verify text is readable with proper contrast

Before
<img width="658" height="669" alt="before"
src="https://github.com/user-attachments/assets/1ad390ce-bffe-434f-90df-1b624bbb9d3b"
/>

After
<img width="749" height="647" alt="after"
src="https://github.com/user-attachments/assets/c8dccb44-99b8-4387-9e91-490769205979"
/>

🤖 Generated with [Claude Code](https://claude.com/claude-code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6672-style-Fix-missing-node-modal-styling-2aa6d73d365081aea0f5eee35bc27ea7)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
---
 .../dialog/content/CloudMissingNodesContent.vue       | 11 +++++------
 src/services/dialogService.ts                         |  1 +
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/dialog/content/CloudMissingNodesContent.vue b/src/components/dialog/content/CloudMissingNodesContent.vue
index 108bfd0e30..fc6b67c4b6 100644
--- a/src/components/dialog/content/CloudMissingNodesContent.vue
+++ b/src/components/dialog/content/CloudMissingNodesContent.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="flex w-[490px] flex-col">
-    <ContentDivider :width="1" />
+  <div
+    class="flex w-[490px] flex-col border-t-1 border-b-1 border-border-default"
+  >
     <div class="flex h-full w-full flex-col gap-4 p-4">
       <!-- Description -->
       <div>
@@ -13,12 +14,12 @@
 
       <!-- Missing Nodes List Wrapper -->
       <div
-        class="flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-component-node-widget-background"
+        class="flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-secondary-background"
       >
         <div
           v-for="(node, i) in uniqueNodes"
           :key="i"
-          class="flex min-h-8 items-center justify-between px-4 py-2 bg-component-node-widget-background text-text-secondary"
+          class="flex min-h-8 items-center justify-between px-4 py-2 bg-secondary-background text-muted-foreground"
         >
           <span class="text-xs">
             {{ node.label }}
@@ -33,14 +34,12 @@
         </p>
       </div>
     </div>
-    <ContentDivider :width="1" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import ContentDivider from '@/components/common/ContentDivider.vue'
 import type { MissingNodeType } from '@/types/comfy'
 
 const props = defineProps<{
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index c319052801..73383f476a 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -68,6 +68,7 @@ export const useDialogService = () => {
       dialogComponentProps: {
         closable: true,
         pt: {
+          root: { class: 'bg-base-background border-border-default' },
           header: { class: '!p-0 !m-0' },
           content: { class: '!p-0 overflow-y-hidden' },
           footer: { class: '!p-0' },