Style background of editor area

outerbase · Oct 20, 2024 · 1adabab · 1adabab
1 parent 328acd1
commit 1adabab
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -64,7 +64,7 @@ body {
   }
 
   .dark {
-    --background: #000;
+    --background: #0a0a0a;
     --foreground: #aaa;
 
     --color-surface: black;

diff --git a/src/components/gui/save-doc-button.tsx b/src/components/gui/save-doc-button.tsx
@@ -88,7 +88,7 @@ export default function SaveDocButton({
           {loading ? (
             <LucideLoader className="w-4 h-4 animate-spin mr-2" />
           ) : (
-            <LucideSave className="w-4 h-4 mr-2" />
+            <></>
           )}
           Save
         </Button>

diff --git a/src/components/gui/sql-editor/use-editor-theme.tsx b/src/components/gui/sql-editor/use-editor-theme.tsx
@@ -4,7 +4,7 @@ import { createTheme } from "@uiw/codemirror-themes";
 import { useMemo } from "react";
 
 export default function useCodeEditorTheme({
-  fontSize = 1,
+  fontSize = 0.875,
 }: {
   fontSize?: number;
 }) {

diff --git a/src/components/gui/tabs/query-tab.tsx b/src/components/gui/tabs/query-tab.tsx
@@ -69,7 +69,7 @@ export default function QueryWindow({
   const [code, setCode] = useState(initialCode ?? "");
   const editorRef = useRef<ReactCodeMirrorRef>(null);
 
-  const [fontSize, setFontSize] = useState(1);
+  const [fontSize, setFontSize] = useState(0.875);
   const [lineNumber, setLineNumber] = useState(0);
   const [columnNumber, setColumnNumber] = useState(0);
 
@@ -288,7 +288,7 @@ export default function QueryWindow({
               </div>
             </div>
           </div>
-          <div className="grow overflow-hidden p-2">
+          <div className="grow overflow-hidden p-2 dark:bg-neutral-950 bg-neutral-50">
             <SqlEditor
               ref={editorRef}
               dialect={databaseDriver.getFlags().dialect}
@@ -322,8 +322,12 @@ export default function QueryWindow({
 
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button variant={"ghost"} size="sm" onClick={onFormatClicked}>
-                    <LucidePencilRuler className="w-4 h-4 mr-2" />
+                  <Button
+                    variant={"ghost"}
+                    size="sm"
+                    onClick={onFormatClicked}
+                    className="text-neutral-800 dark:text-neutral-200"
+                  >
                     Format
                   </Button>
                 </TooltipTrigger>

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -16,7 +16,7 @@ const buttonVariants = cva(
         outline:
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "bg-neutral-200/75 dark:bg-neutral-800/75 text-secondary-foreground shadow-sm hover:bg-neutral-200 hover:dark:bg-neutral-800",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },