feat: 4058 - new UI for "add product"

[monsieurtanuki]

What

• New UI for the "add product" page:
  • score titles and subtitles
  • no more blue background
  • score on one line
  • leading (1) and (2) icons
  • deactivated button when relevant
  • green background when relevant
• TODO:
  • dark mode
  • localization
• Outside of this PR:
  • facultative ecoscore fields

Screenshot

landing page	categories set	scrolled to ecoscore

nutrition facts	photo	details

Part of

• Visual touch up for the product addition #4058

Impacted files

• add_new_product_page.dart: score titles and subtitles; no more blue background; score on one line; leading (1) and (2) icons; deactivated button
• add_simple_input_button.dart: minor refactoring
• edit_product_page.dart: minor refactoring
• simple_input_page_helpers.dart: new method showEditPage from previous code
• smooth_large_button_with_icon.dart: refactored with backgroundColor, foregroundColor and trailing parameters

[teolemon]

info • Use Flutter TODO format: // TODO(username): message, https://URL-to-issue • packages/smooth_app/lib/pages/product/add_new_product_page.dart:338:32 • flutter_style_todos
info • Use Flutter TODO format: // TODO(username): message, https://URL-to-issue • packages/smooth_app/lib/pages/product/add_new_product_page.dart:340:37 • flutter_style_todos

[monsieurtanuki]

info • Use Flutter TODO format: // TODO(username): message, https://URL-to-issue

@teolemon Indeed. That's a typical case - dark mode to be implemented, or localizations.
I prefer it that way: first have a look at the light mode screenshots, tell me what should be changed. Then once the light mode is somehow approved, I can code the final changes: dark mode and localizations. Which are easy to locate as they are the only dart analysis warnings. Instead of "legal" TODOs.

[teolemon]

was just pasting the build failure.

• the black/grey unknown eco-score is ugly. I believe we might do an exception with the full grey variant already in the app for not applicable: https://github.com/openfoodfacts/smooth-app/blob/develop/packages/smooth_app/assets/cache/nutriscore-not-applicable.svg
• let's put the "A few photos section" back on top, since it's used for machine learning, and the most valuable thing for us from users in a hurry
• Looks good otherwise

[codecov-commenter]

Codecov Report

Merging #4060 (1ef5b86) into develop (6cd6933) will decrease coverage by 0.02%.
The diff coverage is 0.00%.

@@             Coverage Diff             @@
##           develop    #4060      +/-   ##
===========================================
- Coverage    10.96%   10.94%   -0.02%     
===========================================
  Files          270      270              
  Lines        13415    13434      +19     
===========================================
  Hits          1471     1471              
- Misses       11944    11963      +19     

Impacted Files	Coverage Δ
...ric_lib/buttons/smooth_large_button_with_icon.dart	0.00% <0.00%> (ø)
...th_app/lib/pages/product/add_new_product_page.dart	0.00% <0.00%> (ø)
...app/lib/pages/product/add_simple_input_button.dart	0.00% <0.00%> (ø)
...mooth_app/lib/pages/product/edit_product_page.dart	0.46% <0.00%> (+0.01%)	⬆️
...p/lib/pages/product/simple_input_page_helpers.dart	0.00% <0.00%> (ø)

... and 2 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[monsieurtanuki]

Latest commit:

• dark mode
• images first
• titles and subtitles for nutriscore and ecoscore

New product:

light	dark

Regarding the "unknown" / "not applicable" score icons, for the moment I kept the so called ugly icons, for consistency reasons.
Assuming that the "unknown" icons are ugly, that would mean that we should probably never show them and always show the "not applicable" version instead.
That means that:

• that should apply to the "new product" dialog too
• we should override the icon provided by the product (if "unknown" then "not-applicable") - because as soon as a product field is populated, the score and the icon are computed (and will be the "unknown" version)
• should that extend to the rest of the app?

Following are screenshots with the "not applicable" icons:
New product dialog, nutriscore and ecoscore "not applicable":

light	dark

New product page, nutriscore "not applicable":

light	dark

New product page, ecoscore "not applicable":

light	dark

@teolemon Waiting for your instructions about the "unknown" / "not applicable" icons for the "new product".

[teolemon]

This will break consistency with server, so let's keep as is, I guess

[monsieurtanuki]

This will break consistency with server, so let's keep as is, I guess

@teolemon Feel free to approve then. The "additional ecoscore" edits will be in another PR.

[monsieurtanuki]

Thank you @teolemon for your review!