style: add color to dashboard workflow stats cards

[Nic13Gamer]

Summary

This PR adds some color to the background and border of the workflow stat cards. I think it makes it faster/easier to skim through and find the info you need.

Changes

• Added class with color class-names to stats array in <WorkflowStats />

Observations

I also tried adding color to the icons, but found it too much, let me know if you would like it though.

Also removed the border- color classes from the card. Apparently shadcn/ui now uses ring- for the card primitive, I don't know why not use border though, to be honest.

[Copilot]

Pull request overview

This PR enhances the visual design of workflow statistics cards by adding semantic color coding to differentiate between different workflow states. Each status card now has a subtle colored background and ring border that matches its semantic meaning (e.g., warning for pending, success for completed, destructive for failed).

Changes:

• Added optional class property to workflow stats array with semantic color classes for background and ring borders
• Refactored className construction to use the cn utility instead of template strings
• Removed deprecated border classes in favor of ring classes that align with the Card component's defaults

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Nic13Gamer]

@jamescmartinez just wondering if you had the time to take a look here at this PR, or if it's something you wish not follow through.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/openworkflowdev/openworkflow/@openworkflow/cli@314

npm i https://pkg.pr.new/openworkflowdev/openworkflow/@openworkflow/dashboard@314

npm i https://pkg.pr.new/openworkflowdev/openworkflow@314

commit: f975ee7

[jamescmartinez]

hey @Nic13Gamer, thanks for the ping, just took a look

I agree color can make the stats faster to scan, but my main concern is that coloring every card background makes the row feel a bit "rainbow" so all states get similar visual weight.

That said, we've since trimmed these stats to just show five statuses: pending, running, completed, failed, canceled (you may need to rebase), so we can probably make the colors more semantic by:

(remove total)
pending: white
running: blue
(remove sleeping)
completed: green
failed: red
canceled: gray

What do you think of that mapping?

[Nic13Gamer]

That was also a concern of mine to be honest, that's why I tried to make it as subtle as possible.

Just removed the sleeping card (the total had already been removed, I just didn't update the PR pic).

IMO, it looks good and minimal, but feel free to follow the direction you think is right :)

In dark mode:

[Copilot]

Pull request overview

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

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[jamescmartinez]

thanks @Nic13Gamer !