refactor: begin transition of mui to headless ui + tailwind

src/components/Form/Settings/Dropdown/Dropdown.jsx

@@ -1,6 +1,9 @@
 import variables from 'config/variables';
 import { PureComponent, createRef } from 'react';
-import { InputLabel, MenuItem, FormControl, Select } from '@mui/material';
+// import { InputLabel, MenuItem, FormControl, Select } from '@mui/material';
+import { Description, Field, Label, Select } from '@headlessui/react';
+import { MdKeyboardArrowDown } from 'react-icons/md';
+import clsx from 'clsx';
 
 import EventBus from 'utils/eventbus';
 
@@ -51,7 +54,8 @@ class Dropdown extends PureComponent {
     const label = this.props.label || '';
 
     return (
-      <FormControl fullWidth className={id}>
+      {
+        /*<FormControl fullWidth className={id}>
         <InputLabel id={id}>{label}</InputLabel>
         <Select
           labelId={id}
@@ -70,7 +74,51 @@ class Dropdown extends PureComponent {
             ) : null,
           )}
         </Select>
-      </FormControl>
+        </FormControl>*/
+      },
+      (
+        <div className="w-[100%] max-w-md">
+          <Field
+            id={this.props.name}
+            value={this.state.value}
+            label={label}
+            onChange={this.onChange}
+            ref={this.dropdown}
+            key={id}
+          >
+            <Label
+              className="text-sm/6 font-medium text-white"
+              id={this.props.name}
+              value={this.state.value}
+              label={label}
+              onChange={this.onChange}
+              ref={this.dropdown}
+              key={id}
+            >
+              {label}
+            </Label>
+            <div className="relative">
+              <Select
+                className={clsx(
+                  'border border-[#484848] block w-full appearance-none rounded-lg bg-white/5 py-1.5 px-3 text-sm/6 text-white',
+                  'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
+                  // Make the text of each option black on Windows
+                  '*:text-black box-border',
+                )}
+              >
+                {this.props.items.map((item) =>
+                  item !== null ? (
+                    <option key={id + item.value} value={item.value}>
+                      {item.text}
+                    </option>
+                  ) : null,
+                )}
+              </Select>
+              <MdKeyboardArrowDown className="group pointer-events-none absolute top-2.5 right-2.5 size-4 fill-white/60" />
+            </div>
+          </Field>
+        </div>
+      )
     );
   }
 }

src/components/Form/Settings/Radio/Radio.jsx

@@ -1,12 +1,16 @@
 import variables from 'config/variables';
 import { PureComponent } from 'react';
-import {
+/*import {
   Radio as RadioUI,
   RadioGroup,
   FormControlLabel,
   FormControl,
   FormLabel,
-} from '@mui/material';
+} from '@mui/material';*/
+import { Radio as PureRadio, RadioGroup } from '@headlessui/react'
+import { MdCheckCircle } from "react-icons/md";
+
+
 
 import EventBus from 'utils/eventbus';
 import { translations } from 'lib/translations';
@@ -19,45 +23,44 @@ class Radio extends PureComponent {
     };
   }
 
-  handleChange = async (e) => {
-    const { value } = e.target;
-
+  handleChange = async (value) => {
     if (value === 'loading') {
       return;
     }
-
+  
     if (this.props.name === 'language') {
       // old tab name
       if (localStorage.getItem('tabName') === variables.getMessage('tabname')) {
         localStorage.setItem('tabName', translations[value.replace('-', '_')].tabname);
       }
     }
-
+  
     localStorage.setItem(this.props.name, value);
-
+  
     this.setState({
       value,
     });
-
+  
     if (this.props.onChange) {
       this.props.onChange(value);
     }
-
+  
     variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
-
+  
     if (this.props.element) {
       if (!document.querySelector(this.props.element)) {
         document.querySelector('.reminder-info').style.display = 'flex';
         return localStorage.setItem('showReminder', true);
       }
     }
-
+  
     EventBus.emit('refresh', this.props.category);
   };
 
   render() {
     return (
-      <FormControl component="fieldset">
+      {
+        /*<FormControl component="fieldset">
         <FormLabel
           className={this.props.smallTitle ? 'radio-title-small' : 'radio-title'}
           component="legend"
@@ -79,7 +82,40 @@ class Radio extends PureComponent {
             />
           ))}
         </RadioGroup>
-      </FormControl>
+        </FormControl>*/
+      },
+      (
+        <div className="w-full">
+            <RadioGroup
+              aria-label={this.props.name}
+              name={this.props.name}
+              onChange={this.handleChange}
+              value={this.state.value}
+              className="space-y-2"
+            >
+              {this.props.options.map((option) => (
+                <PureRadio
+                  key={option.name}
+                  label={option.name}
+                  value={option.value}
+                  className="group relative flex cursor-pointer rounded-lg bg-white/5 py-4 px-5 text-white shadow-md transition focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white data-[checked]:bg-white/10"
+                >
+                  <div className="flex w-full items-center justify-between">
+                    <div className="text-sm/6">
+                      <p className="font-semibold text-white">{option.name}</p>
+                      <div className="flex gap-2 text-white/50">
+                        <div>10%</div>
+                        <div aria-hidden="true">&middot;</div>
+                        <div>sus</div>
+                      </div>
+                    </div>
+                    <MdCheckCircle className="size-6 fill-white opacity-0 transition group-data-[checked]:opacity-100" />
+                  </div>
+                </PureRadio>
+              ))}
+            </RadioGroup>
+          </div>
+      )
     );
   }
 }

src/features/misc/sections/Language.jsx

@@ -5,6 +5,7 @@ import { MdOutlineOpenInNew } from 'react-icons/md';
 
 import { Radio } from 'components/Form/Settings';
 
+
 import languages from '@/i18n/languages.json';
 
 class LanguageOptions extends PureComponent {
@@ -100,7 +101,7 @@ class LanguageOptions extends PureComponent {
             defaultValue={this.state.quoteLanguages[0].name}
             category="quote"
           />
-        </div>
+          </div>
       </>
     );
   }

src/scss/index.scss

@@ -1,5 +1,8 @@
 @import 'variables';
 @import 'toast';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 body {
   background: #000;
@@ -14,6 +17,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   outline: none;
+  box-sizing: initial;
 }
 
 #center {