Skip to content

High contrast mode fixes for topbar and sidebar navigation

Sascha Eggenberger requested to merge high-contrast-topbar-sidebar-fixes into master

What does this MR do and why?

High contrast mode fixes for topbar and sidebar navigation

Adds dividers to the topbar and sidebar navigation header that otherwise are very hard to distinguish from other content.

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
logged_out_before logged_out_after

How to set up and validate locally

  1. Enable high contrast mode (see below how to enable it)
  2. View an issue logged out and logged in, e.g. https://gdk.test:3000/flightjs/Flight/-/issues/3

Windows:

Enable Windows high contrast mode, see https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025

Chrome:

  • Open Dev Tools
  • Go to Kebab menu -> More Tools -> Rendering
  • Emulate CSS media feature forced-colors -> set to active

Related to #444717 (closed)

Edited by Sascha Eggenberger

Merge request reports