feat: 2910 - big UI/UX refactoring for "add new product" page

[monsieurtanuki]

What

• Big UI/UX refactoring for the "add new product" page
  • New specific card for Nutriscore
  • New specific card for Ecoscore
  • Instant refresh of the product (e.g. name, nutriscore, ecoscore)
  • Possibility to change the previous input
• Fine-tuning still needed, for instance
  • Close the "new product!" dialog when we leave the page
  • Confirm that light blue is a relevant color for the cards
  • Dark mode tests
  • Refine the "photo uploaded" button

Screenshot

landing page	name + categories added

nutrition facts added	photo uploaded

Part of

• Make the Road to Scores more explicit on product addition #2910

Impacted files

• add_new_product_page.dart: big refactoring
• add_simple_input_button.dart: refactoring
• app_en.arb: added 5 labels
• app_fr.arb: added 5 labels
• smooth_large_button_with_icon.dart: added an optional image file to display in RRect

[codecov-commenter]

Codecov Report

Merging #4054 (5dcd8da) into develop (f7d91a2) will decrease coverage by 0.03%.
The diff coverage is 0.00%.

❗ Current head 5dcd8da differs from pull request most recent head 8c25fbf. Consider uploading reports for the commit 8c25fbf to get more accurate results

@@             Coverage Diff             @@
##           develop    #4054      +/-   ##
===========================================
- Coverage    11.00%   10.97%   -0.03%     
===========================================
  Files          270      270              
  Lines        13369    13405      +36     
===========================================
  Hits          1471     1471              
- Misses       11898    11934      +36     

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%> (ø)

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

[teolemon]

I believe it's a strong improvement over what we have @g123k @M123-dev @raphael0202
We'll be able to swap the order of the cards, as we infuse more ML

[M123-dev]

Yes, but I strongly pleed for a different color

[g123k]

I haven't looked at the code yet, but I agree with @M123-dev and I think, there's more than colors to change.
What's the best path to follow here?

• Validate this PR in terms of code and improve the UI later?
• Or wait for a few sketches before?

[teolemon]

I'd be tempted to merge/iterate.
What do you have in mind @g123k ?

[g123k]

I'd be tempted to merge/iterate. What do you have in mind @g123k ?

Only based on the screenshots, I would say:

• All those buttons may feel frightening/Intimidating for new users
• Titles are basically an action, which could instead be a description of it

(Also this may not be the case here, but in the prod app, if I take a photo (e.g.: the ingredients) and I have made a mistake, I can't fix it in this screen because once a button is "filled", it's also in a disabled state.

[teolemon]

Titles are basically an action, which could instead be a description of it

Not sure I understand that

[g123k]

Titles are basically an action, which could instead be a description of it

Not sure I understand that

For example, with "Help compute the NutriScore in 2 min" -> this is the action

We should rather say:

• Title: Compute the Nutriscore

• Subtitle: Help us by filling at least a category and nutritional values

• Action 1 : Select a category
  … which unlocks Action 2 : Fill nutritional values

Basically our eyes are directed to a too long sentence and we need to be more explicit on the actions.

[teolemon]

I've made some variations @g123k

[teolemon]

@g123k @monsieurtanuki more convincing version. WDYT ?

[monsieurtanuki]

@teolemon I like the new colors, but I don't like the "Cancel" or "Skip" buttons, that are misleading: every change on a product is automatically sent to the server.

Anyway, I would prefer the current PR to be approved and merged first: not because of its arguably superb UI, but mainly because the product refresh is included.

Then any improvement can be coded on top of it, after discussion, like:

• on your screenshots the product name/brand/weight are not there (?)
• there are no picture either (?)
• the category buttons are confusing (in my PR too), as they appear in two sections
• I would add a 2-line explanation of the nutriscore and the ecoscore

What looks easily feasible so far is:

• no more blue background
• green color when data was input
• maybe the category name when it was input (but I'm not sure it's possible as we have the whole category trees)
• maybe a "finish" button, that does the same thing as the "back" button

[teolemon]

on your screenshots the product name/brand/weight are not there (?)
there are no picture either (?)

Just an omission to make mockups faster to create

[teolemon]

I would add a 2-line explanation of the nutriscore and the ecoscore

Yeah, we're considering a new experience using in-app Instagram-like Stories.
This will need a separate issue and appropriate mockups to understand how we fit them in properly

[monsieurtanuki]

Just an omission to make mockups faster to create

That confirms my analysis: you guys should probably approve this PR first, that works and is an improvement.
And then we can think about the next version(s) of the screen, with no rush, from dedicated issues.
"Ohne Hast aber ohne Rast"

[teolemon]

Here's what the mockups would require to implement

• Replace the Tick by 1 and 2 (requires icon change c)
• Add Header “Compute the Eco-Score” “Compute the Nutri-Score”
• Add subheader “Help us by filling at least a category and nutritional values” “Help us by filling at least a category”
• Add crayon edit icon to clarify editability at all times
• Color the fields based on local product status
• Make the nutrition facts unselectable until a category has been provided
• Create a new edit screen concatenating facultative eco-score fields
• Link the facultative eco-score fields edit screen to the new product addition “Make Eco-Score computation more precise with origins, packaging & more”

[teolemon]

Approved, let's iterate 👍