From cac2adde31994b7fd9f4e9de5985ca75d0143a4a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 20 Oct 2025 17:17:53 -0600
Subject: [PATCH] Improvements to gradients and making face library consistent

---
 .../components/card/ClassificationCard.tsx    | 46 ++++++++++---------
 .../overlay/FaceSelectionDialog.tsx           |  2 +-
 web/src/pages/FaceLibrary.tsx                 |  6 +--
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/web/src/components/card/ClassificationCard.tsx b/web/src/components/card/ClassificationCard.tsx
index ca4f430d2..4be8284e3 100644
--- a/web/src/components/card/ClassificationCard.tsx
+++ b/web/src/components/card/ClassificationCard.tsx
@@ -99,28 +99,32 @@ export function ClassificationCard({
           {t("information.pixels", { ns: "common", area: imageArea })}
         </div>
       )}
-      <div className="absolute bottom-0 left-0 right-0 flex h-12 select-none gap-2 bg-gradient-to-t from-black/60 to-transparent p-2">
-        <div className="flex w-full flex-row items-center justify-between gap-2">
-          <div className="text-xs flex flex-col items-start text-white">
-            <div className="smart-capitalize">
-              {data.name == "unknown" ? t("details.unknown") : data.name}
+      <div className="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-black/60 to-transparent" />
+      <div className="absolute bottom-0 flex w-full select-none flex-row items-center justify-between gap-2 p-2">
+        <div
+          className={cn(
+            "flex flex-col items-start text-white",
+            data.score ? "text-xs" : "text-sm",
+          )}
+        >
+          <div className="smart-capitalize">
+            {data.name == "unknown" ? t("details.unknown") : data.name}
+          </div>
+          {data.score && (
+            <div
+              className={cn(
+                "",
+                scoreStatus == "match" && "text-success",
+                scoreStatus == "potential" && "text-orange-400",
+                scoreStatus == "unknown" && "text-danger",
+              )}
+            >
+              {Math.round(data.score * 100)}%
             </div>
-            {data.score && (
-              <div
-                className={cn(
-                  "",
-                  scoreStatus == "match" && "text-success",
-                  scoreStatus == "potential" && "text-orange-400",
-                  scoreStatus == "unknown" && "text-danger",
-                )}
-              >
-                {Math.round(data.score * 100)}%
-              </div>
-            )}
-          </div>
-          <div className="flex flex-row items-start justify-end gap-5 md:gap-4">
-            {children}
-          </div>
+          )}
+        </div>
+        <div className="flex flex-row items-start justify-end gap-5 md:gap-2">
+          {children}
         </div>
       </div>
     </div>
diff --git a/web/src/components/overlay/FaceSelectionDialog.tsx b/web/src/components/overlay/FaceSelectionDialog.tsx
index 3644ff1cf..174428a12 100644
--- a/web/src/components/overlay/FaceSelectionDialog.tsx
+++ b/web/src/components/overlay/FaceSelectionDialog.tsx
@@ -62,7 +62,7 @@ export default function FaceSelectionDialog({
       );
 
   return (
-    <div className={className ?? ""}>
+    <div className={className ?? "flex"}>
       {newFace && (
         <TextEntryDialog
           open={true}
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index fc8e73e3f..5a5df866c 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -881,12 +881,12 @@ function FaceAttemptGroup({
             faceNames={faceNames}
             onTrainAttempt={(name) => onTrainAttempt(data, name)}
           >
-            <AddFaceIcon className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+            <AddFaceIcon className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground" />
           </FaceSelectionDialog>
           <Tooltip>
             <TooltipTrigger>
               <LuRefreshCw
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground"
                 onClick={() => onReprocess(data)}
               />
             </TooltipTrigger>
@@ -954,7 +954,7 @@ function FaceGrid({
           <Tooltip>
             <TooltipTrigger>
               <LuTrash2
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                className="size-5 cursor-pointer text-gray-200 hover:text-danger"
                 onClick={(e) => {
                   e.stopPropagation();
                   onDelete(pageToggle, [image]);