From c1dfad74fdc68edd4b4eba31e60e353f5e995835 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 9 Feb 2024 11:13:56 -0600
Subject: [PATCH] tooltips and active tracking outline (#9766)

* tooltips

* fix tooltip provider and add active tracking outline

* remove unused icon

* remove figma comment
---
 web/src/components/Header.tsx                 |  4 +-
 web/src/components/Sidebar.tsx                | 47 ++++++++++++-------
 web/src/components/player/LivePlayer.tsx      | 18 ++++---
 .../components/settings/SettingsNavItems.tsx  | 33 ++++++++++---
 web/src/context/providers.tsx                 |  9 ++--
 web/tailwind.config.js                        |  9 +---
 6 files changed, 73 insertions(+), 47 deletions(-)

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 201ffc8cb..b97ab6f10 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { ENV } from "@/env";
 import { NavLink } from "react-router-dom";
 import { navbarLinks } from "@/pages/site-navigation";
-import SettingsDropdownMenu from "./settings/SettingsNavItems";
+import SettingsNavItems from "./settings/SettingsNavItems";
 
 type HeaderProps = {
   onToggleNavbar: () => void;
@@ -62,7 +62,7 @@ function Header({ onToggleNavbar }: HeaderProps) {
         </Link>
         <HeaderNavigation />
       </div>
-      <SettingsDropdownMenu className="flex flex-shrink-0 md:gap-2" />
+      <SettingsNavItems className="flex flex-shrink-0 md:gap-2" />
     </div>
   );
 }
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index 679afe8e7..a855dbdc0 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -4,7 +4,12 @@ import { Sheet, SheetContent } from "@/components/ui/sheet";
 import Logo from "./Logo";
 import { ENV } from "@/env";
 import { navbarLinks } from "@/pages/site-navigation";
-import SettingsDropdownMenu from "./settings/SettingsNavItems";
+import SettingsNavItems from "./settings/SettingsNavItems";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 function Sidebar({
   sheetOpen,
@@ -14,7 +19,7 @@ function Sidebar({
   setSheetOpen: (open: boolean) => void;
 }) {
   const sidebar = (
-    <aside className="w-[52px] h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
+    <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" />
         {navbarLinks.map((item) => (
@@ -28,7 +33,7 @@ function Sidebar({
           />
         ))}
       </div>
-      <SettingsDropdownMenu className="flex flex-col items-center" />
+      <SettingsNavItems className="hidden md:flex flex-col items-center" />
     </aside>
   );
 
@@ -40,7 +45,7 @@ function Sidebar({
         modal={false}
         onOpenChange={() => setSheetOpen(false)}
       >
-        <SheetContent side="left" className="w-[100px]">
+        <SheetContent side="left" className="w-[90px]">
           <div className="w-full flex flex-row justify-center"></div>
           {sidebar}
         </SheetContent>
@@ -62,20 +67,26 @@ function SidebarItem({ Icon, title, url, dev, onClick }: SidebarItemProps) {
 
   return (
     shouldRender && (
-      <NavLink
-        to={url}
-        onClick={onClick}
-        className={({ isActive }) =>
-          `mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
-            isActive
-              ? "font-bold text-white bg-blue-400"
-              : "text-muted-foreground bg-secondary"
-          }`
-        }
-      >
-        <Icon className="w-5 h-5 m-[6px]" />
-        <div className="hidden">{title}</div>
-      </NavLink>
+      <Tooltip>
+        <NavLink
+          to={url}
+          onClick={onClick}
+          className={({ isActive }) =>
+            `mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
+              isActive
+                ? "font-bold text-white bg-primary"
+                : "text-muted-foreground bg-secondary"
+            }`
+          }
+        >
+          <TooltipTrigger>
+            <Icon className="w-5 h-5 m-[6px]" />
+          </TooltipTrigger>
+        </NavLink>
+        <TooltipContent side="right">
+          <p>{title}</p>
+        </TooltipContent>
+      </Tooltip>
     )
   );
 }
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index c834faf35..23afc83c3 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -11,7 +11,7 @@ import { Label } from "../ui/label";
 import { usePersistence } from "@/hooks/use-persistence";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
-import { MdCircle, MdLeakAdd, MdSelectAll } from "react-icons/md";
+import { MdCircle, MdLeakAdd } from "react-icons/md";
 import { BsSoundwave } from "react-icons/bs";
 import Chip from "../Chip";
 import useCameraActivity from "@/hooks/use-camera-activity";
@@ -153,7 +153,13 @@ export default function LivePlayer({
   }
 
   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 +194,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">
diff --git a/web/src/components/settings/SettingsNavItems.tsx b/web/src/components/settings/SettingsNavItems.tsx
index 711b3df02..317424355 100644
--- a/web/src/components/settings/SettingsNavItems.tsx
+++ b/web/src/components/settings/SettingsNavItems.tsx
@@ -52,6 +52,11 @@ import {
   SheetHeader,
   SheetTitle,
 } from "../ui/sheet";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import ActivityIndicator from "../ui/activity-indicator";
 
 type SettingsNavItemsProps = {
@@ -93,10 +98,17 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
     <>
       <div className={className}>
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button size="icon" variant="ghost">
-              <LuSettings />
-            </Button>
+          <DropdownMenuTrigger>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button size="icon" variant="ghost">
+                  <LuSettings />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <p>Settings</p>
+              </TooltipContent>
+            </Tooltip>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="md:w-72 mr-5">
             <DropdownMenuLabel>System</DropdownMenuLabel>
@@ -229,9 +241,16 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-        <Button size="icon" variant="ghost">
-          <VscAccount />
-        </Button>
+        <Tooltip>
+          <TooltipTrigger>
+            <Button size="icon" variant="ghost">
+              <VscAccount />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            <p>Account</p>
+          </TooltipContent>
+        </Tooltip>
       </div>
       {restartDialogOpen && (
         <AlertDialog
diff --git a/web/src/context/providers.tsx b/web/src/context/providers.tsx
index 06ddb85f2..efcf2a10b 100644
--- a/web/src/context/providers.tsx
+++ b/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">
-          <IconContext.Provider value={{ size: "20" }}>
-            {children}
-          </IconContext.Provider>
+          <TooltipProvider>
+            <IconContext.Provider value={{ size: "20" }}>
+              {children}
+            </IconContext.Provider>
+          </TooltipProvider>
         </ThemeProvider>
       </ApiProvider>
     </RecoilRoot>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index bdf47d828..f7c8c3155 100644
--- a/web/tailwind.config.js
+++ b/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))",