diff --git a/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.test.tsx b/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.test.tsx index 544dbf2a2c4..e085fb25ff9 100644 --- a/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.test.tsx +++ b/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.test.tsx @@ -17,7 +17,8 @@ * under the License. */ import { render, screen, act } from 'spec/helpers/testing-library'; -import { StatusIndicatorDot } from './StatusIndicatorDot'; +import { supersetTheme } from '@apache-superset/core/theme'; +import { getStatusConfig, StatusIndicatorDot } from './StatusIndicatorDot'; import { AutoRefreshStatus } from '../../types/autoRefresh'; afterEach(() => { @@ -62,6 +63,15 @@ test('renders with paused status', () => { expect(dot).toHaveAttribute('data-status', AutoRefreshStatus.Paused); }); +test('uses the icon color for the paused status outline', () => { + expect( + getStatusConfig(supersetTheme, AutoRefreshStatus.Paused), + ).toMatchObject({ + needsBorder: true, + outlineColor: 'currentColor', + }); +}); + test('has correct accessibility attributes', () => { render(); const dot = screen.getByTestId('status-indicator-dot'); diff --git a/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.tsx b/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.tsx index 6d1766c1052..39a33546cb9 100644 --- a/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.tsx +++ b/superset-frontend/src/dashboard/components/AutoRefreshStatus/StatusIndicatorDot.tsx @@ -39,9 +39,10 @@ export interface StatusIndicatorDotProps { interface StatusConfig { color: string; needsBorder: boolean; + outlineColor?: string; } -const getStatusConfig = ( +export const getStatusConfig = ( theme: ReturnType, status: AutoRefreshStatus, ): StatusConfig => { @@ -75,6 +76,7 @@ const getStatusConfig = ( return { color: theme.colorBgContainer, needsBorder: true, + outlineColor: 'currentColor', }; default: return { @@ -136,13 +138,15 @@ export const StatusIndicatorDot: FC = ({ width: ${size}px; height: ${size}px; border-radius: 50%; + color: ${theme.colorTextSecondary}; background-color: ${statusConfig.color}; transition: background-color ${theme.motionDurationMid} ease-in-out, border-color ${theme.motionDurationMid} ease-in-out; - border: ${statusConfig.needsBorder - ? `1px solid ${theme.colorBorder}` - : 'none'}; + border: ${statusConfig.needsBorder ? '1px solid' : 'none'}; + border-color: ${statusConfig.needsBorder + ? statusConfig.outlineColor + : 'transparent'}; box-shadow: ${statusConfig.needsBorder ? 'none' : `0 0 0 2px ${theme.colorBgContainer}`};