From d97d3c53355706cfc605693ad7b707a5702fc8d6 Mon Sep 17 00:00:00 2001
From: Charlie <cgu@pinterest.com>
Date: Wed, 20 Nov 2024 16:46:46 -0800
Subject: [PATCH] Update theme to make gutter more visibile and fix issue with
 indent on the first char

---
 .../webapp/components/QueryEditor/QueryEditor.scss   | 12 +-----------
 .../webapp/components/QueryEditor/QueryEditor.tsx    |  7 ++++++-
 querybook/webapp/components/QueryEditor/themes.ts    |  8 +++++---
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/querybook/webapp/components/QueryEditor/QueryEditor.scss b/querybook/webapp/components/QueryEditor/QueryEditor.scss
index 46633c46d..3107a7f8b 100644
--- 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
index 1e17b57dd..f5dcc70ad 100644
--- 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
index b2d21a827..8d0ffaa66 100644
--- 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' },