refactor(input + textarea): Use HeadlessUI

src/components/Elements/MainModal/scss/modules/_modalTabContent.scss

@@ -55,7 +55,6 @@
         }
 
         .link {
-          margin-top: 10px;
           display: flex;
           flex-flow: row;
           gap: 15px;

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

@@ -50,13 +50,13 @@ const Dropdown = (props) => {
   return (
     <div className="w-[100%] max-w-md">
       <Field id={props.name} value={value} label={label} onChange={onChange} ref={dropdown} key={id}>
-        <Label className="text-sm/6 font-medium text-white" id={props.name} value={value} label={label} onChange={onChange} ref={dropdown} key={id}>
+        <Label id={props.name} value={value} label={label} onChange={onChange} ref={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',
+              'mt-3 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',
               '*:text-black box-border',
             )}

src/components/Form/Settings/Text/Text.jsx

@@ -2,7 +2,9 @@ import variables from 'config/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 import { TextField } from '@mui/material';
+import { Description, Field, Label, Textarea, Input } from '@headlessui/react';
 import { MdRefresh } from 'react-icons/md';
+import clsx from 'clsx';
 
 import EventBus from 'utils/eventbus';
 
@@ -48,22 +50,60 @@ class Text extends PureComponent {
 
   render() {
     return (
-      <>
+      <Field className="w-full">
+        <div className="w-full flex flex-row justify-between items-center">
+        <Label>{this.props.title}</Label>
+        <span className="link" onClick={this.resetItem}>
+          <MdRefresh />
+          {variables.getMessage('modals.main.settings.buttons.reset')}
+        </span>
+        </div>
         {this.props.textarea === true ? (
-          <TextField
-            label={this.props.title}
-            value={this.state.value}
-            onChange={this.handleChange}
-            varient="outlined"
-            className={this.props.customcss ? 'customcss' : ''}
-            multiline
-            spellCheck={false}
-            minRows={4}
-            maxRows={10}
-            InputLabelProps={{ shrink: true }}
-          />
+          <>
+            <Textarea
+              value={this.state.value}
+              onChange={this.handleChange}
+              className={clsx(
+                'bg-white/5 box-border mt-3 block w-full resize-none rounded-lg py-1.5 px-3 text-sm/6 text-white border border-[#484848]',
+                'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
+              )}
+              rows={4}
+            />
+          </>
         ) : (
-          <TextField
+          <>
+            <Input
+              value={this.state.value}
+              onChange={this.handleChange}
+              placeholder={this.props.placeholder || ''}
+              className={clsx(
+                'box-border mt-3 block w-full rounded-lg bg-white/5 py-1.5 px-3 text-sm/6 text-white border border-[#484848]',
+                'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
+              )}
+            />
+          </>
+        )}
+      </Field>
+    );
+  }
+}
+
+export { Text as default, Text };
+
+/*<TextField
+  label={this.props.title}
+  value={this.state.value}
+  onChange={this.handleChange}
+  varient="outlined"
+  className={this.props.customcss ? 'customcss' : ''}
+  multiline
+  spellCheck={false}
+  minRows={4}
+  maxRows={10}
+  InputLabelProps={{ shrink: true }}
+/>
+
+<TextField
             label={this.props.title}
             value={this.state.value}
             onChange={this.handleChange}
@@ -71,14 +111,4 @@ class Text extends PureComponent {
             InputLabelProps={{ shrink: true }}
             placeholder={this.props.placeholder || ''}
           />
-        )}
-        <span className="link" onClick={this.resetItem}>
-          <MdRefresh />
-          {variables.getMessage('modals.main.settings.buttons.reset')}
-        </span>
-      </>
-    );
-  }
-}
-
-export { Text as default, Text };
+*/

src/features/welcome/Welcome.jsx

@@ -191,19 +191,19 @@ function WelcomeModal() {
           className="grid place-items-center text-center"
           key={currentTab}
           initial={{ opacity: 0 }}
-          animate={{ opacity: 0.8 }}
+          animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ type: 'spring', duration: 3 }}
         >
           <motion.span
-            className="text-6xl font-bold max-w-[50%]"
+            className="text-6xl font-bold max-w-[50%] leading-normal"
             initial={{ opacity: 0, y: 100 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 0 }}
             transition={{ type: 'spring', duration: 2 }}
             key={currentTab}
           >
-            "{quote}"
+            <mark className="bg-[#ff6b6b]">"{quote}"</mark>
           </motion.span>
         </motion.div>
         <div className="welcomeCredit">