From 6a7ea0ea2f547d4456e548f48f2d202d5975b1e6 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Sun, 28 Apr 2024 22:09:11 -0600
Subject: [PATCH] Update MediaCard.tsx

---
 src/components/media/MediaCard.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 47fbf051..24b131a5 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -8,6 +8,7 @@ import { DotList } from "@/components/text/DotList";
 import { Flare } from "@/components/utils/Flare";
 import { MediaItem } from "@/utils/mediaTypes";
 
+import { MediaBookmarkButton } from "./MediaBookmark";
 import { IconPatch } from "../buttons/IconPatch";
 import { Icons } from "../Icon";
 
@@ -66,7 +67,7 @@ function MediaCardContent({
 
   return (
     <Flare.Base
-      className={`group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
+      className={`group -m-3 mb-2 rounded-xl bg-background-main transition-colors duration-100 focus:relative focus:z-10 ${
         canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
       }`}
       tabIndex={canLink ? 0 : -1}
@@ -81,13 +82,13 @@ function MediaCardContent({
         })}
       />
       <Flare.Child
-        className={`pointer-events-auto relative mb-2 p-[0.5em] transition-transform duration-300 ${
+        className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-100 ${
           canLink ? "group-hover:scale-95" : "opacity-60"
         }`}
       >
         <div
           className={classNames(
-            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
+            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-100",
             {
               "group-hover:rounded-lg": canLink,
             },
@@ -141,14 +142,20 @@ function MediaCardContent({
             </>
           ) : null}
 
+          {canLink ? (
+            <div className="absolute" onClick={(e) => e.preventDefault()}>
+              <MediaBookmarkButton media={media} />
+            </div>
+          ) : null}
+
           <div
-            className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-500 ${
+            className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-200 ${
               closable ? "opacity-100" : "pointer-events-none opacity-0"
             }`}
           >
             <IconPatch
               clickable
-              className="text-2xl text-mediaCard-badgeText transition-transform hover:scale-110 duration-500"
+              className="text-2xl text-mediaCard-badgeText"
               onClick={() => closable && onClose?.()}
               icon={Icons.X}
             />