Skip to content

✨ Beautifying our UI (15.1) ✨

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
tanuki_before tanuki_only

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
navbar_before navbar_after
focus_before focus_after
toplevel_before toplevel_after
sublevel_before sublevel_after
flyout_before flyout_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
contextual_sidebar_before contextual_sidebar_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
epic_populated_before epic_populated_after

Emojis: Positive intent first

  • Changes the Emoji pickers to use positive intent first
Before After
before after

User popover

  • Changed the alignment of elements in the user popover to better accomplish the given information
Before After
usecase1_before usecase1_after
usecase2_before usecase2_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 issuenew_issue_before New issuenew_issue_after
New MRnew_mr_before New MRnew_mr_after
Feature flags**feature_flags_before** Feature flagsfeature_flags_after
New feature flagsnew_feature_flag_before New feature flagsnew_feature_flag_after
New Envnew_env_before New envnew_env_after
New labelnew_label_before New labelnew_label_after
Pipelinepipeline_before Pipelinepipeline_after
New test casenew_test_case_before New test casenew_test_case_after

Focus styles

  • Improves the styling of :focus
  • Adds :focus to more elements
  • Unifies the appearance of :focus where possible
Overview
focus
More Screnshots
Before After
overflow_before overflow_after
new_issue_comments_before new_issue_comments_after
input_before input_after
link1_before link1_after
link2_before link2_after
link3_before link3_after
before after
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 image default
Focus focus_before focus
Drop image 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 issuenew_issue_before New issuenew_issue_after
New MRnew_mr_before New MRnew_issue_update

Cleanup «New Epic»

Before After
new_epic_before new_epic_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
new_mr1_before new_mr1_after
new_mr2_before new_mr2_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 usernew_user_before New usernew_user_after
Edit useredit_user_before Edit useredit_user_after

Cleanup «New/Edit Label» pages

Before After
New Labelnew_label_before New Labelnew_label_after
Edit Labeledit_label_before Edit Labeledit_label_after

Cleanup «Schedule a new pipeline»

Before After
pipeline_before pipeline_after

Cleanup «New Test Case»

Before After
new_test_case_before new_test_case_after

Cleanup «New/Edit feature flag»

Before After
New feature flagnew_feature_flag_before New feature flagnew_feature_flag_after
Edit feature flagedit_feature_flag_before Edit feature flagedit_feature_flag_after

Cleanup «New/Edit environment»

Before After
Newnew_env_before Newnew_env_after
Editenv_edit_before Editenv_edit_after

Unbox & Cleanup «Compare merge request»

Before After
compare1_before compare1_after
compare2_before compare2_after

Unbox «Designs»

Before After
designs_before designs_after

Cleanup «Child issues and epics»

  • Removed the divider from items
Before After
epic_tree_before epic_tree_after

Comments vertical icon alignment

  • vertical alignment and horizontally balance (left & right spacing) of the comments element.
Before After
alignment_before alignment_after

Update MR widget styling

  • updated backgrounds to use $gray-10 instead of $gray-50 to bring it inline with other elements
Before After
before after

Improve comments discussion header

  • Improved the alignment of the header
Before After
before after

New merge request: Add empty state

  • Add empty branch state
Before After
new_mr_empty_before new_mr_empty_after

Change awards active item appearance

  • better visibility of which reactions a user has selected
Before After
active_rewards_before active_rewards_after

Unbox «Group audit events»

  • Removes gray background
  • Fix alignment of trash icon
  • Removes unnecessary 0 Streams counter on empty screen
Before After
no_streams_before no_streams_after
streams_add_before streams_add_after
streams_before streams_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
projects_before projects_after
More screenshots
Before After
Projects projects_before Projectsprojects_after
Explore Topicsexplore_before Explore Topicsexplore_after
Admin Projectsadmin_projects_before Admin Projectsadmin_projects_after
Jobsjobs_before Jobsjobs_after
Usersusers_before Usersusers_after
Credentialscredentials_before Credentialscredentials_after

Settings cleanup

Group Repository Settings does not respect fixed with setting

Before After
before after

Group Projects settings width does not respect fixed width

Before After
before after

Cleanup Project Settings > Repository > Protected branches

  • Top aligned labels, removed the label style overrides
  • Bold card header title to match the table headers from below
  • Adjusted select width to make room for it's content
Before After
before after
Edited by Sascha Eggenberger