Skip to content

Use consistent orange color for low severity

Lorenz van Herwaarden requested to merge use-orange-300-for-low-severity into master

What does this MR do and why?

This MR aligns the orange color used for minor/low severity items. Some low severity items, like in the MR security report widget are already using the darker $orange-300 color. For some remaining items, it's been changed from $orange-200 to $orange-300. This aligns with what the Pajamas design system has defined.

orange-200: #e9be74

orange-300: #d99530

Relates to #406609 (closed)

Screenshots or screen recordings

The before screenshots show a dark grey icon for the low severity icon because I identified this orange inconsistency due to the initial bug: no orange color was applied due to a refactor a while back. This is the orange that was used before for reference:

Screenshot_2023-04-19_at_09.59.10

Before After
finding-modal-before finding-modal-after
count-before count-after
dashboard-before dashboard-after
vulnerability-row-before vulnerability-row-after

How to set up and validate locally

Go to various places in UI and see that low/minor severity color is fixed: not dark grey anymore but orange-300 #d99530.

Places where color was broken:

  • Group level security dashboard
  • Vulnerability report (table and count)
  • Vulnerabilities table in security tab for a pipeline
  • Finding modal

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Lorenz van Herwaarden

Merge request reports