Use color from euiTheme hook instead of hardcoded one

elastic · Jun 3, 2022 · c9a179d · c9a179d
1 parent c2c9343
commit c9a179d
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/...ections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx b/...ections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
@@ -18,6 +18,7 @@ import {
   EuiText,
   EuiTreeView,
   EuiBadge,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -91,6 +92,7 @@ export const AgentDetailsIntegration: React.FunctionComponent<{
   packagePolicy: PackagePolicy;
 }> = memo(({ agent, agentPolicy, packagePolicy }) => {
   const { getHref } = useLink();
+  const theme = useEuiTheme();
 
   const [showNeedsAttentionBadge, setShowNeedsAttentionBadge] = useState(false);
   const extensionView = useUIExtension(
@@ -195,7 +197,7 @@ export const AgentDetailsIntegration: React.FunctionComponent<{
               </EuiFlexItem>
               {showNeedsAttentionBadge && (
                 <EuiFlexItem grow={false}>
-                  <EuiBadge color="#BD271E" iconType="alert" iconSide="left">
+                  <EuiBadge color={theme.euiTheme.colors.danger} iconType="alert" iconSide="left">
                     <FormattedMessage
                       id="xpack.fleet.agentDetailsIntegrations.needsAttention.label"
                       defaultMessage="Needs attention"