From 7ff21ee5daa2a492808199d0ec1d7e37a2aded39 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sat, 7 Nov 2020 17:32:29 +0300
Subject: [PATCH 1/2] Move custom scrollbar styles to separate class

---
 .../src/theme/BlogSidebar/index.tsx           |  3 ++-
 .../src/theme/BlogSidebar/styles.module.css   | 20 +------------------
 .../src/theme/DocSidebar/index.tsx            | 16 ++++++++++-----
 .../src/theme/DocSidebar/styles.module.css    | 18 -----------------
 .../src/theme/Layout/styles.css               | 16 +++++++++++++++
 .../src/theme/TOC/index.tsx                   |  4 +++-
 .../src/theme/TOC/styles.module.css           | 19 ------------------
 7 files changed, 33 insertions(+), 63 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
index 31e5ac98857b..1d755bc295c3 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/BlogSidebar';
 import styles from './styles.module.css';
@@ -15,7 +16,7 @@ export default function BlogSidebar({sidebar}: Props) {
     return null;
   }
   return (
-    <div className={styles.sidebar}>
+    <div className={clsx(styles.sidebar, 'thin-scrollbar')}>
       <h3 className={styles.sidebarItemTitle}>{sidebar.title}</h3>
       <ul className={styles.sidebarItemList}>
         {sidebar.items.map((item) => {
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
index 1b408e1892c3..e8037a09cbcf 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
@@ -13,31 +13,13 @@
   top: calc(var(--ifm-navbar-height) + 2rem);
 }
 
-.sidebar::-webkit-scrollbar {
-  width: 7px;
-}
-
-.sidebar::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 10px;
-}
-
-.sidebar::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 10px;
-}
-
-.sidebar::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
 .sidebarItemTitle {
   margin-bottom: 0.5rem;
 }
 
 .sidebarItemList {
   overflow-y: auto;
-  font-size: .9rem;
+  font-size: 0.9rem;
   padding-left: 0;
 }
 
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
index cc0a4ede54bc..9cf9f9f3011f 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
@@ -230,11 +230,17 @@ function DocSidebar({
         </Link>
       )}
       <div
-        className={clsx('menu', 'menu--responsive', styles.menu, {
-          'menu--show': showResponsiveSidebar,
-          [styles.menuWithAnnouncementBar]:
-            !isAnnouncementBarClosed && scrollY === 0,
-        })}>
+        className={clsx(
+          'menu',
+          'menu--responsive',
+          'thin-scrollbar',
+          styles.menu,
+          {
+            'menu--show': showResponsiveSidebar,
+            [styles.menuWithAnnouncementBar]:
+              !isAnnouncementBarClosed && scrollY === 0,
+          },
+        )}>
         <button
           aria-label={showResponsiveSidebar ? 'Close Menu' : 'Open Menu'}
           aria-haspopup="true"
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
index 4252b8b34313..3cf845bb80e7 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
@@ -52,24 +52,6 @@
     padding: 0.5rem;
   }
 
-  .menu::-webkit-scrollbar {
-    width: 7px;
-  }
-
-  .menu::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 10px;
-  }
-
-  .menu::-webkit-scrollbar-thumb {
-    background: #888;
-    border-radius: 10px;
-  }
-
-  .menu::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
-
   .menuLinkText {
     cursor: initial;
   }
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css b/packages/docusaurus-theme-classic/src/theme/Layout/styles.css
index a22555524a80..e50b98f7123d 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/styles.css
@@ -24,3 +24,19 @@ body {
 .main-wrapper {
   flex: 1 0 auto;
 }
+
+/* Custom scrollbar (TODO: Should it be in Infima instead?) */
+.thin-scrollbar::-webkit-scrollbar {
+  width: 7px;
+}
+.thin-scrollbar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+.thin-scrollbar::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 10px;
+}
+.thin-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx b/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx
index d7b98d85b842..62cccf28abde 100644
--- a/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx
@@ -23,7 +23,9 @@ function Headings({headings, isChild}: TOCProps & {isChild?: boolean}) {
   return (
     <ul
       className={
-        isChild ? '' : 'table-of-contents table-of-contents__left-border'
+        isChild
+          ? ''
+          : 'table-of-contents table-of-contents__left-border thin-scrollbar'
       }>
       {headings.map((heading) => (
         <li key={heading.id}>
diff --git a/packages/docusaurus-theme-classic/src/theme/TOC/styles.module.css b/packages/docusaurus-theme-classic/src/theme/TOC/styles.module.css
index 74f7ba5ab584..b58430c06f1f 100644
--- a/packages/docusaurus-theme-classic/src/theme/TOC/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/TOC/styles.module.css
@@ -13,24 +13,6 @@
   top: calc(var(--ifm-navbar-height) + 2rem);
 }
 
-.tableOfContents::-webkit-scrollbar {
-  width: 7px;
-}
-
-.tableOfContents::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 10px;
-}
-
-.tableOfContents::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 10px;
-}
-
-.tableOfContents::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
 @media only screen and (max-width: 996px) {
   .tableOfContents {
     display: none;
@@ -40,4 +22,3 @@
     padding: 0 0.3rem;
   }
 }
-  
\ No newline at end of file

From 89582b1bda08730b9072a5f6ce98473528d4ff5c Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sun, 8 Nov 2020 01:08:07 +0300
Subject: [PATCH 2/2] chore(v2): upgrade Infima to v0.2.0-alpha.15

---
 packages/docusaurus-theme-classic/package.json   |  2 +-
 .../src/theme/Layout/styles.css                  | 16 ----------------
 yarn.lock                                        |  8 ++++----
 3 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
index 3a2d62ad6dac..df38e1f43056 100644
--- a/packages/docusaurus-theme-classic/package.json
+++ b/packages/docusaurus-theme-classic/package.json
@@ -32,7 +32,7 @@
     "@types/react-toggle": "^4.0.2",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^2.2.0",
-    "infima": "0.2.0-alpha.14",
+    "infima": "0.2.0-alpha.15",
     "lodash": "^4.17.19",
     "parse-numeric-range": "^0.0.2",
     "prism-react-renderer": "^1.1.0",
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css b/packages/docusaurus-theme-classic/src/theme/Layout/styles.css
index e50b98f7123d..a22555524a80 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/styles.css
@@ -24,19 +24,3 @@ body {
 .main-wrapper {
   flex: 1 0 auto;
 }
-
-/* Custom scrollbar (TODO: Should it be in Infima instead?) */
-.thin-scrollbar::-webkit-scrollbar {
-  width: 7px;
-}
-.thin-scrollbar::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 10px;
-}
-.thin-scrollbar::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 10px;
-}
-.thin-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
diff --git a/yarn.lock b/yarn.lock
index e20ca736b9c1..aea65dc9a46e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11642,10 +11642,10 @@ infer-owner@^1.0.3, infer-owner@^1.0.4:
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
   integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
 
-infima@0.2.0-alpha.14:
-  version "0.2.0-alpha.14"
-  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.14.tgz#e7c79a12feedfb41626b89c77357a58a872c6d15"
-  integrity sha512-RMyVw0HAKAMoG78cRW2/sbD79MgCX19VfpTnchG1JaqYkIb+IQHo5P7/ZvJ1U/DPiLkY3bkkhJHqfzCz4ftTJQ==
+infima@0.2.0-alpha.15:
+  version "0.2.0-alpha.15"
+  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.15.tgz#034c91c3cfcededf57df97644793b7e21ec695d9"
+  integrity sha512-RQjMa//BOuKN3kRoQeNWKhlriaxTiqNFCUCbRP3lw65qTpETDIdRCwDNLxrHHCls0rbgCvOc5LD1UG7JITRemg==
 
 inflight@^1.0.4:
   version "1.0.6"