fix: change header color to match new OFF design

[abhilipsasahoo03]

What

Changed header color to harmonize it with new Open Food Facts design

Screenshot

Fixes bug(s)

Fixes #273

[abhilipsasahoo03]

@alexfauquette kindly review!

[alexfauquette]

@teolemon

[abhilipsasahoo03]

Hi @alexfauquette I've replied to your comment, kindly review :)

[alexfauquette]

Maybe it's the correct secondary color, but the top bar should have #f2e9e4 because of

// additional top bar color between latte and cappucino
$cafecreme: #f2e9e4;

I don't know what should be the correct colors, so I let @teolemon have a look

I'm moving the PR to dev branch to trigger netlify deploy

[abhilipsasahoo03]

Maybe it's the correct secondary color, but the top bar should have #f2e9e4 because of

// additional top bar color between latte and cappucino
$cafecreme: #f2e9e4;

I don't know what should be the correct colors, so I let @teolemon have a look

I'm moving the PR to dev branch to trigger netlify deploy

Okay no issues @alexfauquette 👍

[abhilipsasahoo03]

Hey @alexfauquette @teolemon kindly review and let me know if any change is required?

[VaiTon]

Hey @abhilipsasahoo03! I see that there are a lot of changes not directly related to this fix. If that's the case, please split this PR into two and let's analyze them one by one! Thank you for your work!

[abhilipsasahoo03]

Hey @abhilipsasahoo03! I see that there are a lot of changes not directly related to this fix. If that's the case, please split this PR into two and let's analyze them one by one! Thank you for your work!

Hi @VaiTon actually all the other changes have not been made by me. They are reflected because the base branch has been pushed from master to dev. You can check the commit history of the PR.

[alexfauquette]

Yes, and I don't know why it did not trigger the Netlify rendering

By the way, I took some time to check the design resources.

My main concern is the topBar which is now nearly the same color as the background

So the minimal to merge the PR would be to add "#f2e9e4" as a background to the AppBar (defined in src/components/ResponsiveAppBar.jsx)

---

If you want to go further with the setup of the palette, here is the design system

https://www.figma.com/file/Qg9URUyrjHgYmnDHXRsTTB/New-website-design-(2022)-(Quentin)?node-id=0%3A2&t=2kXx3sHDtOs1vdcH-0

And here is the docs of MUI platte

https://mui.com/material-ui/customization/palette/

[abhilipsasahoo03]

Yes, and I don't know why it did not trigger the Netlify rendering

By the way, I took some time to check the design resources.

My main concern is the topBar which is now nearly the same color as the background

So the minimal to merge the PR would be to add "#f2e9e4" as a background to the AppBar (defined in src/components/ResponsiveAppBar.jsx)

---

If you want to go further with the setup of the palette, here is the design system

https://www.figma.com/file/Qg9URUyrjHgYmnDHXRsTTB/New-website-design-(2022)-(Quentin)?node-id=0%3A2&t=2kXx3sHDtOs1vdcH-0

And here is the docs of MUI platte

https://mui.com/material-ui/customization/palette/

Hey @alexfauquette thank you so much for the resources! I'll definitely change it to #f2e9e4. Btw, do these commits raise a concern? Should I create a new PR instead? Or is it fine to merge it just how it is?

EDIT: I just saw the base branch has been changed back to master 😅

[abhilipsasahoo03]

@alexfauquette I've made the change. Kindly check out!

[alexfauquette]

I though you would keep the previous one as a secondary color and only give a special background to the APp bar, but sounds good too