feat: colour device-inventory role badge by node-type accent
The role/type badge on each inventory tile was always flat grey (bg-[#21262d] text-muted-foreground), which read as disabled and gave no visual cue about the device kind. Colour it with the same per-type accent the node uses on the canvas — resolved through the active theme / style section via resolveNodeColors — so a zigbee_coordinator, zwave_router, etc. gets its style-section colour (translucent background + solid text). Applies to every source (IP, zigbee, zwave) since all node types carry an accent in the theme. Test: role badge renders with the node-type accent colour, not the grey muted class. ha-relevant: yes
This commit is contained in:
@@ -153,6 +153,18 @@ describe('PendingDevicesModal', () => {
|
||||
expect(screen.getByText('Z-WAVE')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('colours the role badge with the node-type accent, not flat grey', async () => {
|
||||
mockPending.mockResolvedValue({ data: [DEVICE_ZWAVE] })
|
||||
render(<PendingDevicesModal {...baseProps} />)
|
||||
const card = await waitFor(() => screen.getByTestId('pending-card-dev-c'))
|
||||
// zwave_router accent from the default theme = #e3b341 (amber), applied to
|
||||
// both the text colour and a translucent background.
|
||||
const badge = within(card).getByText('zwave_router')
|
||||
// #e3b341 → rgb(227, 179, 65) once jsdom normalises the inline colour.
|
||||
expect(badge).toHaveStyle({ color: 'rgb(227, 179, 65)' })
|
||||
expect(badge.className).not.toContain('text-muted-foreground')
|
||||
})
|
||||
|
||||
it('filters by source (zwave only)', async () => {
|
||||
mockPending.mockResolvedValue({ data: [DEVICE_IP, DEVICE_ZWAVE] })
|
||||
render(<PendingDevicesModal {...baseProps} />)
|
||||
|
||||
Reference in New Issue
Block a user