Use custom CSS scrollbars for consistent look across OSes

[mvaivre]

The appearance of the scrollbars on MacOS and most Linux distros is 🤢, especially with the dark theme on.

Good news: we know for sure that we're running on webkit! Thus, we don't have to use JS to create pseudo-scrollbars, we can leverage this: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

[LeeAlephium]

I think we could switch to a css scrollbar mimicking the MacOS one (which is IMO way more discreet and elegant).

#301 (comment)

[LeeAlephium]

@mvaivre or @nop33 what does macos do when the scrollbar is on a black background? Does it turn light grey?

[nop33]

yes

[mvaivre]

As a reference, here's a demo of scrollbar interactions on macos. I doubt we can do exactly that with CSS only, but let's try to follow this minimalistic approach!

Screen.Recording.2022-08-10.at.09.50.09.mov

[LeeAlephium]

@mvaivre to be sure, you saw #324 (comment), and we want something that is much closer to the video demo, right?

[mvaivre]

I had not see it nope! It's a very good start, thanks. Ideally yes, we'd like it to be closer to what's shown above:

• With a little padding so that it doesn't touch the side of the window
• A bit less contrasty (less dark / light, depending on the active theme)
• Let's make the scrollbars appear only when hovering the scrollable area (a la ledger live, or Slack)

And no track (as you made it).

[LeeAlephium]

Adding padding and having nice fade in/out is going to make this way less trivial - Slack for example creates a scrollbar component and uses this. I'll do the same then if we want these... At least we'll have very configurable scrollbars then 😆

Edit: It becomes very trivial if I just use https://malte-wessel.com/react-custom-scrollbars/ That package can't be styled to the degree we need. I'll just take the time then to create what we need... After some further looking into its examples and source it can be styled ✨

[LeeAlephium]

malte-wessel/react-custom-scrollbars#406 🤦

[LeeAlephium]

https://github.com/xobotyi/react-scrollbars-custom is working perfectly, I just have to adjust a few other places in the application where scrollbars appear and it's all good