advanced + experimental tabs (unfinished)

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

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import Checkbox from '../Checkbox';
+import FileUpload from '../FileUpload';
+
+import SettingsFunctions from '../../../../modules/helpers/settings';
+
+import { toast } from 'react-toastify';
+
+export default class AdvancedSettings extends React.PureComponent {
+    resetItem() {
+        document.getElementById('customcss').value = '';
+        toast(this.props.toastLanguage.reset);
+    }
+    
+    componentDidMount() {
+        document.getElementById('customcss').value = localStorage.getItem('customcss');
+    }
+    
+    settingsImport(e) {
+        const content = JSON.parse(e.target.result);
+    
+        for (const key of Object.keys(content)) {
+          localStorage.setItem(key, content[key]);
+        }
+    
+        toast(this.props.toastLanguage.imported);
+    }
+    
+    componentWillUnmount() {
+        localStorage.setItem('customcss', document.getElementById('customcss').value);
+    }
+
+    render() {
+        return (
+            <div>
+                <h2>Advanced</h2>
+                <Checkbox name='offlineMode' text='Offline Mode' />
+                <h3>Data</h3>
+                <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>Reset</button>
+                <button className='export' onClick={() => SettingsFunctions.exportSettings()}>Export</button>
+                <button className='import' onClick={() => document.getElementById('file-input').click()}>Import</button>
+                <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
+                <h3>Customisation</h3>
+                <ul>
+                    <p>Custom CSS <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
+                    <textarea id='customcss'></textarea>
+                </ul>
+                <ul>
+                    <p>Custom JS <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
+                    <textarea id='customjs'></textarea>
+                </ul>
+                <h3>Experimental</h3>
+                <p>Please note that the Mue team cannot provide support if you have experimental mode on. Please disable it first and see if the issues continue to occur before contacting support.</p>
+                <Checkbox name='experimental' text='Enabled' />
+            </div>
+          );
+    }
+}

src/components/modals/settings/sections/Appearance.jsx

@@ -7,10 +7,6 @@ export default function AppearanceSettings (props) {
         <h2>Appearance</h2>
         <Checkbox name='darkTheme' text={props.language.dark} />
         <Checkbox name='brightnessTime' text={props.language.experimental.night_mode} betaFeature={true} />
-        <ul>
-            <p>{props.language.custom_css} <span className='modalLink' onClick={() => this.resetItem()}>{props.language.reset}</span> <span className='newFeature'> NEW</span></p>
-            <textarea id='customcss'></textarea>
-        </ul>
         <h3>Accessibility</h3>
         <Checkbox name='animations' text={props.language.experimental.animations} betaFeature={true} />
         <ul>

src/components/modals/settings/sections/Experimental.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Checkbox from '../Checkbox';
+
+export default function ExperimentalSettings (props) {
+  return (
+    <div>
+
+    </div>
+  );
+}

src/components/modals/tabs/Settings.jsx

@@ -8,6 +8,7 @@ import Time from '../settings/sections/Time';
 import Quote from '../settings/sections/Quote';
 import Appearance from '../settings/sections/Appearance';
 import Background from '../settings/sections/Background';
+import Advanced from '../settings/sections/Advanced';
 
 import SettingsTabs from './backend/Tabs';
 
@@ -35,6 +36,12 @@ export default function Settings (props) {
           </div>
           <div label={props.language.sections.language}>
             <Language language={props.language}/>
+          </div>
+          <div label='Advanced'>
+            <Advanced/>
+          </div>
+          <div label='Experimental'>
+
           </div>
           <div label={props.language.sections.changelog}>
             <About/>

src/components/modals/tabs/backend/Tab.jsx

@@ -15,7 +15,9 @@ import Appearance from '@material-ui/icons/FormatPaint';
 import Language from '@material-ui/icons/Translate';
 import Changelog from '@material-ui/icons/NewReleasesRounded';
 import About from '@material-ui/icons/Info';
+import Experimental from '@material-ui/icons/BugReport';
 
+// Store
 import Colors from '@material-ui/icons/ColorLens';
 import Plugins from '@material-ui/icons/Widgets';
 import Added from '@material-ui/icons/AddCircle';
@@ -54,7 +56,12 @@ export default class Tab extends React.PureComponent {
           case 'Language': 
             icon = <Language/>; 
             divider = <div><hr/></div>;
-          break;
+            break;
+          case 'Advanced': icon = <Settings/>; break;
+          case 'Experimental': 
+            icon = <Experimental/>; 
+            divider = <div><hr/></div>;
+            break;
           case 'Change Log': icon = <Changelog/>; break;
           case 'About': icon = <About/>; break; 
           // Store

src/scss/modules/_buttons.scss

@@ -79,7 +79,6 @@
 
 .export,
 .import {
-  float: right;
   margin-left: 20px;
 }
 

src/scss/modules/_settings.scss

@@ -231,7 +231,7 @@ input[type=color]::-moz-color-swatch {
   font-size: 12px;
 }
 
-#customcss {
+#customcss, #customjs {
   font-family: Consolas !important;
   border: solid 1px black !important;
   margin-left: 0px;