fix: various modal fixes and improvements

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

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

@@ -49,7 +49,7 @@ export default function Items({
           <span className="title">{getMessage('modals.main.marketplace.cant_find')}</span>
           <span className="subtitle">
             {getMessage('modals.main.marketplace.knowledgebase_one')}{' '}
-            <a className="link" href="https://muetab.com">
+            <a className="link" target="_blank" href={variables.constants.KNOWLEDGEBASE} rel="noreferrer">
               {getMessage('modals.main.marketplace.knowledgebase_two')}
             </a>{' '}
             {getMessage('modals.main.marketplace.knowledgebase_three')}

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

@@ -68,7 +68,7 @@ export default class Sideload extends PureComponent {
             id="file-input"
             type="settings"
             accept="application/json"
-            loadFunction={(e) => this.installAddon(JSON.parse(e.target.result))}
+            loadFunction={(e) => this.installAddon(JSON.parse(e))}
           />
           <MdIntegrationInstructions className="sideloadIcon" />
           <span className="title">{this.getMessage('modals.main.addons.sideload.title')}</span>

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

@@ -14,6 +14,7 @@ export default class FileUpload extends PureComponent {
 
       if (this.props.type === 'settings') {
         reader.readAsText(file, 'UTF-8');
+        return this.props.loadFunction(e);
       } else {
         // background upload
         const settings = {};

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

@@ -19,16 +19,20 @@ export default class Changelog extends PureComponent {
   }
 
   async getUpdate() {
-    const data = await (
-      await fetch(variables.constants.BLOG_POST + '/index.json', {
-        signal: this.controller.signal,
-      })
-    ).json();
+    const res = await fetch(variables.constants.BLOG_POST + '/index.json', {
+      signal: this.controller.signal,
+    });
+
+    if (res.status === 404) {
+      this.setState({ error: true });
+      return;
+    }
 
     if (this.controller.signal.aborted === true) {
       return;
     }
 
+    const data = await res.json();
     let date = new Date(data.date.split(' ')[0]);
     date = date.toLocaleDateString(variables.languagecode.replace('_', '-'), {
       year: 'numeric',
@@ -105,6 +109,16 @@ export default class Changelog extends PureComponent {
       );
     }
 
+    if (this.state.error === true) { 
+      return errorMessage(
+        <>
+          <MdOutlineWifiOff />
+          <h1>failed</h1>
+          <p className="description">error description</p>
+        </>,
+      );
+    }
+
     if (!this.state.title) {
       return errorMessage(
         <div className="loaderHolder">

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

@@ -221,8 +221,8 @@ export default class QuoteSettings extends PureComponent {
           />
         </SettingsItem>
         <SettingsItem
-          title="Source"
-          subtitle="Choose the source of the quotes, pick between the following options"
+          title={this.getMessage('modals.main.settings.sections.background.source.title')}
+          subtitle={this.getMessage('modals.main.settings.sections.quote.source_subtitle')}
         >
           <Dropdown
             name="quoteType"

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

@@ -110,13 +110,6 @@ export default class SearchSettings extends PureComponent {
                 {this.getMessage('modals.main.settings.buttons.reset')}
               </span>
             </p>
-            <TextField
-              label={this.getMessage('modals.main.settings.sections.search.custom')}
-              value={this.state.customValue}
-              onInput={(e) => this.setState({ customValue: e.target.value })}
-              varient="outlined"
-              InputLabelProps={{ shrink: true }}
-            />
           </ul>
           <Checkbox
             name="autocomplete"
@@ -143,6 +136,15 @@ export default class SearchSettings extends PureComponent {
             </MenuItem>
           </Dropdown>
         </SettingsItem>
+        <SettingsItem title={this.getMessage('modals.main.settings.sections.search.custom')}>
+        <TextField
+              label={this.getMessage('modals.main.settings.sections.search.custom')}
+              value={this.state.customValue}
+              onInput={(e) => this.setState({ customValue: e.target.value })}
+              varient="outlined"
+              InputLabelProps={{ shrink: true }}
+            />
+        </SettingsItem>
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')}
           subtitle={this.getMessage(

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

@@ -102,6 +102,7 @@ export default class BackgroundSettings extends PureComponent {
         <SettingsItem
           title={getMessage('modals.main.settings.sections.background.api')}
           subtitle={getMessage('modals.main.settings.sections.background.api_subtitle')}
+          final={true}
         >
           {this.state.backgroundCategories[0] === getMessage('modals.main.loading') ? (
             <>
@@ -206,7 +207,7 @@ export default class BackgroundSettings extends PureComponent {
     if (this.state.effects === true) {
       header = (
         <span className="mainTitle" onClick={() => this.setState({ effects: false })}>
-          {getMessage('modals.main.settings.sections.background.title')}{' '}
+          <span className='backTitle'>{getMessage('modals.main.settings.sections.background.title')}</span>
           <MdOutlineKeyboardArrowRight />{' '}
           {getMessage('modals.main.settings.sections.background.effects.title')}
         </span>
@@ -232,6 +233,7 @@ export default class BackgroundSettings extends PureComponent {
         />
       );
     }
+
     return (
       <>
         {header}
@@ -282,7 +284,9 @@ export default class BackgroundSettings extends PureComponent {
                 </Dropdown>
               </div>
             </div>
-            <div className="moreSettings" onClick={() => this.setState({ effects: true })}>
+            {(this.state.backgroundType === 'api' ||
+          this.state.backgroundType === 'custom' ||
+          this.state.marketplaceEnabled) ? <><div className="moreSettings" onClick={() => this.setState({ effects: true })}>
               <div className="left">
                 <MdOutlineAutoAwesome />
                 <div className="content">
@@ -298,10 +302,12 @@ export default class BackgroundSettings extends PureComponent {
                 {' '}
                 <MdOutlineKeyboardArrowRight />
               </div>
-            </div>
+            </div></> : null}
           </>
         ) : null}
-        {this.state.backgroundSettingsSection !== true && this.state.effects !== true ? (
+        {this.state.backgroundSettingsSection !== true && this.state.effects !== true && (this.state.backgroundType === 'api' ||
+          this.state.backgroundType === 'custom' ||
+          this.state.marketplaceEnabled) ? (
           <SettingsItem
             title={getMessage('modals.main.settings.sections.background.display')}
             subtitle={getMessage('modals.main.settings.sections.background.display_subtitle')}
@@ -340,6 +346,7 @@ export default class BackgroundSettings extends PureComponent {
             <SettingsItem
               title={getMessage('modals.main.settings.sections.background.source.title')}
               subtitle={getMessage('modals.main.settings.sections.background.source.subtitle')}
+              final={this.state.backgroundType === 'random_colour' || this.state.backgroundType === 'random_gradient'}
             >
               <Dropdown
                 label={getMessage('modals.main.settings.sections.background.type.title')}

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

@@ -223,6 +223,7 @@ export default class ColourSettings extends PureComponent {
       <>
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.background.source.custom_colour')}
+          final={true}
         >
           <span className="link" onClick={() => this.resetColour()}>
             {this.getMessage('modals.main.settings.buttons.reset')}