feat: replace mui with new style

src/features/misc/sections/Experimental.jsx

@@ -2,7 +2,6 @@ import variables from 'config/variables';
 import { useState, memo } from 'react';
 import { Checkbox, Slider } from 'components/Form/Settings';
 import { Button } from 'components/Elements';
-import { TextField } from '@mui/material';
 import { toast } from 'react-toastify';
 
 import EventBus from 'utils/eventbus';
@@ -39,22 +38,26 @@ function ExperimentalOptions() {
             element=".other"
           />
           <p style={{ textAlign: 'left', width: '100%' }}>Send Event</p>
-          <TextField
-            label={'Type'}
-            value={eventType}
-            onChange={(e) => setEventType(e.target.value)}
-            spellCheck={false}
-            varient="outlined"
-            InputLabelProps={{ shrink: true }}
-          />
-          <TextField
-            label={'Name'}
-            value={eventName}
-            onChange={(e) => setEventName(e.target.value)}
-            spellCheck={false}
-            varient="outlined"
-            InputLabelProps={{ shrink: true }}
-          />
+          <div className="text-field">
+            <label className="text-field-label">Type</label>
+            <input
+              type="text"
+              className="text-field-input"
+              value={eventType || ''}
+              onChange={(e) => setEventType(e.target.value)}
+              spellCheck={false}
+            />
+          </div>
+          <div className="text-field">
+            <label className="text-field-label">Name</label>
+            <input
+              type="text"
+              className="text-field-input"
+              value={eventName || ''}
+              onChange={(e) => setEventName(e.target.value)}
+              spellCheck={false}
+            />
+          </div>
           <Button
             type="settings"
             onClick={() => EventBus.emit(eventType, eventName)}

src/features/misc/sections/Language.jsx

@@ -1,10 +1,9 @@
 import { useState, useMemo } from 'react';
 import { useT, useTranslation } from 'contexts/TranslationContext';
 
-import { MdOutlineOpenInNew, MdSearch, MdComputer } from 'react-icons/md';
-import { TextField, InputAdornment } from '@mui/material';
+import { MdOutlineOpenInNew, MdComputer } from 'react-icons/md';
 
-import { Radio, Checkbox } from 'components/Form/Settings';
+import { Radio, Checkbox, SearchInput } from 'components/Form/Settings';
 
 import languages from '@/i18n/languages.json';
 import translationPercentages from '@/i18n/translationPercentages.json';
@@ -123,35 +122,10 @@ const LanguageOptions = () => {
           marginBottom: 16,
         }}
       >
-        <TextField
+        <SearchInput
           placeholder={t('modals.main.settings.sections.language.search')}
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
-          variant="outlined"
-          size="small"
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <MdSearch style={{ color: '#888' }} />
-              </InputAdornment>
-            ),
-          }}
-          sx={{
-            width: '250px',
-            '& .MuiOutlinedInput-root': {
-              borderRadius: '24px',
-              backgroundColor: 'rgba(255, 255, 255, 0.08)',
-              '& fieldset': {
-                border: 'none',
-              },
-              '&:hover fieldset': {
-                border: 'none',
-              },
-              '&.Mui-focused fieldset': {
-                border: 'none',
-              },
-            },
-          }}
         />
         {currentLangOption && (
           <div style={{ color: '#888', whiteSpace: 'nowrap' }}>