From 9c326c1bf6b808d80d4b9e1b4ffcc9b536b139ca Mon Sep 17 00:00:00 2001
From: Jordan Fearnley <fearnlj01@gmail.com>
Date: Wed, 24 Apr 2024 18:38:23 +0100
Subject: [PATCH] Misc: Deprecate (new) prop & change zoom behaviour.  - Remove
 zoomOnBoolValue  - Apply transition delay on hover zoom out for all images  -
 Cleanup of unneeded classes/whitespace

---
 src/components/BackgroundImagePlaceholderDiv.tsx | 7 ++-----
 src/pages/collection/series/SeriesImages.tsx     | 6 +++---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/BackgroundImagePlaceholderDiv.tsx b/src/components/BackgroundImagePlaceholderDiv.tsx
index 1ec3d16af..c8f6d07b7 100644
--- a/src/components/BackgroundImagePlaceholderDiv.tsx
+++ b/src/components/BackgroundImagePlaceholderDiv.tsx
@@ -12,7 +12,6 @@ type Props = {
   hidePlaceholderOnHover?: boolean;
   overlayOnHover?: boolean;
   zoomOnHover?: boolean;
-  zoomOnBoolValue?: boolean;
   linkToImage?: boolean;
 };
 
@@ -24,7 +23,6 @@ const BackgroundImagePlaceholderDiv = React.memo((props: Props) => {
     image,
     linkToImage,
     overlayOnHover,
-    zoomOnBoolValue,
     zoomOnHover,
   } = props;
   const imageSource = useMemo(() => {
@@ -88,9 +86,8 @@ const BackgroundImagePlaceholderDiv = React.memo((props: Props) => {
       <div
         className={cx(
           'absolute w-full h-full flex flex-col top-0 left-0 text-center z-[-1] rounded-lg',
-          zoomOnHover && 'group-hover:scale-105 transition-transform',
-          typeof zoomOnBoolValue !== 'undefined' && 'transition-transform duration-600',
-          zoomOnBoolValue && 'scale-105',
+          typeof zoomOnHover === 'boolean' && 'transition-transform duration-600',
+          zoomOnHover && 'group-hover:scale-105',
         )}
         style={{ background: backgroundImage ? `center / cover no-repeat url('${backgroundImage.src}')` : undefined }}
       >
diff --git a/src/pages/collection/series/SeriesImages.tsx b/src/pages/collection/series/SeriesImages.tsx
index e84166223..5e700373e 100644
--- a/src/pages/collection/series/SeriesImages.tsx
+++ b/src/pages/collection/series/SeriesImages.tsx
@@ -134,14 +134,14 @@ const SeriesImages = () => {
               <BackgroundImagePlaceholderDiv
                 image={item}
                 className={cx(
-                  'rounded-lg drop-shadow-md transition-transform duration-600 outline',
+                  'rounded-lg drop-shadow-md transition-transform outline',
                   item === selectedImage
-                    ? 'outline-panel-text-important outline-4 '
+                    ? 'outline-panel-text-important outline-4'
                     : 'outline-2 outline-panel-border',
                   sizeMap[type],
                 )}
                 linkToImage
-                zoomOnBoolValue={item === selectedImage}
+                zoomOnHover
               >
                 {item.Preferred && (
                   <div className="absolute bottom-3 mx-[5%] flex w-[90%] justify-center gap-2.5 rounded-lg bg-panel-background-overlay py-2 text-sm font-semibold text-panel-text opacity-100 transition-opacity group-hover:opacity-0">