UI tweaks (#20687)

* add blurred icon button component

* apply component to explore, face, and classification views

* apply to exports and fix bug where play button was unclickable

web/public/locales/en/views/exports.json

@@ -9,6 +9,12 @@
     "desc": "Enter a new name for this export.",
     "saveExport": "Save Export"
   },
+  "tooltip": {
+    "shareExport": "Share export",
+    "downloadVideo": "Download video",
+    "editName": "Edit name",
+    "deleteExport": "Delete export"
+  },
   "toast": {
     "error": {
       "renameExportFailed": "Failed to rename export: {{errorMessage}}"

web/src/components/button/BlurredIconButton.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+type BlurredIconButtonProps = React.HTMLAttributes<HTMLDivElement>;
+
+const BlurredIconButton = forwardRef<HTMLDivElement, BlurredIconButtonProps>(
+  ({ className = "", children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "group relative inline-flex items-center justify-center",
+          className,
+        )}
+        {...rest}
+      >
+        <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+        <div className="relative z-10 cursor-pointer text-white/85 hover:text-white">
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+
+BlurredIconButton.displayName = "BlurredIconButton";
+
+export default BlurredIconButton;

web/src/components/card/ExportCard.tsx

@@ -4,7 +4,6 @@ import { Button } from "../ui/button";
 import { useCallback, useState } from "react";
 import { isDesktop, isMobile } from "react-device-detect";
 import { FaDownload, FaPlay, FaShareAlt } from "react-icons/fa";
-import Chip from "../indicators/Chip";
 import { Skeleton } from "../ui/skeleton";
 import {
   Dialog,
@@ -22,6 +21,8 @@ import { cn } from "@/lib/utils";
 import { shareOrCopy } from "@/utils/browserUtil";
 import { useTranslation } from "react-i18next";
 import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
+import BlurredIconButton from "../button/BlurredIconButton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 type ExportProps = {
   className: string;
@@ -156,12 +157,14 @@ export default function ExportCard({
           </>
         )}
         {hovered && (
-          <div>
+          <>
             <div className="absolute inset-0 rounded-lg bg-black bg-opacity-60 md:rounded-2xl" />
-            <div className="absolute right-1 top-1 flex items-center gap-2">
+            <div className="absolute right-3 top-2">
+              <div className="flex items-center justify-center gap-4">
                 {!exportedRecording.in_progress && (
-                <Chip
+                  <Tooltip>
-                  className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+                    <TooltipTrigger asChild>
+                      <BlurredIconButton
                         onClick={() =>
                           shareOrCopy(
                             `${baseUrl}export?id=${exportedRecording.id}`,
@@ -169,22 +172,33 @@ export default function ExportCard({
                           )
                         }
                       >
-                  <FaShareAlt className="size-4 text-white" />
+                        <FaShareAlt className="size-4" />
-                </Chip>
+                      </BlurredIconButton>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("tooltip.shareExport")}</TooltipContent>
+                  </Tooltip>
                 )}
                 {!exportedRecording.in_progress && (
                   <a
                     download
                     href={`${baseUrl}${exportedRecording.video_path.replace("/media/frigate/", "")}`}
                   >
-                  <Chip className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500">
+                    <Tooltip>
-                    <FaDownload className="size-4 text-white" />
+                      <TooltipTrigger asChild>
-                  </Chip>
+                        <BlurredIconButton>
+                          <FaDownload className="size-4" />
+                        </BlurredIconButton>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {t("tooltip.downloadVideo")}
+                      </TooltipContent>
+                    </Tooltip>
                   </a>
                 )}
                 {!exportedRecording.in_progress && (
-                <Chip
+                  <Tooltip>
-                  className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+                    <TooltipTrigger asChild>
+                      <BlurredIconButton
                         onClick={() =>
                           setEditName({
                             original: exportedRecording.name,
@@ -192,11 +206,15 @@ export default function ExportCard({
                           })
                         }
                       >
-                  <MdEditSquare className="size-4 text-white" />
+                        <MdEditSquare className="size-4" />
-                </Chip>
+                      </BlurredIconButton>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("tooltip.editName")}</TooltipContent>
+                  </Tooltip>
                 )}
-              <Chip
+                <Tooltip>
-                className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+                  <TooltipTrigger asChild>
+                    <BlurredIconButton
                       onClick={() =>
                         onDelete({
                           file: exportedRecording.id,
@@ -204,8 +222,12 @@ export default function ExportCard({
                         })
                       }
                     >
-                <LuTrash className="size-4 fill-destructive text-destructive" />
+                      <LuTrash className="size-4 fill-destructive text-destructive hover:text-white" />
-              </Chip>
+                    </BlurredIconButton>
+                  </TooltipTrigger>
+                  <TooltipContent>{t("tooltip.deleteExport")}</TooltipContent>
+                </Tooltip>
+              </div>
             </div>
 
             {!exportedRecording.in_progress && (
@@ -220,13 +242,13 @@ export default function ExportCard({
                 <FaPlay />
               </Button>
             )}
-          </div>
+          </>
         )}
         {loading && (
           <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
         )}
         <ImageShadowOverlay />
-        <div className="absolute bottom-2 left-3 flex h-full items-end justify-between text-white smart-capitalize">
+        <div className="absolute bottom-2 left-3 flex items-end text-white smart-capitalize">
           {exportedRecording.name.replaceAll("_", " ")}
         </div>
       </div>

web/src/components/menu/SearchResultActions.tsx

@@ -42,6 +42,7 @@ import useSWR from "swr";
 
 import { Trans, useTranslation } from "react-i18next";
 import { BsFillLightningFill } from "react-icons/bs";
+import BlurredIconButton from "../button/BlurredIconButton";
 
 type SearchResultActionsProps = {
   searchResult: SearchResult;
@@ -213,15 +214,13 @@ export default function SearchResultActions({
           {config?.semantic_search?.enabled &&
             searchResult.data.type == "object" && (
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger asChild>
-                  <div className="group relative inline-flex items-center justify-center">
+                  <BlurredIconButton
-                    {/* blurred circular hover background */}
-                    <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
-                    <MdImageSearch
-                      className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
                     onClick={findSimilar}
-                    />
+                    aria-label={t("itemMenu.findSimilar.aria")}
-                  </div>
+                  >
+                    <MdImageSearch className="size-5" />
+                  </BlurredIconButton>
                 </TooltipTrigger>
                 <TooltipContent>
                   {t("itemMenu.findSimilar.label")}
@@ -236,14 +235,13 @@ export default function SearchResultActions({
             searchResult.data.type == "object" &&
             !searchResult.plus_id && (
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger asChild>
-                  <div className="group relative inline-flex items-center justify-center">
+                  <BlurredIconButton
-                    <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
-                    <FrigatePlusIcon
-                      className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
                     onClick={showSnapshot}
-                    />
+                    aria-label={t("itemMenu.submitToPlus.aria")}
-                  </div>
+                  >
+                    <FrigatePlusIcon className="size-5" />
+                  </BlurredIconButton>
                 </TooltipTrigger>
                 <TooltipContent>
                   {t("itemMenu.submitToPlus.label")}
@@ -252,11 +250,10 @@ export default function SearchResultActions({
             )}
 
           <DropdownMenu>
-            <DropdownMenuTrigger>
+            <DropdownMenuTrigger asChild>
-              <div className="group relative inline-flex items-center justify-center">
+              <BlurredIconButton aria-label={t("itemMenu.more.aria")}>
-                <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+                <FiMoreVertical className="size-5" />
-                <FiMoreVertical className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+              </BlurredIconButton>
-              </div>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">{menuItems}</DropdownMenuContent>
           </DropdownMenu>

web/src/pages/FaceLibrary.tsx

@@ -5,6 +5,7 @@ import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
 import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog";
 import FaceSelectionDialog from "@/components/overlay/FaceSelectionDialog";
 import { Button, buttonVariants } from "@/components/ui/button";
+import BlurredIconButton from "@/components/button/BlurredIconButton";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -858,20 +859,15 @@ function FaceAttemptGroup({
             faceNames={faceNames}
             onTrainAttempt={(name) => onTrainAttempt(data, name)}
           >
-            <div className="group relative inline-flex items-center justify-center">
+            <BlurredIconButton>
-              <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+              <AddFaceIcon className="size-5" />
-              <AddFaceIcon className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+            </BlurredIconButton>
-            </div>
           </FaceSelectionDialog>
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
-              <div className="group relative inline-flex items-center justify-center">
+              <BlurredIconButton onClick={() => onReprocess(data)}>
-                <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+                <LuRefreshCw className="size-5" />
-                <LuRefreshCw
+              </BlurredIconButton>
-                  className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
-                  onClick={() => onReprocess(data)}
-                />
-              </div>
             </TooltipTrigger>
             <TooltipContent>{t("button.reprocessFace")}</TooltipContent>
           </Tooltip>

web/src/views/classification/ModelTrainingView.tsx

@@ -51,6 +51,7 @@ import { toast } from "sonner";
 import useSWR from "swr";
 import ClassificationSelectionDialog from "@/components/overlay/ClassificationSelectionDialog";
 import { TbCategoryPlus } from "react-icons/tb";
+import BlurredIconButton from "@/components/button/BlurredIconButton";
 import { useModelState } from "@/api/ws";
 import { ModelState } from "@/types/ws";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@@ -811,10 +812,9 @@ function StateTrainGrid({
               image={data.filename}
               onRefresh={onRefresh}
             >
-              <div className="group relative inline-flex items-center justify-center">
+              <BlurredIconButton>
-                <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+                <TbCategoryPlus className="size-5" />
-                <TbCategoryPlus className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+              </BlurredIconButton>
-              </div>
             </ClassificationSelectionDialog>
           </ClassificationCard>
         </div>
@@ -961,10 +961,9 @@ function ObjectTrainGrid({
                       image={data.filename}
                       onRefresh={onRefresh}
                     >
-                      <div className="group relative inline-flex items-center justify-center">
+                      <BlurredIconButton>
-                        <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
+                        <TbCategoryPlus className="size-5" />
-                        <TbCategoryPlus className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+                      </BlurredIconButton>
-                      </div>
                     </ClassificationSelectionDialog>
                   </>
                 )}