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}`};