Compare commits

...

2 Commits

Author SHA1 Message Date
Ephraim Atta-Duncan
ea85aac4a6 reduce transition duration 2023-06-21 19:14:06 +00:00
Ephraim Atta-Duncan
07c0b03a99 feat: add transition duration for dropzone animation 2023-06-21 14:51:01 +00:00

View File

@@ -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.2 }}
>
<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.2 }}
>
<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.2 }}
>
<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]" />