fix: marketplace quote images, offline background img and quotes, remove placeholder text

src/components/modals/main/Main.jsx

@@ -20,7 +20,7 @@ const renderLoader = (current) => (
         <div className="emptyMessage">
           <div className="loaderHolder">
             <div id="loader"></div>
-            <span className="subtitle">Loading</span>
+            <span className="subtitle">{variables.language.getMessage(variables.languagecode, 'modals.main.loading')}</span>
           </div>
         </div>
       </div>
@@ -58,7 +58,7 @@ export default function MainModal({ modalClose }) {
       <Tooltip
         style={{ position: 'absolute', top: '3rem', right: '3rem' }}
         title="close"
-        key="cheese"
+        key="closeTooltip"
       >
         <span className="closeModal" onClick={modalClose}>
           <MdClose />

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

@@ -578,7 +578,7 @@ export default class Create extends PureComponent {
         <div className="flexTopMarketplace">
           {this.state.currentTab !== 1 && (
             <div className="returnButton">
-              <Tooltip title="Go back" key="cheese">
+              <Tooltip title="Go back" key="backArrow">
                 <MdArrowBack
                   className="backArrow"
                   onClick={() => this.changeTab(this.state.currentTab - 1)}

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

@@ -300,7 +300,7 @@ export default class Marketplace extends PureComponent {
           <>
             <div className="flexTopMarketplace">
               <div className="returnButton">
-                <Tooltip title="back" key="cheese">
+                <Tooltip title="back" key="backArrow">
                   <MdArrowBack className="backArrow" onClick={() => this.returnToMain()} />
                 </Tooltip>
               </div>

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

@@ -143,7 +143,7 @@ export default class SearchSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')}
-          subtitle="cheese"
+          subtitle="Search engine to use for autocomplete dropdown results"
         >
           <Radio options={autocompleteProviders} name="autocompleteProvider" category="search" />
         </SettingsItem>

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

@@ -207,7 +207,7 @@ export default class BackgroundSettings extends PureComponent {
           category="background"
           element="#backgroundImage"
         />
-        <SettingsItem title="cheese" subtitle="cheese">
+        <SettingsItem title="Display" subtitle="Change how background and photo information are loaded">
           <Checkbox
             name="ddgProxy"
             text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
@@ -237,7 +237,7 @@ export default class BackgroundSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={getMessage('modals.main.settings.sections.background.source.title')}
-          subtitle="mucho gracias"
+          subtitle="Source of background images"
         >
           <Dropdown
             label={getMessage('modals.main.settings.sections.background.type.title')}
@@ -273,7 +273,7 @@ export default class BackgroundSettings extends PureComponent {
         this.state.marketplaceEnabled ? (
           <SettingsItem
             title={getMessage('modals.main.settings.sections.background.effects.title')}
-            subtitle="cheese"
+            subtitle="Add effects to the background image"
           >
             <Slider
               title={getMessage('modals.main.settings.sections.background.effects.blur')}

src/components/widgets/quote/Quote.jsx

@@ -15,6 +15,8 @@ import { toast } from 'react-toastify';
 import Tooltip from '../../helpers/tooltip/Tooltip';
 import ShareModal from '../../helpers/sharemodal/ShareModal';
 
+import offline_quotes from './offline_quotes.json';
+
 import Interval from 'modules/helpers/interval';
 import EventBus from 'modules/helpers/eventbus';
 
@@ -81,10 +83,8 @@ export default class Quote extends PureComponent {
   }
 
   doOffline() {
-    const quotes = require('./offline_quotes.json');
-
-    // Get a random quote from our local package
-    const quote = quotes[Math.floor(Math.random() * quotes.length)];
+    // Get a random quote from our local JSON
+    const quote = offline_quotes[Math.floor(Math.random() * offline_quotes.length)];
 
     this.setState({
       quote: '"' + quote.quote + '"',
@@ -208,13 +208,14 @@ export default class Quote extends PureComponent {
           try {
             const data = await (await fetch(quotePackAPI.url)).json();
             const author = data[quotePackAPI.author] || quotePackAPI.author;
-            const authorimgdata = await this.getAuthorImg(author);
+            const installed = JSON.parse(localStorage.getItem('installed'));
+            // todo: make this actually get the correct quote pack, instead of the first available
+            const info = installed.find((i) => i.type === 'quotes');
 
             return this.setState({
               quote: '"' + data[quotePackAPI.quote] + '"',
               author,
-              authorimg: authorimgdata.authorimg,
-              authorimglicense: authorimgdata.authorimglicense,
+              authorimg: info.icon_url
             });
           } catch (e) {
             return this.doOffline();
@@ -228,14 +229,15 @@ export default class Quote extends PureComponent {
 
           if (quotePack) {
             const data = quotePack[Math.floor(Math.random() * quotePack.length)];
-            const authorimgdata = await this.getAuthorImg(data.author);
+            const installed = JSON.parse(localStorage.getItem('installed'));
+            // todo: make this actually get the correct quote pack, instead of the first available
+            const info = installed.find((i) => i.type === 'quotes');
 
             return this.setState({
               quote: '"' + data.quote + '"',
               author: data.author,
               authorlink: this.getAuthorLink(data.author),
-              authorimg: authorimgdata.authorimg,
-              authorimglicense: authorimgdata.authorimglicense,
+              authorimg: info.icon_url
             });
           } else {
             return this.doOffline();

src/components/widgets/time/Clock.jsx

@@ -43,7 +43,7 @@ export default class Clock extends PureComponent {
           break;
         case 'analogue':
           // load analog clock css
-          require('react-clock/dist/Clock.css');
+          import('react-clock/dist/Clock.css');
 
           this.setState({
             time: now,

src/modules/helpers/background/widget.js

@@ -1,4 +1,5 @@
 // since there is so much code in the component, we have moved it to a separate file
+import offlineImages from './offlineImages.json';
 export function videoCheck(url) {
   return (
     url.startsWith('data:video/') ||
@@ -9,8 +10,6 @@ export function videoCheck(url) {
 }
 
 export function offlineBackground() {
-  const offlineImages = require('./offlineImages.json');
-
   // Get all photographers from the keys in offlineImages.json
   const photographers = Object.keys(offlineImages);
   const photographer = photographers[Math.floor(Math.random() * photographers.length)];