Weird coloration on the edit ingredients page in light mode

[teolemon]

Weird coloration on the edit ingredients page in light mode

[monsieurtanuki]

It happens only on the OCR pages when there was no related uploaded photo.
@teolemon Is there a specific color or UI you would prefer? Like, a light grey background around the unknown photo logo?

[teolemon]

• I'm not sure why the placeholder image is cropped in that way.
• I'm not sure tweaking the header color brings any clarity
• Do we need to do anything specific? The button are probably enough?
• I was a proponent of the Camera with + icon instead of the placeholder.

[monsieurtanuki]

• I'm not sure why the placeholder image is cropped in that way.

It is somehow cropped, and that can be fixed.

• I'm not sure tweaking the header color brings any clarity

I meant the top half size of the screen.

• Do we need to do anything specific? The button are probably enough?
• I was a proponent of the Camera with + icon instead of the placeholder.

Actually there are two buttons: "choose an existing image" and "take another picture".
I would be confusing to use a single icon with two possible actions.

@teolemon If we get rid of the currently-cropped-placeholder it would look like this - would that be ok?

before	after

[teolemon]

• the text should not be edge to edge
• The buttons should both be the same height
• the text about OCR doesn't make any sense on its own: we should maybe have more linear experience: step one take the image, step two extract the text.
• your mockup doesn't solve the initial issue: the grey color of the header, that is not helping anyone understand anything
• Add/Ajouter is not clear in its current form. It should probably be "add a photo"

[monsieurtanuki]

• the text should not be edge to edge

Indeed.

• The buttons should both be the same height

cf. #4228

• the text about OCR doesn't make any sense on its own: we should maybe have more linear experience: step one take the image, step two extract the text.

Indeed. Remember that step 1 can be either use an existing image or take a new picture.

• your mockup doesn't solve the initial issue: the grey color of the header, that is not helping anyone understand anything

Indeed it doesn't. I read quickly and assumed that it was the relatively empty space with a centered cropped logo that was bothering you.

• Add/Ajouter is not clear in its current form. It should probably be "add a photo"

You're right. In ProductImageLocalButton we use either appLocalizations.add ("Add") or appLocalizations.capture ("Capture New").
We should indeed create other explicit labels for more clarity.

[monsieurtanuki]

The "weird coloration" will be solved by #4931.

[monsieurtanuki]

Current status, with app bar "weird coloration" solved by #4931:

with image	without image

Also done:

• The buttons should both be the same height (fixed by fix: 4228 - max lines 2 and tooltip for edit image buttons #4939)

Still to do:

• the text should not be edge to edge
• the placeholder image shouldn't be cropped
• "Add" is not clear in its current form. It should probably be "add a photo"
  => simplification needed in ProductImageLocalButton, where one way or the other we need some "add a photo" label