Modernize the top bar of the page.

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

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).

Summary ID
Modernize the top bar of the page.
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.
bc3f9b0dcd101b71485cff6813cf8035ac5f900a

Description From Last Updated

I think we're saying "top" one too many times, you could say "This is the header bar shown at the …

maubinmaubin

Shouldn't this have a "DOM Attributes" section too? If so then same comment applies to some other elements in this …

maubinmaubin
maubin
  1. 
      
  2. Show all issues

    I think we're saying "top" one too many times, you could say "This is the header bar shown at the top of the page ..."

  3. reviewboard/static/rb/css/ui/page-topbar.less (Diff revision 1)
     
     
     
     
     
     
     
     
     
     
     
     
    Show all issues

    Shouldn't this have a "DOM Attributes" section too? If so then same comment applies to some other elements in this file.

  4. 
      
chipx86
maubin
  1. Ship It!
  2. 
      
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-7.x (48a2514)