Skip to content

Small sidebar visual tweaks

Mark Florian requested to merge 415812-visual-tweaks into master

What does this MR do and why?

Tweak active nav item with avatar styling

This shifts the active indicator of sidebar nav items left by 1 pixel when the item has an avatar.

This shift is done using px rather than rem units so that it doesn't scale with root font size. Using rem units would make the shift smaller/bigger than it needed to be, if the root font size were reduced/increased.

Part of #415812 (closed).

Changelog: changed

Use theme colour in sidebar context header

Part of #415812 (closed)

Changelog: changed

Screenshots or screen recordings

Active indicator

Before After
project_before project_after
profile_before profile_after

Context header

Before After
indigo indigo
light_indigo light_indigo
blue blue
light_blue light_blue
green green
light_green light_green
red red
light_red light_red
gray gray
light_gray light_gray
dark_mode dark_mode

How to set up and validate locally

Active indicator

  1. Go to a project or user profile page
  2. Observe the active indicator for the "overview" nav item (the one with the avatar) is 1px offset from the avatar.
  3. Use your browser settings to change the default root font size to something other than 16px
  4. Possibly refresh the page to get the new font size
  5. Repeat 1. and 2., and observe that the indicator isn't shifted too little/much.

Context header colour

  1. Go to user preferences
  2. Change the colour theme
  3. Observe the context header colour matches the theme

MR acceptance checklist

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

Related to #415812 (closed)

Edited by Mark Florian

Merge request reports