joshwcomeau / guppy

🐠A friendly application manager and task runner for React.js

ISC License

3.27k stars 154 forks source link

Changed scrollbar styling inside Sidebar #307

Closed AWolf81 closed 5 years ago

AWolf81 commented 5 years ago

Related Issue:

262

Summary: I think the scrollbar was a bit too dark and I've also added a border radius to the thumb.

I've added transitionFlip={false} to remove the jitter during scrolling. Still the moving of the tooltip is not perfect but the weird tooltip seems to be fixed.

I played with the tooltip duration, animation & sticky but nothing changed the update behaviour of the tooltip. The tooltip should stick at the display location & hide after a small delay.

Screenshots/GIFs: Transparent white bar so it's similar to the icons grafik

codecov[bot] commented 5 years ago

Codecov Report

Merging #307 into master will decrease coverage by <.01%. The diff coverage is 0%.

@@            Coverage Diff             @@
##           master     #307      +/-   ##
==========================================
- Coverage   20.47%   20.47%   -0.01%     
==========================================
  Files         239      239              
  Lines        3736     3737       +1     
  Branches      385      385              
==========================================
  Hits          765      765              
- Misses       2693     2694       +1     
  Partials      278      278

Impacted Files	Coverage Δ
src/components/Sidebar/Sidebar.js	`0% <0%> (ø)`	:arrow_up:

AWolf81 commented 5 years ago

@melanieseltzer I can not debug this. In my vm mac it's also pretty light (see screenshot below). grafik

Could you please try to check the styling inside of the browser console to see why it's dark for you? I'll also check the styling on Ubuntu to see how it's looking there.

melanieseltzer commented 5 years ago

Looks like after changing a setting it's working for me:

It's due to this setting:

I originally had it to 'Automatically based on mouse or trackpad' and it ignored the custom style and was that dark color. Changing to 'Always' fixes it for me and it picks up the custom styles.

I unfortunately don't have time today to look into it further, I wonder if @joshwcomeau has run into this before? Wonder if there's a way we can force the styles regardless of setting. Or maybe it's a Mac quirk and nothing we can do...

AWolf81 commented 5 years ago

OK, seems like an issue with react-custom-scrollbars on Mac. There could be a fix with the mentioned PR in the issue here.

Looks like React-custom-scrollbars is not maintained anymore. Last commit over a year ago. Not sure if there is an alternative to it.

Ubuntu style is OK: grafik