Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 08:42:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add transition duration for dropzone animation

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-06-21 14:51:01 +00:00
parent eea09dcfac
commit 07c0b03a99
1 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/src/components/(dashboard)/document-dropzone/document-dropzone.tsx
View File

@ -2,7 +2,6 @@
import { Variants, motion } from 'framer-motion'; import { Variants, motion } from 'framer-motion';
import { Plus } from 'lucide-react'; import { Plus } from 'lucide-react';
import { useTheme } from 'next-themes';
import { useDropzone } from 'react-dropzone'; import { useDropzone } from 'react-dropzone';
import { cn } from '@documenso/ui/lib/utils'; import { cn } from '@documenso/ui/lib/utils';
@ -92,8 +91,6 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
}, },
}); });
const { theme } = useTheme();
return ( return (
<motion.div <motion.div
className={cn('flex', className)} className={cn('flex', className)}
@ -110,7 +107,6 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
)} )}
gradient={true} gradient={true}
degrees={120} degrees={120}
{...getRootProps()} {...getRootProps()}
{...props} {...props}
> >
@ -120,6 +116,7 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
<motion.div <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" 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} 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-full rounded-[2px]" />
<div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 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 <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" 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} variants={DocumentDropzoneCardCenterVariants}
transition={{ duration: 0.3 }}
> >
<Plus <Plus
strokeWidth="2px" strokeWidth="2px"
@ -139,6 +137,7 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
<motion.div <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" 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} 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-full rounded-[2px]" />
<div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" /> <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />