updated Language selector to use DropdownInput

src/components/Sidebar/Preferences/LanguageSelector.tsx

@@ -1,9 +1,8 @@
-import { OptionWithDivider } from 'components/Collections/CollectionShare/publicShare/manage/selectComponents/OptionWithDivider';
+import DropdownInput, { DropdownOption } from 'components/DropdownInput';
 import { Language } from 'constants/locale';
 import { useLocalState } from 'hooks/useLocalState';
+import { t } from 'i18next';
 import { useRouter } from 'next/router';
-import Select from 'react-select';
-import { DropdownStyle } from 'styles/dropdown';
 import { getBestPossibleUserLocale } from 'utils/i18n';
 import { LS_KEYS } from 'utils/storage/localStorage';
 
@@ -16,7 +15,7 @@ const getLocaleDisplayName = (l: Language) => {
     }
 };
 
-const getLanguageOptions = () => {
+const getLanguageOptions = (): DropdownOption<Language>[] => {
     return Object.values(Language).map((lang) => ({
         label: getLocaleDisplayName(lang),
         value: lang,
@@ -37,19 +36,12 @@ export const LanguageSelector = () => {
     };
 
     return (
-        <Select
-            menuPosition="fixed"
+        <DropdownInput
             options={getLanguageOptions()}
-            components={{
-                Option: OptionWithDivider,
-            }}
-            isSearchable={false}
-            value={{
-                label: getLocaleDisplayName(userLocale),
-                value: userLocale,
-            }}
-            onChange={(e) => updateCurrentLocale(e.value)}
-            styles={DropdownStyle}
+            label={t('LANGUAGE')}
+            labelProps={{ color: 'text.secondary' }}
+            selectedValue={userLocale}
+            setSelectedValue={updateCurrentLocale}
         />
     );
 };

src/components/Sidebar/Preferences/index.tsx

@@ -1,7 +1,6 @@
 import ChevronRight from '@mui/icons-material/ChevronRight';
 import { Box, DialogProps, Stack } from '@mui/material';
 import { EnteDrawer } from 'components/EnteDrawer';
-import MenuSectionTitle from 'components/Menu/MenuSectionTitle';
 import Titlebar from 'components/Titlebar';
 import isElectron from 'is-electron';
 import { useState } from 'react';
@@ -46,10 +45,7 @@ export default function Preferences({ open, onClose, onRootClose }) {
                 />
                 <Box px={'8px'}>
                     <Stack py="20px" spacing="24px">
-                        <Box>
-                            <MenuSectionTitle title={t('LANGUAGE')} />
-                            <LanguageSelector />
-                        </Box>
+                        <LanguageSelector />
                         {isElectron() && (
                             <SidebarButton
                                 variant="contained"