adding dark mode to feat/refresh

apps/web/src/components/forms/edit-document.tsx

@@ -6,6 +6,7 @@ import dynamic from 'next/dynamic';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader } from 'lucide-react';
+import { useTheme } from 'next-themes';
 import { useForm } from 'react-hook-form';
 
 import { Document, User } from '@documenso/prisma/client';
@@ -20,10 +21,10 @@ import { TEditDocumentFormSchema, ZEditDocumentFormSchema } from './edit-documen
 const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
   ssr: false,
   loading: () => (
-    <div className="flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
-      <Loader className="h-12 w-12 animate-spin text-slate-500" />
+    <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+      <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
 
-      <p className="mt-4 text-slate-500">Loading document...</p>
+      <p className="text-muted-foreground mt-4">Loading document...</p>
     </div>
   ),
 });
@@ -59,6 +60,8 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
     resolver: zodResolver(ZEditDocumentFormSchema),
   });
 
+  const { theme } = useTheme();
+
   const canGoBack = step > 0;
   const canGoNext = isValid && step < MAX_STEP;
 
@@ -67,14 +70,18 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
 
   return (
     <div className={cn('grid w-full grid-cols-12 gap-x-8', className)}>
-      <Card className="col-span-7 rounded-xl before:rounded-xl" gradient>
+      <Card
+        className="col-span-7 rounded-xl before:rounded-xl"
+        gradient
+        lightMode={theme === 'light'}
+      >
         <CardContent className="p-2">
           <PDFViewer document={documentUrl} />
         </CardContent>
       </Card>
 
       <div className="relative col-span-5">
-        <div className="sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen flex-col rounded-xl border bg-[hsl(var(--widget))] px-4 py-6">
+        <div className="dark:bg-background border-border sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen flex-col rounded-xl border bg-[hsl(var(--widget))] px-4 py-6">
           {step === 0 && (
             <AddSignersFormPartial
               className="-mx-2 flex-1 overflow-y-hidden px-2"
@@ -91,17 +98,18 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
               watch={watch}
               errors={errors}
               isSubmitting={isSubmitting}
+              theme={theme || 'dark'}
             />
           )}
 
           <div className="mt-4 flex-shrink-0">
-            <p className="text-sm text-black/30">
+            <p className="text-muted-foreground text-sm">
               Add Signers ({step + 1}/{MAX_STEP + 1})
             </p>
 
-            <div className="relative mt-4 h-[2px] rounded-md bg-slate-300">
+            <div className="bg-muted relative mt-4 h-[2px] rounded-md">
               <div
-                className="bg-primary absolute inset-y-0 left-0"
+                className="bg-documenso absolute inset-y-0 left-0"
                 style={{
                   width: `${(100 / (MAX_STEP + 1)) * (step + 1)}%`,
                 }}
@@ -110,7 +118,7 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
 
             <div className="mt-4 flex gap-x-4">
               <Button
-                className="flex-1 bg-black/5 hover:bg-black/10"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 size="lg"
                 variant="secondary"
                 disabled={!canGoBack}
@@ -119,7 +127,12 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
                 Go Back
               </Button>
 
-              <Button className="flex-1" size="lg" disabled={!canGoNext} onClick={onGoNextClick}>
+              <Button
+                className="bg-documenso flex-1"
+                size="lg"
+                disabled={!canGoNext}
+                onClick={onGoNextClick}
+              >
                 Continue
               </Button>
             </div>

apps/web/src/components/forms/edit-document/add-fields.tsx

@@ -34,6 +34,7 @@ export type AddFieldsFormProps = {
   watch: UseFormWatch<TEditDocumentFormSchema>;
   errors: FieldErrors<TEditDocumentFormSchema>;
   isSubmitting: boolean;
+  theme: string;
 };
 
 export const AddFieldsFormPartial = ({
@@ -42,6 +43,7 @@ export const AddFieldsFormPartial = ({
   watch,
   errors: _errors,
   isSubmitting: _isSubmitting,
+  theme,
 }: AddFieldsFormProps) => {
   const signers = watch('signers');
 
@@ -51,7 +53,9 @@ export const AddFieldsFormPartial = ({
     <div className={cn('flex flex-col', className)}>
       <h3 className="text-2xl font-semibold">Edit Document</h3>
 
-      <p className="mt-2 text-sm text-black/30">Add all relevant fields for each recipient.</p>
+      <p className="text-muted-foreground mt-2 text-sm">
+        Add all relevant fields for each recipient.
+      </p>
 
       <hr className="mb-8 mt-4" />
 
@@ -60,7 +64,7 @@ export const AddFieldsFormPartial = ({
           <Button
             variant="outline"
             role="combobox"
-            className="justify-between bg-white font-normal text-slate-500"
+            className="bg-background text-muted-foreground justify-between font-normal"
           >
             {selectedSigner.name && (
               <span>
@@ -103,56 +107,80 @@ export const AddFieldsFormPartial = ({
       </Popover>
 
       <div className="-mx-2 mt-8 flex-1 overflow-y-scroll px-2">
-        <div className="grid grid-cols-2 gap-x-4 gap-y-8">
+        <div className="mt-4 grid grid-cols-2 gap-x-4 gap-y-8">
           <button className="group h-full w-full">
-            <Card className="group-focus:border-primary h-full w-full cursor-pointer">
+            <Card
+              className="group-focus:border-documenso h-full w-full cursor-pointer"
+              lightMode={theme === 'light'}
+            >
               <CardContent className="flex flex-col items-center justify-center px-6 py-4">
                 <p
                   className={cn(
-                    'text-3xl font-medium text-slate-500 group-focus:text-slate-900',
+                    'text-muted-foreground group-focus:text-foreground text-3xl font-medium',
                     fontCaveat.className,
                   )}
                 >
                   {selectedSigner.name || 'Signature'}
                 </p>
 
-                <p className="mt-2 text-center text-xs text-slate-500">Signature</p>
+                <p className="text-muted-foreground mt-2 text-center text-xs">Signature</p>
               </CardContent>
             </Card>
           </button>
 
           <button className="group h-full w-full">
-            <Card className="group-focus:border-primary h-full w-full cursor-pointer">
+            <Card
+              className="group-focus:border-documenso h-full w-full cursor-pointer"
+              lightMode={theme === 'light'}
+            >
               <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p className={cn('text-xl font-medium text-slate-500 group-focus:text-slate-900')}>
+                <p
+                  className={cn(
+                    'text-muted-foreground group-focus:text-foreground text-xl font-medium',
+                  )}
+                >
                   {'Email'}
                 </p>
 
-                <p className="mt-2 text-xs text-slate-500">Email</p>
+                <p className="text-muted-foreground mt-2 text-xs">Email</p>
               </CardContent>
             </Card>
           </button>
 
           <button className="group h-full w-full">
-            <Card className="group-focus:border-primary h-full w-full cursor-pointer">
+            <Card
+              className="group-focus:border-documenso h-full w-full cursor-pointer"
+              lightMode={theme === 'light'}
+            >
               <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p className={cn('text-xl font-medium text-slate-500 group-focus:text-slate-900')}>
+                <p
+                  className={cn(
+                    'text-muted-foreground group-focus:text-foreground text-xl font-medium',
+                  )}
+                >
                   {'Name'}
                 </p>
 
-                <p className="mt-2 text-xs text-slate-500">Name</p>
+                <p className="text-muted-foreground mt-2 text-xs">Name</p>
               </CardContent>
             </Card>
           </button>
 
           <button className="group h-full w-full">
-            <Card className="group-focus:border-primary h-full w-full cursor-pointer">
+            <Card
+              className="group-focus:border-documenso h-full w-full cursor-pointer"
+              lightMode={theme === 'light'}
+            >
               <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p className={cn('text-xl font-medium text-slate-500 group-focus:text-slate-900')}>
+                <p
+                  className={cn(
+                    'text-muted-foreground group-focus:text-foreground text-xl font-medium',
+                  )}
+                >
                   {'Date'}
                 </p>
 
-                <p className="mt-2 text-xs text-slate-500">Date</p>
+                <p className="text-muted-foreground mt-2 text-xs">Date</p>
               </CardContent>
             </Card>
           </button>

apps/web/src/components/forms/edit-document/add-signers.tsx

@@ -37,11 +37,13 @@ export const AddSignersFormPartial = ({
 
   return (
     <div className={cn('flex flex-col', className)}>
-      <h3 className="text-2xl font-semibold">Add Signers</h3>
+      <h3 className="text-foreground text-2xl font-semibold">Add Signers</h3>
 
-      <p className="mt-2 text-sm text-black/30">Add the people who will sign the document.</p>
+      <p className="text-muted-foreground mt-2 text-sm">
+        Add the people who will sign the document.
+      </p>
 
-      <hr className="mb-8 mt-4" />
+      <hr className="border-border mb-8 mt-4" />
 
       <div className="-mx-2 flex flex-1 flex-col overflow-y-scroll px-2">
         <div className="flex w-full flex-col gap-y-4">
@@ -58,7 +60,7 @@ export const AddSignersFormPartial = ({
                       <Input
                         id={`signer-${index}-email`}
                         type="email"
-                        className="mt-2 bg-white"
+                        className="bg-background mt-2"
                         disabled={isSubmitting}
                         {...field}
                       />
@@ -76,7 +78,7 @@ export const AddSignersFormPartial = ({
                       <Input
                         id={`signer-${index}-name`}
                         type="text"
-                        className="mt-2 bg-white"
+                        className="bg-background mt-2"
                         disabled={isSubmitting}
                         {...field}
                       />

apps/web/src/components/forms/password.tsx

@@ -89,7 +89,12 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           Password
         </Label>
 
-        <Input id="password" type="password" className="mt-2 bg-white" {...register('password')} />
+        <Input
+          id="password"
+          type="password"
+          className="bg-background mt-2"
+          {...register('password')}
+        />
 
         <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
@@ -102,7 +107,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
         <Input
           id="repeated-password"
           type="password"
-          className="mt-2 bg-white"
+          className="bg-background mt-2"
           {...register('repeatedPassword')}
         />
 

apps/web/src/components/forms/profile.tsx

@@ -87,7 +87,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
           Full Name
         </Label>
 
-        <Input id="full-name" type="text" className="mt-2 bg-white" {...register('name')} />
+        <Input id="full-name" type="text" className="bg-background mt-2" {...register('name')} />
 
         <FormErrorMessage className="mt-1.5" error={errors.name} />
       </div>
@@ -97,7 +97,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
           Email
         </Label>
 
-        <Input id="email" type="email" className="mt-2 bg-white" value={user.email} disabled />
+        <Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
       </div>
 
       <div>
@@ -111,7 +111,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
             name="signature"
             render={({ field: { onChange } }) => (
               <SignaturePad
-                className="h-44 w-full rounded-lg border bg-white backdrop-blur-sm"
+                className="bg-background h-44 w-full rounded-lg border backdrop-blur-sm"
                 onChange={(v) => onChange(v ?? '')}
               />
             )}