feat: add data section to advanced with sync

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/components/modals/main/marketplace/sections/Create.jsx

@@ -16,6 +16,7 @@ import SettingsItem from '../../../main/settings/SettingsItem';
 
 import { saveFile } from 'modules/helpers/settings/modals';
 import InfoTooltip from '../../../../helpers/tooltip/infoTooltip';
+import Tooltip from '../../../../helpers/tooltip/Tooltip';
 
 import FileUpload from '../../settings/FileUpload';
 

src/components/modals/main/settings/sections/advanced/Advanced.jsx

@@ -0,0 +1,158 @@
+import variables from 'modules/variables';
+import { PureComponent } from 'react';
+import Modal from 'react-modal';
+import { MenuItem } from '@mui/material';
+import {
+  MdUpload as ImportIcon,
+  MdDownload as ExportIcon,
+  MdRestartAlt as ResetIcon,
+  MdDataUsage,
+  MdOutlineKeyboardArrowRight,
+} from 'react-icons/md';
+
+import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
+
+import FileUpload from '../../FileUpload';
+import Text from '../../Text';
+import Switch from '../../Switch';
+import ResetModal from '../../ResetModal';
+import Dropdown from '../../Dropdown';
+import SettingsItem from '../../SettingsItem';
+
+import Data from './Data';
+
+import time_zones from 'components/widgets/time/timezones.json';
+
+export default class AdvancedSettings extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      resetModal: false,
+      showData: false,
+    };
+  }
+
+  render() {
+    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+
+    if (this.state.showData) {
+      return <Data goBack={() => this.setState({ showData: false })}/>;
+    }
+
+    return (
+      <>
+        <span className="mainTitle">
+          {getMessage('modals.main.settings.sections.advanced.title')}
+        </span>
+        {localStorage.getItem('welcomePreview') !== 'true' ? (
+          <div className="moreSettings" onClick={() => this.setState({ showData: true })}>
+            <div className="left">
+              <MdDataUsage />
+              <div className="content">
+                <span className="title">
+                  {getMessage('modals.main.settings.sections.advanced.data')}
+                </span>
+                <span className="subtitle">
+                  Sync, export, import etc your data. You have control, this is Mue.
+                </span>
+              </div>
+            </div>
+            <div className="action">
+              {' '}
+              <MdOutlineKeyboardArrowRight />
+            </div>
+          </div>
+        ) : null}
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.advanced.offline_mode')}
+          subtitle="When enabled, all requests to online services will be disabled."
+        >
+          <Switch name="offlineMode" element=".other" />
+        </SettingsItem>
+        {/*
+        {localStorage.getItem('welcomePreview') !== 'true' ? (
+          <div className="settingsRow">
+            <div className="content">
+              <span className="title">
+                {getMessage('modals.main.settings.sections.advanced.data')}
+              </span>
+              <span className="subtitle">
+                Choose whether to export your Mue settings to your computer, import an existing
+                settings file, or reset your settings to their default values.
+              </span>
+            </div>
+            <div className="action activityButtons">
+              <button onClick={() => this.setState({ resetModal: true })}>
+                {getMessage('modals.main.settings.buttons.reset')}
+                <ResetIcon />
+              </button>
+              <button onClick={() => exportSettings()}>
+                {getMessage('modals.main.settings.buttons.export')}
+                <ExportIcon />
+              </button>
+              <button onClick={() => document.getElementById('file-input').click()}>
+                {getMessage('modals.main.settings.buttons.import')}
+                <ImportIcon />
+              </button>
+            </div>
+          </div>
+        ) : null}
+        */}
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.advanced.timezone.title')}
+          subtitle="Choose a timezone from a list instead of the automatic default from your computer."
+        >
+          <Dropdown name="timezone" category="timezone" manual={true}>
+            <MenuItem value="auto">
+              {getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
+            </MenuItem>
+            {time_zones.map((timezone) => (
+              <MenuItem value={timezone} key={timezone}>
+                {timezone}
+              </MenuItem>
+            ))}
+          </Dropdown>
+        </SettingsItem>
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.advanced.tab_name')}
+          subtitle="Change the name of the tab that appears in your browser."
+        >
+          <Text name="tabName" default={getMessage('tabname')} category="other" />
+        </SettingsItem>
+        <FileUpload
+          id="file-input"
+          accept="application/json"
+          type="settings"
+          loadFunction={(e) => importSettings(e)}
+        />
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.advanced.custom_css')}
+          subtitle="Make Mue's styling customised to you with Cascading Style Sheets (CSS)."
+        >
+          <Text name="customcss" textarea={true} category="other" />
+        </SettingsItem>
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.experimental.title')}
+          subtitle={getMessage('modals.main.settings.sections.advanced.experimental_warning')}
+          final={true}
+        >
+          <Switch
+            name="experimental"
+            text={getMessage('modals.main.settings.enabled')}
+            element=".other"
+          />
+        </SettingsItem>
+        <Modal
+          closeTimeoutMS={100}
+          onRequestClose={() => this.setState({ resetModal: false })}
+          isOpen={this.state.resetModal}
+          className="Modal resetmodal mainModal"
+          overlayClassName="Overlay resetoverlay"
+          ariaHideApp={false}
+        >
+          <ResetModal modalClose={() => this.setState({ resetModal: false })} />
+        </Modal>
+      </>
+    );
+  }
+}

src/components/modals/main/settings/sections/advanced/Data.jsx

@@ -0,0 +1,59 @@
+import variables from 'modules/variables';
+import SettingsItem from '../../SettingsItem';
+import { PureComponent } from 'react';
+import {
+  MdOutlineKeyboardArrowRight,
+  MdUpload as ImportIcon,
+  MdDownload as ExportIcon,
+  MdRestartAlt as ResetIcon,
+  MdOutlineSync,
+} from 'react-icons/md';
+
+export default class Data extends PureComponent {
+  render() {
+    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+
+    return (
+      <>
+        <span className="mainTitle"  onClick={() => this.props.goBack()}>
+          {getMessage('modals.main.settings.sections.advanced.title')}
+          <MdOutlineKeyboardArrowRight /> Data
+        </span>
+        <div className='moreSettings' style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', gap: '10px', padding: '30px'}}>
+            <MdOutlineSync />
+            <span className='title'>Sync</span>
+            {/*<span className='subtitle'>Last synced at: Sun 10:12PM, 1st May 2022</span>*/}
+            <span className='subtitle'>Sync is not setup yet.</span>
+        </div>
+        <div className="settingsRow">
+          <div className="content">
+            <span className="title">
+              {getMessage('modals.main.settings.sections.advanced.data')}
+            </span>
+            <span className="subtitle">
+              Choose whether to export your Mue settings to your computer, import an existing
+              settings file, or reset your settings to their default values.
+            </span>
+          </div>
+          <div className="action activityButtons">
+            <button>
+              {getMessage('modals.main.settings.buttons.reset')}
+              <ResetIcon />
+            </button>
+            <button>
+              {getMessage('modals.main.settings.buttons.export')}
+              <ExportIcon />
+            </button>
+            <button>
+              {getMessage('modals.main.settings.buttons.import')}
+              <ImportIcon />
+            </button>
+          </div>
+        </div>
+        <SettingsItem title='Sync' subtitle='Setup sync to sync lol'>
+            
+        </SettingsItem>
+      </>
+    );
+  }
+}

src/components/modals/main/settings/sections/background/Background.jsx

@@ -208,6 +208,18 @@ export default class BackgroundSettings extends PureComponent {
       this.state.backgroundType !== 'random_colour' &&
       this.state.backgroundType !== 'random_gradient';
 
+    const breadcrumb = (name, toSet) => (
+      <div className="breadcrumb">
+      <div onClick={() => this.setState({ [toSet]: false })}>
+        <Tooltip title="back" key="backArrow">
+          <MdArrowBack />
+        </Tooltip>
+      </div>
+      <span className="subtitle">{name}</span>
+    </div>
+    );
+
+
     return (
       <>
         <Header
@@ -217,28 +229,12 @@ export default class BackgroundSettings extends PureComponent {
           element="#backgroundImage"
         />
         {this.state.effects ? (
-          <>
-            <div className="breadcrumb">
-              <div onClick={() => this.setState({ effects: false })}>
-                <Tooltip title="back" key="backArrow">
-                  <MdArrowBack />
-                </Tooltip>
-              </div>
-              <span className="subtitle">effects</span>
-            </div>
-          </>
+          breadcrumb('Effects', 'effects')
         ) : null}
         {this.state.backgroundSettingsSection ? (
-          <div className="breadcrumb">
-            <div onClick={() => this.setState({ backgroundSettingsSection: false })}>
-              <Tooltip title="back" key="backArrow">
-                <MdArrowBack />
-              </Tooltip>
-            </div>
-            <span className="subtitle">Source</span>
-          </div>
+          breadcrumb('Source', 'backgroundSettingsSection')
         ) : null}
-        {(this.state.backgroundSettingsSection !== true && this.state.effects !== true) ? (
+        {this.state.backgroundSettingsSection !== true && this.state.effects !== true ? (
           <>
             <div
               className="moreSettings"
@@ -293,7 +289,10 @@ export default class BackgroundSettings extends PureComponent {
                   <span className="subtitle">Add effects to the background image</span>
                 </div>
               </div>
-              <div className="action"></div>
+              <div className="action">
+                {' '}
+                <MdOutlineKeyboardArrowRight />
+              </div>
             </div>
           </>
         ) : null}

src/components/modals/main/tabs/Settings.jsx

@@ -15,7 +15,7 @@ import Weather from '../settings/sections/Weather';
 import Order from '../settings/sections/Order';
 import Appearance from '../settings/sections/Appearance';
 import Language from '../settings/sections/Language';
-import Advanced from '../settings/sections/Advanced';
+import Advanced from '../settings/sections/advanced/Advanced';
 //import Keybinds from '../settings/sections/Keybinds';
 import Stats from '../settings/sections/Stats';
 import Experimental from '../settings/sections/Experimental';

src/components/widgets/reminder/Reminder.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 import './reminder.scss';
 import Tooltip from '../../helpers/tooltip/Tooltip';
 import { MdClose, MdSnooze, MdWork } from 'react-icons/md';
 
-export default class Reminder extends React.PureComponent {
+export default class Reminder extends PureComponent {
   render() {
     return (
       <div className="reminder">