فهرست منبع

✨ feat(ui): add hover scale animation to header logo

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.
t0ng7u 10 ماه پیش
والد
کامیت
cfc6bc8e5e
1فایلهای تغییر یافته به همراه2 افزوده شده و 2 حذف شده
  1. 2 2
      web/src/components/layout/HeaderBar/HeaderLogo.js

+ 2 - 2
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">