Lighten up the editor background

questdb · Oct 11, 2023 · f8ea99a · f8ea99a
1 parent b555083
commit f8ea99a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/packages/web-console/src/scenes/Editor/Monaco/dracula.ts b/packages/web-console/src/scenes/Editor/Monaco/dracula.ts
@@ -1,11 +1,13 @@
 import { editor } from "monaco-editor"
 
+const mainBackground = "#2c2e3d"
+
 const Dracula: editor.IStandaloneThemeData = {
   base: "vs-dark",
   inherit: true,
   rules: [
     {
-      background: "282a36",
+      background: mainBackground,
       token: "",
     },
     {
@@ -236,13 +238,13 @@ const Dracula: editor.IStandaloneThemeData = {
     "badge.background": "#44475a",
     "badge.foreground": "#f8f8f2",
     "breadcrumb.activeSelectionForeground": "#f8f8f2",
-    "breadcrumb.background": "#282a36",
+    "breadcrumb.background": mainBackground,
     "breadcrumb.focusForeground": "#f8f8f2",
     "breadcrumb.foreground": "#6272a4",
     "breadcrumbPicker.background": "#191a21",
     "button.background": "#44475a",
     "button.foreground": "#f8f8f2",
-    "button.secondaryBackground": "#282a36",
+    "button.secondaryBackground": mainBackground,
     "button.secondaryForeground": "#f8f8f2",
     "button.secondaryHoverBackground": "#343746",
     "debugToolBar.background": "#21222c",
@@ -251,7 +253,7 @@ const Dracula: editor.IStandaloneThemeData = {
     "dropdown.background": "#343746",
     "dropdown.border": "#191a21",
     "dropdown.foreground": "#f8f8f2",
-    "editor.background": "#282a36",
+    "editor.background": mainBackground,
     "editor.findMatchBackground": "#ffb86c80",
     "editor.findMatchHighlightBackground": "#ffffff40",
     "editor.findRangeHighlightBackground": "#44475a75",
@@ -263,9 +265,9 @@ const Dracula: editor.IStandaloneThemeData = {
     "editor.rangeHighlightBackground": "#bd93f915",
     "editor.selectionBackground": "#44475a",
     "editor.selectionHighlightBackground": "#424450",
-    "editor.snippetFinalTabstopHighlightBackground": "#282a36",
+    "editor.snippetFinalTabstopHighlightBackground": mainBackground,
     "editor.snippetFinalTabstopHighlightBorder": "#50fa7b",
-    "editor.snippetTabstopHighlightBackground": "#282a36",
+    "editor.snippetTabstopHighlightBackground": mainBackground,
     "editor.snippetTabstopHighlightBorder": "#6272a4",
     "editor.wordHighlightBackground": "#8be9fd50",
     "editor.wordHighlightStrongBackground": "#50fa7b50",
@@ -284,7 +286,7 @@ const Dracula: editor.IStandaloneThemeData = {
     "editorGutter.addedBackground": "#50fa7b80",
     "editorGutter.deletedBackground": "#ff555580",
     "editorGutter.modifiedBackground": "#8be9fd80",
-    "editorHoverWidget.background": "#282a36",
+    "editorHoverWidget.background": mainBackground,
     "editorHoverWidget.border": "#6272a4",
     "editorIndentGuide.activeBackground": "#ffffff45",
     "editorIndentGuide.background": "#ffffff1a",
@@ -321,7 +323,7 @@ const Dracula: editor.IStandaloneThemeData = {
     "gitDecoration.ignoredResourceForeground": "#6272a4",
     "gitDecoration.modifiedResourceForeground": "#8be9fd",
     "gitDecoration.untrackedResourceForeground": "#50fa7b",
-    "input.background": "#282a36",
+    "input.background": mainBackground,
     "input.border": "#191a21",
     "input.foreground": "#f8f8f2",
     "input.placeholderForeground": "#6272a4",
@@ -343,13 +345,13 @@ const Dracula: editor.IStandaloneThemeData = {
     "listFilterWidget.outline": "#424450",
     "merge.currentHeaderBackground": "#50fa7b90",
     "merge.incomingHeaderBackground": "#bd93f990",
-    "panel.background": "#282a36",
+    "panel.background": mainBackground,
     "panel.border": "#bd93f9",
     "panelTitle.activeBorder": "#ff79c6",
     "panelTitle.activeForeground": "#f8f8f2",
     "panelTitle.inactiveForeground": "#6272a4",
     "peekView.border": "#44475a",
-    "peekViewEditor.background": "#282a36",
+    "peekViewEditor.background": mainBackground,
     "peekViewEditor.matchHighlightBackground": "#f1fa8c80",
     "peekViewResult.background": "#21222c",
     "peekViewResult.fileForeground": "#f8f8f2",
@@ -379,7 +381,7 @@ const Dracula: editor.IStandaloneThemeData = {
     "settings.textInputBorder": "#191a21",
     "settings.textInputForeground": "#f8f8f2",
     "sideBar.background": "#21222c",
-    "sideBarSectionHeader.background": "#282a36",
+    "sideBarSectionHeader.background": mainBackground,
     "sideBarSectionHeader.border": "#191a21",
     "sideBarTitle.foreground": "#f8f8f2",
     "statusBar.background": "#191a21",
@@ -391,8 +393,8 @@ const Dracula: editor.IStandaloneThemeData = {
     "statusBarItem.prominentBackground": "#ff5555",
     "statusBarItem.prominentHoverBackground": "#ffb86c",
     "statusBarItem.remoteBackground": "#bd93f9",
-    "statusBarItem.remoteForeground": "#282a36",
-    "tab.activeBackground": "#282a36",
+    "statusBarItem.remoteForeground": mainBackground,
+    "tab.activeBackground": mainBackground,
     "tab.activeBorderTop": "#ff79c680",
     "tab.activeForeground": "#f8f8f2",
     "tab.border": "#191a21",
@@ -414,7 +416,7 @@ const Dracula: editor.IStandaloneThemeData = {
     "terminal.ansiRed": "#ff5555",
     "terminal.ansiWhite": "#f8f8f2",
     "terminal.ansiYellow": "#f1fa8c",
-    "terminal.background": "#282a36",
+    "terminal.background": mainBackground,
     "terminal.foreground": "#f8f8f2",
     "titleBar.activeBackground": "#21222c",
     "titleBar.activeForeground": "#f8f8f2",

diff --git a/packages/web-console/src/scenes/Notifications/index.tsx b/packages/web-console/src/scenes/Notifications/index.tsx
@@ -48,6 +48,7 @@ const Wrapper = styled(PaneWrapper)<{ minimized: boolean }>`
   flex: ${(props) => (props.minimized ? "initial" : "1")};
   overflow: auto;
   max-height: 35rem;
+  ${({ theme }) => `border-top: 2px ${theme.color.backgroundDarker} solid;`}
 `
 
 const Menu = styled(PaneMenu)`