fix: wip

packages/ui/components/call-to-action.tsx

@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'react-router';
 
 import { Button } from '../primitives/button';
 import { Card, CardContent } from '../primitives/card';
@@ -25,7 +25,7 @@ export const CallToAction = ({ className, utmSource = 'generic-cta' }: CallToAct
           size="lg"
           asChild
         >
-          <Link href={`https://app.documenso.com/signup?utm_source=${utmSource}`} target="_blank">
+          <Link to={`https://app.documenso.com/signup?utm_source=${utmSource}`} target="_blank">
             Get started
           </Link>
         </Button>

packages/ui/components/document/document-dialog.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 
 import type { DocumentData } from '@prisma/client';
@@ -7,17 +5,18 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 
 import { cn } from '../../lib/utils';
-import { Dialog, DialogOverlay, DialogPortal } from '../../primitives/dialog';
+import { Dialog, DialogOverlay, DialogPortal, DialogTrigger } from '../../primitives/dialog';
 import { LazyPDFViewerNoLoader } from '../../primitives/lazy-pdf-viewer';
 
 export type DocumentDialogProps = {
+  trigger?: React.ReactNode;
   documentData: DocumentData;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 /**
  * A dialog which renders the provided document.
  */
-export default function DocumentDialog({ documentData, ...props }: DocumentDialogProps) {
+export default function DocumentDialog({ trigger, documentData, ...props }: DocumentDialogProps) {
   const [documentLoaded, setDocumentLoaded] = useState(false);
 
   const onDocumentLoad = () => {
@@ -29,6 +28,12 @@ export default function DocumentDialog({ documentData, ...props }: DocumentDialo
       <DialogPortal>
         <DialogOverlay className="bg-black/80" />
 
+        {trigger && (
+          <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+            {trigger}
+          </DialogTrigger>
+        )}
+
         <DialogPrimitive.Content
           className={cn(
             'animate-in data-[state=open]:fade-in-90 sm:zoom-in-90 pointer-events-none fixed z-50 h-screen w-screen overflow-y-auto px-2 py-14 opacity-0 transition-opacity lg:py-32',

packages/ui/components/document/document-download-button.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { HTMLAttributes } from 'react';
 import { useState } from 'react';
 

packages/ui/components/signing-card.tsx

@@ -1,10 +1,5 @@
-'use client';
-
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import type { StaticImageData } from 'next/image';
-import Image from 'next/image';
-
 import type { Signature } from '@prisma/client';
 import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion';
 import { P, match } from 'ts-pattern';
@@ -16,7 +11,7 @@ export type SigningCardProps = {
   className?: string;
   name: string;
   signature?: Signature;
-  signingCelebrationImage?: StaticImageData;
+  signingCelebrationImage?: string;
 };
 
 /**
@@ -212,7 +207,7 @@ const SigningCardContent = ({ className, name, signature }: SigningCardContentPr
 };
 
 type SigningCardImageProps = {
-  signingCelebrationImage: StaticImageData;
+  signingCelebrationImage: string;
 };
 
 const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) => {
@@ -232,7 +227,7 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
         duration: 0.5,
       }}
     >
-      <Image
+      <img
         src={signingCelebrationImage}
         alt="background pattern"
         className="w-full dark:brightness-150 dark:contrast-[70%] dark:invert dark:sepia"
@@ -240,7 +235,6 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
           mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
           WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
         }}
-        priority
       />
     </motion.div>
   );

packages/ui/primitives/constants.ts

@@ -1,5 +0,0 @@
-export const THEMES_TYPE = {
-  DARK: 'dark',
-  LIGHT: 'light',
-  SYSTEM: 'system'
-};

packages/ui/primitives/theme-switcher.tsx

@@ -1,22 +1,20 @@
 import { motion } from 'framer-motion';
 import { Monitor, MoonStar, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
+import { Theme, useTheme } from 'remix-themes';
 
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 
-import { THEMES_TYPE } from './constants';
-
 export const ThemeSwitcher = () => {
-  const { theme, setTheme } = useTheme();
+  const [theme, setTheme] = useTheme();
   const isMounted = useIsMounted();
 
   return (
     <div className="bg-muted flex items-center gap-x-1 rounded-full p-1">
       <button
         className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
-        onClick={() => setTheme(THEMES_TYPE.LIGHT)}
+        onClick={() => setTheme(Theme.LIGHT)}
       >
-        {isMounted && theme === THEMES_TYPE.LIGHT && (
+        {isMounted && theme === Theme.LIGHT && (
           <motion.div
             className="bg-background absolute inset-0 rounded-full mix-blend-color-burn"
             layoutId="selected-theme"
@@ -27,9 +25,9 @@ export const ThemeSwitcher = () => {
 
       <button
         className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
-        onClick={() => setTheme(THEMES_TYPE.DARK)}
+        onClick={() => setTheme(Theme.DARK)}
       >
-        {isMounted && theme === THEMES_TYPE.DARK && (
+        {isMounted && theme === Theme.DARK && (
           <motion.div
             className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
             layoutId="selected-theme"
@@ -41,9 +39,9 @@ export const ThemeSwitcher = () => {
 
       <button
         className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
-        onClick={() => setTheme(THEMES_TYPE.SYSTEM)}
+        onClick={() => setTheme(null)}
       >
-        {isMounted && theme === THEMES_TYPE.SYSTEM && (
+        {isMounted && theme === null && (
           <motion.div
             className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
             layoutId="selected-theme"