From 24936d8b7b39b5559eaa479d36c1e48d96807bc3 Mon Sep 17 00:00:00 2001
From: Hichem Fantar <hichemfantar2049@gmail.com>
Date: Mon, 12 Aug 2024 12:01:48 +0100
Subject: [PATCH] refactor: improve Card component hover effect (#16161)

Simplify the hover effect on the Card component by adding a transition to the transform property. This improves the user experience and makes the hover effect smoother.

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 packages/ui/components/card/Card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index 56478788dc..edcee295ea 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -181,7 +181,7 @@ export function Card({
           className="group relative my-3 flex aspect-video items-center overflow-hidden rounded">
           <div className="absolute inset-0 bg-black bg-opacity-50 transition group-hover:bg-opacity-40" />
           <svg
-            className="text-inverted absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg hover:-mt-px"
+            className="text-inverted absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg transition-all hover:-mt-px"
             viewBox="0 0 32 32"
             fill="none"
             xmlns="http://www.w3.org/2000/svg">