Added favorite button in Performer grid view (#3369)

Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

ui/v2.5/src/components/Performers/PerformerCard.tsx

@@ -18,6 +18,8 @@ import { PopoverCountButton } from "../Shared/PopoverCountButton";
 import GenderIcon from "./GenderIcon";
 import { faHeart, faTag } from "@fortawesome/free-solid-svg-icons";
 import { RatingBanner } from "../Shared/RatingBanner";
+import cx from "classnames";
+import { usePerformerUpdate } from "src/core/StashService";
 
 export interface IPerformerCardExtraCriteria {
   scenes: Criterion<CriterionValue>[];
@@ -60,17 +62,39 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
     { age, years_old: ageL10String }
   );
 
-  function maybeRenderFavoriteIcon() {
-    if (performer.favorite === false) {
-      return;
-    }
+  const [updatePerformer] = usePerformerUpdate();
+
+  function renderFavoriteIcon() {
     return (
-      <div className="favorite">
-        <Icon icon={faHeart} size="2x" />
-      </div>
+      <Link to="" onClick={(e) => e.preventDefault()}>
+        <Button
+          className={cx(
+            "minimal",
+            "mousetrap",
+            "favorite-button",
+            performer.favorite ? "favorite" : "not-favorite"
+          )}
+          onClick={() => onToggleFavorite!(!performer.favorite)}
+        >
+          <Icon icon={faHeart} size="2x" />
+        </Button>
+      </Link>
     );
   }
 
+  function onToggleFavorite(v: boolean) {
+    if (performer.id) {
+      updatePerformer({
+        variables: {
+          input: {
+            id: performer.id,
+            favorite: v,
+          },
+        },
+      });
+    }
+  }
+
   function maybeRenderScenesPopoverButton() {
     if (!performer.scene_count) return;
 
@@ -213,7 +237,8 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
             alt={performer.name ?? ""}
             src={performer.image_path ?? ""}
           />
-          {maybeRenderFavoriteIcon()}
+
+          {renderFavoriteIcon()}
           {maybeRenderRatingBanner()}
           {maybeRenderFlag()}
         </>

ui/v2.5/src/components/Performers/styles.scss

@@ -85,12 +85,41 @@
     width: 3rem;
   }
 
-  .favorite {
-    color: #ff7373;
-    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
+  button.btn.favorite-button {
+    opacity: 1;
+    padding: 0;
     position: absolute;
     right: 5px;
     top: 10px;
+    transition: opacity 0.5s;
+
+    svg.fa-icon {
+      margin-left: 0.4rem;
+      margin-right: 0.4rem;
+    }
+
+    &.not-favorite {
+      color: rgba(191, 204, 214, 0.5);
+      filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
+      opacity: 0;
+    }
+
+    &.favorite {
+      color: #ff7373;
+      filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
+    }
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:active:focus {
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  &:hover button.btn.favorite-button.not-favorite {
+    opacity: 1;
   }
 
   &__age {