From 920e98dc66380425404fb3e755d77d0faf86467c Mon Sep 17 00:00:00 2001
From: Bjorn Lammers <bjorn@lammers.media>
Date: Wed, 23 Apr 2025 04:24:00 +0200
Subject: [PATCH] fix(web): update hover text color in IconCard and improve
 MagicCard mouse event handling

---
 web/src/app/icons/components/icon-search.tsx |  2 +-
 web/src/components/magicui/magic-card.tsx    | 26 +++++++++++---------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/src/app/icons/components/icon-search.tsx b/web/src/app/icons/components/icon-search.tsx
index d8e212de..c896aa19 100644
--- a/web/src/app/icons/components/icon-search.tsx
+++ b/web/src/app/icons/components/icon-search.tsx
@@ -551,7 +551,7 @@ function IconCard({
 						className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
 					/>
 				</div>
-				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group- dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
+				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-500 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
 					{name.replace(/-/g, " ")}
 				</span>
 			</Link>
diff --git a/web/src/components/magicui/magic-card.tsx b/web/src/components/magicui/magic-card.tsx
index 990af3e7..37362994 100644
--- a/web/src/components/magicui/magic-card.tsx
+++ b/web/src/components/magicui/magic-card.tsx
@@ -2,7 +2,7 @@
 
 import { motion, useMotionTemplate, useMotionValue } from "motion/react"
 import type React from "react"
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -28,6 +28,7 @@ export function MagicCard({
 	const cardRef = useRef<HTMLDivElement>(null)
 	const mouseX = useMotionValue(-gradientSize)
 	const mouseY = useMotionValue(-gradientSize)
+	const [isMounted, setIsMounted] = useState(false)
 
 	const handleMouseMove = useCallback(
 		(e: MouseEvent) => {
@@ -60,6 +61,14 @@ export function MagicCard({
 	}, [handleMouseMove, mouseX, gradientSize, mouseY])
 
 	useEffect(() => {
+		setIsMounted(true)
+		mouseX.set(-gradientSize)
+		mouseY.set(-gradientSize)
+	}, [gradientSize, mouseX, mouseY])
+
+	useEffect(() => {
+		if (!isMounted) return
+
 		document.addEventListener("mousemove", handleMouseMove)
 		document.addEventListener("mouseout", handleMouseOut)
 		document.addEventListener("mouseenter", handleMouseEnter)
@@ -69,22 +78,17 @@ export function MagicCard({
 			document.removeEventListener("mouseout", handleMouseOut)
 			document.removeEventListener("mouseenter", handleMouseEnter)
 		}
-	}, [handleMouseEnter, handleMouseMove, handleMouseOut])
-
-	useEffect(() => {
-		mouseX.set(-gradientSize)
-		mouseY.set(-gradientSize)
-	}, [gradientSize, mouseX, mouseY])
+	}, [isMounted, handleMouseEnter, handleMouseMove, handleMouseOut])
 
 	return (
-		<div ref={cardRef} className={cn("group relative rounded-[inherit]", className)}>
+		<div className={cn("group relative rounded-[inherit]", className)}>
 			<motion.div
 				className="pointer-events-none absolute inset-0 rounded-[inherit] bg-border duration-300 group-hover:opacity-100"
 				style={{
 					background: useMotionTemplate`
           radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
-          ${gradientFrom}, 
-          ${gradientTo}, 
+          ${gradientFrom},
+          ${gradientTo},
           var(--border) 100%
           )
           `,
@@ -100,7 +104,7 @@ export function MagicCard({
 					opacity: gradientOpacity,
 				}}
 			/>
-			<div className="relative">{children}</div>
+			<div ref={cardRef} className="relative">{children}</div>
 		</div>
 	)
 }