fix dropdown issues

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">
+      <div className={langOptions !== 'fr' ? `d-flex align-items-center justify-content-end mr-2` : `d-flex align-items-center justify-content-end mr-3`}>
-        <DropdownButton title={langOptions} id="langdropdown" size="sm">
+        <Dropdown>
-          {['EN', 'ES', 'FR', 'ZH'].map(lang => (
+          <Dropdown.Toggle title={langOptions} id="languagedropdown" size="sm">
-            <DropdownItem as={'span'} onClick={() =>
+            {langOptions}
-            {
+          </Dropdown.Toggle>
-              changeLanguage(lang.toLowerCase())
+          <Dropdown.Menu className="dropdown-menu langSelector" style={{ minWidth: '2rem', backgroundColor: 'var(--body-bg)'}}>
-              setLangOptions(lang)
+            {['EN', 'ES', 'FR', 'IT', 'ZH'].map(lang => (
-            }}
+              <DropdownItem as={'span'} className="p-2" onClick={() =>
-            >
+              {
-              {lang}
+                changeLanguage(lang.toLowerCase())
-            </DropdownItem>
+                setLangOptions(lang)
-          ))}
+              }}
-        </DropdownButton>
+              style={{ color: 'var(--white)'}}
+              >
+                {lang}
+              </DropdownItem>
+            ))}
+          </Dropdown.Menu>
+        </Dropdown>
       </div>
     </>
   )

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);
+}