Apply styling changes to the left sidebar
Proposal
With the work that is being done to consolidate the top nav #301143 (closed), we would be applying some new design styling inspired by explorations done by the UX Foundations team gitlab-design#1424 (closed).
This proposal extracts elements of the explorations that we are confident with moving forward with
- Reduce visual noise by changing active menu item state
- Better differentiate left nav from main body content (and improve accessibility) by updating background color
- Reduce visual noise by removing the right border from the left nav
-
Create better color contrast and improve accessibility by changing left nav font color to
indigo-900
- Enable full view of left nav without scrolling by removing extra bottom padding to sub-menu when expanded and reducing menu item top and bottom padding so that each menu item is 32px in height
- Improve color contrast by changing styling of the pills that indicate number of issues and merge requests
Current | Proposal |
---|---|
Project name area
- Align project name area with updated styling of left nav
- Reduce height of project name area from 60px to
48px
- Reduce size of project logo from 40px to
32px
(Medium size aligned to Pajamas) - The active state has a 4px padding around product logo/title area
- Reduce height of project name area from 60px to
Design specifications
Figma [Specifications]: https://www.figma.com/file/SMs53NHLP7NJhlPOmnO7Ca/?node-id=1846%3A55175
Edited by Michael Le