From f59adf97d6a51be3431424e79f491dc6a2e82ac9 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 24 Oct 2025 09:40:05 -0500
Subject: [PATCH] use consistent overlay button styles

---
 web/src/pages/FaceLibrary.tsx                    | 16 +++++++++++-----
 .../views/classification/ModelTrainingView.tsx   | 10 ++++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index 677bb58e0..c01a0875a 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -858,14 +858,20 @@ function FaceAttemptGroup({
             faceNames={faceNames}
             onTrainAttempt={(name) => onTrainAttempt(data, name)}
           >
-            <AddFaceIcon className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
+            <div className="group relative inline-flex items-center justify-center">
+              <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="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+            </div>
           </FaceSelectionDialog>
           <Tooltip>
             <TooltipTrigger>
-              <LuRefreshCw
-                className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40"
-                onClick={() => onReprocess(data)}
-              />
+              <div className="group relative inline-flex items-center justify-center">
+                <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="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
+                  onClick={() => onReprocess(data)}
+                />
+              </div>
             </TooltipTrigger>
             <TooltipContent>{t("button.reprocessFace")}</TooltipContent>
           </Tooltip>
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index f313d6829..ed96406e6 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -811,7 +811,10 @@ function StateTrainGrid({
               image={data.filename}
               onRefresh={onRefresh}
             >
-              <TbCategoryPlus className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
+              <div className="group relative inline-flex items-center justify-center">
+                <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="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+              </div>
             </ClassificationSelectionDialog>
           </ClassificationCard>
         </div>
@@ -958,7 +961,10 @@ function ObjectTrainGrid({
                       image={data.filename}
                       onRefresh={onRefresh}
                     >
-                      <TbCategoryPlus className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
+                      <div className="group relative inline-flex items-center justify-center">
+                        <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="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
+                      </div>
                     </ClassificationSelectionDialog>
                   </>
                 )}