feat(visManager): color mode to bottom

apps/web/src/components/navbar/navbar.tsx

@@ -14,7 +14,6 @@ import logo from './gp-logo.svg';
 import { useAuthorizationCache, useAuth } from '@graphpolaris/shared/lib/data-access';
 import DatabaseSelector from './DatabaseManagement/dbConnectionSelector';
 import { DropdownItem, DropdownItemContainer } from '@graphpolaris/shared/lib/components/dropdowns';
-import ColorMode from '@graphpolaris/shared/lib/components/color-mode';
 import GpLogo from './gp-logo';
 
 export const Navbar = () => {
@@ -50,8 +49,6 @@ export const Navbar = () => {
         </div>
 
         <div>
-          {/* <SearchBar /> */}
-          <ColorMode />
           <div className="w-fit" ref={dropdownRef}>
             <div
               className="relative inline-flex items-center justify-center w-8 h-8 overflow-hidden bg-secondary-500 rounded-full hover:bg-secondary-600 transition-colors duration-150 ease-in-out cursor-pointer"

libs/shared/lib/info/infoPanel.tsx

@@ -4,37 +4,41 @@ import { Addchart, Schema as SchemaIcon, Search as SearchIcon } from '@mui/icons
 import Schema from '../schema/panel';
 import Searchbar from './search/searchbar';
 import Settings from './settings';
+import ColorMode from '../components/color-mode';
 
 export default function InfoPanel({ auth, manager }: { auth: boolean; manager: any }) {
   const [tab, setTab] = useState('Schema');
 
   return (
     <div className="info-panel w-full h-full flex">
-      <div className="w-12 flex flex-col items-center">
-        <Button
-          type="secondary"
-          variant="ghost"
-          size="md"
-          iconComponent={<SearchIcon />}
-          onClick={() => setTab('Search')}
-          additionalClasses={tab === 'Search' ? 'bg-secondary-100' : ''}
-        />
-        <Button
-          type="secondary"
-          variant="ghost"
-          size="md"
-          iconComponent={<SchemaIcon />}
-          onClick={() => setTab('Schema')}
-          additionalClasses={tab === 'Schema' ? 'bg-secondary-100' : ''}
-        />
-        <Button
-          type="secondary"
-          variant="ghost"
-          size="md"
-          iconComponent={<Addchart />}
-          onClick={() => setTab('Visualization')}
-          additionalClasses={tab === 'Visualization' ? 'bg-secondary-100' : ''}
-        />
+      <div className="w-12 flex flex-col items-center justify-between">
+        <div>
+          <Button
+            type="secondary"
+            variant="ghost"
+            size="md"
+            iconComponent={<SearchIcon />}
+            onClick={() => setTab('Search')}
+            additionalClasses={tab === 'Search' ? 'bg-secondary-100' : ''}
+          />
+          <Button
+            type="secondary"
+            variant="ghost"
+            size="md"
+            iconComponent={<SchemaIcon />}
+            onClick={() => setTab('Schema')}
+            additionalClasses={tab === 'Schema' ? 'bg-secondary-100' : ''}
+          />
+          <Button
+            type="secondary"
+            variant="ghost"
+            size="md"
+            iconComponent={<Addchart />}
+            onClick={() => setTab('Visualization')}
+            additionalClasses={tab === 'Visualization' ? 'bg-secondary-100' : ''}
+          />
+        </div>
+        <ColorMode />
       </div>
       <div className="flex-1 border border-secondary-200 overflow-hidden">
         <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100  border-b border-secondary-200">