From 07c0b03a99a95126fe558fdc5617f6a2a75a3531 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Wed, 21 Jun 2023 14:51:01 +0000
Subject: [PATCH] feat: add transition duration for dropzone animation

---
 .../(dashboard)/document-dropzone/document-dropzone.tsx    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/(dashboard)/document-dropzone/document-dropzone.tsx b/apps/web/src/components/(dashboard)/document-dropzone/document-dropzone.tsx
index 3688bdfca..94c5296aa 100644
--- a/apps/web/src/components/(dashboard)/document-dropzone/document-dropzone.tsx
+++ b/apps/web/src/components/(dashboard)/document-dropzone/document-dropzone.tsx
@@ -2,7 +2,6 @@
 
 import { Variants, motion } from 'framer-motion';
 import { Plus } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import { useDropzone } from 'react-dropzone';
 
 import { cn } from '@documenso/ui/lib/utils';
@@ -92,8 +91,6 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
     },
   });
 
-  const { theme } = useTheme();
-
   return (
     <motion.div
       className={cn('flex', className)}
@@ -110,7 +107,6 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
         )}
         gradient={true}
         degrees={120}
-
         {...getRootProps()}
         {...props}
       >
@@ -120,6 +116,7 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
             <motion.div
               className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
               variants={DocumentDropzoneCardLeftVariants}
+              transition={{ duration: 0.3 }}
             >
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
@@ -129,6 +126,7 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
             <motion.div
               className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
               variants={DocumentDropzoneCardCenterVariants}
+              transition={{ duration: 0.3 }}
             >
               <Plus
                 strokeWidth="2px"
@@ -139,6 +137,7 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
             <motion.div
               className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
               variants={DocumentDropzoneCardRightVariants}
+              transition={{ duration: 0.3 }}
             >
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />