feat: improved settings and marketplace ui, better custom background support, fix webpack

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

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

@@ -2,6 +2,7 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import Modal from 'react-modal';
 import { MenuItem } from '@mui/material';
+import { Upload as ImportIcon, Download as ExportIcon, RestartAlt as ResetIcon } from '@mui/icons-material';
 
 import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
 
@@ -36,11 +37,23 @@ export default class AdvancedSettings extends PureComponent {
           ))}
         </Dropdown>
 
-        <h3>{getMessage('modals.main.settings.sections.advanced.data')}</h3>
-        <br/>
-        <button className='reset' onClick={() => this.setState({ resetModal: true })}>{getMessage('modals.main.settings.buttons.reset')}</button>
-        <button className='export' onClick={() => exportSettings()}>{getMessage('modals.main.settings.buttons.export')}</button>
-        <button className='import' onClick={() => document.getElementById('file-input').click()}>{getMessage('modals.main.settings.buttons.import')}</button>
+        {localStorage.getItem('welcomePreview') !== 'true' ?
+         <>
+           <h3>{getMessage('modals.main.settings.sections.advanced.data')}</h3>
+           <br/>
+           <div className='data-buttons-row'>
+             <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>
+         </>
+        : null}
         <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => importSettings(e)}/>
 
         <h3>{getMessage('modals.main.settings.sections.advanced.customisation')}</h3>

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

@@ -46,7 +46,6 @@ export default function AppearanceSettings() {
         <option value='700'>{getMessage('modals.main.settings.sections.appearance.font.weight.bold')}</option>
         <option value='800'>{getMessage('modals.main.settings.sections.appearance.font.weight.extra_bold')}</option>
       </Dropdown>
-      <br/><br/>
       <Dropdown label={getMessage('modals.main.settings.sections.appearance.font.style.title')} name='fontstyle' category='other'>
         <option value='normal'>{getMessage('modals.main.settings.sections.appearance.font.style.normal')}</option>
         <option value='italic'>{getMessage('modals.main.settings.sections.appearance.font.style.italic')}</option>

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

@@ -1,19 +1,23 @@
 import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { toast } from 'react-toastify';
-import { Cancel } from '@mui/icons-material';
-import { TextField } from '@mui/material';
+import { Cancel, AddLink, AddPhotoAlternate } from '@mui/icons-material';
 
 import Checkbox from '../../Checkbox';
 import FileUpload from '../../FileUpload';
 
+import Modal from 'react-modal';
+
+import CustomURLModal from './CustomURLModal';
+
 export default class CustomSettings extends PureComponent {
   getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
   constructor() {
     super();
     this.state = {
-      customBackground: this.getCustom()
+      customBackground: this.getCustom(),
+      customURLModal: false
     };
   }
 
@@ -44,7 +48,7 @@ export default class CustomSettings extends PureComponent {
   modifyCustomBackground(type, index) {
     const customBackground = this.state.customBackground;
     if (type === 'add') {
-       customBackground.push('');
+      customBackground.push('');
     } else {
       customBackground.splice(index, 1);
     }
@@ -82,34 +86,48 @@ export default class CustomSettings extends PureComponent {
     return data;
   }
     
-  uploadCustombackground(index) {
-    document.getElementById('bg-input').setAttribute('index', index);
+  uploadCustomBackground() {
+    document.getElementById('bg-input').setAttribute('index', this.state.customBackground.length);
     document.getElementById('bg-input').click();
     // to fix loadFunction
     this.setState({
-      currentBackgroundIndex: index
+      currentBackgroundIndex: this.state.customBackground.length
     });
   }
 
+  addCustomURL(e) {
+    this.setState({
+      customURLModal: false,
+      currentBackgroundIndex: this.state.customBackground.length
+    });
+    this.customBackground({ target: { value: e }}, true, this.state.customBackground.length);
+  }
+
   render() {
     return (
       <ul>
         <p>{this.getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
-        {this.state.customBackground.map((_url, index) => (
-          <Fragment key={index}>
-            <TextField value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)} autoComplete='off' autoCorrect='off' autoCapitalize='off' spellCheck={false} varient='outlined' />
-            {this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
-              <Cancel/>
-            </button> : null}
-            <span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{this.getMessage('modals.main.settings.sections.background.source.upload')}</span>
-            {this.videoCustomSettings(index)}
-          </Fragment>
-        ))}
-        <br/><br/>
-        <button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{this.getMessage('modals.main.settings.sections.background.source.add_background')}</button>
-        <br/><br/>
+        <div className='images-row'>
+          {this.state.customBackground.map((_url, index) => (
+            <Fragment key={index}>
+              <div style={{ backgroundImage: `url(${this.state.customBackground[index]})` }}> 
+                {this.state.customBackground.length > 0 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
+                  <Cancel/>
+                </button> : null}
+              </div>
+              {this.videoCustomSettings(index)}
+            </Fragment>
+          ))}
+        </div>
+        <div className='data-buttons-row'>
+          <button onClick={() => this.uploadCustomBackground()}>Add background <AddPhotoAlternate/> </button>
+          <button onClick={() => this.setState({ customURLModal: true })}>Add URL <AddLink/></button>
+        </div>
         <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
         {this.props.interval}
+        <Modal closeTimeoutMS={100} isOpen={this.state.customURLModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
+          <CustomURLModal modalClose={(e) => this.addCustomURL(e)} />
+        </Modal>
       </ul>
     );
   }

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

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import { Add } from '@mui/icons-material';
+import { TextField } from '@mui/material'; 
+
+export default function CustomURLModal({ modalClose }) {
+  const [url, setURL] = useState('URL');
+
+  return (
+    <>
+      <h1>Add URL</h1>
+      <TextField value={url} onChange={(e) => setURL(e.target.value)} varient='outlined' />
+      <div className='resetfooter'>
+        <button className='round import' style={{ marginLeft: '5px' }} onClick={() => modalClose(url)}>
+          <Add/>
+        </button>
+      </div>
+    </>
+  );
+}