GUI: New navigation

GUI: New navigation

[Pine, Kathryn ElaineX]

[-- Attachment #1: Type: text/plain, Size: 1354 bytes --]

Through the last two GUI Design work group meetings, we've been working through some of the design changes I shared a couple of weeks ago with this list.

In order to provide time to consider each design change, get feedback, and make them reasonable for review, we've decided to break the commits into smaller pieces.

The first commit has been revised to just include changes to the phosphor-webui navigation.

Below is a screenshot link of the navigation change to an accordion-style menu, keeping the color palette consistent with the existing UI.
Screenshot:
https://invis.io/DPT0CJ52AVC#/394775350_Navigation-Upstream

As a follow up to requests in the GUI Design work group, I've made changes to the original commit that:

  *   Makes the buttons, focus states & colors consistent with accessibility guidelines
  *   Uses the Teal50 color to show the active page (this is one of the few colors from existing palette that meets accessibility reqts and works aesthetically)
  *   Makes the hover over background (rectangle box/on screenshot this is shown on "Access") the same color as the nav. background, just a bit lighter
  *   Uses existing color palette and background color
  *   Implements better alignment & spacing

You can also view the commit here:
https://gerrit.openbmc-project.xyz/c/openbmc/phosphor-webui/+/26539

[-- Attachment #2: Type: text/html, Size: 6481 bytes --]

Re: GUI: New navigation

[Jandra A]

[-- Attachment #1: Type: text/plain, Size: 779 bytes --]

>
>  As a follow up to requests in the GUI Design work group, I’ve made
> changes to the original commit that:
>
>
>    - Makes the buttons, focus states & colors consistent with
>    accessibility guidelines
>    - Uses the Teal50 color to show the active page (this is one of the
>    few colors from existing palette that meets accessibility reqts and works
>    aesthetically)
>    - Makes the hover over background (rectangle box/on screenshot this is
>    shown on “Access”) the same color as the nav. background, just a bit
>    lighter
>    - Uses existing color palette and background color
>    - Implements better alignment & spacing
>
> Thank you Kathy, I think Teal50 works much better in terms of contrast
against the dark background color.

[-- Attachment #2: Type: text/html, Size: 1746 bytes --]