From 6a68e5ca92fa070ed5d668969b19ea2b13f03506 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 4 Jul 2019 19:53:18 -0700
Subject: [PATCH] New: Wider and taller scroll bar for the click to scrollers
 out there

---
 .../Components/Scroller/OverlayScroller.css   |  2 +-
 .../Components/Scroller/OverlayScroller.js    | 46 ++++++++++++++++++-
 frontend/src/Styles/Mixins/scroller.css       |  6 +--
 3 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Components/Scroller/OverlayScroller.css b/frontend/src/Components/Scroller/OverlayScroller.css
index 707a9ac6f..139b1e779 100644
--- a/frontend/src/Components/Scroller/OverlayScroller.css
+++ b/frontend/src/Components/Scroller/OverlayScroller.css
@@ -3,7 +3,7 @@
 }
 
 .thumb {
-  min-height: 50px;
+  min-height: 100px;
   border: 1px solid transparent;
   border-radius: 5px;
   background-color: $scrollbarBackgroundColor;
diff --git a/frontend/src/Components/Scroller/OverlayScroller.js b/frontend/src/Components/Scroller/OverlayScroller.js
index 23fe6058a..e2a269bdc 100644
--- a/frontend/src/Components/Scroller/OverlayScroller.js
+++ b/frontend/src/Components/Scroller/OverlayScroller.js
@@ -4,6 +4,8 @@ import { Scrollbars } from 'react-custom-scrollbars';
 import { scrollDirections } from 'Helpers/Props';
 import styles from './OverlayScroller.css';
 
+const SCROLLBAR_SIZE = 10;
+
 class OverlayScroller extends Component {
 
   //
@@ -21,7 +23,11 @@ class OverlayScroller extends Component {
       scrollTop
     } = this.props;
 
-    if (!this._isScrolling && scrollTop != null && scrollTop !== prevProps.scrollTop) {
+    if (
+      !this._isScrolling &&
+      scrollTop != null &&
+      scrollTop !== prevProps.scrollTop
+    ) {
       this._scroller.scrollTop(scrollTop);
     }
   }
@@ -42,6 +48,42 @@ class OverlayScroller extends Component {
     );
   }
 
+  _renderTrackHorizontal = ({ style, props }) => {
+    const finalStyle = {
+      ...style,
+      right: 2,
+      bottom: 2,
+      left: 2,
+      borderRadius: 3,
+      height: SCROLLBAR_SIZE
+    };
+
+    return (
+      <div
+        style={finalStyle}
+        {...props}
+      />
+    );
+  }
+
+  _renderTrackVertical = ({ style, props }) => {
+    const finalStyle = {
+      ...style,
+      right: 2,
+      bottom: 2,
+      top: 2,
+      borderRadius: 3,
+      width: SCROLLBAR_SIZE
+    };
+
+    return (
+      <div
+        style={finalStyle}
+        {...props}
+      />
+    );
+  }
+
   _renderView = (props) => {
     return (
       <div
@@ -91,6 +133,8 @@ class OverlayScroller extends Component {
         ref={this._setScrollRef}
         autoHide={autoHide}
         hideTracksWhenNotNeeded={autoScroll}
+        renderTrackHorizontal={this._renderTrackHorizontal}
+        renderTrackVertical={this._renderTrackVertical}
         renderThumbHorizontal={this._renderThumb}
         renderThumbVertical={this._renderThumb}
         renderView={this._renderView}
diff --git a/frontend/src/Styles/Mixins/scroller.css b/frontend/src/Styles/Mixins/scroller.css
index 62a619103..efcca0b57 100644
--- a/frontend/src/Styles/Mixins/scroller.css
+++ b/frontend/src/Styles/Mixins/scroller.css
@@ -1,7 +1,7 @@
 @define-mixin scrollbar {
   &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 10px;
+    height: 10px;
   }
 }
 
@@ -13,7 +13,7 @@
 
 @define-mixin scrollbarThumb {
   &::-webkit-scrollbar-thumb {
-    min-height: 50px;
+    min-height: 100px;
     border: 1px solid transparent;
     border-radius: 5px;
     background-color: $scrollbarBackgroundColor;