Skip to content

Commit bd6825a

Browse files
viva-jinyiactions-userDrJKL
authored
[style] Fix missing node modal styling (#6672)
## 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>
1 parent f490b81 commit bd6825a

File tree

2 files changed

+6
-6
lines changed

2 files changed

+6
-6
lines changed

src/components/dialog/content/CloudMissingNodesContent.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
2-
<div class="flex w-[490px] flex-col">
3-
<ContentDivider :width="1" />
2+
<div
3+
class="flex w-[490px] flex-col border-t-1 border-b-1 border-border-default"
4+
>
45
<div class="flex h-full w-full flex-col gap-4 p-4">
56
<!-- Description -->
67
<div>
@@ -13,12 +14,12 @@
1314

1415
<!-- Missing Nodes List Wrapper -->
1516
<div
16-
class="flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-component-node-widget-background"
17+
class="flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-secondary-background"
1718
>
1819
<div
1920
v-for="(node, i) in uniqueNodes"
2021
:key="i"
21-
class="flex min-h-8 items-center justify-between px-4 py-2 bg-component-node-widget-background text-text-secondary"
22+
class="flex min-h-8 items-center justify-between px-4 py-2 bg-secondary-background text-muted-foreground"
2223
>
2324
<span class="text-xs">
2425
{{ node.label }}
@@ -33,14 +34,12 @@
3334
</p>
3435
</div>
3536
</div>
36-
<ContentDivider :width="1" />
3737
</div>
3838
</template>
3939

4040
<script setup lang="ts">
4141
import { computed } from 'vue'
4242
43-
import ContentDivider from '@/components/common/ContentDivider.vue'
4443
import type { MissingNodeType } from '@/types/comfy'
4544
4645
const props = defineProps<{

src/services/dialogService.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export const useDialogService = () => {
6868
dialogComponentProps: {
6969
closable: true,
7070
pt: {
71+
root: { class: 'bg-base-background border-border-default' },
7172
header: { class: '!p-0 !m-0' },
7273
content: { class: '!p-0 overflow-y-hidden' },
7374
footer: { class: '!p-0' },

0 commit comments

Comments
 (0)