Enhancement: Use distinct visual styles for different issue types #1384

[kmfoysal06]

What?

Closes #1384

Using badges instead of raw ERROR/WARNING text to improve the user experience.

Why?

As a Plugin Check user, I always use it before pushing any version of my plugin. I noticed that it's hard to visually distinguish errors and warnings. Even though I can turn warnings/errors off, using badges makes it easier for our brains to quickly identify whether something is an error or a warning, making it slightly more effective. I noticed someone had already created an issue, and I thought I would try to implement it myself since it's not a huge change.

How?

As a fix, I added custom classes plugin-check__results-row-type and plugin-check__results-row-type--{{error_type}}, and wrapped the ERROR/WARNING text inside a <span>. I also added custom CSS to the assets/css/plugin-check-admin.css file with a proper comment. I used #dc3545 as the ERROR badge background color and #ffc107 as the WARNING badge background color.

Testing Instructions

1. Open the Plugin Check menu from WordPress Admin -> Tools.
2. Select any plugin and click Check.
3. If the plugin has any warnings or errors, the results will show the ERROR/WARNING text as a badge instead of raw text.

AI Usage Disclosure

• This PR includes AI-assisted code or content

It's a tiny change. I did it myself, but I used AI to fix typos and grammatical mistakes in the PR message.

Screenshots

Before	After

Co-authored-by: kmfoysal06 kmfoysal06@git.wordpress.org
Co-authored-by: tushar-addweb tusharaddweb@git.wordpress.org

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: kmfoysal06 <kmfoysal06@git.wordpress.org>
Co-authored-by: davidperezgar <davidperez@git.wordpress.org>
Co-authored-by: tushar-addweb <tusharaddweb@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[davidperezgar]

Hello, I think is useful but I'd use a color less impressive. You could use the status colors of woocommerce: Failed and Pending.

[davidperezgar]

Change colors less aggresive.

[kmfoysal06]

Hello @davidperezgar
Thanks for approving I will change the color and let you know.