refactor(switch): Use HeadlessUI

src/components/Elements/MainModal/scss/marketplace/_main.scss

@@ -435,35 +435,6 @@ p.author {
   align-items: center;
 }
 
-.marketplaceSearch {
-  display: flex;
-  align-items: center;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 18px;
-
-  @include themed {
-    box-shadow: 0 0 0 3px t($modal-sidebarActive);
-    background: t($modal-sidebar);
-  }
-
-  input {
-    all: unset;
-  }
-
-  @include themed {
-    &:focus-within {
-      background: t($modal-sidebarActive);
-      box-shadow: 0 0 0 1px t($color);
-    }
-
-    &:disabled {
-      background: t($modal-sidebarActive);
-      cursor: not-allowed;
-    }
-  }
-}
-
 .inCollection {
   // background-image: linear-gradient(to left, transparent, #000),
   //  url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');

src/components/Form/Settings/Switch/Switch.jsx

@@ -1,6 +1,7 @@
 import variables from 'config/variables';
 import { PureComponent } from 'react';
-import { Switch as SwitchUI, FormControlLabel } from '@mui/material';
+//import { Switch as SwitchUI, FormControlLabel } from '@mui/material';
+import { Field, Label, Switch as SwitchUI } from '@headlessui/react';
 
 import EventBus from 'utils/eventbus';
 
@@ -41,7 +42,8 @@ class Switch extends PureComponent {
 
   render() {
     return (
-      <FormControlLabel
+      {
+        /*<FormControlLabel
         control={
           <SwitchUI
             name={this.props.name}
@@ -52,7 +54,24 @@ class Switch extends PureComponent {
         }
         label={this.props.header ? '' : this.props.text}
         labelPlacement="start"
-      />
+      />*/
+      },
+      (
+        <Field className="flex flex-row items-center justify-between w-[100%]">
+          <Label>{this.props.header ? '' : this.props.text}</Label>
+          <SwitchUI
+            checked={this.state.checked}
+            onChange={this.handleChange}
+            className="box-border group relative flex h-7 w-14 cursor-pointer rounded-full bg-white/10 p-1 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white data-[checked]:bg-white/10"
+          >
+            {' '}
+            <span
+              aria-hidden="true"
+              className="pointer-events-none inline-block size-5 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-7"
+            />
+          </SwitchUI>
+        </Field>
+      )
     );
   }
 }

src/features/marketplace/views/Browse.jsx

@@ -392,7 +392,7 @@ class Marketplace extends PureComponent {
             <div className="headerExtras marketplaceCondition">
               {this.props.type !== 'collections' && (
                 <div>
-                  <form className="marketplaceSearch">
+                  <form className="max-w-md mx-auto relative">
                     <input
                       label={variables.getMessage('widgets.search')}
                       placeholder={variables.getMessage('widgets.search')}
@@ -400,8 +400,11 @@ class Marketplace extends PureComponent {
                       id="filter"
                       value={this.state.filter}
                       onChange={(event) => this.setState({ filter: event.target.value })}
+                      className="block w-full px-4 py-3 ps-10 text-sm text-gray-900 border border-[#484848] rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-neutral-100"
                     />
-                    <MdSearch />
+                    <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+                      <MdSearch />
+                    </div>
                   </form>
                 </div>
               )}