refactor: partition of quote settings for increased readability

package.json

@@ -19,7 +19,7 @@
     "@fontsource/montserrat": "5.0.16",
     "@muetab/react-color-gradient-picker": "0.1.2",
     "@muetab/react-sortable-hoc": "^2.0.1",
-    "@mui/material": "5.15.7",
+    "@mui/material": "5.15.9",
     "@sentry/react": "^7.100.1",
     "embla-carousel-autoplay": "8.0.0-rc22",
     "embla-carousel-react": "8.0.0-rc22",
@@ -47,7 +47,7 @@
     "stylelint": "^16.2.1",
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-scss": "^6.1.0",
-    "vite": "5.0.12",
+    "vite": "5.1.0",
     "vite-plugin-progress": "^0.0.7"
   },
   "scripts": {

pnpm-lock.yaml

@@ -26,8 +26,8 @@ dependencies:
     specifier: ^2.0.1
     version: 2.0.1(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
   '@mui/material':
-    specifier: 5.15.7
+    specifier: 5.15.9
-    version: 5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0)
+    version: 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0)
   '@sentry/react':
     specifier: ^7.100.1
     version: 7.100.1(react@18.2.0)
@@ -74,7 +74,7 @@ devDependencies:
     version: 0.0.2
   '@vitejs/plugin-react-swc':
     specifier: ^3.6.0
-    version: 3.6.0(vite@5.0.12)
+    version: 3.6.0(vite@5.1.0)
   adm-zip:
     specifier: ^0.5.10
     version: 0.5.10
@@ -106,11 +106,11 @@ devDependencies:
     specifier: ^6.1.0
     version: 6.1.0(stylelint@16.2.1)
   vite:
-    specifier: 5.0.12
+    specifier: 5.1.0
-    version: 5.0.12(@types/node@20.11.16)(sass@1.70.0)
+    version: 5.1.0(@types/node@20.11.16)(sass@1.70.0)
   vite-plugin-progress:
     specifier: ^0.0.7
-    version: 0.0.7(vite@5.0.12)
+    version: 0.0.7(vite@5.1.0)
 
 packages:
 
@@ -2227,8 +2227,8 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@mui/base@5.0.0-beta.34(react-dom@18.2.0)(react@18.2.0):
+  /@mui/base@5.0.0-beta.36(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-e2mbTGTtReD/y5RFwnhkl1Tgl3XwgJhY040IlfkTVaU9f5LWrVhEnpRsYXu3B1CtLrwiWs4cu7aMHV9yRd4jpw==}
+    resolution: {integrity: sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -2241,7 +2241,7 @@ packages:
       '@babel/runtime': 7.23.9
       '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0)
       '@mui/types': 7.2.13
-      '@mui/utils': 5.15.8(react@18.2.0)
+      '@mui/utils': 5.15.9(react@18.2.0)
       '@popperjs/core': 2.11.8
       clsx: 2.1.0
       prop-types: 15.8.1
@@ -2249,12 +2249,12 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@mui/core-downloads-tracker@5.15.8:
+  /@mui/core-downloads-tracker@5.15.9:
-    resolution: {integrity: sha512-W6R1dZJgbYfLmQKf7Es2WUw0pkDkEVUf2jA22DYu0JOa9M3pjvOqoC9HgOPGNNJTu6SCWLSWh3euv1Jn2NmeQA==}
+    resolution: {integrity: sha512-CSDpVevGaxsvMkiYBZ8ztki1z/eT0mM2MqUT21eCRiMz3DU4zQw5rXG5ML/yTuJF9Z2Wv9SliIeaRAuSR/9Nig==}
     dev: false
 
-  /@mui/material@5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0):
+  /@mui/material@5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-l6+AiKZH3iOJmZCnlpel8ghYQe9Lq0BEuKP8fGj3g5xz4arO9GydqYAtLPMvuHKtArj8lJGNuT2yHYxmejincA==}
+    resolution: {integrity: sha512-kbHTZDcFmN8GHKzRpImUEl9AJfFWI/0Kl+DsYVT3kHzQWUuHiKm3uHXR1RCOqr7H8IgHFPdbxItmCSQ/mj7zgg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -2273,11 +2273,11 @@ packages:
       '@babel/runtime': 7.23.9
       '@emotion/react': 11.11.3(react@18.2.0)
       '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(react@18.2.0)
-      '@mui/base': 5.0.0-beta.34(react-dom@18.2.0)(react@18.2.0)
+      '@mui/base': 5.0.0-beta.36(react-dom@18.2.0)(react@18.2.0)
-      '@mui/core-downloads-tracker': 5.15.8
+      '@mui/core-downloads-tracker': 5.15.9
-      '@mui/system': 5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@mui/system': 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
       '@mui/types': 7.2.13
-      '@mui/utils': 5.15.8(react@18.2.0)
+      '@mui/utils': 5.15.9(react@18.2.0)
       '@types/react-transition-group': 4.4.10
       clsx: 2.1.0
       csstype: 3.1.3
@@ -2288,8 +2288,8 @@ packages:
       react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
     dev: false
 
-  /@mui/private-theming@5.15.8(react@18.2.0):
+  /@mui/private-theming@5.15.9(react@18.2.0):
-    resolution: {integrity: sha512-HMDPO416iMZPqs8nGUL3GJMDNpJtE1Uefw/Aw+zTKJHX5JnT+Bms41e2065BUT/zR5dYcKjFP4gQMwW5QX7nvA==}
+    resolution: {integrity: sha512-/aMJlDOxOTAXyp4F2rIukW1O0anodAMCkv1DfBh/z9vaKHY3bd5fFf42wmP+0GRmwMinC5aWPpNfHXOED1fEtg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -2299,13 +2299,13 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.23.9
-      '@mui/utils': 5.15.8(react@18.2.0)
+      '@mui/utils': 5.15.9(react@18.2.0)
       prop-types: 15.8.1
       react: 18.2.0
     dev: false
 
-  /@mui/styled-engine@5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
+  /@mui/styled-engine@5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
-    resolution: {integrity: sha512-31ZKPGsS0OiSwuzi8RWoTiWRdUWXPRiOQkyG9bRYX/zvoYeBXEdbsLEgbryug5mVRsPpvwbH5q/i/t6MkjQ71g==}
+    resolution: {integrity: sha512-NRKtYkL5PZDH7dEmaLEIiipd3mxNnQSO+Yo8rFNBNptY8wzQnQ+VjayTq39qH7Sast5cwHKYFusUrQyD+SS4Og==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.4.1
@@ -2326,8 +2326,8 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@mui/system@5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
+  /@mui/system@5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
-    resolution: {integrity: sha512-BUMJvlz1UqIqDPyrvc+MwjOUkWKskUPAOUuRh2KMAworiXuuUmtIivxSfdGll2ex6RHSylu4yc5dJZByOI8EcQ==}
+    resolution: {integrity: sha512-SxkaaZ8jsnIJ77bBXttfG//LUf6nTfOcaOuIgItqfHv60ZCQy/Hu7moaob35kBb+guxVJnoSZ+7vQJrA/E7pKg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -2345,10 +2345,10 @@ packages:
       '@babel/runtime': 7.23.9
       '@emotion/react': 11.11.3(react@18.2.0)
       '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(react@18.2.0)
-      '@mui/private-theming': 5.15.8(react@18.2.0)
+      '@mui/private-theming': 5.15.9(react@18.2.0)
-      '@mui/styled-engine': 5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@mui/styled-engine': 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
       '@mui/types': 7.2.13
-      '@mui/utils': 5.15.8(react@18.2.0)
+      '@mui/utils': 5.15.9(react@18.2.0)
       clsx: 2.1.0
       csstype: 3.1.3
       prop-types: 15.8.1
@@ -2364,8 +2364,8 @@ packages:
         optional: true
     dev: false
 
-  /@mui/utils@5.15.8(react@18.2.0):
+  /@mui/utils@5.15.9(react@18.2.0):
-    resolution: {integrity: sha512-Q6Z/xSxi1Z6xQ5Qj9p4ZTHudwfrrwFALtU6H1O222pXudg9Qm0zHdiwJQiHT9L6jMIN78ZujEfGHserMoHUrQw==}
+    resolution: {integrity: sha512-yDYfr61bCYUz1QtwvpqYy/3687Z8/nS4zv7lv/ih/6ZFGMl1iolEvxRmR84v2lOYxlds+kq1IVYbXxDKh8Z9sg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -2951,13 +2951,13 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-react-swc@3.6.0(vite@5.0.12):
+  /@vitejs/plugin-react-swc@3.6.0(vite@5.1.0):
     resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==}
     peerDependencies:
       vite: ^4 || ^5
     dependencies:
       '@swc/core': 1.4.0
-      vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0)
+      vite: 5.1.0(@types/node@20.11.16)(sass@1.70.0)
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -6422,7 +6422,7 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-plugin-progress@0.0.7(vite@5.0.12):
+  /vite-plugin-progress@0.0.7(vite@5.1.0):
     resolution: {integrity: sha512-zyvKdcc/X+6hnw3J1HVV1TKrlFKC4Rh8GnDnWG/2qhRXjqytTcM++xZ+SAPnoDsSyWl8O93ymK0wZRgHAoglEQ==}
     engines: {node: '>=14', pnpm: '>=7.0.0'}
     peerDependencies:
@@ -6431,11 +6431,11 @@ packages:
       picocolors: 1.0.0
       progress: 2.0.3
       rd: 2.0.1
-      vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0)
+      vite: 5.1.0(@types/node@20.11.16)(sass@1.70.0)
     dev: true
 
-  /vite@5.0.12(@types/node@20.11.16)(sass@1.70.0):
+  /vite@5.1.0(@types/node@20.11.16)(sass@1.70.0):
-    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
+    resolution: {integrity: sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:

src/components/modals/main/settings/Section.jsx

@@ -1,6 +1,7 @@
 import { MdOutlineKeyboardArrowRight } from 'react-icons/md';
+import React from 'react';
 
-export default function Section({ title, subtitle, icon, onClick }) {
+export default function Section({ title, subtitle, icon, onClick, children }) {
   return (
     <div className="moreSettings" onClick={onClick}>
       <div className="left">
@@ -11,7 +12,7 @@ export default function Section({ title, subtitle, icon, onClick }) {
         </div>
       </div>
       <div className="action">
-        <MdOutlineKeyboardArrowRight />
+      {React.Children.count(children) === 0 ? <MdOutlineKeyboardArrowRight /> : children}
       </div>
     </div>
   );

src/components/modals/main/settings/sections/Quote.jsx

@@ -13,6 +13,8 @@ import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import SettingsItem from '../SettingsItem';
+import Section from '../Section';
+import PreferencesWrapper from '../PreferencesWrapper';
 
 import { toast } from 'react-toastify';
 import EventBus from 'modules/helpers/eventbus';
@@ -94,6 +96,69 @@ export default class QuoteSettings extends PureComponent {
   render() {
     const QUOTE_SECTION = 'modals.main.settings.sections.quote';
 
+    const ButtonOptions = () => {
+      return (
+        <SettingsItem
+          title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
+          subtitle={variables.getMessage('modals.main.settings.sections.quote.buttons.subtitle')}
+        >
+          <Checkbox
+            name="copyButton"
+            text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
+            category="quote"
+          />
+          <Checkbox
+            name="quoteShareButton"
+            text={variables.getMessage('widgets.quote.share')}
+            category="quote"
+          />
+          <Checkbox
+            name="favouriteQuoteEnabled"
+            text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
+            category="quote"
+          />
+        </SettingsItem>
+      );
+    };
+
+    const SourceDropdown = () => {
+      return (
+        <Dropdown
+          name="quoteType"
+          label={variables.getMessage('modals.main.settings.sections.background.type.title')}
+          onChange={(value) => this.setState({ quoteType: value })}
+          category="quote"
+        >
+          {this.marketplaceType()}
+          <option value="api">
+            {variables.getMessage('modals.main.settings.sections.background.type.api')}
+          </option>
+          <option value="custom">{variables.getMessage(`${QUOTE_SECTION}.custom`)}</option>
+        </Dropdown>
+      );
+    };
+
+    const AdditionalOptions = () => {
+      return (
+        <SettingsItem
+          title={variables.getMessage('modals.main.settings.additional_settings')}
+          subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
+          final={true}
+        >
+          <Checkbox
+            name="authorLink"
+            text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
+            element=".other"
+          />
+          <Checkbox
+            name="authorImg"
+            text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
+            element=".other"
+          />
+        </SettingsItem>
+      );
+    };
+
     let customSettings;
     if (this.state.quoteType === 'custom' && this.state.sourceSection === true) {
       customSettings = (
@@ -189,104 +254,28 @@ export default class QuoteSettings extends PureComponent {
             switch={true}
           />
         )}
-        <div className="moreSettings" onClick={() => this.setState({ sourceSection: true })}>
+        {this.state.sourceSection && (
-          <div className="left">
+          <SettingsItem
-            <MdSource />
+            title={variables.getMessage('modals.main.settings.sections.background.source.title')}
-            <div className="content">
+            subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
-              <span className="title">
+            final={true}
-                {variables.getMessage('modals.main.settings.sections.background.source.title')}
+          >
-              </span>
+            <SourceDropdown />
-              <span className="subtitle">
+          </SettingsItem>
-                {variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
+        )}
-              </span>
-            </div>
-          </div>
-          <div className="action">
-            <Dropdown
-              name="quoteType"
-              label={variables.getMessage('modals.main.settings.sections.background.type.title')}
-              onChange={(value) => this.setState({ quoteType: value })}
-              category="quote"
-            >
-              {this.marketplaceType()}
-              <option value="api">
-                {variables.getMessage('modals.main.settings.sections.background.type.api')}
-              </option>
-              <option value="custom">{variables.getMessage(`${QUOTE_SECTION}.custom`)}</option>
-            </Dropdown>
-          </div>
-        </div>
         {!this.state.sourceSection && (
-          <>
+          <PreferencesWrapper setting="quote" zoomSetting="zoomQuote" switch={true}>
-            <SettingsItem
+            <Section
-              title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
+              icon={<MdSource />}
-              subtitle={variables.getMessage(
+              title={variables.getMessage('modals.main.settings.sections.background.source.title')}
-                'modals.main.settings.sections.quote.buttons.subtitle',
+              subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
-              )}
+              onClick={() => this.setState({ sourceSection: true })}
             >
-              <Checkbox
+              <SourceDropdown />
-                name="copyButton"
+            </Section>
-                text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
+            <ButtonOptions />
-                category="quote"
+            <AdditionalOptions />
-              />
+          </PreferencesWrapper>
-              <Checkbox
-                name="quoteShareButton"
-                text={variables.getMessage('widgets.quote.share')}
-                category="quote"
-              />
-              <Checkbox
-                name="favouriteQuoteEnabled"
-                text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
-                category="quote"
-              />
-            </SettingsItem>
-
-            <SettingsItem
-              title={variables.getMessage('modals.main.settings.additional_settings')}
-              subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
-              final={true}
-            >
-              {/*<Dropdown
-                label={variables.getMessage(
-                  'modals.main.settings.sections.background.interval.title',
-                )}
-                name="quotechange"
-                name2="quoteStartTime"
-                value2={Date.now()}
-              >
-                <option value="refresh">{variables.getMessage('tabname')}</option>
-                <option value={10000}>10 seconds</option>
-                <option value={60000}>
-                  {variables.getMessage('modals.main.settings.sections.background.interval.minute')}
-                </option>
-                <option value={1800000}>
-                  {variables.getMessage(
-                    'modals.main.settings.sections.background.interval.half_hour',
-                  )}
-                </option>
-                <option value={3600000}>
-                  {variables.getMessage('modals.main.settings.sections.background.interval.hour')}
-                </option>
-                <option value={86400000}>
-                  {variables.getMessage('modals.main.settings.sections.background.interval.day')}
-                </option>
-                <option value={604800000}>{variables.getMessage('widgets.date.week')}</option>
-                <option value={2628000000}>
-                  {variables.getMessage('modals.main.settings.sections.background.interval.month')}
-                </option>
-                  </Dropdown>*/}
-              <Checkbox
-                name="authorLink"
-                text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
-                element=".other"
-              />
-              <Checkbox
-                name="authorImg"
-                text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
-                element=".other"
-              />
-            </SettingsItem>
-          </>
         )}
         {customSettings}
       </>