blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

chore: updated initial animation state

Browse Source 
Signed-off-by: Adithya Krishna <adithya@documenso.com>
This commit is contained in:
Adithya Krishna
2024-03-07 19:28:35 +05:30
parent 9ae51a0072
commit 0c426983bb
2 changed files with 35 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/lib/document-dropzone-constants.ts
View File

@@ -68,7 +68,7 @@ export const DocumentDropzoneCardCenterVariants: Variants = {
export const DocumentDropzoneDisabledCardLeftVariants: Variants = { export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
initial: { initial: {
x: 40, x: 40,
y: 30, y: 0,
rotate: -14, rotate: -14,
}, },
animate: { animate: {
@@ -85,8 +85,8 @@ export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
export const DocumentDropzoneDisabledCardRightVariants: Variants = { export const DocumentDropzoneDisabledCardRightVariants: Variants = {
initial: { initial: {
x: -40, x: -50,
y: 30, y: 5,
rotate: 14, rotate: 14,
}, },
animate: { animate: {
@@ -103,7 +103,7 @@ export const DocumentDropzoneDisabledCardRightVariants: Variants = {
export const DocumentDropzoneDisabledCardCenterVariants: Variants = { export const DocumentDropzoneDisabledCardCenterVariants: Variants = {
initial: { initial: {
x: 20, x: -10,
y: 0, y: 0,
}, },
animate: { animate: {

63
packages/ui/primitives/document-dropzone.tsx
View File

@@ -69,26 +69,25 @@ export const DocumentDropzone = ({
}); });
return ( return (
<motion.div <Card
className={cn('flex', className)} role="button"
variants={DocumentDropzoneContainerVariants} className={cn(
initial="initial" 'focus-visible:ring-ring ring-offset-background flex flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
animate="animate" className,
whileHover="hover" )}
gradient={!disabled}
degrees={120}
aria-disabled={disabled}
{...getRootProps()}
{...props}
> >
<Card <CardContent className="text-muted-foreground/40 flex flex-col items-center justify-center p-6">
role="button" <motion.div
className={cn( variants={DocumentDropzoneContainerVariants}
'focus-visible:ring-ring ring-offset-background flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', initial="initial"
className, animate="animate"
)} whileHover="hover"
gradient={!disabled} >
degrees={120}
aria-disabled={disabled}
{...getRootProps()}
{...props}
>
<CardContent className="text-muted-foreground/40 flex flex-col items-center justify-center p-6">
{disabled ? ( {disabled ? (
// Disabled State // Disabled State
<div className="flex"> <div className="flex">
@@ -152,21 +151,21 @@ export const DocumentDropzone = ({
</motion.div> </motion.div>
</div> </div>
)} )}
</motion.div>
<input {...getInputProps()} /> <input {...getInputProps()} />
<p className="text-foreground mt-8 font-medium">{DocumentDescription[type].headline}</p> <p className="text-foreground mt-8 font-medium">{DocumentDescription[type].headline}</p>
<p className="text-muted-foreground/80 mt-1 text-sm"> <p className="text-muted-foreground/80 mt-1 text-center text-sm">
{disabled ? disabledMessage : 'Drag & drop your PDF here.'} {disabled ? disabledMessage : 'Drag & drop your PDF here.'}
</p> </p>
{disabled && ( {disabled && (
<Button className="hover:bg-warning/80 bg-warning mt-4 w-32" asChild> <Button className="hover:bg-warning/80 bg-warning mt-4 w-32" asChild>
<Link href="/settings/billing">Upgrade</Link> <Link href="/settings/billing">Upgrade</Link>
</Button> </Button>
)} )}
</CardContent> </CardContent>
</Card> </Card>
</motion.div>
); );
}; };