fix: single player dark mode and animation updates

apps/marketing/src/app/(marketing)/single-player-mode/page.tsx

@@ -177,12 +177,12 @@ export default function SinglePlayerModePage() {
       <div className="text-center">
         <h1 className="text-3xl font-bold lg:text-5xl">Single Player Mode</h1>
 
-        <p className="mt-4 text-lg leading-normal text-[#31373D]">
+        <p className="text-foreground mx-auto mt-4 max-w-[50ch] text-lg leading-normal">
           View our{' '}
           <Link
             href={'/pricing'}
             target="_blank"
-            className="font-semibold transition-colors hover:text-[#31373D]/80"
+            className="hover:text-foreground/80 font-semibold transition-colors"
           >
             community plan
           </Link>{' '}

apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx

@@ -77,12 +77,11 @@ export default function SinglePlayerModeSuccess({
 
       <h2 className="text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
         You have signed
+        <span className="mt-2 block">{document.title}</span>
       </h2>
-      <h3 className="text-foreground/80 mb-6 text-center text-lg font-semibold md:text-xl lg:mb-8 lg:text-3xl">
-        {document.title}
-      </h3>
 
       <SigningCard3D
+        className="mt-8"
         name={document.Recipient.name || document.Recipient.email}
         signingCelebrationImage={signingCelebration}
       />

packages/ui/components/signing-card.tsx

@@ -10,6 +10,7 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
 export type SigningCardProps = {
+  className?: string;
   name: string;
   signingCelebrationImage?: StaticImageData;
 };
@@ -17,9 +18,9 @@ export type SigningCardProps = {
 /**
  * 2D signing card.
  */
-export const SigningCard = ({ name, signingCelebrationImage }: SigningCardProps) => {
+export const SigningCard = ({ className, name, signingCelebrationImage }: SigningCardProps) => {
   return (
-    <div className="relative w-full max-w-xs md:max-w-sm">
+    <div className={cn('relative w-full max-w-xs md:max-w-sm', className)}>
       <SigningCardContent name={name} />
 
       {signingCelebrationImage && (
@@ -32,7 +33,7 @@ export const SigningCard = ({ name, signingCelebrationImage }: SigningCardProps)
 /**
  * 3D signing card that follows the mouse movement within a certain range.
  */
-export const SigningCard3D = ({ name, signingCelebrationImage }: SigningCardProps) => {
+export const SigningCard3D = ({ className, name, signingCelebrationImage }: SigningCardProps) => {
   // Should use % based dimensions by calculating the window height/width.
   const boundary = 400;
 
@@ -55,7 +56,7 @@ export const SigningCard3D = ({ name, signingCelebrationImage }: SigningCardProp
   const sheenGradient = useMotionTemplate`linear-gradient(
     30deg,
     transparent,
-    rgba(200 200 200 / ${trackMouse ? sheenOpacity : 0}) ${sheenPosition}%,
+    rgba(var(--sheen-color) / ${trackMouse ? sheenOpacity : 0}) ${sheenPosition}%,
     transparent)`;
 
   const cardRef = useRef<HTMLDivElement>(null);
@@ -83,14 +84,12 @@ export const SigningCard3D = ({ name, signingCelebrationImage }: SigningCardProp
       // Mouse enters enter boundary.
       if (distance <= boundary && !trackMouse) {
         setTrackMouse(true);
-      }
-
-      if (!trackMouse) {
+      } else if (!trackMouse) {
         return;
       }
 
-      void animate(cardX, offsetX, { duration: 0.125 });
-      void animate(cardY, offsetY, { duration: 0.125 });
+      cardX.set(offsetX);
+      cardY.set(offsetY);
 
       clearTimeout(timeoutRef.current);
 
@@ -114,9 +113,12 @@ export const SigningCard3D = ({ name, signingCelebrationImage }: SigningCardProp
   }, [onMouseMove]);
 
   return (
-    <div className="relative w-full max-w-xs md:max-w-sm" style={{ perspective: 800 }}>
+    <div
+      className={cn('relative w-full max-w-xs md:max-w-sm', className)}
+      style={{ perspective: 800 }}
+    >
       <motion.div
-        className="bg-background w-full"
+        className="bg-background w-full [--sheen-color:180_180_180] dark:[--sheen-color:200_200_200]"
         ref={cardRef}
         style={{
           perspective: '800',
@@ -124,6 +126,7 @@ export const SigningCard3D = ({ name, signingCelebrationImage }: SigningCardProp
           transformStyle: 'preserve-3d',
           rotateX,
           rotateY,
+          // willChange: 'transform background-image',
         }}
       >
         <SigningCardContent className="bg-transparent" name={name} />
@@ -194,7 +197,7 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
       <Image
         src={signingCelebrationImage}
         alt="background pattern"
-        className="w-full"
+        className="w-full dark:invert dark:sepia"
         style={{
           mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
           WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',

packages/ui/primitives/document-flow/single-player-mode-fields.tsx

@@ -36,6 +36,7 @@ export function SinglePlayerModeFieldCardContainer({
       <AnimatePresence mode="wait" initial={false}>
         <motion.div
           key={field.inserted ? 'inserted' : 'not-inserted'}
+          className="flex items-center justify-center p-2"
           initial={{ opacity: 0 }}
           animate={{
             opacity: 1,
@@ -94,7 +95,7 @@ export function SinglePlayerModeSignatureField({
         <img
           src={insertedBase64Signature}
           alt="Your signature"
-          className="h-full w-full object-contain"
+          className="h-full max-w-full object-contain dark:invert"
         />
       ) : insertedTypeSignature ? (
         <p