Modernize the top bar of the page.

Review Request #13718 — Created April 8, 2024 and submitted — Latest diff uploaded

Information

Review Board
release-7.x

Reviewers

The top bar of the page, containing the product information, search, and
actions, has historically been a loose collection of CSS classes that
were a bit fragile to deal with. In the work toward dark mode, a lot was
needed to clean this up.

This is now a .rb-c-topbar component, utilizing CSS Grid for some of
the layout and flexbox for the rest. This gives us better control over
both the desktop and mobile mode layouts.

The styling now utilizes Ink CSS variables and icons, styling off the
header color. This gives us consistent, page-wide control over the
colors used in the bar.

In light mode, the colors remain the same as before. In dark mode, we
use a very dark grey, almost black, though pages can override this. The
colors here are subject to change, and is not the primary focus of this
commit.

While most of the appearance remains unchanged, one change is that the
menu item hover colors now use the accent color. This provides a degree
of consistency and avoids having to deal with too many color constants.
This overall looks quite good, and will be a standard moving forward.

The search bar also now shows an icon in all cases, which helps keep
that visually identifable.

Tested this on Chrome and Firefox in desktop and mobile modes.

Tested that the mobile menu, actions, and search functionality all
worked.

Tested in light mode and dark mode (with theme customization).


Commits

Files