Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[admin_v3] New brand colours in admin interface #10791

Merged

Conversation

dacook
Copy link
Member

@dacook dacook commented May 3, 2023

What? Why?

Setting up a new feature-toggled stylesheet, and just getting started on BUU with some colour changes. As you can see, there is clearly more to do.

There are some minor changes of reds that will appear outside of feature toggle.

  1. Change error red, warning red and warning orange, all to red (ref)
    • admin_v3: Mojo #C85136
    • admin: #C60F13
      Screen Shot 2023-05-17 at 12 10 22 pm

In admin_v3, the error messages will need adjusting:
Screen Shot 2023-05-26 at 3 30 43 pm

  1. [admin_v3] Update Spree blue to Allports #008397
    Screen Shot 2023-05-26 at 3 20 39 pm

Don't worry, we'll continue to work on the admin_v3 styles!!

What should we test?

Existing Admin interface
Error messages (eg invalid form input) and icons will have a slightly different red, but everything else should look the same. The warning icon styles have been refactored slightly, so

  • Check that the icons appear on /admin/enterprise
  • Click on enterprise fees, and try adding a fee without a calculator. Error message should appear above
  • Click on tax categories, and try to edit and remove a name and save. Error message should appear.

Admin v3 styles

  • Enable feature toggle at /admin/feature-toggle/features/admin_style_v3
  • Observe new colours, but everything else still works.
  • Repeat above tests.

Release notes

Changelog Category: User facing changes > 馃槑 Feature toggled

This does slightly change some warning colours for all users, but it doesn't seem worth announcing.

Dependencies

Documentation updates

dacook and others added 10 commits May 26, 2023 15:09
This seemed like a good separation which will probably help with the upcoming changes.

Co-authored-by: jibees <jb.bellet@gmail.com>
Individual files may be copied in order to replace the old files.

NOTE: these may need manually re-syncing. If any of the copied files have changed on master in the meantime, we'll need to manaully review to consider bringing those changes to the new design.
Note that mail.css is still referring to the old palette.
Aka 'Havelock Blue', which is going to be changing.
color-5 is used for error messages.
This also changes the orange to red, but that's part of the plan.
Some templates still had this colour hardcoded. They are using angular so I didn't spend time updating them.
> That way we only have one orangy/red colour and we start simplifying things.
@dacook dacook changed the title 10630 new brand colours [admin_v3] New brand colours in admin interface May 26, 2023
@dacook dacook marked this pull request as ready for review May 26, 2023 05:36
@dacook dacook requested a review from jibees May 26, 2023 05:36
Copy link
Contributor

@jibees jibees left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clear, perfect.

Copy link
Member

@mkllnk mkllnk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work. Just to understand: Assigning red to warnings is done generally but the type of red is changed only with the feature toggle. This means that some AngularJS templates have a different red to the rest now.

Comment on lines -8 to +9
failure: {style: {color: '#da5354'}}
error: {style: {color: '#da5354'}}
failure: {style: {color: '#C85136'}}
error: {style: {color: '#C85136'}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we could define CSS variables... but probably not worth it at the moment. So this does change some colours even without the feature toggle on.

@kirstenalarsen kirstenalarsen added the priority We focus on this issue right now label May 30, 2023
@filipefurtad0 filipefurtad0 self-assigned this May 31, 2023
@filipefurtad0 filipefurtad0 added the pr-staged-au staging.openfoodnetwork.org.au label May 31, 2023
@filipefurtad0
Copy link
Contributor

Hey @dacook ,

Thanks for the notes on what to test 馃檹
Following these:

  • Check that the icons appear on /admin/enterprise

Before this PR
image

After this PR
image

After enabling Admin v3 styles

image

  • Click on enterprise fees, and try adding a fee without a calculator -> this triggers a known error 500; I guess you mean such an error message:

Before this PR
image

After this PR
image

After enabling Admin v3 styles

image

  • Click on tax categories, and try to edit and remove a name and save. Error message should appear.

Before this PR
image

After this PR
image

After enabling Admin v3 styles

image

Noticed no change in functionality. Looks good to me!
Merging.

@filipefurtad0 filipefurtad0 removed the pr-staged-au staging.openfoodnetwork.org.au label May 31, 2023
@filipefurtad0 filipefurtad0 merged commit 5f429c7 into openfoodfoundation:master May 31, 2023
51 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
priority We focus on this issue right now
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants