Update CiIcon design
What does this MR do and why?
Updates CiIcon design to use filled icons. Also adds significant improvements for Darkmode.
Why this change?
This change brings the CI Icons closer inline with other status icons we have. Also the readability/discoverability with the changes proposed in this MR will be improved. This MR does highlighted important statues like success, warning, failure & canceled and visually deprirotizes other statuses.
Note: that this MR includes the changes from Refactor CiIcon component (and remove CiBadgeLink) (!133437 - merged) (& Refactor status_helper to match Vue implementation (!134869 - merged)) to make it easier to apply the changes system wide. The changes from that MR would need to be removed from this MR.
Edit: Both MRs have been merged by now, so this MR is now ready and only contains the changes needed.
Screenshots or screen recordings
Icon changes
| Before | After |
|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Screenshots
| Before | After |
|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
How to set up and validate locally
- http://gdk.test:3000/flightjs/Flight
- http://gdk.test:3000/flightjs/Flight/-/merge_requests
- http://gdk.test:3000/flightjs/Flight/-/merge_requests/3
- http://gdk.test:3000/flightjs/Flight/-/tree/master
- http://gdk.test:3000/flightjs/Flight/-/commit/dc82ccd232ea5df10e44459b3975c244321b4339
- http://gdk.test:3000/flightjs/Flight/-/branches
- http://gdk.test:3000/flightjs/Flight/-/commits/master?ref_type=heads
- http://gdk.test:3000/flightjs/Flight/-/tags
- http://gdk.test:3000/flightjs/Flight/-/pipelines
- http://gdk.test:3000/flightjs/Flight/-/pipelines/9
- http://gdk.test:3000/flightjs/Flight/-/jobs
- http://gdk.test:3000/flightjs/Flight/-/jobs/137
- http://gdk.test:3000/flightjs/Flight/-/ci/editor?branch_name=master
- http://gdk.test:3000/flightjs/Flight/-/artifacts
- http://gdk.test:3000/flightjs/Flight/-/issues/9
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.