Align Orbit UI spacing, radius, Quickstart, and query editor actions

What does this MR do and why?

A design review of the GitLab Orbit UI asked for these fixes, so that every Orbit page follows the same Pajamas rules.

Area Change
Off page The intro text under the title is smaller.
Overview globe, light theme The stars show: the same count as in the dark theme (8,000), about twice the dark-theme size, in a darker color. On a light globe, the dark-theme size is too small to see on a high-density screen.
Section headings "Groups", "How your data connects", "Query your graph with GQL", and "Quickstart" have the same size and spacing on every tab.
Group tables All cells are vertically centered, the checkboxes too.
Corner radius Cards and page regions use xl, form controls lg, and child elements md, as the Pajamas border guidance says.
Page header The title and the buttons share one center line, and Settings is the last button.
Quickstart Quickstart is a low-emphasis toggle with a chevron that shows if the box is open. It is the only control for the box. Before, it looked like a call to action that opens another page, and the box had its own close button.
Admin health card The version text is centered on the card title.
Query editor Run query is at the bottom right of the editor, where people expect it, with its keyboard hint. GitLab Duo has one Write it with GitLab Duo button next to Query reference, as on other GitLab pages. It opens GitLab Duo Chat with a prompt to help write the query, like the old Generate button did. Before, Generate sat where people expected Run query.

References

None. The feedback came from a design review.

Screenshots or screen recordings

Before After
Overview, light theme before-overview-light after-overview-light
Quickstart closed before-quickstart after-quickstart-closed
Schema before-schema after-schema
Query editor, actions before-query-actions after-query-actions
Query editor, GitLab Duo open after-query-duo-open
Query editor, heading before-query after-query
Status before-group-status after-group-status-dark
Status table before-table after-group-status

Narrow widths (375 px and the md breakpoint, 768 px):

375 px 768 px
Overview header and Quickstart overview-375 overview-768
Query editor header and footer query-375 query-768

Light and dark globe at full zoom-in, same camera position:

globe-zoom-compare

Quickstart toggle (open, closed, open):

Admin page before the change: the trial card, the settings card, and the health card had different corner radii, and the version text sat above the title line. I have no after screenshot, because the admin page is only on GitLab Self-Managed and my GDK runs in SaaS mode.

Admin page Health card
before-admin before-health-card

How to set up and validate locally

  1. With a group that has GitLab Orbit on, go to Your work > GitLab Orbit.
  2. Select Quickstart to close and open the box.
  3. Switch to the light theme and look at the stars on the globe.
  4. Open the Schema, Query editor, and Status tabs, and compare the headings and the table rows.
  5. On the Query editor tab, select Write it with GitLab Duo. GitLab Duo Chat opens and asks what you want to find.
  6. On GitLab Self-Managed, go to Admin > GitLab Orbit and compare the card corners and the health card.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Jean-Gabriel Doyon

Merge request reports

Loading
Loading