[INJIWEB-1146]: fix language selector alignment

Signed-off-by: SAIRAM GIRIRAO <[email protected]>
Infosys · Dec 2, 2024 · dc1c921 · dc1c921
1 parent 1024a02
commit dc1c921
Showing 1 changed file with 54 additions and 56 deletions.
diff --git a/inji-web/src/components/Common/LanguageSelector.tsx b/inji-web/src/components/Common/LanguageSelector.tsx
@@ -26,65 +26,63 @@ export const LanguageSelector: React.FC = () => {
         dispatch(storeLanguage(item.value));
     }
 
-    return <div
-            className={`flex flex-row justify-center items-center ${isRTL(language) ? "rtl" : ""}`}
-            data-testid={"LanguageSelector-Outer-Div"}
-            onBlur={() => setIsOpen(false)}
-            tabIndex={0}
-            role="button"
-            dir={isRTL(language) ? "rtl" : "ltr"}
-        >
-            <GradientWrapper>
-                <VscGlobe
-                    data-testid="Language-Selector-Icon"
-                    size={30} color={'var(--iw-color-languageGlobeIcon)'}/>
-            </GradientWrapper>
+    return <div className={"flex flex-row justify-center items-center"}
+                data-testid={"LanguageSelector-Outer-Div"}
+                onBlur={()=>setIsOpen(false)}
+                tabIndex={0}
+                role="button">
+
+        <GradientWrapper>
+            <VscGlobe
+            data-testid="Language-Selector-Icon"
+            size={30} color={'var(--iw-color-languageGlobeIcon)'}/>
+        </GradientWrapper>
+
 
+        <div className="relative inline-block ms-1">
+            <button
+                type="button"
+                className="inline-flex items-center"
+                data-testid={"Language-Selector-Button"}
+                onMouseDown={() => setIsOpen(open => !isOpen)}>
+                <p data-testid={`Language-Selector-Selected-DropDown-${language}`}>{LanguagesSupported.find(lang => lang.value === language)?.label}</p>
+                {isOpen ?
 
-            <div className="relative inline-block ms-1">
-                <button
-                    type="button"
-                    className="inline-flex items-center"
-                    data-testid={"Language-Selector-Button"}
-                    onMouseDown={() => setIsOpen(open => !isOpen)}>
-                    <p data-testid={`Language-Selector-Selected-DropDown-${language}`}>{LanguagesSupported.find(lang => lang.value === language)?.label}</p>
-                    {isOpen ? 
-
-                        <GradientWrapper>
-                            <RiArrowUpSFill size={20} color={'var(--iw-color-languageArrowIcon)'} />
-                        </GradientWrapper>
-                        :
-                        <GradientWrapper>
-                            <RiArrowDownSFill size={20} color={'var(--iw-color-languageArrowIcon)'}/>
-                        </GradientWrapper>
-
+                   <GradientWrapper>
+                        <RiArrowUpSFill size={20} color={'var(--iw-color-languageArrowIcon)'} />
+                    </GradientWrapper>
+                    :
+                    <GradientWrapper>
+                        <RiArrowDownSFill size={20} color={'var(--iw-color-languageArrowIcon)'}/>
+                    </GradientWrapper>
+
                     }
-                </button>
+            </button>
 
-                {isOpen && (
-                    <div
-                        className={`absolute w-60 z-40 ${isRTL(language) ? "left-0" : "right-0"} mt-3 rounded-md shadow-lg bg-iw-background overflow-hidden font-normal`}>
-                        <ul className="py-1 divide-y divide-gray-200">
-                            {LanguagesSupported.map((item) => (
-                                <li key={item.value}
-                                    data-testid={`Language-Selector-DropDown-Item-${item.value}`}
-                                    className={language === item.value ? "text-iw-primary" : ""}>
-                                    <button
-                                        type="button"
-                                        className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 flex items-center justify-between flex-row"
-                                        onMouseDown={(event) => {event.stopPropagation();handleChange(item)}}>
-                                        {language === item.value ? renderGradientText(item.label) : item.label}
-                                        {language === item.value &&
-                                            <GradientWrapper>
-                                                <FaCheck color={'var(--iw-color-languageCheckIcon)'}/>
-                                            </GradientWrapper>
-                                        }
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                )}
-            </div>
+            {isOpen && (
+                <div
+                    className={`absolute w-60 z-40 ${isRTL(language) ? "left-0" : "right-0"} mt-3 rounded-md shadow-lg bg-iw-background overflow-hidden font-normal`}>
+                    <ul className="py-1 divide-y divide-gray-200">
+                        {LanguagesSupported.map((item) => (
+                            <li key={item.value}
+                                data-testid={`Language-Selector-DropDown-Item-${item.value}`}
+                                className={language === item.value ? "text-iw-primary" : ""}>
+                                <button
+                                    type="button"
+                                    className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 flex items-center justify-between flex-row"
+                                    onMouseDown={(event) => {event.stopPropagation();handleChange(item)}}>
+                                    {language === item.value ? renderGradientText(item.label) : item.label}
+                                    {language === item.value && 
+                                    <GradientWrapper>
+                                        <FaCheck color={'var(--iw-color-languageCheckIcon)'}/>
+                                    </GradientWrapper>
+                                    }
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
         </div>
+    </div>
 }