✨ Beautifying our UI (15.1) ✨

Designer: @seggenberger
Engineer: @rob.hunt
Milestone(s): %15.1
Retro: 💬 Beautifying our UI 💬 -- Retro 15.1 (#366326 - closed)
🚀 🚀 🚀 58 MRs merged
🔄 4 MRs still open

Every milestone, we will ask Product Designers and Engineers to volunteer to partner in making self-directed usability improvements. It is an opportunity to fix the things that have been bugging you or that you've heard from users without worrying about prioritization.

Self-Directed: There are no restrictions on where in the product the pair can make improvements. The goal is to empower the pair to focus on usability improvements that they personally want to see fixed in a product that they use themselves almost every day.
No restrictions on product area: The pair is not required to work within product areas owned by their own stage groups.
No restrictions on pairings: The Product Designer and Engineer pair do not need to be from the same stage group. This is a voluntary initiative.
Work in MRs, not issues: Both the Product Designer and the Engineer should work directly in MRs to make changes. For the Product Designer, these MRs will likely be focused on less complex usability issues that the pair identifies, such as documentation, minor UI polish, or UI text changes.
Length of rotation: The length of the pairing will be 1-3 milestones, depending on what the pairing believes is appropriate for them. This means that multiple groups could be working on Beautifying our UI in parallel.
Prioritization: The Product Designer and Engineer will inform their stage group team of their involvement in the initiative, so that they can make time for it during milestone planning.

Learn more

What this issue is for

Link each MR to this issue
Braindump potential UI fixes

Testing

Please make sure package-and-qa job passes in every MR as we expect some E2E tests will be broken by the changes. QA review would also be beneficial.

Tanuki logo

Removed the wordmark from the updated tanuki logo from our product

Before	After

Navbar

Increased navbar height slightly by 8px to update to a more modern look & feel of it
Improved the visibility of elements and their :focus styles

Before	After

Contextual navigation sidebar

Increased the width of the contextual nav sidebar to have a better overall balance with the right sidebar
Also the slightly increased size helps with languages which tend to have long wordings like german or french
Updated the styling to have a bit more horizontal whitespace
Lightened background color and added a slight border to the element

Before	After

Right sidebar improvements for collapsed state

Added small padding so text doesn't touch the sides
Small font-size
Show full date

Before	After

Emojis: Positive intent first

Changes the Emoji pickers to use positive intent first

Before	After

User popover

Changed the alignment of elements in the user popover to better accomplish the given information

Before	After

Page titles

Removed h1 from Tanuki logo (which is a nightmare from a SEO POV)
Updated page titles from h2 & h3 to use h1 in over 100 pages (!)
Updated styling to be consistant across the product

Before	After
New issue	New issue
New MR	New MR
Feature flags****	Feature flags
New feature flags	New feature flags
New Env	New env
New label	New label
Pipeline	Pipeline
New test case	New test case

Focus styles

Improves the styling of :focus
Adds :focus to more elements
Unifies the appearance of :focus where possible

Overview

More Screnshots

Before	After

Update $gray-10

Updated $gray-10 in the Pajamas Design System, GitLab UI & product to use a darker nuance #f5f5f5 instead of #fafafa

Before	After
`#fafafa`	`#f5f5f5`

File upload (Dropzone)

Improved the overall appearance of the dropzone widget
Updated states
Added dedicated :focus state

State	Before	After
Default
Focus
Drop

Create pages cleanup

«New issue/MR»

Change markup of page titles to use <h1>
Changes page title to use h2 styling (align it with issue title size)
Field labels on top of fields
Removes unnecessary dividers
Removes the background & border of the form actions block

Before	After
New issue	New issue
New MR	New MR

Cleanup «New Epic»

Before	After

Unbox & Cleanup «New merge request»

Changed title to use h1 semantically, h2 visually (aligns with issue/MR title styles)
Changed subtitle styles
Unboxed branch elements

Before	After

Cleanup «New user/Edit user» forms

Removes unnessessary dividers
Changes labels to be on top of fields
Removes background from form actions

Before	After
New user	New user
Edit user	Edit user

Cleanup «New/Edit Label» pages

Before	After
New Label	New Label
Edit Label	Edit Label

Cleanup «Schedule a new pipeline»

Before	After

Cleanup «New Test Case»

Before	After

Cleanup «New/Edit feature flag»

Before	After
New feature flag	New feature flag
Edit feature flag	Edit feature flag

Cleanup «New/Edit environment»

Before	After
New	New
Edit	Edit

Unbox & Cleanup «Compare merge request»

Before	After

Unbox «Designs»

Before	After

Cleanup «Child issues and epics»

Removed the divider from items

Before	After

Comments vertical icon alignment

vertical alignment and horizontally balance (left & right spacing) of the comments element.

Before	After

Update MR widget styling

updated backgrounds to use $gray-10 instead of $gray-50 to bring it inline with other elements

Before	After

Improve comments discussion header

Improved the alignment of the header

Before	After

New merge request: Add empty state

Add empty branch state

Before	After

Change awards active item appearance

better visibility of which reactions a user has selected

Before	After

Unbox «Group audit events»

Removes gray background
Fix alignment of trash icon
Removes unnecessary 0 Streams counter on empty screen

Before	After

Improve scrolling tabs

Fixes overflowing elements
Fixes scrolling tabs behavior
Fixes alignment of scrolling indicator
Adds scrolling indicator where missing
Adds a gradient behind the scrolling indicator

Before	After

More screenshots

Before	After
Projects	Projects
Explore Topics	Explore Topics
Admin Projects	Admin Projects
Jobs	Jobs
Users	Users
Credentials	Credentials