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">
-        <DropdownButton title={langOptions} id="langdropdown" size="sm">
-          {['EN', 'ES', 'FR', 'ZH'].map(lang => (
-            <DropdownItem as={'span'} onClick={() =>
+      <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>
             ))}
-        </DropdownButton>
+          </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);
+}