fix: dark mode

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

@@ -88,7 +88,7 @@ export const Navbar = () => {
               </div>
             </PopoverTrigger>
 
-            <PopoverContent className="w-56 z-30 bg-white rounded-sm border-[1px] outline-none">
+            <PopoverContent className="w-56 z-30 bg-light rounded-sm border-[1px] outline-none">
               <div className="p-2 text-sm border-b">
                 <h2 className="font-bold">user: {authCache.username}</h2>
                 <h3 className="text-xs break-words">session: {authCache.sessionID}</h3>

libs/shared/lib/components/VisualizationTooltip/VisualizationTooltip.tsx

@@ -9,7 +9,7 @@ export type VisualizationTooltipProps = {
 
 export const VisualizationTooltip: React.FC<VisualizationTooltipProps> = ({ name, colorHeader, children }) => {
   return (
-    <div className="border-1 border-sec-200 bg-white w-[12rem] -mx-2 -my-2">
+    <div className="border-1 border-sec-200 bg-light w-[12rem] -mx-2 -my-2">
       <div className="flex m-0 justify-start items-stretch border-b border-sec-200 relative">
         <div className="left-0 top-0 h-auto w-1.5" style={{ backgroundColor: colorHeader }}></div>
         <div className="px-2.5 py-1 truncate flex">

libs/shared/lib/vis/visualizations/mapvis/components/ActionBar.tsx

@@ -15,10 +15,10 @@ export function ActionBar({ isSearching, setIsSearching, setSearchResult, setSel
   return (
     <div>
       <div className="absolute left-0 top-0 m-1">
-        <div className="cursor-pointer p-1 pb-0 bg-white shadow-md rounded" onClick={() => setSelectingRectangle(true)}>
+        <div className="cursor-pointer p-1 pb-0 bg-light shadow-md rounded" onClick={() => setSelectingRectangle(true)}>
           <Icon component="icon-[ic--baseline-highlight-alt]" />
         </div>
-        <div className="cursor-pointer p-1 mt-1 pb-0 bg-white shadow-md rounded" onClick={() => setIsSearching(!isSearching)}>
+        <div className="cursor-pointer p-1 mt-1 pb-0 bg-light shadow-md rounded" onClick={() => setIsSearching(!isSearching)}>
           <Icon component="icon-[ic--outline-search]" />
         </div>
       </div>

libs/shared/lib/vis/visualizations/mapvis/components/SearchBar.tsx

@@ -35,7 +35,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
   };
 
   return (
-    <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 z-50 m-1 p-2 bg-white shadow-md rounded w-full max-w-xl">
+    <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 z-50 m-1 p-2 bg-light shadow-md rounded w-full max-w-xl">
       <div className="flex gap-2 items-center">
         <Input type="text" size="xs" value={query} onChange={(value) => setQuery(value)} />
         <Button label="Search" size="xs" onClick={handleSearch} disabled={isLoading} />