From 8d2badf75e857e0b89a19533158036db13147fc6 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Wed, 27 Sep 2023 12:47:12 +1000
Subject: [PATCH] fix: various items

---
 apps/marketing/src/app/(marketing)/layout.tsx     |  2 +-
 .../marketing/src/components/(marketing)/hero.tsx |  2 +-
 .../client-only/hooks/use-element-scale-size.ts   | 15 +++------------
 packages/ui/components/signing-card.tsx           |  7 ++++---
 .../document-flow/single-player-mode-fields.tsx   |  2 +-
 5 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/layout.tsx b/apps/marketing/src/app/(marketing)/layout.tsx
index 36241e8e2..956c8e4a5 100644
--- a/apps/marketing/src/app/(marketing)/layout.tsx
+++ b/apps/marketing/src/app/(marketing)/layout.tsx
@@ -25,7 +25,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
   }, []);
 
   return (
-    <div className="relative max-w-[100vw] overflow-y-auto overflow-x-hidden pt-20 md:pt-28">
+    <div className="relative max-w-[100vw] pt-20 md:pt-28">
       <div
         className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
           'bg-background/50 backdrop-blur-md': scrollY > 5,
diff --git a/apps/marketing/src/components/(marketing)/hero.tsx b/apps/marketing/src/components/(marketing)/hero.tsx
index a024a4f75..4ff8fbcc2 100644
--- a/apps/marketing/src/components/(marketing)/hero.tsx
+++ b/apps/marketing/src/components/(marketing)/hero.tsx
@@ -134,7 +134,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
               variants={HeroTitleVariants}
               initial="initial"
               animate="animate"
-              className="border-primary bg-background hover:bg-muted mx-auto mt-8 w-60 rounded-xl border transition duration-300"
+              className="border-primary bg-background hover:bg-muted mx-auto mt-8 w-60 rounded-xl border transition-colors duration-300"
             >
               <Link href="/singleplayer" className="block px-4 py-2 text-center">
                 <h2 className="text-muted-foreground text-xs font-semibold">
diff --git a/packages/lib/client-only/hooks/use-element-scale-size.ts b/packages/lib/client-only/hooks/use-element-scale-size.ts
index 3e9b34b3f..1c8ab320e 100644
--- a/packages/lib/client-only/hooks/use-element-scale-size.ts
+++ b/packages/lib/client-only/hooks/use-element-scale-size.ts
@@ -60,26 +60,17 @@ export const calculateTextScaleSize = (
  */
 export function useElementScaleSize(
   container: { width: number; height: number },
-  child: RefObject<HTMLElement | null>,
+  text: string,
   fontSize: number,
   fontFamily: string,
 ) {
   const [scalingFactor, setScalingFactor] = useState(1);
 
   useEffect(() => {
-    if (!child.current) {
-      return;
-    }
-
-    const scaleSize = calculateTextScaleSize(
-      container,
-      child.current.innerText,
-      `${fontSize}px`,
-      fontFamily,
-    );
+    const scaleSize = calculateTextScaleSize(container, text, `${fontSize}px`, fontFamily);
 
     setScalingFactor(scaleSize);
-  }, [child, container, fontFamily, fontSize]);
+  }, [text, container, fontFamily, fontSize]);
 
   return scalingFactor;
 }
diff --git a/packages/ui/components/signing-card.tsx b/packages/ui/components/signing-card.tsx
index 24a6b6e28..3c65ba9dc 100644
--- a/packages/ui/components/signing-card.tsx
+++ b/packages/ui/components/signing-card.tsx
@@ -56,7 +56,7 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
   const sheenGradient = useMotionTemplate`linear-gradient(
     30deg,
     transparent,
-    rgba(var(--sheen-color) / ${trackMouse ? sheenOpacity : 0}) ${sheenPosition}%,
+    rgba(var(--sheen-color) / ${sheenOpacity}) ${sheenPosition}%,
     transparent)`;
 
   const cardRef = useRef<HTMLDivElement>(null);
@@ -98,10 +98,12 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
         void animate(cardX, 0, { duration: 2, ease: 'backInOut' });
         void animate(cardY, 0, { duration: 2, ease: 'backInOut' });
 
+        void animate(sheenOpacity, 0, { duration: 2, ease: 'backInOut' });
+
         setTrackMouse(false);
       }, 1000);
     },
-    [cardX, cardY, cardCenterPosition, trackMouse],
+    [cardX, cardY, cardCenterPosition, trackMouse, sheenOpacity],
   );
 
   useEffect(() => {
@@ -126,7 +128,6 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
           transformStyle: 'preserve-3d',
           rotateX,
           rotateY,
-          // willChange: 'transform background-image',
         }}
       >
         <SigningCardContent className="bg-transparent" name={name} />
diff --git a/packages/ui/primitives/document-flow/single-player-mode-fields.tsx b/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
index 022b05d60..90fcda862 100644
--- a/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
+++ b/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
@@ -145,7 +145,7 @@ export function SinglePlayerModeCustomTextField({
       height,
       width,
     },
-    $paragraphEl,
+    field.customText,
     maxFontSize,
     fontVariableValue,
   );