From 1e3c0b05efe4ca01906861bc8a94b4631bfaf95f Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Fri, 15 Jan 2021 14:02:13 -0600
Subject: [PATCH] use proper variables for bp3 namespace

---
 src/components/app.scss        | 4 ++--
 src/components/editor.scss     | 2 +-
 src/components/status-bar.scss | 2 +-
 src/components/toolbar.scss    | 4 +++-
 src/index.scss                 | 2 +-
 src/index.tsx                  | 6 +++---
 6 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/app.scss b/src/components/app.scss
index 626932eb..ecc1a7d8 100644
--- a/src/components/app.scss
+++ b/src/components/app.scss
@@ -5,7 +5,7 @@
 
 @import '../variables.scss';
 
-.bp3-dark .splitter-layout > .layout-splitter  {
+.#{$ns}-dark .splitter-layout > .layout-splitter  {
     // make layout splitter match app color scheme
     background-color: $pt-dark-app-background-color;
 }
@@ -15,7 +15,7 @@
     background-color: $pt-app-background-color;
 }
 
-.bp3-dark .terminal-padding {
+.#{$ns}-dark .terminal-padding {
     background-color: black;
 }
 
diff --git a/src/components/editor.scss b/src/components/editor.scss
index 71697224..37f6a23f 100644
--- a/src/components/editor.scss
+++ b/src/components/editor.scss
@@ -5,7 +5,7 @@
 
 @import '../variables.scss';
 
-.bp3-dark .ace_gutter {
+.#{$ns}-dark .ace_gutter {
     // make ace editor match app backgound color
     background-color: $pt-dark-app-background-color;
 }
diff --git a/src/components/status-bar.scss b/src/components/status-bar.scss
index 60448c17..ea0b6469 100644
--- a/src/components/status-bar.scss
+++ b/src/components/status-bar.scss
@@ -20,7 +20,7 @@
     margin-left: 10px;
 }
 
-.bp3-progress-bar.status-bar-item {
+.#{$ns}-progress-bar.status-bar-item {
     // override progress bar default gray1 backgound
     background-color: $pt-app-background-color;
 }
diff --git a/src/components/toolbar.scss b/src/components/toolbar.scss
index efe477c7..02a29f4a 100644
--- a/src/components/toolbar.scss
+++ b/src/components/toolbar.scss
@@ -3,7 +3,9 @@
 
 // Custom styling for the Toolbar control.
 
-.bp3-navbar-divider {
+@import '../variables.scss';
+
+.#{$ns}-navbar-divider {
     // don't draw vertical line since we are just using button groups
     border-left: unset;
 }
diff --git a/src/index.scss b/src/index.scss
index f20c7f1f..a2a72980 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -39,6 +39,6 @@ body {
 
 // global style tweaks
 
-.bp3-form-group > .bp3-label {
+.#{$ns}-form-group > .#{$ns}-label {
     font-weight: bolder;
 }
diff --git a/src/index.tsx b/src/index.tsx
index dd2a51cd..8cb5cf42 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2021 The Pybricks Authors
 
-import { ResizeSensor } from '@blueprintjs/core';
+import { Classes, ResizeSensor } from '@blueprintjs/core';
 import { I18nContext, I18nManager } from '@shopify/react-i18n';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -38,9 +38,9 @@ store.subscribe(() => {
     const newDarkMode = store.getState().settings.darkMode;
     if (newDarkMode !== oldDarkMode) {
         if (newDarkMode) {
-            document.body.classList.add('bp3-dark');
+            document.body.classList.add(Classes.DARK);
         } else {
-            document.body.classList.remove('bp3-dark');
+            document.body.classList.remove(Classes.DARK);
         }
         oldDarkMode = newDarkMode;
     }