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'>

src/modules/constants.js

@@ -1,4 +1,5 @@
 export const API_URL = 'https://api.muetab.com';
 export const UNSPLASH_URL = 'https://unsplash.muetab.com';
 export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
+export const WEBSITE_URL = 'https://muetab.com';
 export const OFFLINE_IMAGES = 20;

src/translations/en.json

@@ -4,7 +4,7 @@
         "afternoon": "Good Afternoon",
         "evening": "Good Evening",
         "christmas": "Merry Christmas",
-        "newyear": "Happy new year",
+        "newyear": "Happy New Year",
         "halloween": "Happy Halloween"
     },
     "credit": "Photo by",
@@ -38,14 +38,14 @@
         },
         "background": {
             "title": "Background",
-            "API": "Background API",
+            "api": "Background API",
             "blur": "Adjust Blur",
             "brightness": "Adjust Brightness",
-            "customURL": "Custom Background URL",
-            "custombackground": "Custom Background",
-            "customcolour": "Custom Background Colour",
+            "custom_url": "Custom Background URL",
+            "custom_background": "Custom Background",
+            "custom_colour": "Custom Background Colour",
             "upload": "Upload",
-            "addcolour": "Add colour",
+            "add_colour": "Add colour",
             "favourite": "Favourite",
             "view": "View",
             "refresh": "Refresh",
@@ -53,7 +53,7 @@
         },
         "searchbar": {
             "title": "Search Bar",
-            "searchengine": "Search Engine",
+            "search_engine": "Search Engine",
             "custom": "Custom Search URL"
         },
         "offline": "Offline Mode",
@@ -62,8 +62,8 @@
             "title": "Experimental",
             "webp": "Enable WebP",
             "animations": "Animations",
-            "voicesearch": "Voice Search",
-            "nightmode": "Automatic Night Mode"
+            "voice_search": "Voice Search",
+            "night_mode": "Automatic Night Mode"
         },
         "language": "Language",
         "apply": "Apply",
@@ -82,8 +82,8 @@
             "description": "Could not connect to the server"
         },
         "loading": "Loading...",
-        "readblog": "Read on the blog here",
-        "contactsupport": "Contact us here"
+        "read_blog": "Read on the blog here",
+        "contact_support": "Contact us here"
     },
     "toasts": {
         "quote": "Quote Copied",
@@ -112,7 +112,7 @@
                 "addtomue": "Add To Mue",
                 "remove": "Remove"
             },
-            "quoteWarning": {
+            "quote_warning": {
                 "title": "Warning",
                 "description": "This quote pack requests to external servers that may track you!"
             }

src/translations/fr.json

@@ -38,21 +38,21 @@
         },
         "background": {
             "title": "Fond",
-            "API": "Source",
+            "api": "Source",
             "blur": "Ajuster le flou",
             "brightness": "Ajuster la luminosité",
-            "customURL": "URL d'arrière-plan personnalisé",
-            "custombackground": "Arrière-plan personnalisé",
-            "customcolour": "Couleur d'arrière-plan personnalisée",
+            "custom_url": "URL d'arrière-plan personnalisé",
+            "custom_background": "Arrière-plan personnalisé",
+            "custom_colour": "Couleur d'arrière-plan personnalisée",
             "upload": "Ajouter",
-            "addcolour": "Ajouter une couleur",
+            "add_colour": "Ajouter une couleur",
             "favourite": "Ajouter aux favoris",
             "view": "Mode vue",
             "refresh": "Rafraîchir"
         },
         "searchbar": {
             "title": "Barre de Recherche",
-            "searchengine": "Moteur de recherche",
+            "search_engine": "Moteur de recherche",
             "custom": "URL de recherche personnalisée"
         },
         "offline": "Mode Hors-Ligne",
@@ -62,7 +62,7 @@
             "webp": "Activer WebP",
             "animations": "Animations",
             "favourite": "Bouton Ajouter aux favoris",
-            "voicesearch": "Recherche vocale"
+            "voice_search": "Recherche vocale"
         },
         "language": "Langue",
         "apply": "Appliquer",
@@ -81,8 +81,8 @@
             "description": "Impossible de se connecter au serveur"
         },
         "loading": "Chargement...",
-        "readblog": "Lire sur le blog ",
-        "contactsupport": "Contactez-nous "
+        "read_blog": "Lire sur le blog ",
+        "contact_support": "Contactez-nous "
     },
     "toasts": {
         "quote": "Citation copiée",
@@ -111,7 +111,7 @@
                 "addtomue": "Ajouter à Mue",
                 "remove": "Enlever"
             },
-            "quoteWarning": {
+            "quote_warning": {
                 "title": "Attention",
                 "description": "Ce pack fait appel à des serveurs externes qui sont susceptibles de vous tracer !"
             }

src/translations/nl.json

@@ -36,17 +36,17 @@
         },
         "background": {
             "title": "Achtergrond",
-            "API": "Achtergrond API",
+            "api": "Achtergrond API",
             "blur": "Onscherpte Aanpassen",
-            "customURL": "Aangepaste Achtergrond URL",
-            "custombackground": "Aangepaste Achtergrond",
-            "customcolour": "Aangepaste Achtergrondkleur",
+            "custom_url": "Aangepaste Achtergrond URL",
+            "custom_background": "Aangepaste Achtergrond",
+            "custom_colour": "Aangepaste Achtergrondkleur",
             "upload": "Uploaden",
-            "addcolour": "Kleur toevoegen"
+            "add_colour": "Kleur toevoegen"
         },
         "searchbar": {
             "title": "Zoekbalk",
-            "searchengine": "Zoekmachine"
+            "search_engine": "Zoekmachine"
         },
         "offline": "Offline Modus",
         "dark": "Donker Thema",

src/translations/no.json

@@ -36,16 +36,16 @@
         },
         "background": {
             "title": "Bakgrunn",
-            "API": "Bakgrunn API",
+            "api": "Bakgrunn API",
             "blur": "Juster Blur",
-            "customURL": "Personlig bakgrunn URL",
-            "custombackground": "Personlig bakgrunn",
-            "customcolour": "Personlig Bakgrunn Farge",
-            "addcolour": "Legg til farge"
+            "custom_url": "Personlig bakgrunn URL",
+            "custom_background": "Personlig bakgrunn",
+            "custom_colour": "Personlig Bakgrunn Farge",
+            "add_colour": "Legg til farge"
         },
         "searchbar": {
             "title": "Søkebar",
-            "searchengine": "Søkemotor"
+            "search_engine": "Søkemotor"
         },
         "offline": "Frakoblet Modus",
         "dark": "Mørkt tema",

src/translations/ru.json

@@ -36,18 +36,18 @@
         },
         "background": {
             "title": "Фон",
-            "API": "API для фона",
+            "api": "API для фона",
             "blur": "Размытие",
             "brightness": "Яркость",
-            "customURL": "Ссылка для пользовательского фона",
-            "custombackground": "Пользовательский фон",
-            "customcolour": "Пользовательский цвет фона",
+            "custom_url": "Ссылка для пользовательского фона",
+            "custom_background": "Пользовательский фон",
+            "custom_colour": "Пользовательский цвет фона",
             "upload": "Загрузить",
-            "addcolour": "Добавить цвет"
+            "add_colour": "Добавить цвет"
         },
         "searchbar": {
             "title": "Панель поиска",
-            "searchengine": "Поисковый движок"
+            "search_engine": "Поисковый движок"
         },
         "offline": "Офлайн режим",
         "dark": "Тёмная тема",