From 25ccd941ca892fabb7318145ac8c6d1f64c7bb27 Mon Sep 17 00:00:00 2001
From: Max Ward <max.jp.ward@gmail.com>
Date: Sun, 19 Feb 2023 18:18:34 -0800
Subject: [PATCH] fix some hover states and rounding in edit mode

---
 src/components/layout/SectionHeading.tsx |  2 +-
 src/components/media/MediaCard.tsx       | 22 ++++++++++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/SectionHeading.tsx b/src/components/layout/SectionHeading.tsx
index 66723e28..e4d37dfc 100644
--- a/src/components/layout/SectionHeading.tsx
+++ b/src/components/layout/SectionHeading.tsx
@@ -11,7 +11,7 @@ interface SectionHeadingProps {
 export function SectionHeading(props: SectionHeadingProps) {
   return (
     <div className={`${props.className}`}>
-      <div className="mb-3 flex items-center">
+      <div className="mb-5 flex items-center">
         <p className="flex flex-1 items-center font-bold uppercase text-denim-700">
           {props.icon ? (
             <span className="mr-2 text-xl">
diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index f4305eca..42f74181 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -45,14 +45,24 @@ function MediaCardContent({
         }`}
       >
         <div
-          className="relative mb-4 aspect-[2/3] w-full overflow-hidden rounded-xl bg-denim-500 bg-cover bg-center transition-[border-radius] duration-100 group-hover:rounded-lg"
+          className={`relative mb-4 aspect-[2/3] w-full overflow-hidden rounded-xl bg-denim-500 bg-cover bg-center transition-[border-radius] duration-100 ${
+            closable ? "" : "group-hover:rounded-lg"
+          }`}
           style={{
             backgroundImage: media.poster ? `url(${media.poster})` : undefined,
           }}
         >
           {series ? (
-            <div className="absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors group-hover:bg-denim-500">
-              <p className="text-center text-xs font-bold text-slate-400 transition-colors group-hover:text-white">
+            <div
+              className={`absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors ${
+                closable ? "" : "group-hover:bg-denim-500"
+              }`}
+            >
+              <p
+                className={`text-center text-xs font-bold text-slate-400 transition-colors ${
+                  closable ? "" : "group-hover:text-white"
+                }`}
+              >
                 {t("seasons.seasonAndEpisode", {
                   season: series.season,
                   episode: series.episode,
@@ -125,5 +135,9 @@ export function MediaCard(props: MediaCardProps) {
     )}`;
 
   if (!props.linkable) return <span>{content}</span>;
-  return <Link to={link}>{content}</Link>;
+  return (
+    <Link to={link} className={props.closable ? "hover:cursor-default" : ""}>
+      {content}
+    </Link>
+  );
 }