Make translation files consistent and change update modal urls

src/components/modals/Update.jsx

@@ -14,7 +14,7 @@ export default class Update extends React.PureComponent {
  }
 
  async getUpdate() {
-  const supportText = `<br/><p>${this.props.language.contactsupport}: <a target='_blank' class='modalLink' href='https://muetab.xyz/contact.html'</a>https://muetab.xyz/contact</p>`;
+  const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact.html'</a>https://muetab.com/contact</p>`;
 
   if (localStorage.getItem('offlineMode') === 'true') return this.setState({
     title: this.props.language.offline.title,
@@ -33,7 +33,7 @@ export default class Update extends React.PureComponent {
       date: data.published,
       image: data.image,
       author: data.author,
-      html: data.content + `<br/><p>${this.props.language.readblog}: <a target='_blank' class='modalLink' href='${data.url}'>${data.url}</a></p>`
+      html: data.content + `<br/><p>${this.props.language.read_blog}: <a target='_blank' class='modalLink' href='${data.url}'>${data.url}</a></p>`
     });
   } catch (e) { // If it fails, we send an error
     this.setState({
@@ -50,7 +50,7 @@ export default class Update extends React.PureComponent {
   render() {
     return <div className='updateContent'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-        <h1 style={{ 'marginBottom':'-10px' }}>{this.state.title}</h1>
+        <h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
         <h5 style={{ 'lineHeight':'0px' }}> By {this.state.author} • {this.state.date}</h5>
         <img draggable='false' src={this.state.image} alt='Update'></img>
         <p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>

src/components/modals/marketplace/Item.jsx

@@ -9,8 +9,8 @@ export default class Item extends React.PureComponent {
       if (this.props.content.content.data.quote_api) {
         warningHTML = <div className='productInformation'>
             <ul>
-                <li className='header'>{this.props.language.quoteWarning.title}</li>
-                <li id='updated'>{this.props.language.quoteWarning.description}</li>
+                <li className='header'>{this.props.language.quote_warning.title}</li>
+                <li id='updated'>{this.props.language.quote_warning.description}</li>
             </ul>
         </div>
       }
@@ -27,24 +27,24 @@ export default class Item extends React.PureComponent {
       <img alt='product' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + this.props.data.icon} />
       <div className='informationContainer'>
       <div className='productInformation'>
-          <h4>{this.props.language.information}</h4>
-          <ul>
-              <br/>
-              <li className='header'>{this.props.language.last_updated}</li>
-              <li>{this.props.data.updated}</li>
-              <br/>
-              <li className='header'>{this.props.language.version}</li>
-              <li>{this.props.data.version}</li>
-              <br/>
-              <li className='header'>{this.props.language.author}</li>
-              <li>{this.props.data.author}</li>
-          </ul>
+        <h4>{this.props.language.information}</h4>
+        <ul>
+          <br/>
+          <li className='header'>{this.props.language.last_updated}</li>
+          <li>{this.props.data.updated}</li>
+          <br/>
+          <li className='header'>{this.props.language.version}</li>
+          <li>{this.props.data.version}</li>
+          <br/>
+          <li className='header'>{this.props.language.author}</li>
+          <li>{this.props.data.author}</li>
+        </ul>
       </div>
       <div className='productInformation'>
-          <ul>
-              <li className='header'>{this.props.language.notice.title}</li>
-              <li id='updated'>{this.props.language.notice.description}</li>
-          </ul>
+        <ul>
+          <li className='header'>{this.props.language.notice.title}</li>
+          <li id='updated'>{this.props.language.notice.description}</li>
+        </ul>
       </div>
       {warningHTML}
       </div>

src/components/modals/marketplace/Items.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 export default class Items extends React.PureComponent {
   render() {
-    if (this.props.items.length === 0) return null;
+    if (this.props.items.length === 0) return null; // if there are no items in category don't render it
 
     let seeMoreHTML;
-    if (this.props.seeMoreFunction && this.props.items.length === 3) seeMoreHTML = <button className='addToMue seemore' onClick={this.props.seeMoreFunction}>{this.props.seeMoreTitle}</button>;
+    if (this.props.seeMoreFunction && this.props.items.length === 3) seeMoreHTML = <button className='addToMue seemore' onClick={this.props.seeMoreFunction}>{this.props.seeMoreTitle}</button>; // only render see more button if there are enough addons
 
     return (
         <div>

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -4,7 +4,7 @@ import Checkbox from '../Checkbox';
 import Section from '../Section';
 
 export default class BackgroundSettings extends React.PureComponent {
-  DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" };
+  DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': this.props.language.background.disabled, 'stop': 0 }], 'type': 'linear' };
 
   constructor(...args) {
     super(...args);
@@ -90,7 +90,7 @@ export default class BackgroundSettings extends React.PureComponent {
 
   pickFirstColour = (event) => {
     const value = event.target.value;
-    this.setState({ gradientSettings: { "angle": "180", "gradient": [{ "colour": value, "stop": 0 }], "type": "linear" } });
+    this.setState({ gradientSettings: { 'angle': '180', 'gradient': [{ 'colour': value, 'stop': 0 }], 'type': 'linear' } });
   }
 
   addColour = () => {
@@ -137,17 +137,17 @@ export default class BackgroundSettings extends React.PureComponent {
         return (
           <div key={i}>
             {gradientHasMoreThanOneColour ? (<button type='button' className='remove' onClick={() => this.removeColour(i)}>×</button>) : null}
-            <input id={'colour_' + i} type='color' name='colour' className="colour" onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
-            <label htmlFor={'colour_' + i} className="customBackgroundHex">{g.colour}</label>
+            <input id={'colour_' + i} type='color' name='colour' className='colour' onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
+            <label htmlFor={'colour_' + i} className='customBackgroundHex'>{g.colour}</label>
             {gradientHasMoreThanOneColour ? (
-                <input type="number" name='stop' className='stop' min={0} max={100} value={g.stop} onChange={(event) => this.onGradientChange(event, i)} />
+                <input type='number' name='stop' className='stop' min={0} max={100} value={g.stop} onChange={(event) => this.onGradientChange(event, i)} />
               ) : null}
           </div>);
       });
       colourSettings = (
         <div>
           {gradientInputs}
-          {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled ? (<button type="button" className="add" onClick={this.addColour}>{this.props.language.background.addcolour}</button>) : null}
+          {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled ? (<button type='button' className='add' onClick={this.addColour}>{this.props.language.background.add_colour}</button>) : null}
         </div>);
     }
 
@@ -160,7 +160,7 @@ export default class BackgroundSettings extends React.PureComponent {
             <Checkbox name='refresh' text={this.props.language.background.refresh} />
           </ul>
           <ul>
-            <label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
+            <label htmlFor='backgroundapi'>{this.props.language.background.api} </label>
             <label className='dropdown'>
               <select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
                 <option className='choices' value='mue'>Mue</option>
@@ -177,16 +177,16 @@ export default class BackgroundSettings extends React.PureComponent {
             <input className='range' type='range' min='0' max='100' id='brightnessRange' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
           </ul>
           <ul>
-            <p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+            <p>{this.props.language.background.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
             <input type='text' id='customBackground'></input>
           </ul>
           <ul>
-            <p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+            <p>{this.props.language.background.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
             <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
             <input id='bg-input' type='file' name='name' className='hidden' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' />
           </ul>
           <ul>
-            <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
+            <p>{this.props.language.background.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
              <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
             {colourSettings}
           </ul>

src/components/modals/settings/sections/SearchSettings.jsx

@@ -28,7 +28,7 @@ export default class SearchSettings extends React.PureComponent {
         <React.Fragment>
           <Section title={this.props.language.searchbar.title} name='searchBar'>
             <ul>
-              <label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
+              <label htmlFor='searchEngine'>{this.props.language.searchbar.search_engine} </label>
                 <select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
                   {searchEngines.map((engine) =>
                     <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>

src/components/modals/tabs/Settings.jsx

@@ -75,8 +75,8 @@ export default class Settings extends React.PureComponent {
           <Section title={this.props.language.experimental.title} name='experimental' slider={false}>
             <Checkbox name='webp' text={this.props.language.experimental.webp} />
             <Checkbox name='animations' text={this.props.language.experimental.animations} />
-            <Checkbox name='voiceSearch' text={this.props.language.experimental.voicesearch} newFeature={true} />
-            <Checkbox name='brightnessTime' text={this.props.language.experimental.nightmode} newFeature={true} />
+            <Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} newFeature={true} />
+            <Checkbox name='brightnessTime' text={this.props.language.experimental.night_mode} newFeature={true} />
           </Section>
 
           <LanguageSettings language={this.props.language} />

src/components/widgets/PhotoInformation.jsx

@@ -10,17 +10,17 @@ export default class PhotoInformation extends React.PureComponent {
     return (
       <div className='photoInformation'>
         <h1 id='photographer'>Photo By</h1>
-        <Info className='photoInformationHover' />
+        <Info className='photoInformationHover'/>
         <div className='infoCard'>
           <Info className='infoIcon' /><h1>Information</h1>
           <hr/>
-          <Location />
+          <Location/>
           <span id='location'></span>
-          <Camera />
+          <Camera/>
           <span id='camera'>Gaming</span>
-          <Resolution />
+          <Resolution/>
           <span id='resolution'>1280x720</span>
-          <Photographer />
+          <Photographer/>
           <span id='photographerCard'></span>
         </div>
         <div id='backgroundCredits' className='tooltip'>