feat: replace mui with new style

2026-07-16 05:23:49 +02:00 · 2026-01-25 18:12:05 +00:00
parent 01fcdbf9c7
commit 874866bf73
33 changed files with 1338 additions and 555 deletions
--- a/src/features/greeting/options/GreetingOptions.jsx
+++ b/src/features/greeting/options/GreetingOptions.jsx
@@ -10,7 +10,6 @@ import {
  Section,
 } from 'components/Layout/Settings';
 import { Checkbox, Switch, Text } from 'components/Form/Settings';
-import { TextareaAutosize } from '@mui/material';
 import { Button } from 'components/Elements';
 import { toast } from 'react-toastify';

@@ -192,15 +191,15 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
                  <span className="subtitle">
                    {variables.getMessage(`${GREETING_SECTION}.event_name`)}
                  </span>
-                  <TextareaAutosize
+                  <input
+                    type="text"
+                    className="text-field-input"
                    value={event.name}
                    placeholder={variables.getMessage(`${GREETING_SECTION}.event_name`)}
                    onChange={(e) => {
                      const updatedEvent = { ...event, name: e.target.value };
                      updateEvent(index, updatedEvent);
                    }}
-                    varient="outlined"
-                    style={{ padding: '0' }}
                  />
                </div>
              </div>
--- a/src/features/message/options/MessageOptions.jsx
+++ b/src/features/message/options/MessageOptions.jsx
@@ -2,9 +2,9 @@ import variables from 'config/variables';
 import { useState } from 'react';
 import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md';
 import { toast } from 'react-toastify';
-import { TextareaAutosize } from '@mui/material';

 import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
+import { Textarea } from 'components/Form/Settings';
 import { Button } from 'components/Elements';
 import EventBus from 'utils/eventbus';

@@ -82,14 +82,13 @@ const MessageOptions = () => {
                  <span className="subtitle">
                    {variables.getMessage(`${MESSAGE_SECTION}.title`)}
                  </span>
-                  <TextareaAutosize
+                  <Textarea
                    value={messages[index]}
                    placeholder={variables.getMessage(
                      'modals.main.settings.sections.message.content',
                    )}
                    onChange={(e) => message(e, true, index)}
-                    varient="outlined"
-                    style={{ padding: '0' }}
+                    minRows={2}
                  />
                </div>
              </div>
--- a/src/features/misc/sections/Experimental.jsx
+++ b/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)}
--- a/src/features/misc/sections/Language.jsx
+++ b/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' }}>
--- a/src/features/navbar/components/Notes.jsx
+++ b/src/features/navbar/components/Notes.jsx
@@ -4,9 +4,9 @@ import { useT } from 'contexts';

 import { MdContentCopy, MdAssignment, MdPushPin, MdDownload } from 'react-icons/md';
 import { useFloating, shift } from '@floating-ui/react-dom';
-import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { toast } from 'react-toastify';
 import { Tooltip } from 'components/Elements';
+import { Textarea } from 'components/Form/Settings';

 import { saveFile } from 'utils/saveFile';
 import EventBus from 'utils/eventbus';
@@ -112,12 +112,11 @@ const Notes = ({ notesRef, floatRef, position, xPosition, yPosition }) => {
                </button>
              </Tooltip>
            </div>
-            <TextareaAutosize
+            <Textarea
              placeholder={t('widgets.navbar.notes.placeholder')}
              value={notes}
              onChange={handleSetNotes}
              minRows={5}
-              maxLength={10000}
            />
          </div>
        </span>
--- a/src/features/navbar/components/Todo.jsx
+++ b/src/features/navbar/components/Todo.jsx
@@ -9,11 +9,10 @@ import {
  MdPlaylistAdd,
  MdOutlineDragIndicator,
  MdPlaylistRemove,
+  MdCheck,
 } from 'react-icons/md';
-import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { Tooltip } from 'components/Elements';
-
-import Checkbox from '@mui/material/Checkbox';
+import { Textarea } from 'components/Form/Settings';
 import { shift, useFloating } from '@floating-ui/react-dom';
 import {
  DndContext,
@@ -210,15 +209,18 @@ function Todo({ todoRef, floatRef, position, xPosition, yPosition }) {
                    <SortableItem key={index} id={index}>
                      {({ attributes, listeners }) => (
                        <div className={'todoRow' + (todoItem.done ? ' done' : '')}>
-                          <Checkbox
-                            checked={todoItem.done}
+                          <div
+                            className={'todo-checkbox' + (todoItem.done ? ' checked' : '')}
                            onClick={() => updateTodo('done', index)}
-                          />
-                          <TextareaAutosize
+                          >
+                            {todoItem.done && <MdCheck />}
+                          </div>
+                          <Textarea
                            placeholder={t('widgets.navbar.notes.placeholder')}
                            value={todoItem.value}
                            onChange={(data) => updateTodo('set', index, data)}
                            readOnly={todoItem.done}
+                            minRows={1}
                          />
                          <Tooltip
                            title={t(
--- a/src/features/quote/options/QuoteOptions.jsx
+++ b/src/features/quote/options/QuoteOptions.jsx
@@ -1,7 +1,6 @@
 import variables from 'config/variables';
 import React, { useState } from 'react';
 import { MdCancel, MdAdd, MdSource, MdOutlineFormatQuote } from 'react-icons/md';
-import TextareaAutosize from '@mui/material/TextareaAutosize';

 import {
  Header,
@@ -11,7 +10,7 @@ import {
  Section,
  PreferencesWrapper,
 } from 'components/Layout/Settings';
-import { Checkbox, Dropdown } from 'components/Form/Settings';
+import { Checkbox, Dropdown, Textarea } from 'components/Form/Settings';
 import { Button } from 'components/Elements';

 const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) => {
@@ -166,23 +165,23 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
                  <MdOutlineFormatQuote />
                </div>
                <div className="messageText">
-                  <TextareaAutosize
+                  <Textarea
                    value={customQuote[index].quote}
                    placeholder={variables.getMessage(
                      'modals.main.settings.sections.quote.title',
                    )}
                    onChange={(e) => handleCustomQuote(e, true, index, 'quote')}
-                    varient="outlined"
                    style={{ fontSize: '22px', fontWeight: 'bold' }}
+                    minRows={1}
                  />
-                  <TextareaAutosize
+                  <Textarea
                    value={customQuote[index].author}
                    placeholder={variables.getMessage(
                      'modals.main.settings.sections.quote.author',
                    )}
                    className="subtitle"
                    onChange={(e) => handleCustomQuote(e, true, index, 'author')}
-                    varient="outlined"
+                    minRows={1}
                  />
                </div>
                <div>
--- a/src/features/weather/options/WeatherOptions.jsx
+++ b/src/features/weather/options/WeatherOptions.jsx
@@ -3,7 +3,6 @@ import { MdAutoAwesome } from 'react-icons/md';
 import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
 import { useLocalStorageState } from 'utils/useLocalStorageState';
 import { Radio, Dropdown, Checkbox } from 'components/Form/Settings';
-import { TextField } from '@mui/material';
 import variables from 'config/variables';

 const useWeatherSettings = () => {
@@ -82,18 +81,24 @@ const WeatherOptions = () => {
    <Row>
      <Content title={variables.getMessage(`${WEATHER_SECTION}.location`)} />
      <Action>
-        <TextField
-          label={variables.getMessage(`${WEATHER_SECTION}.location`)}
-          value={location}
-          onChange={changeLocation}
-          placeholder="London"
-          variant="outlined"
-          InputLabelProps={{ shrink: true }}
-        />
-        <span className="link" onClick={getAutoLocation}>
-          <MdAutoAwesome />
-          {variables.getMessage(`${WEATHER_SECTION}.auto`)}
-        </span>
+        <div className="text-field-container">
+          <div className="text-field">
+            <label className="text-field-label">
+              {variables.getMessage(`${WEATHER_SECTION}.location`)}
+            </label>
+            <input
+              type="text"
+              className="text-field-input"
+              value={location}
+              onChange={changeLocation}
+              placeholder="London"
+            />
+          </div>
+          <span className="link" onClick={getAutoLocation}>
+            <MdAutoAwesome />
+            {variables.getMessage(`${WEATHER_SECTION}.auto`)}
+          </span>
+        </div>
      </Action>
    </Row>
  );
--- a/src/features/welcome/components/Sections/ChooseLanguage.jsx
+++ b/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>