From 7162de343c644dd6da462e8a84d862d210e2fc06 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 3 Nov 2023 14:11:12 +0100
Subject: [PATCH] fix dropdown issues

---
 .../src/lib/components/homeTablangOptions.tsx | 32 +++++++++++--------
 .../home-tab/src/lib/remix-ui-home-tab.css    |  5 +++
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx
index 2baa737ad2..01b55bb00a 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx
@@ -26,19 +26,25 @@ export function LanguageOptions({ plugin }: { plugin: any }) {
 
   return (
     <>
-      <div className="d-flex align-items-center justify-content-end mr-2">
-        <DropdownButton title={langOptions} id="langdropdown" size="sm">
-          {['EN', 'ES', 'FR', 'ZH'].map(lang => (
-            <DropdownItem as={'span'} onClick={() =>
-            {
-              changeLanguage(lang.toLowerCase())
-              setLangOptions(lang)
-            }}
-            >
-              {lang}
-            </DropdownItem>
-          ))}
-        </DropdownButton>
+      <div className={langOptions !== 'fr' ? `d-flex align-items-center justify-content-end mr-2` : `d-flex align-items-center justify-content-end mr-3`}>
+        <Dropdown>
+          <Dropdown.Toggle title={langOptions} id="languagedropdown" size="sm">
+            {langOptions}
+          </Dropdown.Toggle>
+          <Dropdown.Menu className="dropdown-menu langSelector" style={{ minWidth: '2rem', backgroundColor: 'var(--body-bg)'}}>
+            {['EN', 'ES', 'FR', 'IT', 'ZH'].map(lang => (
+              <DropdownItem as={'span'} className="p-2" onClick={() =>
+              {
+                changeLanguage(lang.toLowerCase())
+                setLangOptions(lang)
+              }}
+              style={{ color: 'var(--white)'}}
+              >
+                {lang}
+              </DropdownItem>
+            ))}
+          </Dropdown.Menu>
+        </Dropdown>
       </div>
     </>
   )
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
index f448657ee2..3a8e7d6a06 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
@@ -109,3 +109,8 @@
 .remixui_home_carouselText {
   font-size: rfs-fluid-value(1rem);
 }
+
+.langSelectorbg {
+  background-color: var(--body-bg);
+  color: var(--text);
+}