fix: some bug fixes

src/components/modals/Modals.jsx

@@ -5,7 +5,8 @@ import Navbar from '../widgets/navbar/Navbar';
 
 import Modal from 'react-modal';
 
-// Modals are lazy loaded as the user won't use them every time they open a tab
+// These modals are lazy loaded as the user won't use them every time they open a tab
+// We used to lazy load the main modal, but doing so broke the main modal open animation on first click
 const Welcome = React.lazy(() => import('./welcome/Welcome'));
 const Feedback = React.lazy(() => import('./feedback/Feedback'));
 const renderLoader = () => <></>;

src/components/modals/main/Main.jsx

@@ -4,6 +4,7 @@ import Tabs from './tabs/backend/Tabs';
 
 import './scss/index.scss';
 
+// Lazy load all the tabs instead of the modal itself
 const Settings = React.lazy(() => import('./tabs/Settings'));
 const Addons = React.lazy(() => import('./tabs/Addons'));
 const Marketplace = React.lazy(() => import('./tabs/Marketplace'));

src/components/modals/main/marketplace/Item.jsx

@@ -39,7 +39,7 @@ export default function Item(props) {
       <img alt='product' draggable='false' src={iconsrc}/>
       <div className='informationContainer'>
         <h1>{language.overview}</h1>
-        <p className='description' dangerouslySetInnerHTML={{__html: props.data.description}}></p>
+        <p className='description' dangerouslySetInnerHTML={{ __html: props.data.description }}></p>
           <div className='productInformation'>
             <ul>
               {/* <li className='header'>{language.last_updated}</li>

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

@@ -66,7 +66,7 @@ export default class Added extends React.PureComponent {
   }
 
   uninstall() {
-    MarketplaceFunctions.uninstall(this.state.item.display_name, this.state.item.type);
+    MarketplaceFunctions.uninstall(this.state.item.type, this.state.item.display_name);
     
     toast(window.language.toasts.uninstalled);
 

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

@@ -110,7 +110,7 @@ export default class Marketplace extends React.PureComponent {
     if (type === 'install') {
       MarketplaceFunctions.install(this.state.item.type, this.state.item.data);
     } else {
-      MarketplaceFunctions.uninstall(this.state.item.display_name, this.state.item.type);
+      MarketplaceFunctions.uninstall(this.state.item.type, this.state.item.display_name);
     }
 
     toast(window.language.toasts[type + 'ed']);

src/components/modals/main/scss/index.scss

@@ -1,5 +1,4 @@
 @import '../../../../scss/variables';
-@import '../../../../scss/mixins';
 
 @import 'settings/main';
 @import 'settings/buttons';

src/components/modals/main/settings/FileUpload.jsx

@@ -19,7 +19,9 @@ export default class FileUpload extends React.PureComponent {
         reader.readAsDataURL(file);
       }
 
-      reader.addEventListener('load', (e) => this.props.loadFunction(e));
+      reader.addEventListener('load', (e) => {
+        this.props.loadFunction(e);
+      });
     };
   }
 

src/components/modals/main/settings/Slider.jsx

@@ -30,7 +30,7 @@ export default class Slider extends React.PureComponent {
       value: this.props.default
     });
 
-    toast(this.language.toasts.reset);
+    toast(window.language.toasts.reset);
     EventBus.dispatch('refresh', this.props.category);
   }
 

src/components/modals/main/settings/Text.jsx

@@ -42,7 +42,7 @@ export default class Text extends React.PureComponent {
       value: this.props.default || ''
     });
 
-    toast(this.language.toasts.reset);
+    toast(window.language.toasts.reset);
     EventBus.dispatch('refresh', this.props.category);
   }
 

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

@@ -64,7 +64,7 @@ export default class About extends React.PureComponent {
   }
 
   componentDidMount() {
-    if (localStorage.getItem('offlineMode') === 'true') {
+    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       this.setState({
         update: this.language.version.offline_mode
       });

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

@@ -22,9 +22,9 @@ export default class AdvancedSettings extends React.PureComponent {
   settingsImport(e) {
     const content = JSON.parse(e.target.result);
 
-    for (const key of Object.keys(content)) {
+    Object.keys(content).forEach((key) => {
       localStorage.setItem(key, content[key]);
-    }
+    });
 
     toast(window.language.toasts.imported);
   }

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

@@ -29,7 +29,7 @@ export default class Changelog extends React.PureComponent {
   }
   
   componentDidMount() {
-    if (localStorage.getItem('offlineMode') === 'true') {
+    if (navigator.onLine || localStorage.getItem('offlineMode') === 'true') {
       return;
     }
   

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

@@ -78,7 +78,7 @@ export default class OrderSettings extends React.PureComponent {
       items: JSON.parse(localStorage.getItem('order'))
     });
 
-    toast(this.language.toasts.reset);
+    toast(window.language.toasts.reset);
   }
 
   componentDidUpdate() {

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

@@ -30,18 +30,12 @@ export default class BackgroundSettings extends React.PureComponent {
     this.setState({
       customBackground: ''
     });
-    toast(this.language.toasts.reset);
+    toast(window.language.toasts.reset);
     EventBus.dispatch('refresh', 'background');
   }
 
   customBackground(e, text) {
-    let result;
-    if (text === true) {
-      result = e.target.value;
-    } else {
-      result = e.target.result;
-    }
-  
+    const result = (text === true) ? e.target.value : e.target.result;
     localStorage.setItem('customBackground', result);
     this.setState({
       customBackground: result
@@ -83,6 +77,10 @@ export default class BackgroundSettings extends React.PureComponent {
   }
 
   componentDidMount() {
+    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+      return;
+    }
+
     this.getBackgroundCategories();
   }