Merge pull request #268 from deriv-com/nuzhy/language-switcher-fixes

deriv-com · Dec 18, 2023 · 142f978 · 142f978
2 parents 0b7244f + 61aacf6
commit 142f978
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/libs/blocks/src/lib/navigation/language-switcher/index.tsx b/libs/blocks/src/lib/navigation/language-switcher/index.tsx
@@ -16,7 +16,10 @@ const LanguageSwitcher = () => {
       }}
     >
       <LabelPairedGlobeRegularIcon className="inline" iconSize="md" />
-      <Text className="inline-block group-hover:text-typography-prominent">
+      <Text
+        size="sm"
+        className="inline-block group-hover:text-typography-prominent"
+      >
         {activeLanguage?.shortName}
       </Text>
     </div>

diff --git a/libs/blocks/src/lib/navigation/language-switcher/language.content.tsx b/libs/blocks/src/lib/navigation/language-switcher/language.content.tsx
@@ -1,15 +1,23 @@
 import { useLanguageSwitcher } from '@deriv-com/hooks';
-import { Text } from '@deriv/quill-design';
+import { Text, qtMerge } from '@deriv/quill-design';
 
 const LanguageContent = () => {
-  const { langItems, selectLanguage } = useLanguageSwitcher();
+  const { langItems, selectLanguage, activeLanguage } = useLanguageSwitcher();
   return (
     <div className="grid w-full grid-flow-col grid-rows-4 items-start gap-gap-lg gap-y-50 overflow-y-auto overscroll-y-contain py-general-2xl">
       {Object.keys(langItems).map((item) => (
-        <div className="flex py-general-sm" key={langItems[item].displayName}>
+        <div
+          className="group flex py-general-sm"
+          key={langItems[item].displayName}
+        >
           <Text
             bold
-            className="cursor-pointer"
+            className={qtMerge(
+              'cursor-pointer',
+              langItems[item].path === activeLanguage?.path &&
+                'text-typography-prominent',
+              'group-hover:text-typography-prominent',
+            )}
             onClick={() => {
               selectLanguage?.(langItems[item]);
             }}