From b77426eb8c221758ba70c4b3aa957e12a4276d32 Mon Sep 17 00:00:00 2001
From: Dmitry Krupenya <dkrupenya@gmail.com>
Date: Mon, 18 May 2020 17:08:38 +0300
Subject: [PATCH] chore: solve issues with sql-editor styles

---
 .../SqlEditor/theme/{dark.scss => dark.module.scss}  |  4 ++--
 .../theme/{light.scss => light.module.scss}          |  4 ++--
 .../sql-editor/src/SqlEditor/theme/styles.ts         | 12 +++++++++++-
 3 files changed, 15 insertions(+), 5 deletions(-)
 rename webapp/packages/sql-editor/src/SqlEditor/theme/{dark.scss => dark.module.scss} (94%)
 rename webapp/packages/sql-editor/src/SqlEditor/theme/{light.scss => light.module.scss} (93%)

diff --git a/webapp/packages/sql-editor/src/SqlEditor/theme/dark.scss b/webapp/packages/sql-editor/src/SqlEditor/theme/dark.module.scss
similarity index 94%
rename from webapp/packages/sql-editor/src/SqlEditor/theme/dark.scss
rename to webapp/packages/sql-editor/src/SqlEditor/theme/dark.module.scss
index fb38268922..00f246af2e 100644
--- a/webapp/packages/sql-editor/src/SqlEditor/theme/dark.scss
+++ b/webapp/packages/sql-editor/src/SqlEditor/theme/dark.module.scss
@@ -32,11 +32,11 @@ $error: #f00;
 $delimiter: rgb(238, 204, 100);
 $cursor: #fff;
 
-.CodeMirror-hints {
+:global .CodeMirror-hints {
   @include mdc-elevation(3);
   @include mdc-typography(caption);
 }
 
-.theme-dark {
+:global .theme-dark {
   @include base-code-editor;
 }
diff --git a/webapp/packages/sql-editor/src/SqlEditor/theme/light.scss b/webapp/packages/sql-editor/src/SqlEditor/theme/light.module.scss
similarity index 93%
rename from webapp/packages/sql-editor/src/SqlEditor/theme/light.scss
rename to webapp/packages/sql-editor/src/SqlEditor/theme/light.module.scss
index cee2230969..2e1ded399e 100644
--- a/webapp/packages/sql-editor/src/SqlEditor/theme/light.scss
+++ b/webapp/packages/sql-editor/src/SqlEditor/theme/light.module.scss
@@ -32,11 +32,11 @@ $error: #f00;
 $delimiter: rgb(238, 204, 100);
 $cursor: #000;
 
-.CodeMirror-hints {
+:global .CodeMirror-hints {
   @include mdc-elevation(3);
   @include mdc-typography(caption);
 }
 
-.theme-light {
+:global .theme-light {
   @include base-code-editor;
 }
diff --git a/webapp/packages/sql-editor/src/SqlEditor/theme/styles.ts b/webapp/packages/sql-editor/src/SqlEditor/theme/styles.ts
index 51d5dc90e3..130eac43a7 100644
--- a/webapp/packages/sql-editor/src/SqlEditor/theme/styles.ts
+++ b/webapp/packages/sql-editor/src/SqlEditor/theme/styles.ts
@@ -9,6 +9,16 @@
 import { ThemeSelector } from '@dbeaver/core/theming';
 
 export const SqlEditorStyles: ThemeSelector = async (theme) => {
-  const styles = await import(`./${theme}.scss`);
+  let styles: any;
+
+  switch (theme) {
+    case 'dark':
+      styles = await import('./dark.module.scss');
+      break;
+    default:
+      styles = await import('./light.module.scss');
+      break;
+  }
+
   return styles.default;
 };