From 066a6c7d3d44feb494fcdccf514947876f9c6004 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Thu, 28 Jan 2021 12:45:17 -0600
Subject: [PATCH] move scrollbar styling to @pybricks/ide-docs

This makes the scrollbar flashing less noticeable, but there is still
a bit of a flash in dark mode due to the fact that we are still
injecting the class in the load event in that case.
---
 package.json           |  2 +-
 src/components/App.tsx | 47 ------------------------------------------
 yarn.lock              |  8 +++----
 3 files changed, 5 insertions(+), 52 deletions(-)

diff --git a/package.json b/package.json
index 353b949a..6e35fd59 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
         "@blueprintjs/core": "^3.38.1",
         "@craco/craco": "^6.0.0",
         "@pybricks/firmware": "4.5.0",
-        "@pybricks/ide-docs": "1.0.0",
+        "@pybricks/ide-docs": "1.1.0",
         "@pybricks/mpy-cross-v5": "^2.0.0",
         "@shopify/react-i18n": "^5.2.1",
         "@testing-library/dom": "^7.29.2",
diff --git a/src/components/App.tsx b/src/components/App.tsx
index ec56eb0b..7fcfe8c3 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -145,53 +145,6 @@ function App(): JSX.Element {
                                 }
                             });
 
-                            const style = document.createElement('style');
-
-                            // TODO: how to get these programmatically from values set in variables.scss?
-                            const iconColor = '#5c7080';
-                            const iconColorHover = '#182026';
-                            const appBackgroundColor = '#e8e8e8';
-                            const darkIconColor = '#a7b6c2';
-                            const darkIconColorHover = '#f5f8fa';
-                            const darkAppBackgroundColor = '#293742';
-
-                            // This is scrollbar style coped from index.scss.
-                            style.innerText = `
-::-webkit-scrollbar {
-    width: 16px;
-}
-
-.${Classes.DARK} ::-webkit-scrollbar-track {
-    background: ${darkAppBackgroundColor};
-}
-
-::-webkit-scrollbar-track {
-    background: ${appBackgroundColor};
-}
-
-.${Classes.DARK} ::-webkit-scrollbar-thumb {
-    border-color: ${darkAppBackgroundColor};
-    background: ${darkIconColor};
-}
-
-::-webkit-scrollbar-thumb {
-    border-width: 3px;
-    border-style: solid;
-    border-radius: 8px;
-    border-color: ${appBackgroundColor};
-    background: ${iconColor};
-}
-
-.${Classes.DARK} ::-webkit-scrollbar-thumb:hover {
-    background: ${darkIconColorHover};
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: ${iconColorHover};
-}
-`;
-                            contentWindow.document.head.appendChild(style);
-
                             if (document.body.classList.contains(Classes.DARK)) {
                                 contentWindow.document.documentElement.classList.add(
                                     Classes.DARK,
diff --git a/yarn.lock b/yarn.lock
index 81986879..d8f8d0c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1462,10 +1462,10 @@
   dependencies:
     jszip "^3.5.0"
 
-"@pybricks/ide-docs@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@pybricks/ide-docs/-/ide-docs-1.0.0.tgz#e93ff78c65730bbdd26b9deaf3110799d46de8e6"
-  integrity sha512-pe52fHG3S2QIx7RLX8+a+5oQo5A/svR2bxJWWImwZ2unAbPYmZ2G/25zgtYb9JF4Fec2f9mLT2zRiGqUjiCjiw==
+"@pybricks/ide-docs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@pybricks/ide-docs/-/ide-docs-1.1.0.tgz#15c46def964ad8e92805bc3746a1d418d145e5c4"
+  integrity sha512-NwEPoAnMSvNShtzXSSuf+zOf3COPzXb0DQiD7RV6p3edCPvcgZn53JZvZscXdyudAruOMHZciw/jW8X4dJee2g==
 
 "@pybricks/mpy-cross-v5@^2.0.0":
   version "2.0.0"