From 867176775c53d73b8eaa24d9039795ed2a16773d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 6 Jul 2024 20:30:03 -0500
Subject: [PATCH] Switch upload animation to wobble

---
 src/admin/AdminUploadsTable.tsx | 53 +++++++++++++++++++--------------
 src/photo/PhotoSmall.tsx        |  2 +-
 src/site/globals.css            |  5 ++++
 tailwind.config.js              | 10 +++++++
 4 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/admin/AdminUploadsTable.tsx b/src/admin/AdminUploadsTable.tsx
index 0d83a794..ca1e1126 100644
--- a/src/admin/AdminUploadsTable.tsx
+++ b/src/admin/AdminUploadsTable.tsx
@@ -4,7 +4,6 @@ import ImageSmall from '@/components/image/ImageSmall';
 import Spinner from '@/components/Spinner';
 import { getIdFromStorageUrl } from '@/services/storage';
 import { clsx } from 'clsx/lite';
-import { motion } from 'framer-motion';
 import { FaRegCircleCheck } from 'react-icons/fa6';
 import { pathForAdminUploadUrl } from '@/site/paths';
 import AddButton from './AddButton';
@@ -25,27 +24,38 @@ export default function AdminUploadsTable({
 
   return (
     <div className="space-y-4">
-      {urlAddStatuses.map(({ url, status, statusMessage, uploadedAt }) => {
-        const addUploadPath = pathForAdminUploadUrl(url);
-        return <div key={url}>
+      {urlAddStatuses.map(({ url, status, statusMessage, uploadedAt }) =>
+        <div key={url}>
           <div className={clsx(
             'flex items-center gap-2 w-full min-h-8',
           )}>
-            <motion.div
-              className="flex items-center grow gap-2"
-              animate={isAdding && !isComplete
-                ? {
-                  translateX: status === 'adding' ? -4 : 4,
-                  opacity: status === 'adding' ? 1 : 0.5,
-                }
-                : { translateX: 0, opacity: 1 }}
+            <div
+              className={clsx(
+                'flex items-center grow gap-2',
+                'transition-opacity',
+                isAdding && !isComplete && status !== 'adding' && 'opacity-40',
+              )}
             >
-              <ImageSmall
-                src={url}
-                alt={url}
-                aspectRatio={3.0 / 2.0}
-                className="rounded-[3px] overflow-hidden shrink-0"
-              />
+              <div className={clsx(
+                'shrink-0 transition-transform',
+                isAdding && !isComplete && status === 'adding' &&
+                  'translate-x-[-2px] scale-[1.15]',
+                isAdding && !isComplete && status !== 'adding'
+                  ? 'scale-90'
+                  : 'scale-100',
+              )}>
+                <ImageSmall
+                  src={url}
+                  alt={url}
+                  aspectRatio={3.0 / 2.0}
+                  className={clsx(
+                    'rounded-[3px] overflow-hidden',
+                    'border-subtle',
+                    isAdding && !isComplete && status === 'adding' &&
+                      'animate-hover-wobble shadow-lg',
+                  )}
+                />
+              </div>
               <span className="grow min-w-0">
                 <div className="overflow-hidden text-ellipsis">
                   {getIdFromStorageUrl(url)}
@@ -62,7 +72,7 @@ export default function AdminUploadsTable({
                       : '—'}
                 </div>
               </span>
-            </motion.div>
+            </div>
             <span className="flex items-center gap-2">
               {isAdding || isComplete
                 ? <>
@@ -78,7 +88,7 @@ export default function AdminUploadsTable({
                       </span>}
                 </>
                 : <>
-                  <AddButton path={addUploadPath} />
+                  <AddButton path={pathForAdminUploadUrl(url)} />
                   <FormWithConfirm
                     action={deleteBlobPhotoAction}
                     confirmText="Are you sure you want to delete this upload?"
@@ -100,8 +110,7 @@ export default function AdminUploadsTable({
                 </>}
             </span>
           </div>
-        </div>;
-      })}
+        </div>)}
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/photo/PhotoSmall.tsx b/src/photo/PhotoSmall.tsx
index 282685f5..ac08a88a 100644
--- a/src/photo/PhotoSmall.tsx
+++ b/src/photo/PhotoSmall.tsx
@@ -44,7 +44,7 @@ export default function PhotoSmall({
         selected && 'brightness-50',
         'min-w-[50px]',
         'rounded-[3px] overflow-hidden',
-        'border border-gray-200 dark:border-gray-800',
+        'border-subtle',
       )}
       prefetch={prefetch}
     >
diff --git a/src/site/globals.css b/src/site/globals.css
index 50eaa560..a522d8a8 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -150,6 +150,11 @@
     @apply
       text-red-500 dark:text-red-400
   }
+  /* Utilities: Border */
+  .border-subtle {
+    @apply
+      border border-gray-200 dark:border-gray-800
+  }
   /* Utilities: Background */
   .bg-main {
     @apply
diff --git a/tailwind.config.js b/tailwind.config.js
index 23b349c6..8831b5bf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,6 +27,8 @@ module.exports = {
       animation: {
         'rotate-pulse':
           'rotate-pulse 0.75s linear infinite normal both running',
+        'hover-wobble':
+          'hover-wobble 6s linear infinite normal both running',
       },
       keyframes: {
         'rotate-pulse': {
@@ -34,6 +36,14 @@ module.exports = {
           '50%': { transform: 'rotate(180deg) scale(0.8)' },
           '100%': { transform: 'rotate(360deg) scale(1)' },
         },
+        'hover-wobble': {
+          '0%': { transform: 'rotate(0deg)' },
+          '20%': { transform: 'rotate(3.5deg)' },
+          '40%': { transform: 'rotate(-2deg)' },
+          '60%': { transform: 'rotate(2.5deg)' },
+          '80%': { transform: 'rotate(-2.5deg)' },
+          '100%': { transform: 'rotate(0deg)' },
+        },
       },
     },
   },