Fix Flux overview chart: Use red color for failed reconciliations instead of orange

[Copilot]

Problem

The Flux overview chart was displaying failed reconciliations in orange (#DC7501) instead of red, which gave the misleading impression that failures were not severe issues. As shown in the screenshot below, a chart showing "1/1 failed" resources appeared in orange rather than the expected error color:

This inconsistency with standard error visualization made it harder for users to quickly identify critical issues that require immediate attention.

Solution

Changed the color for failed reconciliations from the hardcoded orange value to use the Material-UI theme's error color:

{
  name: 'failed',
  value: adjustedFailedPercent,
- fill: '#DC7501',
+ fill: theme.palette.error.main,
}

Benefits

1. Improved visibility: Failed resources are now displayed in red (typically #f44336), making them immediately recognizable as critical errors
2. Consistency: Aligns with Material-UI standards and matches error colors used elsewhere in the codebase (e.g., canaries.tsx)
3. Theme support: Uses the theme's error color, which will adapt to different theme configurations
4. Better UX: Users can now quickly distinguish between warnings (orange/yellow) and errors (red) at a glance

Testing

• ✅ Linting passed
• ✅ TypeScript compilation successful
• ✅ Build completed without errors
• ✅ All tests passing

Fixes the color mismatch issue where failed reconciliations were not visually distinct enough from warnings.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Flux: The colors for failed reconciliations are incorrect</issue_title>
<issue_description>I have just noticed that a chart showing that 1/1 failed resources is showing as orange instead of red. This gives the feeling that the issue is not that problematic. We need to change it to the error color.

</issue_description>

<agent_instructions>This is an issue in the Flux plugin.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes #401

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.