refacotr: settings options layout

src/components/Elements/MainModal/Main.jsx

@@ -58,7 +58,7 @@ const MainModalContent = ({ modalClose }) => {
   };
 
   return (
-    <div className="flex flex-col w-full min-w-full">
+    <div className="flex flex-col w-full min-w-full ">
       <Navbar modalClose={modalClose} />
       <AnimatePresence initial={false} custom={direction}>
         <motion.div

src/components/Elements/MainModal/backend/newTabs.jsx

@@ -14,22 +14,6 @@ const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
     [setSubTab, setSubSection],
   );
 
-  return (
-    <div className="modalSidebar">
-      {sections.map((section, index) => (
-        <Tab
-          key={index}
-          currentTab={subTab}
-          label={variables.getMessage(section.label)}
-          onClick={handleClick(section.label)}
-          navbarTab={section.navbar || false}
-        />
-      ))}
-    </div>
-  );
-});
-
-const Content = memo(({ sections, currentTab }) => {
   const hideReminder = () => {
     localStorage.setItem('showReminder', false);
     document.querySelector('.reminder-info').style.display = 'none';
@@ -65,18 +49,39 @@ const Content = memo(({ sections, currentTab }) => {
     [],
   );
 
+  return (
+    <div className="modalSidebar">
+      {sections.map((section, index) => (
+        <Tab
+          key={index}
+          currentTab={subTab}
+          label={variables.getMessage(section.label)}
+          onClick={handleClick(section.label)}
+          navbarTab={section.navbar || false}
+        />
+      ))}
+      {reminderInfo}
+    </div>
+  );
+});
+
+const Content = memo(({ sections, currentTab }) => {
+  const hideReminder = () => {
+    localStorage.setItem('showReminder', false);
+    document.querySelector('.reminder-info').style.display = 'none';
+  };
+
   return (
     <>
       {sections.map(
         ({ label, name, component: Component }) =>
           variables.getMessage(label) === currentTab && (
             <div
-              className="w-full rounded h-[calc(78vh-80px)] flex flex-col overflow-scroll pr-2 gap-3"
+              className="w-full rounded h-[calc(78vh-80px)] flex flex-col pr-10 gap-3 lg:overflow-x-hidden overflow-y-auto overflow-x-auto"
               key={name}
               label={variables.getMessage(label)}
               name={name}
             >
-              {reminderInfo}
               <Component />
             </div>
           ),

src/components/Elements/MainModal/scss/index.scss

@@ -206,13 +206,12 @@ h5 {
   flex-flow: row;
   justify-content: space-between;
   padding: 25px;
-  margin-top: 20px;
   transition: 0.5s;
 
   @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
-    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+    //box-shadow: 0 0 0 1px t($modal-sidebarActive);
 
     &:hover {
       background: t($modal-sidebarActive);

src/components/Form/Settings/Checkbox/Checkbox.jsx

@@ -1,7 +1,7 @@
 import variables from 'config/variables';
 import { useEffect, useState } from 'react';
 import { Checkbox as CheckboxUI, Field, Label } from '@headlessui/react';
-import { MdCheckBox } from "react-icons/md";
+import { MdCheckBox } from 'react-icons/md';
 import EventBus from 'utils/eventbus';
 
 const Checkbox = (props) => {
@@ -21,10 +21,7 @@ const Checkbox = (props) => {
       props.onChange(value);
     }
 
-    variables.stats.postEvent(
-      'setting',
-      `${props.name} ${value ? 'enabled' : 'disabled'}`,
-    );
+    variables.stats.postEvent('setting', `${props.name} ${value ? 'enabled' : 'disabled'}`);
 
     if (props.element) {
       if (!document.querySelector(props.element)) {
@@ -42,13 +39,13 @@ const Checkbox = (props) => {
         checked={checked}
         onChange={handleChange}
         disabled={props.disabled || false}
-        className="border border-[#484848] bg-white/5 group size-4 rounded data-[checked]:bg-neutral-900 cursor-pointer grid place-content-center"
+        className="border border-[#484848] bg-white/5 group size-4 rounded-sm data-[checked]:bg-neutral-900 cursor-pointer grid place-content-center"
       >
-          <MdCheckBox className="stroke-white opacity-0 group-data-[checked]:opacity-100 size-6" />
+        <MdCheckBox className="stroke-white opacity-0 group-data-[checked]:opacity-100 size-6" />
       </CheckboxUI>
       <Label>{props.text}</Label>
     </Field>
   );
 };
 
-export { Checkbox as default, Checkbox };
+export { Checkbox as default, Checkbox };

src/components/Layout/Settings/Item/SettingsItem.jsx

@@ -1,5 +1,5 @@
 const Row = (props) => {
-  const classes = `${props.final ? 'border-b-0' : 'border-b border-gray-500'} ${props.inactive ? 'opacity-50 pointer-events-none transition duration-400 ease-in-out' : ''} flex items-center min-h-[100px] justify-between py-4 transition duration-400 ease-in-out`;
+  const classes = `${props.inactive ? 'opacity-50 pointer-events-none transition duration-400 ease-in-out' : ''} flex items-center min-h-[100px] justify-between py-4 transition duration-400 ease-in-out`;
   return <div className={classes}>{props.children}</div>;
 };
 

src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import variables from 'config/variables';
 import Slider from '../../../Form/Settings/Slider/Slider';
@@ -7,23 +7,33 @@ import values from 'utils/data/slider_values.json';
 import EventBus from 'utils/eventbus';
 
 const PreferencesWrapper = ({ children, ...props }) => {
-  const [shown, setShown] = useState(
-    localStorage.getItem(props.setting) === 'true' || props.default || false,
-  );
-  console.log(props.default);
-
-  EventBus.on('toggle', (setting) => {
-    if (setting === props.setting) {
-      setShown(!shown);
+  const [shown, setShown] = useState(() => {
+    if (!props.setting) {
+      return true;
     }
+    return localStorage.getItem(props.setting) === 'true' || props.default || false;
   });
 
+  useEffect(() => {
+    const handleToggle = (setting) => {
+      if (setting === props.setting) {
+        setShown((prevShown) => !prevShown);
+      }
+    };
+
+    EventBus.on('toggle', handleToggle);
+
+    return () => {
+      EventBus.off('toggle', handleToggle);
+    };
+  }, [props.setting]);
+
   return (
     <div
       className={
         shown
-          ? 'preferences bg-modal-content-light dark:bg-modal-content-dark p-10 rounded'
-          : 'opacity-50 pointer-events-none transition-400 ease-in-out bg-modal-content-light dark:bg-modal-content-dark p-10 rounded'
+          ? 'preferences bg-modal-content-light dark:bg-modal-content-dark p-10 rounded divide-y divide-gray-500'
+          : 'opacity-50 pointer-events-none transition-400 ease-in-out bg-modal-content-light dark:bg-modal-content-dark p-10 rounded divide-y divide-gray-500'
       }
     >
       {props.zoomSetting && (