From b204adc948f1a06b56de1623003c28d33971135d Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Tue, 5 Dec 2023 18:18:43 +0800
Subject: [PATCH] fix: hover effect on navigation items

---
 .../src/lib/navigation/desktop/desktop.nav-item.tsx    | 10 +++++++---
 .../src/lib/navigation/language-switcher/index.tsx     |  6 ++++--
 .../language-switcher/mobile-language.content.tsx      |  2 +-
 .../navigation/language-switcher/mobile-language.tsx   |  6 ++++--
 .../src/lib/navigation/mobile/mobile.nav-link.tsx      |  4 +++-
 .../src/lib/navigation/mobile/mobile.nav-list.tsx      |  4 ++--
 libs/blocks/src/lib/navigation/navigation.link.tsx     |  5 +++--
 7 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx b/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx
index b7ef5e4cb..6b51a091f 100644
--- a/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx
+++ b/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx
@@ -19,7 +19,7 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
   return (
     !item.isMobileNavOnly && (
       <li
-        className="flex h-full items-center justify-center px-general-lg text-center"
+        className="group flex h-full items-center justify-center px-general-lg text-center"
         onMouseEnter={() => {
           setShowLangContent?.(false);
           if (item.type === 'nav-dropdown') {
@@ -29,8 +29,9 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
       >
         {item.type === 'direct' ? (
           <CustomLink
-            className="text-typography-default"
+            className="text-typography-default group-hover:text-typography-prominent"
             href={item.href}
+            hasHoverDecoration={false}
             onMouseEnter={() => {
               setShowLangContent?.(false);
               onListItemHover?.(navItemName);
@@ -39,7 +40,10 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
             {item.text}
           </CustomLink>
         ) : (
-          <Text size="sm" className="cursor-pointer hover:text-typography-link">
+          <Text
+            size="sm"
+            className="cursor-pointer hover:text-typography-prominent"
+          >
             {item.text}
           </Text>
         )}
diff --git a/libs/blocks/src/lib/navigation/language-switcher/index.tsx b/libs/blocks/src/lib/navigation/language-switcher/index.tsx
index 252021d88..0ecf0d7b0 100644
--- a/libs/blocks/src/lib/navigation/language-switcher/index.tsx
+++ b/libs/blocks/src/lib/navigation/language-switcher/index.tsx
@@ -8,7 +8,7 @@ const LanguageSwitcher = () => {
 
   return (
     <div
-      className="flex cursor-pointer items-center gap-gap-sm"
+      className="group flex cursor-pointer items-center gap-gap-sm"
       onMouseEnter={() => {
         setIsDropContentOpen?.(false);
         setActiveMenu?.('none');
@@ -16,7 +16,9 @@ const LanguageSwitcher = () => {
       }}
     >
       <FlagUnitedKingdomIcon className="inline" width={24} height={16} />
-      <Text className="inline-block">{activeLanguage?.shortName}</Text>
+      <Text className="inline-block group-hover:text-typography-prominent">
+        {activeLanguage?.shortName}
+      </Text>
     </div>
   );
 };
diff --git a/libs/blocks/src/lib/navigation/language-switcher/mobile-language.content.tsx b/libs/blocks/src/lib/navigation/language-switcher/mobile-language.content.tsx
index 3b668c2fb..091bb08b9 100644
--- a/libs/blocks/src/lib/navigation/language-switcher/mobile-language.content.tsx
+++ b/libs/blocks/src/lib/navigation/language-switcher/mobile-language.content.tsx
@@ -17,7 +17,7 @@ export const MobileLanguageContent = () => {
           <div className="py-general-sm" key={langItems[item].displayName}>
             <Text
               bold
-              className="cursor-pointer"
+              className="cursor-pointer hover:text-typography-prominent"
               onClick={() => {
                 selectLanguage?.(langItems[item]);
                 setShowMobileLanguages?.(false);
diff --git a/libs/blocks/src/lib/navigation/language-switcher/mobile-language.tsx b/libs/blocks/src/lib/navigation/language-switcher/mobile-language.tsx
index 4234edc79..c7613cf2d 100644
--- a/libs/blocks/src/lib/navigation/language-switcher/mobile-language.tsx
+++ b/libs/blocks/src/lib/navigation/language-switcher/mobile-language.tsx
@@ -7,13 +7,15 @@ export const MobileLanguageToggler = () => {
   return (
     <div className="border-t-xs border-solid border-opacity-black-100 pt-general-md">
       <div
-        className="flex cursor-pointer items-center gap-gap-md py-general-sm"
+        className="group flex cursor-pointer items-center gap-gap-md py-general-sm"
         onClick={() => {
           setShowMobileLanguages?.(true);
         }}
       >
         <FlagUnitedKingdomIcon width={24} height={16} />
-        <Text bold>{activeLanguage?.displayName}</Text>
+        <Text className="group-hover:text-typography-prominent" bold>
+          {activeLanguage?.displayName}
+        </Text>
       </div>
     </div>
   );
diff --git a/libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx b/libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx
index 7618f1a8d..f450d7237 100644
--- a/libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx
+++ b/libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx
@@ -18,8 +18,10 @@ export const MobileNavLink: React.FC<MobileNavLinkProps> = ({
   return (
     <CustomLink
       href={item.href}
+      hasHoverDecoration={false}
       className={qtMerge(
-        'py-general-sm text-body-md font-bold leading-body-md text-typography-default',
+        'py-general-sm text-body-md font-bold leading-body-md',
+        'hover:text-typography-prominent',
         className,
       )}
       onClick={toggleMobileNav}
diff --git a/libs/blocks/src/lib/navigation/mobile/mobile.nav-list.tsx b/libs/blocks/src/lib/navigation/mobile/mobile.nav-list.tsx
index 87dcbaab0..d98ef8066 100644
--- a/libs/blocks/src/lib/navigation/mobile/mobile.nav-list.tsx
+++ b/libs/blocks/src/lib/navigation/mobile/mobile.nav-list.tsx
@@ -13,10 +13,10 @@ export const MobileNavList = () => {
           return <MobileNavLink item={item} key={navItemName} />;
         }
         return (
-          <li key={navItemName} className="py-general-sm">
+          <li key={navItemName} className="group py-general-sm">
             <Text
               size="md"
-              className="cursor-pointer"
+              className="cursor-pointer group-hover:text-typography-prominent"
               bold
               onClick={() => {
                 setActiveMenu?.(navItemName);
diff --git a/libs/blocks/src/lib/navigation/navigation.link.tsx b/libs/blocks/src/lib/navigation/navigation.link.tsx
index 1081caadc..7903be663 100644
--- a/libs/blocks/src/lib/navigation/navigation.link.tsx
+++ b/libs/blocks/src/lib/navigation/navigation.link.tsx
@@ -15,8 +15,9 @@ export const NavigationLink: React.FC<NavigationLinkProps> = ({
   return (
     <CustomLink
       href={item.href}
+      hasHoverDecoration={false}
       className={qtMerge(
-        'w-full justify-start gap-gap-md py-general-sm font-bold',
+        'group w-full justify-start gap-gap-md py-general-sm font-bold',
         item.icon && 'grid grid-cols-[24px_1fr]',
         !item.icon && item.description && 'flex flex-col',
         className,
@@ -24,7 +25,7 @@ export const NavigationLink: React.FC<NavigationLinkProps> = ({
     >
       {item.icon ? item.icon : null}
       <div className="flex gap-gap-sm">
-        <Text size="md" bold>
+        <Text size="md" bold className="group-hover:text-typography-prominent">
           {item.text}
         </Text>
         {item.external && <LabelPairedArrowUpRightRegularIcon iconSize="sm" />}