Make part of next color picker visible in color pickers scroll bar

[pavloburykh]

Followup of #17405 cc @OmarBasem

Discussed here

Currently part of next color picker is not visible wich makes it not obvious for user that color pickers are scrollable.

We should make part of next color picker visible as it is shown on the designs

Expected result:

https://www.figma.com/file/o4qG1bnFyuyFOvHQVGgeFY/Onboarding-for-Mobile?type=design&node-id=2241-250931&mode=design

Actual result:

Additional Information

• Status version: nightly
• Operating System: Android, iOS

[ibrkhalil]

Hey @pavloburykh
This is how it looks like for me on 14 Pro emulator

May I know what device you're using for testing this?

[pavloburykh]

May I know what device you're using for testing this?

Hi @ibrkhalil
This is how it looks for me

iPhone X:

Samsung Galaxy A52:

[ibrkhalil]

Thinking more about implementing it, I think it's not possible to make the same look on all devices while having each circle the same width because devices have different widths and the number of visible circles and how they look is very much dependant on device width.
So I'd ask permission from Design to allow me to make the widths of the circles dynamic (By finding their ratio for iPhone 11 Pro and applying that for all devices)
CC: @Francesca-G
I used ratios in my branch and this how it looks like with a ratio applied instead of values.

[OmarBasem]

@ibrkhalil we can make the margins dynamic

[ibrkhalil]

@ibrkhalil we can make the margins dynamic

Let me give it another attempt with dynamic margins and report back.
I tried it already yesterday but couldn't get it to look good enough.
Maybe I missed something..

[OmarBasem]

@ibrkhalil A circle's total size is its width plus its margin. So making the width dynamic or the margin dynamic should give the same result

[Francesca-G]

Thinking more about implementing it, I think it's not possible to make the same look on all devices while having each circle the same width because devices have different widths and the number of visible circles and how they look is very much dependant on device width. So I'd ask permission from Design to allow me to make the widths of the circles dynamic (By finding their ratio for iPhone 11 Pro and applying that for all devices) CC: @Francesca-G I used ratios in my branch and this how it looks like with a ratio applied instead of values.

As mentioned here we shouldn't change the circle size but margins between circles should be flexible :)

[ibrkhalil]

Ookay, Let me give it a shot.

[cammellos]

@ibrkhalil could you give us an update on this one please?

[ibrkhalil]

@ibrkhalil could you give us an update on this one please?

I mentioned @pavloburykh on the PR, Telling him that I did the dynamic margin and it's ready for a rereview

[pavloburykh]

I mentioned @pavloburykh on the PR, Telling him that I did the dynamic margin and it's ready for a rereview

Thank you. I will review today and provide feedback in the PR.