fix tooltip provider and add active tracking outline

web/src/components/Sidebar.tsx

@@ -8,7 +8,6 @@ import SettingsNavItems from "./settings/SettingsNavItems";
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
@@ -23,7 +22,6 @@ function Sidebar({
     <aside className="w-[52px] z-10 h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />
-        <TooltipProvider>
         {navbarLinks.map((item) => (
           <SidebarItem
             key={item.id}
@@ -34,7 +32,6 @@ function Sidebar({
             onClick={() => setSheetOpen(false)}
           />
         ))}
-        </TooltipProvider>
       </div>
       <SettingsNavItems className="hidden md:flex flex-col items-center" />
     </aside>

web/src/components/player/LivePlayer.tsx

@@ -151,9 +151,16 @@ export default function LivePlayer({
   } else {
     player = <ActivityIndicator />;
   }
+  // box - shadow: 0px 0px 10px 0px rgba(240, 62, 62, 1) inset;
 
   return (
-    <div className={`relative flex justify-center w-full ${className}`}>
+    <div
+      className={`relative flex justify-center w-full outline ${
+        activeTracking
+          ? "outline-destructive outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-destructive"
+          : "outline-0"
+      } transition-all duration-500 ${className}`}
+    >
       {(showStillWithoutActivity == false || activeMotion || activeTracking) &&
         player}
 
@@ -188,14 +195,6 @@ export default function LivePlayer({
             <div className="ml-1 text-white text-xs">Sound</div>
           </Chip>
         )}
-
-        <Chip
-          in={activeTracking}
-          className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500/90 `}
-        >
-          <MdSelectAll className="w-4 h-4 text-object" />
-          <div className="ml-1 text-white text-xs">Tracking</div>
-        </Chip>
       </div>
 
       <Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-300/50 to-gray-500/90">

web/src/components/settings/SettingsNavItems.tsx

@@ -55,7 +55,6 @@ import {
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import ActivityIndicator from "../ui/activity-indicator";
@@ -98,11 +97,10 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
   return (
     <>
       <div className={className}>
-        <TooltipProvider>
         <DropdownMenu>
-            <DropdownMenuTrigger asChild>
+          <DropdownMenuTrigger>
             <Tooltip>
-                <TooltipTrigger>
+              <TooltipTrigger asChild>
                 <Button size="icon" variant="ghost">
                   <LuSettings />
                 </Button>
@@ -152,9 +150,7 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
                   <span>Configuration editor</span>
                 </DropdownMenuItem>
               </Link>
-                <DropdownMenuLabel className="mt-3">
-                  Appearance
-                </DropdownMenuLabel>
+              <DropdownMenuLabel className="mt-3">Appearance</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuSub>
                 <DropdownMenuSubTrigger>
@@ -255,7 +251,6 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
             <p>Account</p>
           </TooltipContent>
         </Tooltip>
-        </TooltipProvider>
       </div>
       {restartDialogOpen && (
         <AlertDialog

web/src/context/providers.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider } from "@/context/theme-provider";
 import { RecoilRoot } from "recoil";
 import { ApiProvider } from "@/api";
 import { IconContext } from "react-icons";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 type TProvidersProps = {
   children: ReactNode;
@@ -13,9 +14,11 @@ function providers({ children }: TProvidersProps) {
     <RecoilRoot>
       <ApiProvider>
         <ThemeProvider defaultTheme="light" storageKey="frigate-ui-theme">
+          <TooltipProvider>
             <IconContext.Provider value={{ size: "20" }}>
               {children}
             </IconContext.Provider>
+          </TooltipProvider>
         </ThemeProvider>
       </ApiProvider>
     </RecoilRoot>

web/tailwind.config.js

@@ -24,13 +24,8 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
       aspectRatio: {
-        "wide": "32 / 9",
-        "tall": "9 / 16",
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        wide: "32 / 9",
+        tall: "9 / 16",
       },
       colors: {
         border: "hsl(var(--border))",