refactor: better organise options orders

src/features/misc/sections/Advanced.jsx

@@ -7,6 +7,7 @@ import {
   MdRestartAlt as ResetIcon,
   MdDataUsage,
   MdError,
+  MdBrush,
 } from 'react-icons/md';
 
 import { exportSettings, importSettings } from 'utils/settings';
@@ -14,7 +15,14 @@ import { exportSettings, importSettings } from 'utils/settings';
 import { FileUpload, Text, Switch, Dropdown } from 'components/Form/Settings';
 import { ResetModal, Button } from 'components/Elements';
 
-import { Header, Section, Row, Content, Action } from 'components/Layout/Settings';
+import {
+  Header,
+  Section,
+  Row,
+  Content,
+  Action,
+  PreferencesWrapper,
+} from 'components/Layout/Settings';
 import { useTab } from 'components/Elements/MainModal/backend/TabContext';
 
 import time_zones from 'features/time/timezones.json';
@@ -63,14 +71,10 @@ function AdvancedOptions() {
             <MdError />
 
             <span className="title">
-              {variables.getMessage(
-                'settings:sections.advanced.preview_data_disabled.title',
-              )}
+              {variables.getMessage('settings:sections.advanced.preview_data_disabled.title')}
             </span>
             <span className="subtitle">
-              {variables.getMessage(
-                'settings:sections.advanced.preview_data_disabled.description',
-              )}
+              {variables.getMessage('settings:sections.advanced.preview_data_disabled.description')}
             </span>
           </div>
         </div>
@@ -94,8 +98,8 @@ function AdvancedOptions() {
 
   return (
     <>
-      {header}
-      {subSection === "data" ? (
+      {/*{header}*/}
+      {subSection === 'data' && (
         <>
           <Data />
           <Modal
@@ -109,87 +113,82 @@ function AdvancedOptions() {
             <ResetModal modalClose={() => setResetModal(false)} />
           </Modal>
         </>
-      ) : (
+      )}
+      {subSection === 'custom-css' && (
+        <PreferencesWrapper>
+          <span className="text-3xl font-semibold tracking-tight">
+            {variables.getMessage('settings:sections.advanced.custom_css')}
+          </span>
+          <Text name="customcss" textarea={true} category="other" customcss={true} />
+        </PreferencesWrapper>
+      )}
+      {subSection === '' && (
         <>
           <Section
             id="data"
             title={variables.getMessage(`${ADVANCED_SECTION}.data`)}
             subtitle={variables.getMessage(`${ADVANCED_SECTION}.data_subtitle`)}
-            onClick={() => setData(true)}
             icon={<MdDataUsage />}
           />
-          <Row>
-            <Content
-              title={variables.getMessage('settings:sections.advanced.offline_mode')}
-              subtitle={variables.getMessage(
-                'settings:sections.advanced.offline_subtitle',
-              )}
-            />
-            <Action>
-              <Switch name="offlineMode" element=".other" />
-            </Action>
-          </Row>
+          <Section
+            id="custom-css"
+            title={variables.getMessage('settings:sections.advanced.custom_css')}
+            subtitle={variables.getMessage('settings:sections.advanced.custom_css_subtitle')}
+            icon={<MdBrush />}
+          />
+          <PreferencesWrapper>
+            <Row>
+              <Content
+                title={variables.getMessage('settings:sections.advanced.offline_mode')}
+                subtitle={variables.getMessage('settings:sections.advanced.offline_subtitle')}
+              />
+              <Action>
+                <Switch name="offlineMode" element=".other" />
+              </Action>
+            </Row>
 
-          <Row>
-            <Content
-              title={variables.getMessage('settings:sections.advanced.timezone.title')}
-              subtitle={variables.getMessage(
-                'settings:sections.advanced.timezone.subtitle',
-              )}
-            />
-            <Action>
-              <Dropdown
-                name="timezone"
-                category="timezone"
-                items={[
-                  {
-                    value: 'auto',
-                    text: variables.getMessage(
-                      'settings:sections.advanced.timezone.automatic',
-                    ),
-                  },
-                  ...time_zones.map((timezone) => ({ value: timezone, text: timezone })),
-                ]}
+            <Row>
+              <Content
+                title={variables.getMessage('settings:sections.advanced.timezone.title')}
+                subtitle={variables.getMessage('settings:sections.advanced.timezone.subtitle')}
               />
-            </Action>
-          </Row>
-          <Row>
-            <Content
-              title={variables.getMessage('settings:sections.advanced.tab_name')}
-              subtitle={variables.getMessage(
-                'settings:sections.advanced.tab_name_subtitle',
-              )}
-            />
-            <Action>
-              <Text name="tabName" default={variables.getMessage('tabname')} category="other" />
-            </Action>
-          </Row>
-          <Row>
-            <Content
-              title={variables.getMessage('settings:sections.advanced.custom_css')}
-              subtitle={variables.getMessage(
-                'settings:sections.advanced.custom_css_subtitle',
-              )}
-            />
-            <Action>
-              <Text name="customcss" textarea={true} category="other" customcss={true} />
-            </Action>
-          </Row>
-          <Row final={true}>
-            <Content
-              title={variables.getMessage('settings:sections.experimental.title')}
-              subtitle={variables.getMessage(
-                'settings:sections.advanced.experimental_warning',
-              )}
-            />
-            <Action>
-              <Switch
-                name="experimental"
-                text={variables.getMessage('settings:enabled')}
-                element=".other"
+              <Action>
+                <Dropdown
+                  name="timezone"
+                  category="timezone"
+                  items={[
+                    {
+                      value: 'auto',
+                      text: variables.getMessage('settings:sections.advanced.timezone.automatic'),
+                    },
+                    ...time_zones.map((timezone) => ({ value: timezone, text: timezone })),
+                  ]}
+                />
+              </Action>
+            </Row>
+            <Row>
+              <Content
+                title={variables.getMessage('settings:sections.advanced.tab_name')}
+                subtitle={variables.getMessage('settings:sections.advanced.tab_name_subtitle')}
               />
-            </Action>
-          </Row>
+              <Action>
+                <Text name="tabName" default={variables.getMessage('tabname')} category="other" />
+              </Action>
+            </Row>
+            <Row final={true}>
+              <Content
+                title={variables.getMessage('settings:sections.experimental.title')}
+                subtitle={variables.getMessage('settings:sections.advanced.experimental_warning')}
+              />
+              <Action>
+                <Switch
+                  name="experimental"
+                  text={variables.getMessage('settings:enabled')}
+                  element=".other"
+                />
+              </Action>
+            </Row>
+          </PreferencesWrapper>
         </>
       )}
     </>

src/features/misc/sections/Appearance.jsx

@@ -3,7 +3,14 @@ import { memo, useState } from 'react';
 import variables from 'config/variables';
 
 import { Checkbox, Dropdown, Radio, Slider, Text } from 'components/Form/Settings';
-import { Header, Section, Row, Content, Action } from 'components/Layout/Settings';
+import {
+  Header,
+  Section,
+  Row,
+  Content,
+  Action,
+  PreferencesWrapper,
+} from 'components/Layout/Settings';
 import { useTab } from 'components/Elements/MainModal/backend/TabContext';
 
 import { MdAccessibility } from 'react-icons/md';
@@ -19,9 +26,7 @@ function AppearanceOptions() {
       <Row>
         <Content
           title={variables.getMessage('settings:sections.appearance.theme.title')}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.theme.description',
-          )}
+          subtitle={variables.getMessage('settings:sections.appearance.theme.description')}
         />
         <Action>
           <Radio
@@ -53,9 +58,7 @@ function AppearanceOptions() {
       <Row>
         <Content
           title={variables.getMessage('settings:sections.appearance.font.title')}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.font.description',
-          )}
+          subtitle={variables.getMessage('settings:sections.appearance.font.description')}
         />
         <Action>
           <Checkbox
@@ -71,9 +74,7 @@ function AppearanceOptions() {
           />
           {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
           <Dropdown
-            label={variables.getMessage(
-              'settings:sections.appearance.font.weight.title',
-            )}
+            label={variables.getMessage('settings:sections.appearance.font.weight.title')}
             name="fontweight"
             category="other"
             items={[
@@ -112,29 +113,21 @@ function AppearanceOptions() {
             ]}
           />
           <Dropdown
-            label={variables.getMessage(
-              'settings:sections.appearance.font.style.title',
-            )}
+            label={variables.getMessage('settings:sections.appearance.font.style.title')}
             name="fontstyle"
             category="other"
             items={[
               {
                 value: 'normal',
-                text: variables.getMessage(
-                  'settings:sections.appearance.font.style.normal',
-                ),
+                text: variables.getMessage('settings:sections.appearance.font.style.normal'),
               },
               {
                 value: 'italic',
-                text: variables.getMessage(
-                  'settings:sections.appearance.font.style.italic',
-                ),
+                text: variables.getMessage('settings:sections.appearance.font.style.italic'),
               },
               {
                 value: 'oblique',
-                text: variables.getMessage(
-                  'settings:sections.appearance.font.style.oblique',
-                ),
+                text: variables.getMessage('settings:sections.appearance.font.style.oblique'),
               },
             ]}
           />
@@ -148,9 +141,7 @@ function AppearanceOptions() {
       <Row final={true}>
         <Content
           title={variables.getMessage('settings:sections.appearance.style.title')}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.style.description',
-          )}
+          subtitle={variables.getMessage('settings:sections.appearance.style.description')}
         />
         <Action>
           <Radio
@@ -177,12 +168,8 @@ function AppearanceOptions() {
     return (
       <Row final={true}>
         <Content
-          title={variables.getMessage(
-            'settings:sections.appearance.accessibility.title',
-          )}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.accessibility.description',
-          )}
+          title={variables.getMessage('settings:sections.appearance.accessibility.title')}
+          subtitle={variables.getMessage('settings:sections.appearance.accessibility.description')}
         />
         <Action>
           <Dropdown
@@ -213,9 +200,7 @@ function AppearanceOptions() {
             ]}
           />
           <Checkbox
-            text={variables.getMessage(
-              'settings:sections.appearance.accessibility.animations',
-            )}
+            text={variables.getMessage('settings:sections.appearance.accessibility.animations')}
             name="animations"
             category="other"
           />
@@ -230,10 +215,7 @@ function AppearanceOptions() {
             max="5000"
             marks={values.toast}
             display={
-              ' ' +
-              variables.getMessage(
-                'settings:sections.appearance.accessibility.milliseconds',
-              )
+              ' ' + variables.getMessage('settings:sections.appearance.accessibility.milliseconds')
             }
           />
         </Action>
@@ -246,42 +228,37 @@ function AppearanceOptions() {
     header = (
       <Header
         title={variables.getMessage('settings:sections.appearance.title')}
-        secondaryTitle={variables.getMessage(
-          'settings:sections.appearance.accessibility.title',
-        )}
+        secondaryTitle={variables.getMessage('settings:sections.appearance.accessibility.title')}
         goBack={() => setAccessibility(false)}
         report={false}
       />
     );
   } else {
     header = (
-      <Header
-        title={variables.getMessage('settings:sections.appearance.title')}
-        report={false}
-      />
+      <Header title={variables.getMessage('settings:sections.appearance.title')} report={false} />
     );
   }
   return (
     <>
       {header}
-      {subSection === "accessibility" ? (
+      {subSection === 'accessibility' ? (
         <AccessibilityOptions />
       ) : (
         <>
           <Section
             id="accessibility"
-            title={variables.getMessage(
-              'settings:sections.appearance.accessibility.title',
-            )}
+            title={variables.getMessage('settings:sections.appearance.accessibility.title')}
             subtitle={variables.getMessage(
               'settings:sections.appearance.accessibility.description',
             )}
             icon={<MdAccessibility />}
             onClick={() => setAccessibility(true)}
           />
-          <ThemeSelection />
-          <FontOptions />
-          <WidgetStyle />
+          <PreferencesWrapper>
+            <ThemeSelection />
+            <FontOptions />
+            <WidgetStyle />
+          </PreferencesWrapper>
         </>
       )}
     </>

src/features/misc/sections/Language.jsx

@@ -4,8 +4,9 @@ import { useState, useEffect } from 'react';
 import { MdOutlineOpenInNew } from 'react-icons/md';
 import { Radio } from 'components/Form/Settings';
 import { languages } from 'lib/i18n';
+import { PreferencesWrapper } from 'components/Layout';
 
-const options = languages.map(id => {
+const options = languages.map((id) => {
   const native = new Intl.DisplayNames([id], { type: 'language' });
   // const current = new Intl.DisplayNames([variables.locale_id], { type: 'language' });
   const current = new Intl.DisplayNames([localStorage.getItem('language')], { type: 'language' });
@@ -14,8 +15,8 @@ const options = languages.map(id => {
     subname: current.of(id),
     value: id,
   };
-})
-console.log(options)
+});
+console.log(options);
 
 function LanguageOptions() {
   const [quoteLanguages, setQuoteLanguages] = useState([
@@ -43,7 +44,7 @@ function LanguageOptions() {
   }, []);
 
   return (
-    <>
+    <PreferencesWrapper>
       <div className="modalHeader">
         <span className="mainTitle">
           {variables.getMessage('settings:sections.language.title')}
@@ -63,9 +64,7 @@ function LanguageOptions() {
       <div className="languageSettings">
         <Radio name="language" options={options} element=".other" />
       </div>
-      <span className="mainTitle">
-        {variables.getMessage('settings:sections.language.quote')}
-      </span>
+      {/*<span className="mainTitle">{variables.getMessage('settings:sections.language.quote')}</span>
       <div className="languageSettings">
         <Radio
           name="quoteLanguage"
@@ -75,8 +74,8 @@ function LanguageOptions() {
           defaultValue={quoteLanguages[0].name}
           category="quote"
         />
-      </div>
-    </>
+      </div>*/}
+    </PreferencesWrapper>
   );
 }
 

src/features/misc/sections/Overview.jsx

@@ -14,6 +14,7 @@ import Message from './overview_skeletons/Message';
 import EventBus from 'utils/eventbus';
 
 import defaults from 'config/default';
+import { PreferencesWrapper } from 'components/Layout';
 
 const widget_name = {
   greeting: variables.getMessage('settings:sections.greeting.title'),
@@ -31,15 +32,13 @@ const SortableItem = sortableElement(({ value }) => (
   </li>
 ));
 
-
 const SortableContainer = sortableContainer(({ children }) => (
   <ul className="sortableContainer">{children}</ul>
 ));
 
 const Overview = () => {
   const [items, setItems] = useState(
-    () =>
-      JSON.parse(localStorage.getItem('order')) || defaults.order
+    () => JSON.parse(localStorage.getItem('order')) || defaults.order,
   );
 
   const arrayMove = (array, oldIndex, newIndex) => {
@@ -94,10 +93,8 @@ const Overview = () => {
   }, [items]);
 
   return (
-    <>
-      <span className="mainTitle">
-        {variables.getMessage('marketplace:product.overview')}
-      </span>
+    <PreferencesWrapper>
+      <span className="mainTitle">{variables.getMessage('marketplace:product.overview')}</span>
       <div className="overviewGrid">
         <div>
           <span className="title">{variables.getMessage('welcome:buttons.preview')}</span>
@@ -117,9 +114,7 @@ const Overview = () => {
           </div>
         </div>
         <div>
-          <span className="title">
-            {variables.getMessage('settings:sections.order.title')}
-          </span>
+          <span className="title">{variables.getMessage('settings:sections.order.title')}</span>
           <SortableContainer
             onSortEnd={onSortEnd}
             lockAxis="y"
@@ -135,7 +130,7 @@ const Overview = () => {
           </SortableContainer>
         </div>
       </div>
-    </>
+    </PreferencesWrapper>
   );
 };