enhancement: Improve visibility of warning icon in light mode in the dashboard. #169
Description
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.
