From ba5c24600ab4a8b3b8597a0cbf701b77bbd0d23c Mon Sep 17 00:00:00 2001
From: Brayden Wilmoth <brayden.wilmoth@gmail.com>
Date: Sat, 19 Oct 2024 10:53:10 -0400
Subject: [PATCH] Visual touch-ups

---
 src/components/gui/database-gui.tsx |  6 +++---
 src/components/gui/sidebar-tab.tsx  | 23 +++++------------------
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/components/gui/database-gui.tsx b/src/components/gui/database-gui.tsx
index aa79eb9..afff22f 100644
--- a/src/components/gui/database-gui.tsx
+++ b/src/components/gui/database-gui.tsx
@@ -88,14 +88,14 @@ export default function DatabaseGui() {
         key: "database",
         name: "Schema",
         content: <SchemaView />,
-        icon: <Table size={24} />,
+        icon: <Table weight="light" size={24} />,
       },
       docDriver
         ? {
             key: "saved",
             name: "Queries",
             content: <SavedDocTab />,
-            icon: <Binoculars size={24} />,
+            icon: <Binoculars weight="light" size={24} />,
           }
         : undefined,
       collaborationDriver
@@ -103,7 +103,7 @@ export default function DatabaseGui() {
             key: "setting",
             name: "Setting",
             content: <SettingSidebar />,
-            icon: <GearSix size={24} />,
+            icon: <GearSix weight="light" size={24} />,
           }
         : undefined,
     ].filter(Boolean) as SidebarTabItem[];
diff --git a/src/components/gui/sidebar-tab.tsx b/src/components/gui/sidebar-tab.tsx
index 1fca4ff..d1372f2 100644
--- a/src/components/gui/sidebar-tab.tsx
+++ b/src/components/gui/sidebar-tab.tsx
@@ -35,26 +35,13 @@ export default function SidebarTab({ tabs }: Readonly<SidebarTabProps>) {
 
   const config = useConfig();
 
-  const color = config.color;
-  let bgPrimary = "border-l-gray-500 dark:border-l-gray-600";
-
-  if (color === "red") {
-    bgPrimary = "border-l-red-500 dark:border-l-red-600";
-  } else if (color === "yellow") {
-    bgPrimary = "border-l-yellow-500 dark:border-l-yellow-600";
-  } else if (color === "green") {
-    bgPrimary = "border-l-green-500 dark:border-l-green-600";
-  } else if (color === "gray") {
-    bgPrimary = "border-l-gray-500 dark:border-l-gray-600";
-  }
-
   return (
-    <div className={cn("flex h-full border-l-8", bgPrimary)}>
+    <div className={cn("flex h-full bg-neutral-50 dark:bg-neutral-950")}>
       <div className={cn("shrink-0")}>
-        <div className="flex flex-col border-r h-full p-2 gap-2">
+        <div className="flex flex-col border-r border-neutral-200 dark:border-neutral-800 h-full p-3 gap-4">
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger>
-              <div className="h-12 w-12 flex justify-center items-center">
+              <div className="h-8 w-8 ml-1 mb-2 flex justify-center items-center">
                 <svg
                   fill="currentColor"
                   viewBox="75 75 350 350"
@@ -145,9 +132,9 @@ export default function SidebarTab({ tabs }: Readonly<SidebarTabProps>) {
                       }
                     }}
                     className={cn(
-                      "cursor cursor-pointer h-12 w-12 flex flex-col gap-0.5 justify-center items-center rounded-t hover:text-primary",
+                      "cursor cursor-pointer h-10 w-10 flex flex-col gap-0.5 justify-center items-center hover:text-neutral-900 dark:hover:text-neutral-100 text-neutral-400 dark:text-neutral-600",
                       selectedIndex === idx
-                        ? "bg-secondary rounded-lg text-primary"
+                        ? "bg-neutral-200 dark:bg-neutral-800 rounded-xl text-neutral-900 dark:text-neutral-100"
                         : undefined
                     )}
                   >