Skip to content

Low severity badge is blackish instead of yellow in the finding modal

Summary

The low severity badge is dark instead of yellow in the following places:

  1. finding modal
  2. vulnerability count card
  3. group security dashboard
  4. vulnerability row

image

Steps to reproduce

  1. Go to gitlab-examples/security/security-reports!52 (closed)
  2. Click on a finding that is low severity

Analysis

The color orange-200 is not being applied due to a refactor. This refactor, among other things, replaced text-warning-200 by gl-text-orange-200 but this last css class does not exist.

However, when further researching this issue, it was found that there is an inconsistency in orange colors used for low severity security items. In fact, all low severity items should be orange-300 and not orange-200 as defined in Pajamas. See comment for more context.

count-before Screenshot_2023-04-19_at_09.59.10 count-after

Implementation steps

  • replace occurrences of gl-text-orange-200 to gl-text-orange-300

Verification steps

orange-300 #d99530

  • go to this vulnerability report page
    • verify low severity counter card above the table is orange-300
    • verify low severity icon in the rows in the table is orange-300
  • go to this pipeline and verify that low severity icon in the rows in the table is orange-300
  • go to this MR, expand security scanning widget, click on low severity finding and verify that low severity icon in the modal is orange-300
Edited by Lorenz van Herwaarden