From cfc6bc8e5eb56ed67386c3c4e799e4e76c1276ef Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Mon, 18 Aug 2025 03:43:34 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ui):=20add=20hover=20scale=20a?=
 =?UTF-8?q?nimation=20to=20header=20logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add smooth scale-up animation effect when hovering over the header logo to enhance user interaction experience.

Changes:
- Add `group` class to Link element to enable Tailwind group hover functionality
- Update transition from `transition-opacity` to `transition-all` for smooth scaling
- Increase hover scale from `scale-105` to `scale-110` (10% enlargement)
- Maintain 200ms transition duration for optimal user experience

The logo now smoothly scales to 110% size on hover and returns to original size when mouse leaves, providing better visual feedback for user interactions.
---
 web/src/components/layout/HeaderBar/HeaderLogo.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/layout/HeaderBar/HeaderLogo.js b/web/src/components/layout/HeaderBar/HeaderLogo.js
index 77e27bad..06651f0d 100644
--- a/web/src/components/layout/HeaderBar/HeaderLogo.js
+++ b/web/src/components/layout/HeaderBar/HeaderLogo.js
@@ -38,7 +38,7 @@ const HeaderLogo = ({
   }
 
   return (
-    <Link to="/" className="flex items-center gap-2">
+    <Link to="/" className="group flex items-center gap-2">
       <div className="relative w-8 h-8 md:w-8 md:h-8">
         <SkeletonWrapper
           loading={isLoading || !logoLoaded}
@@ -47,7 +47,7 @@ const HeaderLogo = ({
         <img
           src={logo}
           alt="logo"
-          className={`absolute inset-0 w-full h-full transition-opacity duration-200 group-hover:scale-105 rounded-full ${(!isLoading && logoLoaded) ? 'opacity-100' : 'opacity-0'}`}
+          className={`absolute inset-0 w-full h-full transition-all duration-200 group-hover:scale-110 rounded-full ${(!isLoading && logoLoaded) ? 'opacity-100' : 'opacity-0'}`}
         />
       </div>
       <div className="hidden md:flex items-center gap-2">