Enhance Plugin Manager Cards to Clearly Display Active, Inactive, and Total Plugins

[adity1raut]

Related Issue

This update enhances the Plugin Manager Cards by improving their alignment and overall structure. The layout now clearly displays the counts for Active, Inactive, and Total Plugins, ensuring a more organized and visually consistent presentation across all screen sizes.

Befoure

After

Fixes #2193

Changes Made

• Updated ...
• Refactored ...
• Fixed ...
• Added tests for ...

Checklist

Please ensure the following before submitting your PR:

• I have reviewed the project's contribution guidelines.
• I have written unit tests for the changes (if applicable).
• I have updated the documentation (if applicable).
• I have tested the changes locally and ensured they work as expected.
• My code follows the project's coding standards.

Screenshots or Logs (if applicable)

Additional Notes

[kubestellar-prow]

[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 assign kunal-511 for approval. For more information see the Kubernetes Code Review Process.

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

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]

Hi @adity1raut. Thanks for your PR.

I'm waiting for a kubestellar member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

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.

[Copilot]

Pull Request Overview

This PR enhances the visual design of the plugin statistics cards in the PluginManager component by adding icons, improving the layout, and refining animations.

• Adds distinctive icons to each statistics card (total, active, inactive) with themed background colors
• Updates the layout from a simple flex row to a responsive grid that stacks on mobile (1 column) and displays in 3 columns on larger screens
• Refines animation effects with gentler transitions and adds a subtle hover lift effect

---

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

[adity1raut]

[adity1raut]

/cc @btwshivam , @clubanderson

[Arpit529Srivastava]

@adity1raut add a description please.

[alokdangre]

@adity1raut refer that issue in pr description

[alokdangre]

@adity1raut do you think it looks good, @btwshivam advice

[MAVRICK-1]

Is it responsive? Can you send a video checking the responsiveness

[adity1raut]

Screencast.From.2025-11-12.10-22-57.webm

PTAL @MAVRICK-1

[adity1raut]

@alokdangre This PR is ready for testing now.

[alokdangre]

@adity1raut it looks good but just beautify the cards

[adity1raut]

Screencast.From.2025-11-13.11-47-26.webm

[adity1raut]

@alokdangre PTAL

[alokdangre]

@adity1raut I mean the cards element are aligned to left, which shows so much wite empty space, so I was saying about it

[alokdangre]

/cc @btwshivam

[adity1raut]

ut I mean the cards element are aligned to left, which shows so much wite empty space, so I was saying about it

If we align it like that, the style will look a bit different. I tried it, but it didn’t look good."

[alokdangre]

Okay

[Arpit529Srivastava]

/ok-to-test

[adity1raut]

/cc @clubanderson