Scrollbar styles

[alongoni]

Summary

Fixes #1145
Confirmation Modal:

Select a token modal:
Before/After

Styles on main scrollbar:
Before:

After:

To Test

[github-actions]

CLA Assistant Lite:
Thank you for your submission, we really appreciate it. Like many open-source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just posting a Pull Request Comment same as the below format.

---

I have read the CLA Document and I hereby sign the CLA

---

_{You can retrigger the CLA Action by commenting recheckcla in this Pull Request}

[github-actions]

• 🔭 GP Swap: CoW Protocol v2 Swap UI

[elena-zh]

Hey @alongoni , great!

A couple of issues I have faced:

1. I'm able to see 2 scroll bars when I open the menu in a tablet mode.
   

In order to reproduce this issue, please expand Swap form as much as you can (specify a token pair with amounts, add recipient to the trade, etc). Then reduce the screen to the tablet mode and open the menu

2. New Main scrollbar looks good in Chrome, but still it is not changed in FF. Will we be able to fix this as well?
   

Thanks!

[alongoni]

Hey @alongoni , great!

A couple of issues I have faced:

1. I'm able to see 2 scroll bars when I open the menu in a tablet mode.
   

In order to reproduce this issue, please expand Swap form as much as you can (specify a token pair with amounts, add recipient to the trade, etc). Then reduce the screen to the tablet mode and open the menu

2. New Main scrollbar looks good in Chrome, but still it is not changed in FF. Will we be able to fix this as well?
   

Thanks!

Hey @elena-zh

1. I couldn't reproduce this issue with the double scroll (Chrome and FF). Can you give some context to reproduce it?
   Also I found another issue in medium devices. It seems that sometimes when we open the menu some options are cropped.
   https://www.loom.com/share/70ff6c55188a4cd699375f621e14849b

2. Done! Now works fine on Firefox.

[alfetopito]

Working great on FF to me!

Looping @biocom for another CSS pair of eyes

[elena-zh]

Hey @alongoni , I'm also no longer possible to reproduce the issue with a double scroll.

Scrollbar in FF looks' good to me now!

However, I have noticed another issue: when open a token list, and it is loading, you will see this (see the screenshot) for 2-3 sec

Could we fix this?

Also, can we enhance this scrollbar?

[alongoni]

Actually in mobile devices we can see the common tokens row.

What should we do with this?
If we fix this typo with display: none; , the common token list will disappear:

I believe we can keep it.
cc @elena-zh @alfetopito @biocom

[fairlighteth]

I would leave the token list as is. The horizontal scroller is expected and is only shown for resolutions smaller than desktop. On desktop they are just stacked. But on smaller devices, horizontal real estate is more precious. Further more, on actual touch devices (mobile/tablet) the scrollbar is not shown.

[elena-zh]

LGTM!