From b4c0e0adb9a5684ffaa2172f056db1e5e098ff73 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 6 Jul 2024 22:51:54 -0500
Subject: [PATCH] Switch from upload wobble to drift

---
 src/admin/AdminUploadsClient.tsx |  2 +-
 src/admin/AdminUploadsTable.tsx  |  2 +-
 tailwind.config.js               | 10 ++++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/admin/AdminUploadsClient.tsx b/src/admin/AdminUploadsClient.tsx
index 77ab233e..9b48061e 100644
--- a/src/admin/AdminUploadsClient.tsx
+++ b/src/admin/AdminUploadsClient.tsx
@@ -28,7 +28,7 @@ export default function AdminUploadsClient({
 
   return (
     <div className="space-y-4">
-      {urls.length > 1 &&
+      {(urls.length > 1 || isAdding) &&
         <AdminAddAllUploads {...{
           storageUrls,
           uniqueTags,
diff --git a/src/admin/AdminUploadsTable.tsx b/src/admin/AdminUploadsTable.tsx
index ca1e1126..14e06506 100644
--- a/src/admin/AdminUploadsTable.tsx
+++ b/src/admin/AdminUploadsTable.tsx
@@ -52,7 +52,7 @@ export default function AdminUploadsTable({
                     'rounded-[3px] overflow-hidden',
                     'border-subtle',
                     isAdding && !isComplete && status === 'adding' &&
-                      'animate-hover-wobble shadow-lg',
+                      'animate-hover-drift shadow-lg',
                   )}
                 />
               </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 8831b5bf..aa7a96fe 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-drift':
+          'hover-drift 8s linear infinite',
         'hover-wobble':
           'hover-wobble 6s linear infinite normal both running',
       },
@@ -36,6 +38,14 @@ module.exports = {
           '50%': { transform: 'rotate(180deg) scale(0.8)' },
           '100%': { transform: 'rotate(360deg) scale(1)' },
         },
+        'hover-drift': {
+          '0%': { transform: 'translate(0, 0)' },
+          '20%': { transform: 'translate(1px, -2px)' },
+          '40%': { transform: 'translate(1px, 1.5px)' },
+          '60%': { transform: 'translate(-1px, 2px)' },
+          '80%': { transform: 'translate(-1.5px, -1.75px)' },
+          '100%': { transform: 'translate(0, 0)' },
+        },
         'hover-wobble': {
           '0%': { transform: 'rotate(0deg)' },
           '20%': { transform: 'rotate(3.5deg)' },