From fb857607dbacb89ccd41a467f8637dc1625f68be Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Tue, 7 Apr 2020 18:18:08 +1000
Subject: [PATCH] Added simplebar for more consistent scroll bars between mac
 and windows

---
 package.json             |  1 +
 src/components/Tokens.js | 36 ++++++++++++++------------------
 src/index.css            |  4 ++++
 src/index.js             |  3 +++
 yarn.lock                | 44 ++++++++++++++++++++++++++++++++++++++--
 5 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 55285f4..9d29099 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-scripts": "3.4.0",
     "shortid": "^2.2.15",
     "simple-peer": "^9.6.2",
+    "simplebar-react": "^2.1.0",
     "socket.io-client": "^2.3.0",
     "theme-ui": "^0.3.1"
   },
diff --git a/src/components/Tokens.js b/src/components/Tokens.js
index befd695..6980da5 100644
--- a/src/components/Tokens.js
+++ b/src/components/Tokens.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-import { Flex, Box } from "theme-ui";
+import { Box } from "theme-ui";
 import shortid from "shortid";
+import SimpleBar from "simplebar-react";
 
 import * as tokens from "../tokens";
 
@@ -22,32 +23,25 @@ function Tokens({ onCreateMapToken }) {
 
   return (
     <>
-      <Flex sx={{ flexDirection: "column" }}>
-        <Flex
-          bg="background"
-          sx={{
-            width: "80px",
-            minWidth: "80px",
-            flexDirection: "column",
-            overflowY: "auto",
-          }}
-          px={2}
-        >
+      <Box
+        sx={{
+          height: "100%",
+          width: "80px",
+          minWidth: "80px",
+          overflow: "hidden",
+        }}
+      >
+        <SimpleBar style={{ height: "calc(100% - 58px)", overflowX: "hidden" }}>
           {Object.entries(tokens).map(([id, image]) => (
-            <Box key={id} m={2} sx={{ width: "48px", height: "48px" }}>
+            <Box key={id} my={2} mx={3} sx={{ width: "48px", height: "48px" }}>
               <Token image={image} className={listTokenClassName} />
             </Box>
           ))}
-        </Flex>
-        <Box
-          pt={1}
-          sx={{
-            backgroundColor: "muted",
-          }}
-        >
+        </SimpleBar>
+        <Box pt={1} bg="muted" sx={{ height: "58px" }}>
           <SizeInput value={tokenSize} onChange={setTokenSize} />
         </Box>
-      </Flex>
+      </Box>
       <ProxyToken
         tokenClassName={listTokenClassName}
         onProxyDragEnd={handleProxyDragEnd}
diff --git a/src/index.css b/src/index.css
index 2ffafd1..2c616fc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,3 +9,7 @@ html {
 body {
   overscroll-behavior: none;
 }
+
+.simplebar-scrollbar:before {
+  background: #fff;
+}
diff --git a/src/index.js b/src/index.js
index 2cf4590..f70ea57 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,9 @@ import ReactDOM from "react-dom";
 import App from "./App";
 import Modal from "react-modal";
 
+// Add css for simplebar
+import "simplebar/dist/simplebar.min.css";
+
 import * as serviceWorker from "./serviceWorker";
 
 import "./index.css";
diff --git a/yarn.lock b/yarn.lock
index d15099b..e5c10b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3042,6 +3042,11 @@ camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+can-use-dom@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
+  integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -3488,7 +3493,7 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
-core-js@^3.5.0:
+core-js@^3.0.1, core-js@^3.5.0:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
   integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
@@ -6923,6 +6928,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -6948,6 +6958,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -8852,7 +8867,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9472,6 +9487,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -9906,6 +9926,26 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+simplebar-react@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-2.1.0.tgz#57d524f4253579d81ac30db00acf7886b17bf826"
+  integrity sha512-UIMFPNkn6o57v058vPOiYbnbpc1CUZwPKLmQaDMvEJdgm+btZ2umFA6meXfiqFEQUjDE6Vq4ePnL7Fr6nzJd8w==
+  dependencies:
+    prop-types "^15.6.1"
+    simplebar "^5.1.0"
+
+simplebar@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-5.1.0.tgz#15437ace314ec888accd7d8f24ada672e9bb2717"
+  integrity sha512-bdi1SleK1YOSnfeUjo5UQXt/79zNjsCJVEfzrm6photmGi2aU6x0l7rX4KAGcrtj5AwsWPBVXgDyYAqbbpnuRg==
+  dependencies:
+    can-use-dom "^0.1.0"
+    core-js "^3.0.1"
+    lodash.debounce "^4.0.8"
+    lodash.memoize "^4.1.2"
+    lodash.throttle "^4.1.1"
+    resize-observer-polyfill "^1.5.1"
+
 sisteransi@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.4.tgz#386713f1ef688c7c0304dc4c0632898941cad2e3"