better scrollbars

package-lock.json

@@ -3605,6 +3605,11 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "cnbuilder": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/cnbuilder/-/cnbuilder-1.1.7.tgz",
+      "integrity": "sha512-8D9dpabOVOh7GX/qPZ60sJpqxHaiLqSDsuZOYH1TvoNkgMrO7BJHCbNepHHoglSdU//M2sjLHaL9Vu0qibSV2A=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -11250,6 +11255,16 @@
         "react-motion": "^0.5.2"
       }
     },
+    "react-scrollbars-custom": {
+      "version": "4.0.21",
+      "resolved": "https://registry.npmjs.org/react-scrollbars-custom/-/react-scrollbars-custom-4.0.21.tgz",
+      "integrity": "sha512-EwIVXBYsZG91Wm90a8ajSjpclXMu3XehcSGz+QbnLDQbmc+Rj/Uj+gP9bgbhyvQTKlhfjoka77VEWu9/DxOwBg==",
+      "requires": {
+        "cnbuilder": "^1.1.7",
+        "react-draggable": "^3.3.2",
+        "zoom-level": "^1.2.4"
+      }
+    },
     "react-sizeme": {
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.6.7.tgz",
@@ -14934,6 +14949,11 @@
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
       "dev": true
+    },
+    "zoom-level": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/zoom-level/-/zoom-level-1.2.4.tgz",
+      "integrity": "sha512-nGFUhyU3Y4jWh6l+hYCVVUxu3vrD0i/RkumJRzYGU0COMWMs2Szs84mltacd64R9zJcxwKckWQN/KKbfB1btVA=="
     }
   }
 }

package.json

@@ -96,6 +96,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scrollbar": "^0.5.4",
+    "react-scrollbars-custom": "^4.0.21",
     "react-sortable-hoc": "^1.10.1",
     "react-stack-grid": "^0.7.1",
     "redux": "^4.0.1",

src/containers/dialogs/BetterScrollDialog/index.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 // import { DialogPanel } from '~/components/panels/DialogPanel';
 import classNames from 'classnames';
-import { Scroll } from '~/components/containers/Scroll';
+import Scroll from 'react-scrollbars-custom';
 import * as styles from './styles.scss';
 import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
 import { Icon } from '~/components/input/Icon';

src/redux/modal/reducer.ts

@@ -10,7 +10,7 @@ export interface IModalState {
 
 const INITIAL_STATE: IModalState = {
   is_shown: false,
-  dialog: DIALOGS.LOGIN,
+  dialog: DIALOGS.TEST,
 };
 
 export default createReducer(INITIAL_STATE, MODAL_HANDLERS);

src/styles/global.scss

@@ -86,3 +86,45 @@ body {
 :global(h2) {
   font: $font_24_bold;
 }
+
+::-webkit-scrollbar {
+  width: 18px;
+  height: 18px;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #999999;
+  border: 4px solid $content_bg;
+  border-radius: 12px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: lighten(#999999, 4%);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: lighten(#999999, 8%);
+}
+
+::-webkit-scrollbar-track {
+  background: $content_bg;
+  border: 0px none #ffffff;
+  border-radius: 50px;
+}
+
+// ::-webkit-scrollbar-track:hover {
+// background: #666666;
+// }
+//
+// ::-webkit-scrollbar-track:active {
+// background: #333333;
+// }
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}