adding dark mode to feat/refresh

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

@@ -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>

apps/web/src/components/(dashboard)/layout/desktop-nav.tsx

@@ -16,17 +16,23 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
     <div className={cn('ml-8 hidden flex-1 gap-x-6 md:flex', className)} {...props}>
       <Link
         href="/dashboard"
-        className={cn('font-medium leading-5 text-[#A1A1AA] hover:opacity-80', {
-          'text-primary-foreground': pathname?.startsWith('/dashboard'),
-        })}
+        className={cn(
+          'text-muted-foreground focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+          {
+            'text-foreground': pathname?.startsWith('/dashboard'),
+          },
+        )}
       >
         Dashboard
       </Link>
       <Link
         href="/documents"
-        className={cn('font-medium leading-5 text-[#A1A1AA] hover:opacity-80', {
-          'text-primary-foreground': pathname?.startsWith('/documents'),
-        })}
+        className={cn(
+          'text-muted-foreground focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 ',
+          {
+            'text-foreground': pathname?.startsWith('/documents'),
+          },
+        )}
       >
         Documents
       </Link>

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -29,7 +29,10 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
       {...props}
     >
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
-        <Link href="/">
+        <Link
+          href="/"
+          className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+        >
           <Logo className="h-6 w-auto" />
         </Link>
 

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -2,8 +2,18 @@
 
 import Link from 'next/link';
 
-import { CreditCard, Github, Key, LogOut, User as LucideUser } from 'lucide-react';
+import {
+  CreditCard,
+  Github,
+  Key,
+  LogOut,
+  User as LucideUser,
+  Monitor,
+  Moon,
+  Sun,
+} from 'lucide-react';
 import { signOut } from 'next-auth/react';
+import { useTheme } from 'next-themes';
 
 import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 import { User } from '@documenso/prisma/client';
@@ -26,10 +36,12 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
   const initials =
     user.name
       ?.split(' ')
-      .map((name) => name.slice(0, 1).toUpperCase())
+      .map((name: string) => name.slice(0, 1).toUpperCase())
       .slice(0, 2)
       .join('') ?? 'UK';
 
+  const { theme, setTheme } = useTheme();
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -68,6 +80,28 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
 
         <DropdownMenuSeparator />
 
+        {theme === 'light' ? null : (
+          <DropdownMenuItem onClick={() => setTheme('light')}>
+            <Sun className="mr-2 h-4 w-4" />
+            Light Mode
+          </DropdownMenuItem>
+        )}
+        {theme === 'dark' ? null : (
+          <DropdownMenuItem onClick={() => setTheme('dark')}>
+            <Moon className="mr-2 h-4 w-4" />
+            Dark Mode
+          </DropdownMenuItem>
+        )}
+
+        {theme === 'system' ? null : (
+          <DropdownMenuItem onClick={() => setTheme('system')}>
+            <Monitor className="mr-2 h-4 w-4" />
+            System Theme
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuSeparator />
+
         <DropdownMenuItem asChild>
           <Link href="https://github.com/documenso/documenso" className="cursor-pointer">
             <Github className="mr-2 h-4 w-4" />

apps/web/src/components/(dashboard)/metric-card/metric-card.tsx

@@ -13,7 +13,7 @@ export type CardMetricProps = {
 
 export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricProps) => {
   return (
-    <div className={cn('overflow-hidden rounded-lg border border-slate-200 bg-white', className)}>
+    <div className={cn('border-border bg-background overflow-hidden rounded-lg border', className)}>
       <div className="px-4 pb-6 pt-4 sm:px-4 sm:pb-8 sm:pt-4">
         <div className="flex items-start">
           {Icon && <Icon className="mr-2 h-4 w-4 text-slate-500" />}
@@ -21,7 +21,7 @@ export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricPr
           <h3 className="flex items-end text-sm font-medium text-slate-500">{title}</h3>
         </div>
 
-        <p className="mt-6 text-4xl font-semibold leading-8 text-gray-900 md:mt-8">
+        <p className="text-foreground mt-6 text-4xl font-semibold leading-8 md:mt-8">
           {typeof value === 'number' ? value.toLocaleString('en-US') : value}
         </p>
       </div>

apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx

@@ -132,7 +132,7 @@ export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFVie
           .map((_, i) => (
             <div
               key={i}
-              className="border-primary/50 my-8 overflow-hidden rounded border first:mt-0 last:mb-0"
+              className="border-border my-8 overflow-hidden rounded border first:mt-0 last:mb-0"
             >
               <PDFPage
                 pageNumber={i + 1}