WIP translations update

src/App.jsx

@@ -82,8 +82,8 @@ export default class App extends React.PureComponent {
     const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay';
 
     /// language
-    const languagecode = localStorage.getItem('language') || 'en';
-    const language = merge(require('./translations/en.json'), require(`./translations/${languagecode}.json`));
+    const languagecode = localStorage.getItem('language') || 'en-GB';
+    const language = merge(require('./translations/en-GB.json'), require(`./translations/${languagecode}.json`));
 
     const toastDisplayTime = localStorage.getItem('toastDisplayTime') || 2500;
 
@@ -94,7 +94,7 @@ export default class App extends React.PureComponent {
         <div id='center'>
           <Navbar openModal={(modal) => this.setState({ [modal]: true })} language={language} />
           <Widgets language={language} languagecode={languagecode} />
-          <PhotoInformation language={language} className={tooltipClassList} />
+          <PhotoInformation language={language.widgets.background} className={tooltipClassList} />
           <React.Suspense fallback={renderLoader()}>
             <Modal closeTimeoutMS={300} id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Main language={language} modalClose={() => this.setState({ mainModal: false })} />
@@ -103,7 +103,7 @@ export default class App extends React.PureComponent {
               <Update language={language.update} modalClose={() => this.setState({ updateModal: false })} />
             </Modal>
             <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
-              <Welcome modalClose={() => this.closeWelcome()} language={language.welcome} />
+              <Welcome modalClose={() => this.closeWelcome()} language={language.modals.welcome} />
             </Modal>
             {/* <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Feedback modalClose={() => this.setState({ feedbackModal: false })} />

src/components/modals/Feedback.jsx

@@ -3,21 +3,21 @@ import React from 'react';
 export default function FeedbackModal(props) {
     return (
         <div className='feedback'>
-          <h1>Give us feedback</h1>
+          <h1>{props.language.modals.feedback.title}</h1>
           <span className='closeModal' onClick={props.modalClose}>&times;</span>
-           <label>How would you rate your experience of this Mue Build?</label>
+           <label>{props.language.modals.feedback.question_one}</label>
            <br/><br/>
            <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
            <br/><br/>
-           <label>What bugs did you encounter in your use of Mue?</label>
+           <label>{props.language.modals.feedback.question_two}</label>
            <br/><br/>
            <input type='text'/>
            <br/><br/>
-           <label>How likely would you be to recommend this version of Mue to a friend or colleague?</label>
+           <label>{props.language.modals.feedback.question_three}</label>
            <br/><br/>
            <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
            <br/><br/><br/>
-           <button>Submit</button>
+           <button>{props.language.modals.feedback.submit}</button>
        </div>
     );
 }

src/components/modals/Main.jsx

@@ -11,16 +11,16 @@ export default class MainModal extends React.PureComponent {
     return (
       <div className='modal'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-        <h1>{this.props.language.modals.title}</h1>
+        <h1>Options</h1>
         <div>
           <Navigation navbar={true}>
-            <div label='Settings'>
-              <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />
+            <div label={this.props.language.modals.main.navbar.settings}>
+              <Settings language={this.props.language.modals.main.settings} toastLanguage={this.props.language.toasts} />
             </div>
-            <div label='My Add-ons'>
+            <div label={this.props.language.modals.main.navbar.addons}>
               <Addons/>
             </div>
-            <div label='Marketplace'>
+            <div label={this.props.language.modals.main.navbar.marketplace}>
               <Marketplace/>
             </div>
           </Navigation>

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

@@ -4,6 +4,8 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 import * as Constants from '../../../../modules/constants';
 
+const other_contributors = require('../../../../modules/other_contributors.json');
+
 export default class About extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -49,6 +51,11 @@ export default class About extends React.PureComponent {
                 <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
             </Tooltip>
           )}
+          {other_contributors.map((item) => // for those who contributed without opening a pull request
+            <Tooltip title={item.login} placement='top' key={item.login}>
+                <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
+            </Tooltip>
+          )}
           <h3>Supporters</h3>
           <p>to be implemented</p>
       </div>

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

@@ -5,12 +5,12 @@ import Checkbox from '../Checkbox';
 export default function QuoteSettings (props) {
   return (
     <div>
-      <h2>Quote</h2>
+      <h2>{props.language.title}</h2>
       <Checkbox name='greeting' text={'Enabled'}></Checkbox>
-      <h3>Buttons</h3>
-      <Checkbox name='copyButton' text={props.language.quote.copy} />
-      <Checkbox name='tweetButton' text={props.language.quote.tweet} />
-      <Checkbox name='favouriteQuoteEnabled' text={props.language.quote.favourite} />
+      <h3>{props.language.buttons}</h3>
+      <Checkbox name='copyButton' text={props.language.copy} />
+      <Checkbox name='tweetButton' text={props.language.tweet} />
+      <Checkbox name='favouriteQuoteEnabled' text={props.language.favourite} />
     </div>
   );
 }

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

@@ -6,15 +6,15 @@ import Dropdown from '../Dropdown';
 export default function TimeSettings (props) {
   return (
     <div>
-      <h2>Time</h2>
+      <h2>{props.language.title}</h2>
       <Checkbox name='time' text='Enabled' />
-      <Checkbox name='seconds' text={props.language.time.seconds} />
-      <Checkbox name='24hour' text={props.language.time.twentyfourhour} />
-      <Checkbox name='ampm' text={props.language.time.ampm} />
-      <Checkbox name='zero' text={props.language.time.zero} />
-      <Checkbox name='analog' text={props.language.time.analog} />
-      <Checkbox name='percentageComplete' text={props.language.time.percentageComplete} />
-      <h3>Date</h3>
+      <Checkbox name='seconds' text={props.language.seconds} />
+      <Checkbox name='24hour' text={props.language.twentyfourhour} />
+      <Checkbox name='ampm' text={props.language.ampm} />
+      <Checkbox name='zero' text={props.language.zero} />
+      <Checkbox name='analog' text={props.language.analog} />
+      <Checkbox name='percentageComplete' text={props.language.percentageComplete} />
+      <h3>{props.language.date.title}</h3>
       <Checkbox name='date' text='Enabled' />
       <Checkbox name='short' text={props.language.date.short_date} betaFeature={true} />
       <Dropdown label={props.language.date.short_format} name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>

src/components/modals/tabs/Settings.jsx

@@ -15,31 +15,31 @@ export default function Settings (props) {
     return (
       <React.Fragment>
         <SettingsTabs>
-          <div label='Time'>
-            <Time language={props.language}/>
+          <div label={props.language.sections.time.title}>
+            <Time language={props.language.sections.time}/>
           </div>
-          <div label='Quote'>
-            <Quote language={props.language}/>
+          <div label={props.language.sections.quote.title}>
+            <Quote language={props.language.sections.quote}/>
           </div>
-          <div label='Greeting'>
+          <div label={props.language.sections.greeting.title}>
             <Greeting language={props.language} toastLanguage={props.toastLanguage} />
           </div>
-          <div label='Background'>
+          <div label={props.language.sections.background.title}>
             <Background language={props.language} toastLanguage={props.toastLanguage}/>
           </div>
-          <div label='Search'>
+          <div label={props.language.sections.search.title}>
             <Search language={props.language}/>
           </div>
-          <div label='Appearance'>
+          <div label={props.language.sections.appearance}>
             <Appearance language={props.language} toastLanguage={props.toastLanguage}/>
           </div>
-          <div label='Language'>
+          <div label={props.language.sections.language}>
             <Language language={props.language}/>
           </div>
-          <div label='Change Log'>
+          <div label={props.language.sections.changelog}>
             <About/>
           </div>
-          <div label='About'>
+          <div label={props.language.sections.about.title}>
             <About/>
           </div>
         </SettingsTabs>

src/components/widgets/Widgets.jsx

@@ -32,8 +32,8 @@ export default class Widgets extends React.PureComponent {
 
     return (
       <React.Fragment>
-          {enabled('searchBar') ? <Search language={language.search} /> : null}
-          {enabled('greeting') ? <Greeting language={language.greeting} /> : null}
+          {enabled('searchBar') ? <Search language={language.widgets.search} /> : null}
+          {enabled('greeting') ? <Greeting language={language.widgets.greeting} /> : null}
           {enabled('time') ? <Clock/> : null}
           {enabled('date') ? <Date/> : null}
           {enabled('quote') ? <Quote language={language.toasts} languagecode={languagecode} /> : null}

src/components/widgets/navbar/Navbar.jsx

@@ -18,7 +18,7 @@ export default class Navbar extends React.PureComponent {
   render() {
     // toggle refresh button
     let refreshHTML = (
-      <Tooltip title={this.props.language.navbar.tooltips.refresh}>
+      <Tooltip title={this.props.language.widgets.navbar.tooltips.refresh}>
         <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()} />
       </Tooltip>
     );
@@ -43,15 +43,15 @@ export default class Navbar extends React.PureComponent {
         <div className='notes'>
           <NotesIcon className='topicons'/>
           <React.Suspense fallback={renderLoader()}>
-            <Notes language={this.props.language.navbar.notes} />
+            <Notes language={this.props.language.widgets.navbar.notes} />
           </React.Suspense>
         </div>
         {feedbackHTML}
-        <Tooltip title={this.props.language.navbar.tooltips.update} placement='top'>
+        <Tooltip title={this.props.language.widgets.navbar.tooltips.update} placement='top'>
           <NewReleases className='refreshicon topicons' onClick={() => this.props.openModal('updateModal')} />
         </Tooltip>
         {refreshHTML}
-        <Tooltip title={this.props.language.modals.settings} placement='top'>
+        <Tooltip title={this.props.language.modals.main.navbar.settings} placement='top'>
           <Gear className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')} />
         </Tooltip>
       </div>

src/modules/helpers/settings.js

@@ -56,14 +56,16 @@ export default class SettingsFunctions {
         }
 
         // Languages
-        const languageCodes = languages.map(({ code }) => code).splice(1); // remove "en" from list
+        const languageCodes = languages.map(({ code }) => code);
         const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
 
         if (languageCodes.includes(browserLanguage)) {
             localStorage.setItem('language', browserLanguage);
-            document.documentElement.lang = browserLanguage;
+            if (browserLanguage !== 'en-GB' || browserLanguage !== 'en-US') {
+                document.documentElement.lang = browserLanguage;
+            }
         } else {
-            localStorage.setItem('language', 'en');
+            localStorage.setItem('language', 'en-GB');
         }
 
         if (reset) {

src/modules/languages.json

@@ -1,7 +1,11 @@
 [
     {
-        "text": "English",
-        "code": "en"
+        "text": "English (UK)",
+        "code": "en-GB"
+    },
+    {
+        "text": "English (US)",
+        "code": "en-US"
     },
     {
         "text": "Español",

src/modules/other_contributors.json

@@ -0,0 +1,6 @@
+[
+    {
+        "login": "FuryingFox",
+        "avatar_url": "https://avatars.githubusercontent.com/u/28787893?v=4"
+    }
+]

src/translations/en-GB.json

@@ -0,0 +1,199 @@
+{
+    "widgets": {
+        "greeting": {
+            "morning": "Good Morning",
+            "afternoon": "Good Afternoon",
+            "evening": "Good Evening",
+            "christmas": "Merry Christmas",
+            "newyear": "Happy New Year",
+            "halloween": "Happy Halloween"
+        },
+        "background": {
+            "credit": "Photo by",
+            "information": "Information"
+        },
+        "search": "Search",
+        "navbar": {
+            "tooltips": {
+                "update": "Update Patch Notes",
+                "refresh": "Refresh Page"
+            },
+            "notes": {
+                "title": "Notes",
+                "placeholder": "Type here"
+            }
+        }
+    },
+    "modals": {
+        "main": {
+            "title": "Options",
+            "loading": "Loading...",
+            "navbar": {
+                "settings": "Settings",
+                "addons": "My Add-ons",
+                "marketplace": "Marketplace"
+            },
+            "settings": {
+                "sections": {
+                    "time": {
+                        "title": "Time",
+                        "seconds": "Seconds",
+                        "twentyfourhour": "24 Hour",
+                        "ampm": "AM/PM (12 hour)",
+                        "zero": "Zero-padded",
+                        "analog": "Analog",
+                        "percentageComplete": "Percentage of the Day Complete",
+                        "date": {
+                            "title": "Date",
+                            "short_date": "Short Date",
+                            "short_format": "Short Format",
+                            "short_separator": {
+                                "title": "Short Separator",
+                                "default": "Default",
+                                "dash": "Dash",
+                                "gaps": "Gaps"
+                            }
+                        }
+                    },
+                    "quote": {
+                        "title": "Quote",
+                        "buttons": "Buttons",
+                        "copy": "Copy",
+                        "tweet": "Tweet",
+                        "favourite": "Favourite"
+                    },
+                    "greeting": {
+                        "title": "Greeting",
+                        "events": "Events",
+                        "default": "Default Greeting Message",
+                        "name": "Name for greeting",
+                        "birthday_enabled": "Birthday Enabled",
+                        "birthday_date": "Birthday Date"
+                    },
+                    "background": {
+                        "title": "Background",
+                        "api": "Background API",
+                        "blur": "Adjust Blur",
+                        "brightness": "Adjust Brightness",
+                        "custom_url": "Custom Background URL",
+                        "custom_background": "Custom Background",
+                        "custom_colour": "Custom Background Colour",
+                        "upload": "Upload",
+                        "add_colour": "Add colour",
+                        "favourite": "Favourite",
+                        "view": "View",
+                        "refresh": "Refresh",
+                        "disabled": "Disabled"
+                    },
+                    "search": {
+                        "title": "Search",
+                        "search_engine": "Search Engine",
+                        "custom": "Custom Search URL"
+                    },
+                    "appearance": "Appearance",
+                    "language": "Language",
+                    "changelog": "Change Log",
+                    "about": {
+                        "title": "About",
+                        "about": {
+                            "copyright": "Copyright",
+                            "version": {
+                                "title": "Version",
+                                "update_available": "Update available",
+                                "no_update": "No update available"
+                            },
+                            "resources_used": {
+                                "title": "Resources Used",
+                                "bg_images": "Background Images",
+                                "pin_icon": "Pin Icon"
+                            },
+                            "contributors": "Contributors",
+                            "supporters": "Supporters"
+                        }
+                    }
+                },
+                "buttons": {
+                    "apply": "Apply",
+                    "reset": "Reset",
+                    "import": "Import",
+                    "export": "Export"
+                }
+            },
+            "marketplace": {
+                "photo_packs": "Photo Packs",
+                "quote_packs": "Quote Packs",
+                "preset_settings": "Preset Settings",
+                "themes": "Themes",
+                "product": {
+                    "overview": "Overview",
+                    "information": "Information",
+                    "last_updated": "Last Updated",
+                    "version": "Version",
+                    "author": "Author",
+                    "notice": {
+                        "title": "Notice",
+                        "description": "In order for the change to take place, the page must be refreshed."
+                    },
+                    "buttons": {
+                        "addtomue": "Add To Mue",
+                        "remove": "Remove"
+                    },
+                    "quote_warning": {
+                        "title": "Warning",
+                        "description": "This quote pack requests to external servers that may track you!"
+                    }
+                },
+                "offline": {
+                    "title": "Looks like you're offline",
+                    "description": "Please connect to the internet."
+                },
+                "see_more": "See More"
+            },
+            "addons": {
+                "added": "Added",
+                "empty": {
+                    "title": "It's empty here",
+                    "description": "Head to the marketplace to add some.",
+                    "button": "Take me there"
+                },
+                "sideload": "Sideload"
+            }
+        },
+        "update": {
+            "title": "Update",
+            "offline": {
+                "title": "Offline",
+                "description": "Cannot get update logs while in offline mode"
+            },
+            "error": {
+                "title": "Error",
+                "description": "Could not connect to the server"
+            },
+            "read_blog": "Read on the blog here",
+            "contact_support": "Contact us here"
+        },
+        "welcome": {
+            "title": "Welcome to",
+            "information": "Information",
+            "thankyoumessage1": "Thank you for downloading Mue Tab,",
+            "thankyoumessage2": "we hope you enjoy your time with our extension.",
+            "support": "Support",
+            "close": "Close"
+        },
+        "feedback": {
+            "title": "Give us feedback",
+            "question_one": "How would you rate your experience of this Mue build?",
+            "question_two": "What bugs did you encounter in your use of Mue?",
+            "question_three": "How likely would you be to recommend this version of Mue to a friend of colleague?",
+            "submit": "Submit"
+        }
+    },
+    "toasts": {
+        "quote": "Quote copied",
+        "reset": "Reset successfully",
+        "imported": "Successfully imported",
+        "installed": "Successfully installed",
+        "uninstalled": "Successfully removed",
+        "error": "Something went wrong"
+    }
+}

src/translations/en-US.json

@@ -0,0 +1,18 @@
+{
+    "modals": {
+        "main": {
+            "settings": {
+                "sections": {
+                    "quote": {
+                        "favourite": "Favorite"
+                    },
+                    "background": {
+                        "custom_colour": "Custom Background Color",
+                        "add_colour": "Add color",
+                        "favourite": "Favorite"
+                    }
+                }
+            }
+        }
+    }
+}

src/translations/en.json

@@ -1,168 +0,0 @@
-{
-    "greeting": {
-        "morning": "Good Morning",
-        "afternoon": "Good Afternoon",
-        "evening": "Good Evening",
-        "christmas": "Merry Christmas",
-        "newyear": "Happy New Year",
-        "halloween": "Happy Halloween"
-    },
-    "credit": "Photo by",
-    "information": "Information",
-    "search": "Search",
-    "modals": {
-        "title": "Options",
-        "settings": "Settings",
-        "addons": "My Add-ons",
-        "marketplace": "Marketplace"
-    },
-    "settings": {
-        "time": {
-            "title": "Time",
-            "seconds": "Seconds",
-            "twentyfourhour": "24 Hour",
-            "ampm": "AM/PM (12 hour)",
-            "zero": "Zero-padded",
-            "analog": "Analog",
-            "percentageComplete": "Percentage of the Day Complete"
-        },
-        "greeting": {
-            "title": "Greeting",
-            "events": "Events",
-            "default": "Default Greeting Message",
-            "name": "Name for greeting",
-            "birthday_enabled": "Birthday Enabled",
-            "birthday_date": "Birthday Date"
-        },
-        "quote": {
-            "title": "Quote",
-            "copy": "Copy Button",
-            "tweet": "Tweet Button",
-            "favourite": "Favourite Button"
-        },
-        "background": {
-            "title": "Background",
-            "api": "Background API",
-            "blur": "Adjust Blur",
-            "brightness": "Adjust Brightness",
-            "custom_url": "Custom Background URL",
-            "custom_background": "Custom Background",
-            "custom_colour": "Custom Background Colour",
-            "upload": "Upload",
-            "add_colour": "Add colour",
-            "favourite": "Favourite",
-            "view": "View",
-            "refresh": "Refresh",
-            "disabled": "Disabled"
-        },
-        "searchbar": {
-            "title": "Search Bar",
-            "search_engine": "Search Engine",
-            "custom": "Custom Search URL"
-        },
-        "date": {
-            "title": "Date",
-            "short_date": "Short Date",
-            "short_format": "Short Format",
-            "short_separator": {
-                "title": "Short Separator",
-                "default": "Default",
-                "dash": "Dash",
-                "gaps": "Gaps"
-            }
-        },
-        "offline": "Offline Mode",
-        "dark": "Dark Theme",
-        "custom_css": "Custom CSS",
-        "experimental": {
-            "title": "Experimental",
-            "animations": "Animations",
-            "voice_search": "Voice Search",
-            "night_mode": "Automatic Night Mode"
-        },
-        "language": "Language",
-        "apply": "Apply",
-        "reset": "Reset",
-        "import": "Import",
-        "export": "Export"
-    },
-    "update": {
-        "title": "Update",
-        "offline": {
-            "title": "Offline",
-            "description": "Cannot get update logs while in offline mode"
-        },
-        "error": {
-            "title": "Error",
-            "description": "Could not connect to the server"
-        },
-        "loading": "Loading...",
-        "read_blog": "Read on the blog here",
-        "contact_support": "Contact us here"
-    },
-    "toasts": {
-        "quote": "Quote Copied",
-        "reset": "Reset successfully",
-        "installed": "Successfully installed",
-        "uninstalled": "Successfully removed",
-        "error": "Something went wrong",
-        "imported": "Successfully imported"
-    },
-    "marketplace": {
-        "photo_packs": "Photo Packs",
-        "quote_packs": "Quote Packs",
-        "preset_settings": "Preset Settings",
-        "themes": "Themes",
-        "product": {
-            "overview": "Overview",
-            "information": "Information",
-            "last_updated": "Last Updated",
-            "version": "Version",
-            "author": "Author",
-            "notice": {
-                "title": "Notice",
-                "description": "In order for the change to take place, the page must be refreshed."
-            },
-            "buttons": {
-                "addtomue": "Add To Mue",
-                "remove": "Remove"
-            },
-            "quote_warning": {
-                "title": "Warning",
-                "description": "This quote pack requests to external servers that may track you!"
-            }
-        },
-        "offline": {
-            "title": "Looks like you're offline",
-            "description": "Please connect to the internet."
-        },
-        "see_more": "See More"
-    },
-    "addons": {
-        "added": "Added",
-        "empty": {
-            "title": "It's empty here",
-            "description": "Head to the marketplace to add some.",
-            "button": "Take me there"
-        },
-        "sideload": "Sideload"
-    },
-    "navbar": {
-        "tooltips": {
-            "update": "Update Patch Notes",
-            "refresh": "Refresh Page"
-        },
-        "notes": {
-            "title": "Notes",
-            "placeholder": "Type here"
-        }
-    },
-    "welcome": {
-        "title": "Welcome to",
-        "information": "Information",
-        "thankyoumessage1": "Thank you for downloading Mue Tab,",
-        "thankyoumessage2": "we hope you enjoy your time with our extension.",
-        "support": "Support",
-        "close": "Close"
-    }
-}