From 8e993b4f935bae6e806321276cc54a8d9a6526c1 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Mon, 10 Jun 2024 16:58:15 +0100
Subject: [PATCH] refactor(input + textarea): Use HeadlessUI

---
 .../scss/modules/_modalTabContent.scss        |  1 -
 .../Form/Settings/Dropdown/Dropdown.jsx       |  4 +-
 src/components/Form/Settings/Text/Text.jsx    | 80 +++++++++++++------
 src/features/welcome/Welcome.jsx              |  6 +-
 4 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
index e5456372..6e45e712 100644
--- a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
+++ b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
@@ -55,7 +55,6 @@
         }
 
         .link {
-          margin-top: 10px;
           display: flex;
           flex-flow: row;
           gap: 15px;
diff --git a/src/components/Form/Settings/Dropdown/Dropdown.jsx b/src/components/Form/Settings/Dropdown/Dropdown.jsx
index a2df896c..708d9437 100644
--- a/src/components/Form/Settings/Dropdown/Dropdown.jsx
+++ b/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',
             )}
diff --git a/src/components/Form/Settings/Text/Text.jsx b/src/components/Form/Settings/Text/Text.jsx
index 38ba1226..0e05cf36 100644
--- a/src/components/Form/Settings/Text/Text.jsx
+++ b/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 };
+*/
diff --git a/src/features/welcome/Welcome.jsx b/src/features/welcome/Welcome.jsx
index 601e2d11..406137c9 100644
--- a/src/features/welcome/Welcome.jsx
+++ b/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">