PLAYRTS-5590 Update Highlight Cell Design

[mutaben]

Description

Up until now, there was a linear gradient on Highlight Cells, helping make the text more legible.

This PR improves this aspect based on UI/UX requirements, by improving legibility without darkening the highlighted content too much.

In the following images, you can see the raw gradients, how they used to be and how they were implemented after various attempts to find the best result.

Please see also some screenshots to see it in action today.

Changes Made

This was implemented by:

• Moving the description text at the bottom left as requested
• Tweaking the gradients, two gradients are now used (both linear):
  • One from bottom to top, in order to highlight the description text
  • One from the bottom left corner

The gradients were tweaked for large and compact size, and for different amount of text content. (see the raw gradients above)

If they need to be adjusted in the future, they now have their own view and the midway point to stop the gradient is customizable as a parameter.

Checklist

• I have followed the project's style guidelines.
• I have performed a self-review of my own changes.
• I have made corresponding changes to the documentation.
• My changes do not generate new warnings.
• I have tested my changes and I am confident that it works as expected and doesn't introduce any known regressions.
• I have reviewed the contribution guidelines.

[pradie-charlotte]

Did you also change highlight's dimensions ? ( mobile 200, tablet portrait 280, and tablet landscape 480)
Cause on android tablet (landscape mode), highlight looks a little bit large. Have you got the same impression/ result on ios ?
You can see the android tablet landscape result on the android merge request

[mutaben]

Did you also change highlight's dimensions ? ( mobile 200, tablet portrait 280, and tablet landscape 480) Cause on android tablet (landscape mode), highlight looks a little bit large. Have you got the same impression/ result on ios ? You can see the android tablet landscape result on the android merge request

@pradie-charlotte
No, we defined only two highlights, one for compact, and one for regular, and I tried to stick to the Figma. Hope that helps.

[pyby]

@pradie-charlotte No, we defined only two highlights, one for compact, and one for regular, and I tried to stick to the Figma. Hope that helps.

@mutaben But if the UX team proposes a third one compatible with Apple rotation and size classes, this iPad may could do this:
ShowHeaderView (header) and HeroMediaCell (content cell, like the highlighted one) have three layouts:

• horizontal compact.
• horizontal regular in portrait.
• horizontal regular in landscape.

If the Android test on tablet is validated, let check on iPad then.

[Loic-Dumas]

Hello @mutaben @pyby ,
To clarify the current status on Android.

As explained by @pradie-charlotte, we have these height for the highlight, as defined in the Figma:

• Mobile 200 (the view is called packed, as there's no description)
• Tablet portrait 280
• Tablet landscape 480
• TV 250 (We kept the 250 , as the 480 was clearly too much)

We Asked Alessandra if for the tablet land 480 was too much. But since she's on holiday, we decided to merge, and update the height later if needed.

[pyby]

Not sure VerticalGradientView(midwayStop: 0.3) or the VerticalGradientView height is enough for light background images.

Nice stops improvement.