Fix color consistency: error states, status shades, progress bar colors by Copilot · Pull Request #3891 · kubestellar/console

Copilot · 2026-03-30T02:05:42Z

Auto-QA flagged several color inconsistencies where error/failure states used non-semantic colors and status text used non-standard shades.

📌 Fixes

📝 Summary of Changes

Three targeted Tailwind class fixes across components:

KyvernoDetailModal: bg-blue-500 → bg-orange-500 for "Error" in policy report legend/bars. Blue is info/neutral; error needs a warm danger color. Orange differentiates from bg-red-500 (used for "Fail") while staying semantically correct.
PersistenceSection: text-green-500/text-red-500 → text-green-400/text-red-400 for connection test result text. Standardizes to the dominant codebase shade (56× text-green-400, 50× text-red-400).
Missions: bg-blue-500 → bg-purple-500 for the progress bar on missions with no failed clusters. Purple matches the app's primary accent color.

Changes Made

Fixed bg-blue-500 → bg-orange-500 for Kyverno policy report "Error" status (legend + bar segment)
Fixed text-green-500/text-red-500 → text-green-400/text-red-400 in PersistenceSection connection test feedback
Fixed bg-blue-500 → bg-purple-500 for Missions progress bar (no-failure state)

Checklist

I used a coding agent (Claude Code, Copilot, Gemini, or Codex) to generate/review this code
I have reviewed the project's contribution guidelines
New cards target console-marketplace, not this repo
isDemoData is wired correctly (cards show Demo badge when using demo data)
I have written unit tests for the changes (if applicable)
I have tested the changes locally and ensured they work as expected
All commits are signed with DCO (git commit -s)

Screenshots or Logs (if applicable)

N/A — pure Tailwind class changes, no behavioral change.

👀 Reviewer Notes

Changes are 5 lines across 3 files. No logic touched — only CSS utility class strings.

⚡ Quickly spin up Copilot coding agent tasks from anywhere on your macOS or Windows machine with Raycast.

netlify · 2026-03-30T02:05:48Z

✅ Deploy Preview for kubestellarconsole ready!

Name	Link
🔨 Latest commit	`db1ef53`
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/69c9dd09d64d420007a5fbfa
😎 Deploy Preview	https://deploy-preview-3891.console-deploy-preview.kubestellar.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2026-03-30T02:05:50Z

👋 Hey @copilot — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

Claude Code (Opus 4.5 / 4.6) — recommended

GitHub Copilot

Cursor

Other AI coding assistants

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

This is an automated message.

github-actions · 2026-03-30T02:05:52Z

❌ PR Title Verification Failed

Your PR title does not follow the required format.

Current title: Fix color consistency: error states, status shades, progress bar colors

Required Format

PR titles must start with one of these emoji prefixes:

Emoji	Meaning
⚠️	Breaking change
✨	Non-breaking feature
🐛	Patch fix / Bug fix
📖	Documentation
🚀	Release
🌱	Infra/Tests/Other

How to Fix

Edit your PR title to start with the appropriate emoji. For example:

✨ Add new feature for user authentication
🐛 Fix crash when loading empty config
📖 Update installation guide

You can edit the title by clicking the Edit button next to your PR title.

This comment was automatically posted by the PR Title Verifier workflow.

Agent-Logs-Url: https://github.com/kubestellar/console/sessions/8046eb7a-792e-4b31-a1ad-139875edbed9 Co-authored-by: clubanderson <407614+clubanderson@users.noreply.github.com>

kubestellar-prow · 2026-03-30T02:16:42Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from clubanderson. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

kubestellar-prow · 2026-03-30T02:16:43Z

Thanks for your pull request. Before we can look at it, you'll need to add a 'DCO signoff' to your commits.

📝 Please follow instructions in the contributing guide to update your commits with the DCO

Full details of the Developer Certificate of Origin can be found at developercertificate.org.

The list of commits missing DCO signoff:

73ea4d8 Initial plan
db1ef53 🐛 Fix color consistency issues across components

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

Copilot

Pull request overview

This PR addresses UI color consistency across several components by aligning status/error/progress colors with the app’s intended semantic palette.

Changes:

Adjusted Kyverno PolicyReport “Error” indicator/bar segment color.
Standardized Persistence connection test result text shades.
Updated Missions progress bar “no failed clusters” color to the app accent.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
web/src/components/settings/sections/PersistenceSection.tsx	Uses `text-green-400` / `text-red-400` for test result feedback text.
web/src/components/cards/kyverno/KyvernoDetailModal.tsx	Changes PolicyReport “Error” legend + bar segment color from blue to orange.
web/src/components/cards/Missions.tsx	Changes progress bar “no failed clusters” color from blue to purple.

Copilot · 2026-03-30T02:24:33Z

web/src/components/cards/kyverno/KyvernoDetailModal.tsx

                  <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-sm bg-green-500" /> Pass</span>
                  <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-sm bg-red-500" /> Fail</span>
                  <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-sm bg-yellow-500" /> Warn</span>
-                  <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-sm bg-blue-500" /> Error</span>
+                  <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-sm bg-orange-500" /> Error</span>
                  <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-sm bg-zinc-500" /> Skip</span>


This card hardcodes status colors in the legend. The repo has a centralized status color system intended to prevent exactly these inconsistencies (see web/src/lib/cards/statusColors.ts:1-6). Consider deriving these classes from STATUS_COLORS/getSeverityColors instead of inline Tailwind strings; if “Error” needs to be distinct from “Fail”, encode that distinction centrally so other cards stay consistent too.

Copilot · 2026-03-30T02:24:33Z

web/src/components/cards/Missions.tsx

              'h-full rounded-full transition-all duration-500',
              mission.status === 'orbit' ? 'bg-green-500' :
              mission.status === 'abort' ? 'bg-red-500' :
-              failedClusters > 0 ? 'bg-red-500' : 'bg-blue-500',
+              failedClusters > 0 ? 'bg-red-500' : 'bg-purple-500',
            )}


The progress bar color selection is hardcoded here. Given the repo’s centralized status color system (web/src/lib/cards/statusColors.ts) and the amount of status-color reuse across cards, consider routing this through the shared status color helpers (or an existing status→color map in this file) so future palette tweaks don’t require editing multiple conditionals.

clubanderson · 2026-03-30T02:24:43Z

🔄 Auto-Applying Copilot Code Review

Copilot code review found 0 code suggestion(s) and 2 general comment(s).

Also address these general comments:

web/src/components/cards/kyverno/KyvernoDetailModal.tsx (line 216): This card hardcodes status colors in the legend. The repo has a centralized status color system intended to prevent exac
web/src/components/cards/Missions.tsx (line 591): The progress bar color selection is hardcoded here. Given the repo’s centralized status color system (`web/src/lib/cards

Push all fixes in a single commit. Run cd web && npm run build && npm run lint before committing.

Auto-generated by copilot-review-apply workflow.

Initial plan

73ea4d8

Copilot AI assigned Copilot and clubanderson Mar 30, 2026

kubestellar-prow bot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. dco-signoff: no Indicates the PR's author has not signed the DCO. labels Mar 30, 2026

Copilot started work on behalf of clubanderson March 30, 2026 02:05 View session

Copilot AI linked an issue Mar 30, 2026 that may be closed by this pull request

[Auto-QA] Color consistency issues across components #3890

Open

github-actions bot added copilot and removed dco-signoff: no Indicates the PR's author has not signed the DCO. labels Mar 30, 2026

kubestellar-prow bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label Mar 30, 2026

github-actions bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Mar 30, 2026

🐛 Fix color consistency issues across components

db1ef53

Agent-Logs-Url: https://github.com/kubestellar/console/sessions/8046eb7a-792e-4b31-a1ad-139875edbed9 Co-authored-by: clubanderson <407614+clubanderson@users.noreply.github.com>

kubestellar-prow bot added dco-signoff: no Indicates the PR's author has not signed the DCO. and removed dco-signoff: yes Indicates the PR's author has signed the DCO. labels Mar 30, 2026

github-actions bot removed the dco-signoff: no Indicates the PR's author has not signed the DCO. label Mar 30, 2026

kubestellar-prow bot added size/S Denotes a PR that changes 10-29 lines, ignoring generated files. and removed size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Mar 30, 2026

github-actions bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Mar 30, 2026

Copilot AI changed the title ~~[WIP] Fix color consistency issues across design system components~~ Fix color consistency: error states, status shades, progress bar colors Mar 30, 2026

Copilot finished work on behalf of clubanderson March 30, 2026 02:17

Copilot AI requested a review from clubanderson March 30, 2026 02:17

clubanderson marked this pull request as ready for review March 30, 2026 02:21

clubanderson removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Mar 30, 2026

Copilot AI review requested due to automatic review settings March 30, 2026 02:21

Copilot started reviewing on behalf of clubanderson March 30, 2026 02:21 View session

Copilot AI reviewed Mar 30, 2026

View reviewed changes

github-actions bot mentioned this pull request Mar 30, 2026

[aw] No-Op Runs #3237

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix color consistency: error states, status shades, progress bar colors#3891

Fix color consistency: error states, status shades, progress bar colors#3891
Copilot wants to merge 2 commits intomainfrom
copilot/fix-color-consistency-issues-again

Copilot AI commented Mar 30, 2026 •

edited

Loading

Uh oh!

netlify bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 30, 2026

Uh oh!

github-actions bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

kubestellar-prow bot commented Mar 30, 2026

Uh oh!

kubestellar-prow bot commented Mar 30, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

clubanderson commented Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Fixes

📝 Summary of Changes

Changes Made

Checklist

Screenshots or Logs (if applicable)

👀 Reviewer Notes

Uh oh!

netlify bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kubestellarconsole ready!

Uh oh!

github-actions bot commented Mar 30, 2026

Uh oh!

github-actions bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ PR Title Verification Failed

Required Format

How to Fix

Uh oh!

kubestellar-prow bot commented Mar 30, 2026

Uh oh!

kubestellar-prow bot commented Mar 30, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

clubanderson commented Mar 30, 2026

🔄 Auto-Applying Copilot Code Review

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 30, 2026 •

edited

Loading

netlify bot commented Mar 30, 2026 •

edited

Loading

github-actions bot commented Mar 30, 2026 •

edited

Loading