Refactor CI Icon component to be independent from GlBadge

What does this MR do and why?

Refactors CI Icon component to be independent from GlBadge

  • Removes GlBadge dependency from Ci Icon
  • Aligns darkmode styles with darkmode vision
  • Keeps 24px size to avoid layout issues**
  • Adjusted horizontal spacing ever so slightly

** We might want to create a follow-up to change this to a 20px base (like recent changes labels, badges etc.)

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
before after
before_dark dark_after
How it looks without changes with the new incoming darkmode badge styles from GitLab UI
before_with_badge_changes_applied
Darkmode design vision
darkmode_vision

How to set up and validate locally

  1. Check pages with pipeline status (MR, MR list, Pipelines, Pipeline graph page, Job etc.)

Related to #469616 (closed)

Edited by Sascha Eggenberger

Merge request reports

Loading