From f1c0d8ff93d6bc29a3bd2931ac69bb628f4f61c8 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 8 Jul 2024 19:55:28 -0500
Subject: [PATCH] Refine batch selection styles/behavior

---
 src/admin/AdminBatchEditPanel.tsx |  3 ++-
 src/photo/PhotoGrid.tsx           | 10 +++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/admin/AdminBatchEditPanel.tsx b/src/admin/AdminBatchEditPanel.tsx
index df1637e6..71848781 100644
--- a/src/admin/AdminBatchEditPanel.tsx
+++ b/src/admin/AdminBatchEditPanel.tsx
@@ -20,7 +20,8 @@ export default function AdminBatchEditPanel() {
         color="gray"
         className={clsx(
           'backdrop-blur-lg !border-transparent',
-          '!bg-gray-200/70 dark:!bg-gray-800/70'
+          '!text-gray-900 dark:!text-gray-100',
+          '!bg-gray-100/90 dark:!bg-gray-900/80'
         )}
         cta={<LoaderButton
           onClick={() => setSelectedPhotoIds?.([])}
diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index b853aa6a..5e2d3db0 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -113,10 +113,11 @@ export default function PhotoGrid({
               )}>
                 <div
                   className={clsx(
-                    'w-full h-full transition-opacity',
+                    'w-full h-full',
                     'border-black dark:border-white',
-                    'group-hover:opacity-100',
+                    'transition-opacity',
                     !isSelected && 'opacity-0',
+                    'group-hover:opacity-100',
                     // eslint-disable-next-line max-len
                     'bg-[radial-gradient(169.40%_89.55%_at_94.76%_6.29%,rgba(1,0,0,0.40)_0%,rgba(255,255,255,0.00)_75%)]',
                     isSelected && 'border-4',
@@ -127,7 +128,10 @@ export default function PhotoGrid({
               <div className="absolute top-0 right-0 p-2">
                 <Checkbox
                   className={clsx(
-                    !isSelected && 'hidden group-hover:block',
+                    // Required to prevent Safari jitter
+                    'translate-x-[0.1px]',
+                    'text-white',
+                    !isSelected && 'opacity-0 group-hover:opacity-100',
                   )}
                   checked={isSelected}
                   onChange={() => setSelectedPhotoIds?.(isSelected