feat(visManager): borders

libs/shared/lib/data-viewer/index.tsx

@@ -60,7 +60,7 @@ export default function DataViewer({ auth }: { auth: boolean }) {
         </div>
         {showDialog && (
           <div className="flex-1 border overflow-hidden">
-            <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100  border-b border-secondary-200">
+            <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100  border-b">
               <h1 className="text-xs font-semibold text-secondary-800">{tab}</h1>
               <ControlContainer>
                 {tab === 'Schema' && (

libs/shared/lib/querybuilder/panel/querybuilder.tsx

@@ -438,7 +438,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
       <QuerySettingsDialog open={toggleSettings === 'settings'} onClose={() => setToggleSettings(undefined)} />
       <QueryMLDialog open={toggleSettings === 'ml'} onClose={() => setToggleSettings(undefined)} />
 
-      <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100  border-b border-secondary-200">
+      <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100  border-b">
         <h1 className="text-xs font-semibold text-secondary-800">Query builder</h1>
         <ControlContainer>
           <TooltipProvider delayDuration={0}>

libs/shared/lib/vis/bar.tsx

@@ -30,7 +30,7 @@ export default function VisualizationBar({ manager }: Props) {
 
   return (
     <div>
-      <div className="sticky top-0 flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100 border-b border-secondary-200">
+      <div className="sticky top-0 flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100 border-b">
         <div className="flex divide-x">
           <div className="flex items-center">
             <h1 className="text-xs font-semibold text-secondary-600 mr-4">Visualization</h1>
@@ -67,16 +67,14 @@ export default function VisualizationBar({ manager }: Props) {
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
               <TooltipProvider delayDuration={0}>
-                {manager.active && (
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
-                    </TooltipTrigger>
-                    <TooltipContent side={'bottom'} disabled={visDropdownOpen}>
-                      <p>Add visualization</p>
-                    </TooltipContent>
-                  </Tooltip>
-                )}
+                <Tooltip>
+                  <TooltipTrigger>
+                    <Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
+                  </TooltipTrigger>
+                  <TooltipContent side={'bottom'} disabled={visDropdownOpen}>
+                    <p>Add visualization</p>
+                  </TooltipContent>
+                </Tooltip>
               </TooltipProvider>
             </DropdownMenu.Trigger>
             <DropdownMenu.Portal>

libs/shared/lib/vis/configuration/panel.tsx

@@ -18,7 +18,7 @@ export function ConfigPanel({ manager }: Props) {
       <div>
         {manager.active ? (
           <>
-            <div className="border-b border-secondary-200 py-2">
+            <div className="border-b py-2">
               <div className="flex justify-between items-center px-4 py-2">
                 <span className="text-xs font-bold">Visualisation</span>
                 <Button
@@ -43,7 +43,7 @@ export function ConfigPanel({ manager }: Props) {
               </div>
             </div>
             {manager.active && (
-              <div className="border-b border-secondary-200 p-4">
+              <div className="border-b p-4">
                 <SettingsHeader name="Configuration" />
                 {manager.renderSettings()}
               </div>
@@ -52,14 +52,14 @@ export function ConfigPanel({ manager }: Props) {
         ) : (
           <div>
             {session && session.currentSaveState && (
-              <div className="flex flex-col p-4 border-b border-secondary-200">
+              <div className="flex flex-col p-4 border-b">
                 <span className="text-sm font-bold">Connection details</span>
                 <span className="text-xs">Database: {session.saveStates[session.currentSaveState].name}</span>
                 <span className="text-xs">Port: {session.saveStates[session.currentSaveState].db.port}</span>
                 <span className="text-xs">Protocol: {session.saveStates[session.currentSaveState].db.protocol}</span>
               </div>
             )}
-            <div className="flex flex-col p-4 border-b border-secondary-200">
+            <div className="flex flex-col p-4 border-b">
               <span className="text-sm font-bold">Sessions</span>
               {Object.entries(session.saveStates).map(([id, info]) => (
                 <div key={id} className="flex justify-between items-center">