From 6ff82ec5efdace8b4277dcb1d887f937c5fe7f46 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Sat, 20 Apr 2024 02:24:00 +0800
Subject: [PATCH] Improve site header account and navigation item styling

The styling of the site header account sign-up button and navigation items has been updated. Class names and transition durations were adjusted for better visualization and usability. The changes particularly enhance the hover effect on the sign-up button and navigation items.
---
 .../_components/site-header-account-section.tsx          | 5 +++--
 .../app/(marketing)/_components/site-navigation-item.tsx | 9 +++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index b36890140..52c921faa 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -79,9 +79,10 @@ function AuthButtons() {
       </div>
 
       <Link href={pathsConfig.auth.signUp}>
-        <Button variant={'default'}>
+        <Button className='group' variant={'default'}>
           <Trans i18nKey={'auth:signUp'} />
-          <ChevronRight className={'h-4'} />
+
+          <ChevronRight className={'h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-500'} />
         </Button>
       </Link>
     </div>
diff --git a/apps/web/app/(marketing)/_components/site-navigation-item.tsx b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
index c93492a08..aaed8218a 100644
--- a/apps/web/app/(marketing)/_components/site-navigation-item.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
@@ -10,11 +10,11 @@ const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
   return cn(
-    `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors duration-200`,
+    `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors duration-100`,
     {
-      'hover:border-border active:dark:bg-secondary active:bg-gray-50 dark:text-gray-400 text-gray-600 hover:text-current dark:hover:text-white':
+      'hover:border-border dark:text-gray-400 text-gray-600 hover:text-current dark:hover:text-white':
         !isActive,
-      'dark:bg-secondary bg-gray-50': isActive,
+      'dark:text-white text-current': isActive,
     },
   );
 };
@@ -26,10 +26,11 @@ export function SiteNavigationItem({
   path: string;
 }>) {
   const currentPathName = usePathname();
+  const className = getClassName(path, currentPathName);
 
   return (
     <NavigationMenuItem key={path}>
-      <Link className={getClassName(path, currentPathName)} href={path}>
+      <Link className={className} href={path}>
         {children}
       </Link>
     </NavigationMenuItem>