[BUU] As an enterprise user, I can see the back office with new brand colours

[mariocarabotta]

Context

This is a first pass on colour updates to Spree, laying out the foundations for bigger updates coming with the Product List UI uplift. We are going to introduce some basic changes to colours and updating the menu.
Once we can see these updates in staging, if any elements of the interface are not changed properly, we might iterate on it soon after (before starting to rebuild the product list with the new stack).

EDIT: We are also updating the tables styles across pages to look more similar to the new table design for the Product List.

To be confirmed

Feature toggle: which user groups should be able to see these changes? @RachL

Description

- As an: enterprise user
- On page: /admin
- I want to be able to: see the existing back office with new brand colours and updated menu

Acceptance Criteria & Tests

Scenario 1: Users with feature toggle ON
Given that I am part of the user groups that have access to these updates
When I log in to the back office
Then I land to /admin
And the back office has updated colours (Allports, Mojo)
And the top navigation has new colours and styling

Scenario 2: Users with feature toggle OFF
Given that I am not part of the user groups that have access to these updates
When I log in to the back office
Then I land to /admin
And the back office has current colours (Havelock Blue, Raw Sienna)
And the top navigation has the current colours and styling

Design specs

The styling for the menu and the colours hex codes can be found in the figma page below (see Inspect tab on right column)
https://www.figma.com/file/v1zbrWDZSRd3Nqoe0SJ2Sm/Engineering-Delivery?node-id=1%3A9&t=KRmVSpzzFrCVK3vC-1

The styling for the tables should follow the styles of the new Product List table, that can be found here > https://www.figma.com/file/v1zbrWDZSRd3Nqoe0SJ2Sm/Engineering-Delivery?type=design&node-id=24%3A642&t=XN58jPI8bRZssmAZ-1

Note: given this is a first pass at updating table styles in spree, and tables across pages sometimes look and behave differently, we are giving ourselves a bit of flexibility in terms of how closely aligned with new designs these updates should be. In other words, if tables across the pages look and behave "good enough", that would be sufficient for now.
During testing we'll assess if they are good enough.

Main menu changes

• remove icons from primary navigation
• change to Sentence case
• change colours and add shadows to containers (both primary and secondary nav)
• add underline to active page (both primary and secondary nav)

Main colour changes

• replace light blue (Havelock Blue - #5498DA) with Allports #008397
• replace orange (Raw Sienna - #DA7F52) with Mojo #C85136
• replace blue/greyish (Hoki - #6788A2) with Sherpa Blue #004E5B

Additional changes

• Update the general styles for all tables in the admin interface

Reference screenshots

Current

Updated

[dacook]

• replace orange (Raw Sienna - #DA7F52) with Mojo #C85136

Hi @mariocarabotta, I've found that the Raw Sienna colour is currently used as an orange for warnings.

We currently use these two reds, mostly for errors:

• #C60F13
• #DA5354 (Roman)

Seeing as Mojo is more red than orange, I'm wondering if it should replace those colours instead?

[dacook]

yes, let's replace those two reds with Mojo. I would still also replace Sienna with Mojo since Sienna is not accessible enough. That way we only have one orangy/red colour and we start simplifying things.

[dacook]

Thanks, I have enough to go on. Here's a preview where both some orange and red icons were updated with Mojo red:
/admin/enterprises