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(
+    variables.stats.postEvent('setting', `${props.name} ${value ? 'enabled' : 'disabled'}`);
-      '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(
+  const [shown, setShown] = useState(() => {
-    localStorage.getItem(props.setting) === 'true' || props.default || false,
+    if (!props.setting) {
-  );
+      return true;
-  console.log(props.default);
-
-  EventBus.on('toggle', (setting) => {
-    if (setting === props.setting) {
-      setShown(!shown);
     }
+    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'
+          ? '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'
+          : '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 && (

src/features/greeting/options/GreetingOptions.jsx

@@ -23,12 +23,12 @@ import { MdEventNote, MdAdd, MdCancel, MdRefresh } from 'react-icons/md';
 const GreetingOptions = () => {
   const { subSection } = useTab();
   const [customEvents, setCustomEvents] = useState(
-    JSON.parse(localStorage.getItem('customEvents')) || defaultEvents
+    JSON.parse(localStorage.getItem('customEvents')) || defaultEvents,
   );
   const [events, setEvents] = useState(false);
 
   const [birthday, setBirthday] = useState(
-    new Date(localStorage.getItem('birthday')) || defaults.birthday
+    new Date(localStorage.getItem('birthday')) || defaults.birthday,
   );
 
   const [enableBirthday, setEnableBirthday] = useState(
@@ -133,9 +133,7 @@ const GreetingOptions = () => {
       <Row>
         <Content
           title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
-          subtitle={variables.getMessage(
+          subtitle={variables.getMessage('settings:sections.greeting.birthday_subtitle')}
-            'settings:sections.greeting.birthday_subtitle',
-          )}
         />
         <Action>
           <Switch
@@ -298,8 +296,8 @@ const GreetingOptions = () => {
 
   return (
     <>
-      {header}
+      {/*{header}*/}
-      {subSection === "events" ? (
+      {subSection === 'events' ? (
         <>
           <Row>
             <Content
@@ -321,13 +319,15 @@ const GreetingOptions = () => {
           {CustomEventsSection()}
         </>
       ) : (
-        <PreferencesWrapper
+        <>
-          setting="greeting"
+          <PreferencesWrapper
-          zoomSetting="zoomGreeting"
+            setting="greeting"
-          category="greeting"
+            zoomSetting="zoomGreeting"
-          visibilityToggle={true}
+            category="greeting"
-        >
+            visibilityToggle={true}
-          <AdditionalOptions />
+          >
+            <AdditionalOptions />
+          </PreferencesWrapper>
           <Section
             id="events"
             title={variables.getMessage(`${GREETING_SECTION}.events`)}
@@ -335,7 +335,7 @@ const GreetingOptions = () => {
             onClick={() => setEvents(true)}
             icon={<MdEventNote />}
           />
-        </PreferencesWrapper>
+        </>
       )}
     </>
   );

src/features/misc/sections/Changelog.jsx

@@ -49,7 +49,7 @@ function Changelog() {
     setTitle(changelog.name);
     setContent(changelog.body);
     setDate(new Date(changelog.published_at).toLocaleDateString());
-  }
+  };
 
   useEffect(() => {
     if (navigator.onLine === false || offlineMode) {
@@ -77,9 +77,7 @@ function Changelog() {
       <>
         <MdOutlineWifiOff />
         <h1>{variables.getMessage('marketplace:offline.title')}</h1>
-        <p className="description">
+        <p className="description">{variables.getMessage('marketplace:offline.description')}</p>
-          {variables.getMessage('marketplace:offline.description')}
-        </p>
       </>,
     );
   }
@@ -106,14 +104,15 @@ function Changelog() {
   }
 
   return (
-    <article className="changelogtab prose dark:prose-invert" ref={changelog}>
+    <article
-      <div className="not-prose">
+      className="bg-modal-content-light dark:bg-modal-content-dark w-full rounded p-10 prose dark:prose-invert"
-        <span className="mainTitle">{title}</span>
+      ref={changelog}
-        <span className="subtitle">Released on {date}</span>
+    >
+      <div>
+        <h1 class="leading-tight mb-1">{title}</h1>
+        <p class="leading-none mt-0">Published on {date}</p>
       </div>
-      <Markdown options={{ overrides: { a: { props: { target: '_blank' } } } }}>
+      <Markdown options={{ overrides: { a: { props: { target: '_blank' } } } }}>{content}</Markdown>
-        {content}
-      </Markdown>
     </article>
   );
 }

src/features/navbar/options/AppsOptions.jsx

@@ -110,9 +110,7 @@ function AppsOptions({ appsEnabled }) {
       <Row final={true} inactive={!appsEnabled}>
         <Content
           title={variables.getMessage('widgets.navbar.apps.title')}
-          subtitle={variables.getMessage(
+          subtitle={variables.getMessage('settings:sections.appearance.navbar.apps_subtitle')}
-            'settings:sections.appearance.navbar.apps_subtitle',
-          )}
         />
         <Action>
           <Button
@@ -123,17 +121,18 @@ function AppsOptions({ appsEnabled }) {
           />
         </Action>
       </Row>
-
+      {appsModalInfo.items.length > 0 && (
-      <div className="messagesContainer">
+        <div className="messagesContainer">
-        {appsModalInfo.items.map((item, i) => (
+          {appsModalInfo.items.map((item, i) => (
-          <QuickLink
+            <QuickLink
-            key={i}
+              key={i}
-            item={item}
+              item={item}
-            startEditLink={() => startEditLink(item)}
+              startEditLink={() => startEditLink(item)}
-            deleteLink={(key, e) => deleteLink(key, e)}
+              deleteLink={(key, e) => deleteLink(key, e)}
-          />
+            />
-        ))}
+          ))}
-      </div>
+        </div>
+      )}
 
       <Modal
         closeTimeoutMS={100}

src/features/navbar/options/NavbarOptions.jsx

@@ -8,7 +8,7 @@ import { Checkbox, Dropdown } from 'components/Form';
 import EventBus from 'utils/eventbus';
 
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
-import { Header } from 'components/Layout/Settings';
+import { Header, PreferencesWrapper } from 'components/Layout/Settings';
 
 import AppsOptions from './AppsOptions';
 import defaults from './default';
@@ -17,7 +17,9 @@ function NavbarOptions() {
   const [showRefreshOptions, setShowRefreshOptions] = useState(
     localStorage.getItem('refresh') === 'true',
   );
-  const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true' || defaults.appsEnabled);
+  const [appsEnabled, setAppsEnabled] = useState(
+    localStorage.getItem('appsEnabled') === 'true' || defaults.appsEnabled,
+  );
 
   const NAVBAR_SECTION = 'settings:sections.appearance.navbar';
 
@@ -26,9 +28,7 @@ function NavbarOptions() {
       <Row final={false}>
         <Content
           title={variables.getMessage('settings:additional_settings')}
-          subtitle={variables.getMessage(
+          subtitle={variables.getMessage('settings:sections.appearance.navbar.additional')}
-            'settings:sections.appearance.navbar.additional',
-          )}
         />
         <Action>
           <Checkbox
@@ -104,9 +104,7 @@ function NavbarOptions() {
 
     return (
       <Row>
-        <Content
+        <Content title={variables.getMessage('settings:sections.appearance.navbar.widgets')} />
-          title={variables.getMessage('settings:sections.appearance.navbar.widgets')}
-        />
         <Action>
           <div className="navbarButtonOptions">
             {buttons.map((button, index) => (
@@ -123,9 +121,7 @@ function NavbarOptions() {
       <Row final={false} inactive={!showRefreshOptions}>
         <Content
           title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
-          subtitle={variables.getMessage(
+          subtitle={variables.getMessage('settings:sections.appearance.navbar.refresh_subtitle')}
-            'settings:sections.appearance.navbar.refresh_subtitle',
-          )}
         />
         <Action>
           <Dropdown
@@ -169,10 +165,12 @@ function NavbarOptions() {
         zoomSetting="zoomNavbar"
         zoomCategory="navbar"
       />
-      <AdditionalSettings />
+      <PreferencesWrapper visibilityToggle={false}>
-      <NavbarOptions />
+        <AdditionalSettings />
-      <RefreshOptions />
+        <NavbarOptions />
-      <AppsOptions appsEnabled={appsEnabled} />
+        <RefreshOptions />
+        <AppsOptions appsEnabled={appsEnabled} />
+      </PreferencesWrapper>
     </>
   );
 }

src/features/quote/options/QuoteOptions.jsx

@@ -110,9 +110,7 @@ const QuoteOptions = () => {
       {subSection === 'source' ? (
         <Header
           title={variables.getMessage(`${QUOTE_SECTION}.title`)}
-          secondaryTitle={variables.getMessage(
+          secondaryTitle={variables.getMessage('settings:sections.background.source.title')}
-            'settings:sections.background.source.title',
-          )}
           report={false}
         />
       ) : (
@@ -138,13 +136,17 @@ const QuoteOptions = () => {
       )}
 
       {subSection !== 'source' && (
-        <PreferencesWrapper
+        <>
-          setting="quote"
+          <PreferencesWrapper
-          default={defaults.quote}
+            setting="quote"
-          zoomSetting="zoomQuote"
+            default={defaults.quote}
-          category="quote"
+            zoomSetting="zoomQuote"
-          visibilityToggle={true}
+            category="quote"
-        >
+            visibilityToggle={true}
+          >
+            <ButtonOptions />
+            <AdditionalOptions />
+          </PreferencesWrapper>
           <Section
             id="source"
             icon={<MdSource />}
@@ -153,9 +155,7 @@ const QuoteOptions = () => {
           >
             <SourceDropdown />
           </Section>
-          <ButtonOptions />
+        </>
-          <AdditionalOptions />
-        </PreferencesWrapper>
       )}
 
       {quoteType === 'custom' && subSection === 'source' && <CustomSettings />}