feat: replace mui with new style

src/features/welcome/components/Sections/ChooseLanguage.jsx

@@ -1,12 +1,11 @@
 import { useState, useMemo } from 'react';
-import { MdOutlineOpenInNew, MdSearch } from 'react-icons/md';
-import { TextField, InputAdornment } from '@mui/material';
+import { MdOutlineOpenInNew } from 'react-icons/md';
 import languages from '@/i18n/languages.json';
 import translationPercentages from '@/i18n/translationPercentages.json';
 import { useT, useTranslation } from 'contexts/TranslationContext';
 import variables from 'config/variables';
 
-import { Radio } from 'components/Form/Settings';
+import { Radio, SearchInput } from 'components/Form/Settings';
 import { Header, Content } from '../Layout';
 
 function ChooseLanguage() {
@@ -107,37 +106,14 @@ function ChooseLanguage() {
           {t('modals.main.settings.sections.language.use_system')} ({systemLanguage.name})
         </button>
       )}
-      <TextField
-        placeholder={t('modals.main.settings.sections.language.search')}
-        value={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
-        variant="outlined"
-        size="small"
-        fullWidth
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <MdSearch style={{ color: '#888' }} />
-            </InputAdornment>
-          ),
-        }}
-        sx={{
-          marginBottom: 2,
-          '& .MuiOutlinedInput-root': {
-            borderRadius: '24px',
-            backgroundColor: 'rgba(255, 255, 255, 0.08)',
-            '& fieldset': {
-              border: 'none',
-            },
-            '&:hover fieldset': {
-              border: 'none',
-            },
-            '&.Mui-focused fieldset': {
-              border: 'none',
-            },
-          },
-        }}
-      />
+      <div style={{ marginBottom: 16 }}>
+        <SearchInput
+          placeholder={t('modals.main.settings.sections.language.search')}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          fullWidth
+        />
+      </div>
       <div className="languageSettings">
         <Radio name="language" options={filteredLanguages} category="welcomeLanguage" />
       </div>