Touch up the sidebar options area

src/app/globals.css

@@ -53,7 +53,7 @@ body {
     --destructive: #f1f5f9;
     --destructive-foreground: red;
 
-    --border: #e2e8f0;
+    --border: #e5e5e5;
     --input: #e2e8f0;
     --ring: #ccc;
 
@@ -91,7 +91,7 @@ body {
     --destructive: red;
     --destructive-foreground: white;
 
-    --border: #313131;
+    --border: #262626;
     --input: #333;
     --ring: #444;
 

src/components/gui/database-gui.tsx

@@ -23,7 +23,7 @@ import { Binoculars, GearSix, Table } from "@phosphor-icons/react";
 export default function DatabaseGui() {
   const DEFAULT_WIDTH = 300;
 
-  const [defaultWidthPercentage, setDefaultWidthPercentage] = useState(20);
+  const [defaultWidthPercentage, setDefaultWidthPercentage] = useState(25);
 
   useEffect(() => {
     setDefaultWidthPercentage((DEFAULT_WIDTH / window.innerWidth) * 100);

src/components/gui/schema-sidebar.tsx

@@ -20,31 +20,34 @@ export default function SchemaView() {
 
   return (
     <div className="flex flex-col overflow-hidden grow">
-      <div className="pt-2 px-2 flex mb-2 flex flex-col">
-        <div className="flex justify-between mb-2 items-center mx-2">
-          <h1 className="text-xl py-2 font-semibold text-primary">Tables</h1>
+      <div className="p-4 pb-2 flex flex-col">
+        <div className="flex justify-between mb-5 items-center">
+          <h1 className="text-xl font-medium text-primary">Tables</h1>
           <button
             className={cn(
               buttonVariants({
                 size: "icon",
               }),
-              "rounded-full h-8 w-8"
+              "rounded-full h-8 w-8 bg-neutral-800 dark:bg-neutral-200"
             )}
             onClick={onNewTable}
           >
             <Plus size={16} weight="bold" />
           </button>
         </div>
 
-        <div className="border rounded overflow-hidden flex items-center grow mx-2">
-          <div className="text-sm px-2 h-full flex items-center">
-            <LucideSearch className="h-4 w-4 text-black dark:text-white" />
+        <div className="cursor-text items-center has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 has-[:focus]:outline-neutral-400/70 has-[:enabled]:active:outline-neutral-400/70 dark:has-[:focus]:outline-neutral-600 dark:has-[:enabled]:active:outline-neutral-600 flex w-full rounded-md bg-white px-3 py-2.5 text-base text-neutral-900 outline outline-1 outline-neutral-200 focus:outline-neutral-400/70 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900 dark:text-white dark:outline-neutral-800 dark:focus:outline-neutral-600 h-[32px]">
+          <div className="text-sm h-full flex items-center">
+            <LucideSearch
+              className="text-neutral-500 "
+              style={{ width: 14, height: 14 }}
+            />
           </div>
           <input
             type="text"
-            className="bg-inherit p-2 pl-2 pr-2 outline-none text-sm  h-full grow"
+            className="bg-inherit p-2 pl-2 pr-2 outline-none text-sm font-light h-full grow placeholder:text-neutral-500"
             value={search}
-            placeholder="Search table"
+            placeholder="Search tables"
             onChange={(e) => {
               setSearch(e.currentTarget.value);
             }}

src/components/listview/index.tsx

@@ -189,10 +189,10 @@ function renderList<T>(props: ListViewRendererProps<T>): React.ReactElement {
               >
                 <div
                   className={cn(
-                    "px-2    flex text-xs items-center gap-0.5 h-8",
+                    "px-4 flex text-xs items-center gap-0.5 h-8 text-neutral-500",
                     selectedKey === item.key
-                      ? "bg-selected"
-                      : "hover:bg-accent",
+                      ? "dark:bg-neutral-800 dark:text-white bg-neutral-200 text-black"
+                      : "hover:dark:bg-neutral-900 hover:bg-neutral-100",
                     contextMenuKey === item.key && contextOpen
                       ? "border border-blue-500"
                       : "border border-transparent",

src/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md shadow bg-white dark:bg-neutral-800 text-black dark:text-neutral-200 px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}

tailwind.config.ts

@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import defaultTheme from "tailwindcss/defaultTheme";
 
 const config: Config = {
   darkMode: ["class"],
@@ -91,6 +92,10 @@ const config: Config = {
         shake: "shake 0.82s cubic-bezier(.36,.07,.19,.97) both",
       },
     },
+    fontFamily: {
+        ...defaultTheme.fontFamily,
+        sans: ['Inter', 'Helvetica', ...defaultTheme.fontFamily.sans],
+    },
   },
   plugins: [require("tailwindcss-animate")],
 };