1623 Changes colors of WfoInsyncIcon

workfloworchestrator · Dec 20, 2024 · 9f4f0f4 · 9f4f0f4
1 parent 19d1d88
commit 9f4f0f4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/.changeset/slimy-points-press.md b/.changeset/slimy-points-press.md
@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+1623 Changes the colors of the WfoInsyncIcon to make the no-in-sync state more prominent
diff --git a/packages/orchestrator-ui-components/src/components/WfoInsyncIcon/WfoInsyncIcon.tsx b/packages/orchestrator-ui-components/src/components/WfoInsyncIcon/WfoInsyncIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { useOrchestratorTheme } from '../../hooks';
-import { WfoCheckmarkCircleFill, WfoMinusCircleOutline } from '../../icons';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoCheckmarkCircleFill, WfoMinusCircleFill } from '@/icons';
 
 interface WfoInsyncIconProps {
     inSync: boolean;
@@ -14,13 +14,13 @@ export const WfoInsyncIcon = ({ inSync }: WfoInsyncIconProps) => {
         <WfoCheckmarkCircleFill
             height={20}
             width={20}
-            color={theme.colors.primary}
+            color={theme.colors.mediumShade}
         />
     ) : (
-        <WfoMinusCircleOutline
+        <WfoMinusCircleFill
             height={20}
             width={20}
-            color={theme.colors.mediumShade}
+            color={theme.colors.warningText}
         />
     );
 };