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

adding dark mode to feat/refresh

Browse Source
This commit is contained in:
Doug Andrade
2023-06-11 01:50:19 -04:00
parent b0e364acf4
commit 877a579533
21 changed files with 217 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
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';
@ -91,6 +92,8 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
},
});
const { theme } = useTheme();
return (
<motion.div
className={cn('flex', className)}
@ -101,9 +104,13 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
>
<Card
role="button"
className={cn('flex flex-1 cursor-pointer flex-col items-center justify-center', className)}
className={cn(
'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',
className,
)}
gradient={true}
degrees={120}
lightMode={theme === 'light'}
{...getRootProps()}
{...props}
>
@ -111,39 +118,41 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
{/* <FilePlus strokeWidth="1px" className="h-16 w-16"/> */}
<div className="flex">
<motion.div
className="border-muted-foreground/20 group-hover:border-primary/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}
>
<div className="bg-muted-foreground/20 group-hover:bg-primary h-2 w-full rounded-[2px]" />
<div className="bg-muted-foreground/20 group-hover:bg-primary h-2 w-5/6 rounded-[2px]" />
<div className="bg-muted-foreground/20 group-hover:bg-primary 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-full rounded-[2px]" />
</motion.div>
<motion.div
className="border-muted-foreground/20 group-hover:border-primary/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}
>
<Plus
strokeWidth="2px"
className="text-muted-foreground/20 group-hover:text-primary h-12 w-12"
className="text-muted-foreground/20 group-hover:text-documenso h-12 w-12"
/>
</motion.div>
<motion.div
className="border-muted-foreground/20 group-hover:border-primary/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}
>
<div className="bg-muted-foreground/20 group-hover:bg-primary h-2 w-full rounded-[2px]" />
<div className="bg-muted-foreground/20 group-hover:bg-primary h-2 w-5/6 rounded-[2px]" />
<div className="bg-muted-foreground/20 group-hover:bg-primary 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-full rounded-[2px]" />
</motion.div>
</div>
<input {...getInputProps()} />
<p className="group-hover:text-primary mt-8 font-medium">Add a document</p>
<p className="group-hover:text-foreground text-muted-foreground mt-8 font-medium">
Add a document
</p>
<p className="mt-1 text-sm">Drag & drop your document here.</p>
<p className="text-muted-foreground/80 mt-1 text-sm ">Drag & drop your document here.</p>
</CardContent>
</Card>
</motion.div>