From aa7d78adc6d801e489196c257f2ff98fa128542e Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Mon, 24 Aug 2026 14:51:19 +0530 Subject: [PATCH 1/4] fix(CustomCatalog): adapt MetricsDiv text color to active theme mode Signed-off-by: Mayank Sharma --- src/custom/CustomCatalog/style.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx index 0a30c5a10..0237d5689 100644 --- a/src/custom/CustomCatalog/style.tsx +++ b/src/custom/CustomCatalog/style.tsx @@ -180,12 +180,12 @@ export const MetricsContainerFront = styled('div')(({ isDetailed, width: '100%' })); -export const MetricsDiv = styled('div')(() => ({ +export const MetricsDiv = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.2rem', - color: 'rgba(26, 26, 26, .8)', + color: theme.palette.text.default, margin: '0rem', padding: '0.1rem' })); From aaf34def814c7ed2b60fce502fbbdbf2461ffb25 Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Mon, 24 Aug 2026 14:52:36 +0530 Subject: [PATCH 2/4] fix(CatalogCard): adapt MetricsDiv text color to active theme mode Signed-off-by: Mayank Sharma --- src/custom/CatalogCard/style.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/custom/CatalogCard/style.tsx b/src/custom/CatalogCard/style.tsx index 7084a44e4..ab56b0da5 100644 --- a/src/custom/CatalogCard/style.tsx +++ b/src/custom/CatalogCard/style.tsx @@ -120,12 +120,12 @@ export const MetricsContainerFront = styled('div')(({ theme }) => ({ borderRadius: '0 0 0.9375rem 0.9375rem', width: '100%' })); -export const MetricsDiv = styled('div')(() => ({ +export const MetricsDiv = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.2rem', - color: 'rgba(26, 26, 26, .8)', + color: theme.palette.text.default, margin: '0rem', padding: '0.1rem' })); From ca737c6b063cfc46355b666ed4a4eb305996512c Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Mon, 24 Aug 2026 14:54:24 +0530 Subject: [PATCH 3/4] test(CustomCatalog): add theme regression tests for catalog metrics Signed-off-by: Mayank Sharma --- src/__testing__/CustomCatalogCard.test.tsx | 82 ++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 src/__testing__/CustomCatalogCard.test.tsx diff --git a/src/__testing__/CustomCatalogCard.test.tsx b/src/__testing__/CustomCatalogCard.test.tsx new file mode 100644 index 000000000..6d29f652b --- /dev/null +++ b/src/__testing__/CustomCatalogCard.test.tsx @@ -0,0 +1,82 @@ +import { render, screen } from '@testing-library/react'; +import React from 'react'; +import CustomCatalogCard, { Pattern } from '../custom/CustomCatalog/CustomCard'; +import { SistentThemeProvider } from '../theme'; + +jest.mock('react-markdown', () => ({ + __esModule: true, + default: ({ children }: { children: React.ReactNode }) =>
{children}
+})); + +jest.mock('remark-gfm', () => ({ + __esModule: true, + default: () => {} +})); + +jest.mock('rehype-raw', () => ({ + __esModule: true, + default: () => {} +})); + +jest.mock('../custom/CustomCatalog/Helper', () => ({ + ...jest.requireActual('../custom/CustomCatalog/Helper'), + handleImage: jest.fn() +})); + +const renderWithTheme = (ui: React.ReactElement, mode: 'light' | 'dark' = 'light') => { + return render({ui}); +}; + +const mockPattern: Pattern = { + id: 'test-pattern-1', + name: 'Istio Service Mesh', + type: 'design', + downloadCount: 1200, + cloneCount: 450, + viewCount: 300, + deploymentCount: 100, + shareCount: 50, + updated_at: '2026-01-01', + created_at: '2026-01-01', + visibility: 'public' +}; + +describe('CustomCatalogCard', () => { + it('renders all metrics counts correctly', () => { + renderWithTheme( + + ); + + expect(screen.getByText('1200')).not.toBeNull(); + expect(screen.getByText('450')).not.toBeNull(); + expect(screen.getByText('300')).not.toBeNull(); + expect(screen.getByText('100')).not.toBeNull(); + expect(screen.getByText('50')).not.toBeNull(); + }); + + it('renders metrics with theme-aware text color in dark mode', () => { + renderWithTheme( + , + 'dark' + ); + + const countElement = screen.getByText('1200'); + const metricsDiv = countElement.parentElement; + expect(metricsDiv).not.toBeNull(); + + // Verify MetricsDiv does not use the hardcoded dark rgba color + const computedStyle = window.getComputedStyle(metricsDiv as Element); + expect(computedStyle.color).not.toBe('rgba(26, 26, 26, 0.8)'); + expect(computedStyle.color).not.toBe('rgba(26, 26, 26, .8)'); + }); +}); From f923666c1b5f8e170247983970312e7081402532 Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Mon, 24 Aug 2026 15:27:49 +0530 Subject: [PATCH 4/4] refactor(CatalogCard): align MetricsCount with theme tokens and refine test assertions Signed-off-by: Mayank Sharma --- src/__testing__/CustomCatalogCard.test.tsx | 27 ++++++++++++++++------ src/custom/CatalogCard/style.tsx | 5 ++-- src/custom/CustomCatalog/style.tsx | 6 ++--- 3 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/__testing__/CustomCatalogCard.test.tsx b/src/__testing__/CustomCatalogCard.test.tsx index 6d29f652b..f2fcadf35 100644 --- a/src/__testing__/CustomCatalogCard.test.tsx +++ b/src/__testing__/CustomCatalogCard.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; import CustomCatalogCard, { Pattern } from '../custom/CustomCatalog/CustomCard'; -import { SistentThemeProvider } from '../theme'; +import { darkModePalette, SistentThemeProvider } from '../theme'; jest.mock('react-markdown', () => ({ __esModule: true, @@ -23,12 +23,28 @@ jest.mock('../custom/CustomCatalog/Helper', () => ({ handleImage: jest.fn() })); +const hexToRgb = (hex?: string) => { + if (!hex) return ''; + const cleanHex = hex.replace('#', ''); + const r = parseInt(cleanHex.substring(0, 2), 16); + const g = parseInt(cleanHex.substring(2, 4), 16); + const b = parseInt(cleanHex.substring(4, 6), 16); + return `rgb(${r}, ${g}, ${b})`; +}; + const renderWithTheme = (ui: React.ReactElement, mode: 'light' | 'dark' = 'light') => { return render({ui}); }; const mockPattern: Pattern = { id: 'test-pattern-1', + userId: 'user-1', + patternFile: 'test-pattern-file', + user: { + firstName: 'Test', + lastName: 'User' + }, + avatarUrl: 'https://example.com/avatar.png', name: 'Istio Service Mesh', type: 'design', downloadCount: 1200, @@ -71,12 +87,9 @@ describe('CustomCatalogCard', () => { ); const countElement = screen.getByText('1200'); - const metricsDiv = countElement.parentElement; - expect(metricsDiv).not.toBeNull(); + expect(countElement).not.toBeNull(); - // Verify MetricsDiv does not use the hardcoded dark rgba color - const computedStyle = window.getComputedStyle(metricsDiv as Element); - expect(computedStyle.color).not.toBe('rgba(26, 26, 26, 0.8)'); - expect(computedStyle.color).not.toBe('rgba(26, 26, 26, .8)'); + const computedStyle = window.getComputedStyle(countElement); + expect(computedStyle.color).toBe(hexToRgb(darkModePalette.text.default)); }); }); diff --git a/src/custom/CatalogCard/style.tsx b/src/custom/CatalogCard/style.tsx index ab56b0da5..4e2cc599a 100644 --- a/src/custom/CatalogCard/style.tsx +++ b/src/custom/CatalogCard/style.tsx @@ -1,4 +1,5 @@ -import { styled, Typography } from '@mui/material'; +import { Typography } from '@mui/material'; +import { styled } from '../../theme'; type DesignCardProps = { outerStyles: React.CSSProperties; @@ -88,7 +89,7 @@ export const MetricsCount = styled('p')(({ theme }) => ({ margin: '0rem', lineHeight: '1.5', textAlign: 'center', - color: theme.palette.text.secondary, + color: theme.palette.text.default, fontWeight: '600' })); export const DesignName = styled(Typography)(({ theme }) => ({ diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx index 0237d5689..bc07adaf4 100644 --- a/src/custom/CustomCatalog/style.tsx +++ b/src/custom/CustomCatalog/style.tsx @@ -1,5 +1,5 @@ -import { styled, Typography } from '@mui/material'; -import { accentGrey, DARK_PRIMARY_COLOR, GRAY97, WHITESMOKE } from '../../theme'; +import { Typography } from '@mui/material'; +import { accentGrey, DARK_PRIMARY_COLOR, GRAY97, WHITESMOKE, styled } from '../../theme'; import { charcoal, DARK_TEAL, SNOW_WHITE } from '../../theme/colors/colors'; type DesignCardProps = { @@ -136,7 +136,7 @@ export const MetricsCount = styled('p')(({ theme }) => ({ margin: '0rem', lineHeight: '1.5', textAlign: 'center', - color: theme.palette.mode === 'light' ? DARK_TEAL : SNOW_WHITE, + color: theme.palette.text.default, fontWeight: '600' })); type DesignNameProps = {