Update theme to make gutter more visibile and fix issue with indent o…

…n the first char
pinterest · Nov 21, 2024 · d97d3c5 · d97d3c5
1 parent 8af3de0
commit d97d3c5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 15 deletions.
diff --git a/querybook/webapp/components/QueryEditor/QueryEditor.scss b/querybook/webapp/components/QueryEditor/QueryEditor.scss
@@ -35,22 +35,12 @@
         height: 100%;
         border-radius: var(--border-radius-sm);
         overflow: hidden;
-        background-color: var(--bg-query-editor);
 
-        &.cm-theme-light {
-            .cm-editor {
-                .cm-scroller {
-                    .cm-gutters {
-                        background-color: var(--bg-query-editor-gutter);
-                    }
-                }
-            }
-        }
         // dark theme
         &.cm-theme {
             .cm-editor {
                 .cm-panels {
-                    background-color: var(--bg-query-editor);
+                    background-color: var(--bg-hover);
                 }
             }
         }

diff --git a/querybook/webapp/components/QueryEditor/QueryEditor.tsx b/querybook/webapp/components/QueryEditor/QueryEditor.tsx
@@ -381,7 +381,12 @@ export const QueryEditor: React.FC<
                 searchExtension,
                 selectionExtension,
                 sqlCompleteExtension,
-                indentService.of((context, pos) => context.lineIndent(pos - 1)),
+                indentService.of((context, pos) => {
+                    if (pos === 0) {
+                        return 0;
+                    }
+                    return context.lineIndent(pos - 1);
+                }),
             ],
             [
                 language,

diff --git a/querybook/webapp/components/QueryEditor/themes.ts b/querybook/webapp/components/QueryEditor/themes.ts
@@ -3,7 +3,9 @@ import { tags as t } from '@lezer/highlight';
 import { xcodeLightInit } from '@uiw/codemirror-theme-xcode';
 
 export const CustomMonokaiDarkTheme = monokaiInit({
-    settings: {},
+    settings: {
+        gutterBackground: 'var(--bg-lightest)',
+    },
     styles: [
         { tag: [t.name], color: 'var(--text-dark)' },
         { tag: [t.constant(t.name), t.standard(t.name)], color: '#FD971F' },
@@ -12,8 +14,8 @@ export const CustomMonokaiDarkTheme = monokaiInit({
 
 export const CustomXcodeTheme = xcodeLightInit({
     settings: {
-        background: 'var(--bg-color)',
-        gutterBackground: 'var(--bg-color)',
+        background: 'var(--bg-lightest)',
+        gutterBackground: 'var(--bg-light)',
     },
     styles: [
         { tag: [t.special(t.propertyName)], color: '#005cc5' },