refactor: Move misc options to different folder

src/features/misc/sections/About.jsx

@@ -8,7 +8,7 @@ import { BiDonateHeart } from 'react-icons/bi';
 import { Tooltip } from 'components/Elements';
 import other_contributors from 'utils/data/other_contributors.json';
 
-export default class About extends PureComponent {
+class About extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -379,3 +379,5 @@ export default class About extends PureComponent {
     );
   }
 }
+
+export { About as default, About };

src/features/misc/sections/Advanced.jsx

@@ -17,7 +17,7 @@ import { Header, Section, Row, Content, Action } from 'components/Layout/Setting
 
 import time_zones from 'features/time/timezones.json';
 
-export default function AdvancedSettings() {
+function AdvancedOptions() {
   const [resetModal, setResetModal] = useState(false);
   const [data, setData] = useState(false);
   const ADVANCED_SECTION = 'modals.main.settings.sections.advanced';
@@ -179,3 +179,5 @@ export default function AdvancedSettings() {
     </>
   );
 }
+
+export { AdvancedOptions as default, AdvancedOptions };

src/features/misc/sections/Appearance.jsx

@@ -9,7 +9,7 @@ import { MdAccessibility } from 'react-icons/md';
 
 import values from 'utils/data/slider_values.json';
 
-function AppearanceSettings() {
+function AppearanceOptions() {
   const [accessibility, setAccessibility] = useState(false);
 
   const ThemeSelection = () => {
@@ -285,4 +285,5 @@ function AppearanceSettings() {
   );
 }
 
-export default memo(AppearanceSettings);
+const MemoizedAppearanceOptions = memo(AppearanceOptions);
+export { MemoizedAppearanceOptions as default, MemoizedAppearanceOptions as AppearanceOptions };

src/features/misc/sections/Changelog.jsx

@@ -3,9 +3,9 @@ import { PureComponent, createRef } from 'react';
 import { MdOutlineWifiOff } from 'react-icons/md';
 import Modal from 'react-modal';
 
-import Lightbox from '../../../../../marketplace/components/Elements/Lightbox/Lightbox';
+import Lightbox from '../../marketplace/components/Elements/Lightbox/Lightbox';
 
-export default class Changelog extends PureComponent {
+class Changelog extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -158,3 +158,5 @@ export default class Changelog extends PureComponent {
     );
   }
 }
+
+export { Changelog as default, Changelog };

src/features/misc/sections/Experimental.jsx

@@ -1,19 +1,15 @@
 import variables from 'config/variables';
 import { useState, memo } from 'react';
-import Checkbox from '../../../../../../components/Form/Settings/Checkbox/Checkbox';
-import Slider from '../../../../../../components/Form/Settings/Slider/Slider';
+import Checkbox from '../../../components/Form/Settings/Checkbox/Checkbox';
+import Slider from '../../../components/Form/Settings/Slider/Slider';
 import { TextField } from '@mui/material';
 
 import EventBus from 'utils/eventbus';
 import values from 'utils/data/slider_values.json';
 
-import {
-  Row,
-  Content,
-  Action,
-} from '../../../../../../components/Layout/Settings/Item/SettingsItem';
+import { Row, Content, Action } from '../../../components/Layout/Settings/Item/SettingsItem';
 
-function ExperimentalSettings() {
+function ExperimentalOptions() {
   const [eventType, setEventType] = useState();
   const [eventName, setEventName] = useState();
 
@@ -79,4 +75,8 @@ function ExperimentalSettings() {
   );
 }
 
-export default memo(ExperimentalSettings);
+const MemoizedExperimentalOptions = memo(ExperimentalOptions);
+export {
+  MemoizedExperimentalOptions as default,
+  MemoizedExperimentalOptions as ExperimentalOptions,
+};

src/features/misc/sections/Language.jsx

@@ -7,7 +7,7 @@ import { Radio } from 'components/Form/Settings';
 
 import languages from '@/i18n/languages.json';
 
-export default class LanguageSettings extends PureComponent {
+class LanguageOptions extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -109,3 +109,5 @@ export default class LanguageSettings extends PureComponent {
     );
   }
 }
+
+export { LanguageOptions as default, LanguageOptions };

src/features/misc/sections/Overview.jsx

@@ -33,7 +33,7 @@ const SortableContainer = sortableContainer(({ children }) => (
   <ul className="sortablecontainer">{children}</ul>
 ));
 
-export default class OrderSettings extends PureComponent {
+class Overview extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -193,3 +193,5 @@ export default class OrderSettings extends PureComponent {
     );
   }
 }
+
+export { Overview as default, Overview };

src/features/misc/sections/Stats.jsx

@@ -12,7 +12,7 @@ import { saveFile } from 'utils/saveFile';
 
 import { translations, achievements } from 'utils/achievements';
 
-export default class Stats extends PureComponent {
+class Stats extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -224,3 +224,5 @@ export default class Stats extends PureComponent {
     );
   }
 }
+
+export { Stats as default, Stats };

src/features/misc/sections/index.jsx

@@ -0,0 +1,8 @@
+export * from './About';
+export * from './Advanced';
+export * from './Appearance';
+export * from './Changelog';
+export * from './Experimental';
+export * from './Language';
+export * from './Overview';
+export * from './Stats';

src/features/misc/views/Settings.jsx

@@ -1,9 +1,8 @@
 import variables from 'config/variables';
 import { memo } from 'react';
 
-import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
+import Tabs from 'components/Elements/MainModal/backend/Tabs';
 
-import Overview from '../modals/main/settings/sections/Overview';
 import { NavbarOptions } from 'features/navbar';
 import { GreetingOptions } from 'features/greeting';
 import { TimeOptions, DateOptions } from 'features/time';
@@ -13,13 +12,16 @@ import { MessageOptions } from 'features/message';
 import { BackgroundOptions } from 'features/background';
 import { SearchOptions } from 'features/search';
 import { WeatherOptions } from 'features/weather';
-import Appearance from '../modals/main/settings/sections/Appearance';
-import Language from '../modals/main/settings/sections/Language';
-import Advanced from '../modals/main/settings/sections/Advanced';
-import Stats from '../modals/main/settings/sections/Stats';
-import Experimental from '../modals/main/settings/sections/Experimental';
-import Changelog from '../modals/main/settings/sections/Changelog';
-import About from '../modals/main/settings/sections/About';
+import {
+  About,
+  AdvancedOptions,
+  AppearanceOptions,
+  Changelog,
+  ExperimentalOptions,
+  LanguageOptions,
+  Overview,
+  Stats,
+} from '../sections';
 
 const sections = [
   { label: 'modals.main.marketplace.product.overview', name: 'order', component: Overview },
@@ -60,15 +62,23 @@ const sections = [
   {
     label: 'modals.main.settings.sections.appearance.title',
     name: 'appearance',
-    component: Appearance,
+    component: AppearanceOptions,
+  },
+  {
+    label: 'modals.main.settings.sections.language.title',
+    name: 'language',
+    component: LanguageOptions,
+  },
+  {
+    label: 'modals.main.settings.sections.advanced.title',
+    name: 'advanced',
+    component: AdvancedOptions,
   },
-  { label: 'modals.main.settings.sections.language.title', name: 'language', component: Language },
-  { label: 'modals.main.settings.sections.advanced.title', name: 'advanced', component: Advanced },
   { label: 'modals.main.settings.sections.stats.title', name: 'stats', component: Stats },
   {
     label: 'modals.main.settings.sections.experimental.title',
     name: 'experimental',
-    component: Experimental,
+    component: ExperimentalOptions,
   },
   {
     label: 'modals.main.settings.sections.changelog.title',