feat: new welcome modal, refactor many things, various bug fixes, use material-ui v5 etc

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

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

@@ -3,7 +3,7 @@ import React from 'react';
 import Tooltip from '../../../../helpers/tooltip/Tooltip';
 import EmailIcon from '@material-ui/icons/Email';
 import TwitterIcon from '@material-ui/icons/Twitter';
-import ForumIcon from '@material-ui/icons/Forum';
+import ChatIcon from '@material-ui/icons/Chat';
 import InstagramIcon from '@material-ui/icons/Instagram';
 import FacebookIcon from '@material-ui/icons/Facebook';
 
@@ -96,7 +96,7 @@ export default class About extends React.PureComponent {
         <a href='https://twitter.com/getmue' className='aboutIcon' target='_blank' rel='noopener noreferrer'><TwitterIcon/></a>
         <a href='https://instagram.com/mue.tab' className='aboutIcon' target='_blank' rel='noopener noreferrer'><InstagramIcon/></a>
         <a href='https://facebook.com/muetab' className='aboutIcon' target='_blank' rel='noopener noreferrer'><FacebookIcon/></a>
-        <a href='https://discord.gg/zv8C9F8' className='aboutIcon' target='_blank' rel='noopener noreferrer'><ForumIcon/></a>
+        <a href='https://discord.gg/zv8C9F8' className='aboutIcon' target='_blank' rel='noopener noreferrer'><ChatIcon/></a>
 
         <h3>{this.language.support_mue}</h3>
         <p>

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

@@ -6,9 +6,8 @@ import Text from '../Text';
 import Switch from '../Switch';
 import ResetModal from '../ResetModal';
 
-import SettingsFunctions from '../../../../../modules/helpers/settings';
+import SettingsFunctions from '../../../../../modules/helpers/settings/modals';
 
-import { toast } from 'react-toastify';
 import Modal from 'react-modal';
 
 export default class AdvancedSettings extends React.PureComponent {
@@ -20,17 +19,6 @@ export default class AdvancedSettings extends React.PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
-  settingsImport(e) {
-    const content = JSON.parse(e.target.result);
-
-    Object.keys(content).forEach((key) => {
-      localStorage.setItem(key, content[key]);
-    });
-
-    toast(window.language.toasts.imported);
-    window.stats.postEvent('tab', 'Settings imported');
-  }
-
   render() {
     const { advanced } = this.language.sections;
 
@@ -43,7 +31,7 @@ export default class AdvancedSettings extends React.PureComponent {
         <button className='reset' onClick={() => this.setState({ resetModal: true })}>{this.language.buttons.reset}</button>
         <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.language.buttons.export}</button>
         <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.language.buttons.import}</button>
-        <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)}/>
+        <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => SettingsFunctions.importSettings(e)}/>
 
         <h3>{advanced.customisation}</h3>
         <Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>

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

@@ -53,7 +53,7 @@ export default class Changelog extends React.PureComponent {
           lightboxImg: img.src
         });
       };
-    }
+    };
 
     for (let link = 0; link < links.length; link++) {
       links[link].target = '_blank';

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

@@ -52,7 +52,6 @@ export default class OrderSettings extends React.PureComponent {
     }
   
     const newArray = [...array];
-  
     const target = newArray[oldIndex];
     const inc = newIndex < oldIndex ? -1 : 1;
   
@@ -61,7 +60,6 @@ export default class OrderSettings extends React.PureComponent {
     }
   
     newArray[newIndex] = target;
-  
     return newArray;
   }
 

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

@@ -8,7 +8,7 @@ export default function QuickLinks() {
     <>
       <h2>{language.title}</h2>
       <Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container' />
-      <Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_proxy} element='.other' />
+      <Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_image_proxy} element='.other' />
       <Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks' />
       <Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks' />
     </>

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

@@ -85,7 +85,6 @@ export default class SearchSettings extends React.PureComponent {
           ))}
           <option value='custom'>{search.custom.split(' ')[0]}</option>
         </Dropdown>
-
         <ul style={{ display: this.state.customDisplay }}>
           <br/>
           <p style={{ marginTop: '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>

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

@@ -153,7 +153,7 @@ export default class BackgroundSettings extends React.PureComponent {
       <>
         <h2>{background.title}</h2>
         <Switch name='background' text={this.language.enabled} category='background' />
-        <Checkbox name='ddgProxy' text={background.ddg_proxy} />
+        <Checkbox name='ddgProxy' text={background.ddg_image_proxy} />
         <Checkbox name='bgtransition' text={background.transition} />
         <Checkbox name='photoInformation' text={background.photo_information} category='background' element='.other' />
 

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

@@ -55,7 +55,7 @@ export default class ColourSettings extends React.PureComponent {
       try {
         gradientSettings = JSON.parse(hex);
       } catch (e) {
-        // Disregard exception.
+        // Disregard exception
       }
     }