diff --git a/src/renderer/extensions/minimap/composables/useMinimapSettings.ts b/src/renderer/extensions/minimap/composables/useMinimapSettings.ts
index cb5db2aa7..4b85be000 100644
--- a/src/renderer/extensions/minimap/composables/useMinimapSettings.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimapSettings.ts
@@ -25,7 +25,7 @@ export function useMinimapSettings() {
settingStore.get('Comfy.Minimap.RenderErrorState')
)
- const width = 250
+ const width = 253
const height = 200
// Theme-aware colors
@@ -36,16 +36,14 @@ export function useMinimapSettings() {
const containerStyles = computed(() => ({
width: `${width}px`,
height: `${height}px`,
- backgroundColor: isLightTheme.value ? '#FAF9F5' : '#15161C',
- border: `1px solid ${isLightTheme.value ? '#ccc' : '#333'}`,
+ border: '1px solid var(--interface-stroke)',
borderRadius: '8px'
}))
const panelStyles = computed(() => ({
width: `210px`,
height: `${height}px`,
- backgroundColor: isLightTheme.value ? '#FAF9F5' : '#15161C',
- border: `1px solid ${isLightTheme.value ? '#ccc' : '#333'}`,
+ border: '1px solid var(--interface-stroke)',
borderRadius: '8px'
}))
diff --git a/tests-ui/tests/components/graph/ZoomControlsModal.test.ts b/tests-ui/tests/components/graph/ZoomControlsModal.test.ts
index adc71d018..65abf52b7 100644
--- a/tests-ui/tests/components/graph/ZoomControlsModal.test.ts
+++ b/tests-ui/tests/components/graph/ZoomControlsModal.test.ts
@@ -76,7 +76,7 @@ describe('ZoomControlsModal', () => {
it('should execute zoom in command when zoom in button is clicked', async () => {
const wrapper = createWrapper()
- const buttons = wrapper.findAll('button')
+ const buttons = wrapper.findAll('.cursor-pointer')
const zoomInButton = buttons.find((btn) =>
btn.text().includes('graphCanvasMenu.zoomIn')
)
@@ -90,7 +90,7 @@ describe('ZoomControlsModal', () => {
it('should execute zoom out command when zoom out button is clicked', async () => {
const wrapper = createWrapper()
- const buttons = wrapper.findAll('button')
+ const buttons = wrapper.findAll('.cursor-pointer')
const zoomOutButton = buttons.find((btn) =>
btn.text().includes('graphCanvasMenu.zoomOut')
)
@@ -104,7 +104,7 @@ describe('ZoomControlsModal', () => {
it('should execute fit view command when fit view button is clicked', async () => {
const wrapper = createWrapper()
- const buttons = wrapper.findAll('button')
+ const buttons = wrapper.findAll('.cursor-pointer')
const fitViewButton = buttons.find((btn) =>
btn.text().includes('zoomControls.zoomToFit')
)
@@ -115,34 +115,6 @@ describe('ZoomControlsModal', () => {
expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.FitView')
})
- it('should emit close when minimap toggle button is clicked', async () => {
- const wrapper = createWrapper()
-
- const minimapButton = wrapper.find('[data-testid="toggle-minimap-button"]')
- expect(minimapButton.exists()).toBe(true)
-
- await minimapButton.trigger('click')
-
- expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.ToggleMinimap')
- expect(wrapper.emitted('close')).toBeTruthy()
- expect(wrapper.emitted('close')).toHaveLength(1)
- })
-
- it('should not emit close when other command buttons are clicked', async () => {
- const wrapper = createWrapper()
-
- const buttons = wrapper.findAll('button')
- const fitViewButton = buttons.find((btn) =>
- btn.text().includes('zoomControls.zoomToFit')
- )
-
- expect(fitViewButton).toBeDefined()
- await fitViewButton!.trigger('click')
-
- expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.FitView')
- expect(wrapper.emitted('close')).toBeFalsy()
- })
-
it('should call setAppZoomFromPercentage with valid zoom input values', async () => {
const wrapper = createWrapper()
@@ -169,26 +141,10 @@ describe('ZoomControlsModal', () => {
expect(mockSetAppZoom).not.toHaveBeenCalled()
})
- it('should display "Hide Minimap" when minimap is visible', () => {
- mockSettingGet.mockReturnValue(true)
- const wrapper = createWrapper()
-
- const minimapButton = wrapper.find('[data-testid="toggle-minimap-button"]')
- expect(minimapButton.text()).toContain('zoomControls.hideMinimap')
- })
-
- it('should display "Show Minimap" when minimap is hidden', () => {
- mockSettingGet.mockReturnValue(false)
- const wrapper = createWrapper()
-
- const minimapButton = wrapper.find('[data-testid="toggle-minimap-button"]')
- expect(minimapButton.text()).toContain('zoomControls.showMinimap')
- })
-
it('should display keyboard shortcuts for commands', () => {
const wrapper = createWrapper()
- const buttons = wrapper.findAll('button')
+ const buttons = wrapper.findAll('.cursor-pointer')
expect(buttons.length).toBeGreaterThan(0)
// Each command button should show the keyboard shortcut
diff --git a/tests-ui/tests/composables/useMinimap.test.ts b/tests-ui/tests/composables/useMinimap.test.ts
index fdfb8a611..6a8eb5b76 100644
--- a/tests-ui/tests/composables/useMinimap.test.ts
+++ b/tests-ui/tests/composables/useMinimap.test.ts
@@ -898,10 +898,9 @@ describe('useMinimap', () => {
const minimap = useMinimap()
const styles = minimap.containerStyles.value
- expect(styles.width).toBe('250px')
+ expect(styles.width).toBe('253px')
expect(styles.height).toBe('200px')
- expect(styles.backgroundColor).toBe('#15161C')
- expect(styles.border).toBe('1px solid #333')
+ expect(styles.border).toBe('1px solid var(--interface-stroke)')
expect(styles.borderRadius).toBe('8px')
})
})
diff --git a/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts b/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts
index b845218d1..b74ec9ff3 100644
--- a/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts
+++ b/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts
@@ -55,10 +55,10 @@ describe('useMinimapSettings', () => {
const settings = useMinimapSettings()
const styles = settings.containerStyles.value
- expect(styles.width).toBe('250px')
+ expect(styles.width).toBe('253px')
expect(styles.height).toBe('200px')
- expect(styles.backgroundColor).toBe('#15161C') // dark theme color
- expect(styles.border).toBe('1px solid #333')
+ expect(styles.border).toBe('1px solid var(--interface-stroke)')
+ expect(styles.borderRadius).toBe('8px')
})
it('should generate light theme container styles', () => {
@@ -74,8 +74,10 @@ describe('useMinimapSettings', () => {
const settings = useMinimapSettings()
const styles = settings.containerStyles.value
- expect(styles.backgroundColor).toBe('#FAF9F5') // light theme color
- expect(styles.border).toBe('1px solid #ccc')
+ expect(styles.width).toBe('253px')
+ expect(styles.height).toBe('200px')
+ expect(styles.border).toBe('1px solid var(--interface-stroke)')
+ expect(styles.borderRadius).toBe('8px')
})
it('should generate panel styles based on theme', () => {
@@ -91,8 +93,9 @@ describe('useMinimapSettings', () => {
const settings = useMinimapSettings()
const styles = settings.panelStyles.value
- expect(styles.backgroundColor).toBe('#15161C')
- expect(styles.border).toBe('1px solid #333')
+ expect(styles.width).toBe('210px')
+ expect(styles.height).toBe('200px')
+ expect(styles.border).toBe('1px solid var(--interface-stroke)')
expect(styles.borderRadius).toBe('8px')
})