enhancement: Improve visibility of warning icon in light mode in the dashboard.

[Z33xD]

Add black stroke outline to warning icon in EmptyState component, to enhance visibility, to enhance its visibility in light mode.

Current Behavior

Currently, the warning icon (IoWarning) used in the EmptyState component only has a fill color. This makes the icon less distinct, especially on certain backgrounds, reducing visual clarity for warning messages.

Suggested Improvement

Introduce a black stroke outline that follows the exact shape of the icon. This will make the icon more visible and improve the overall clarity of warnings without adding extra containers or changing the icon size.

Benefits

• Improves visibility of warning messages.
• Enhances user interface clarity and accessibility.
• Maintains the icon’s original shape while adding contrast.

Possible Implementation

• Apply an SVG stroke directly on the icon component (e.g., style={{ stroke: 'black', strokeWidth: 1 }}).
• Tune the stroke thickness to ensure it is noticeable but not overwhelming.
• Test across both light and dark themes to ensure consistent visibility.

Alternatives Considered

• Wrapping the icon in a bordered container (circle or square), but this does not follow the icon’s shape.
• Replacing the icon with an outlined version from the icon library, but may break design consistency.

Additional Notes

This is how the warning icons look like in light mode right now.

[Z33xD]

hey! can any maintainer please review my pull request. thanks!

[Z33xD]

@archa8 can you please look into it?

[archa8]

Completed in #170