add language support to latest features

src/components/modals/Main.jsx

@@ -12,8 +12,8 @@ export default class MainModal extends React.PureComponent {
     constructor(...args) {
         super(...args);
         this.state = {
-            tab: <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />,
-            currentTab: 'settings'
+            tab: '',
+            currentTab: ''
         };
         this.tabs = {
           settings: <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />,
@@ -25,6 +25,7 @@ export default class MainModal extends React.PureComponent {
   componentDidMount() {
     document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
     document.getElementById('center').classList.toggle('backgroundEffects');
+    this.setState({ tab: this.tabs.settings, currentTab: 'settings' });
   }
 
   componentWillUnmount() {

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

@@ -34,13 +34,13 @@ export default class GreetingSettings extends React.PureComponent {
       <Section title={this.props.language.greeting.title} name='greeting'>
         <Checkbox name='events' text={this.props.language.greeting.events} />
         <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
-        <Checkbox name='birthdayenabled' text='Birthday Enabled' />
+        <Checkbox name='birthdayenabled' text={this.props.language.greeting.birthday_enabled} />
         <ul>
           <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span></p>
           <input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
         </ul>
         <ul>
-          <p>Birthday Date</p>
+          <p>{this.props.language.greeting.birthday_date}</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
         </ul>
         <Beforeunload onBeforeunload={() => this.beforeUnload()}/>

src/components/modals/tabs/Settings.jsx

@@ -52,24 +52,24 @@ export default class Settings extends React.PureComponent {
             <Checkbox name='copyButton' text={this.props.language.quote.copy} />
             <Checkbox name='tweetButton' text={this.props.language.quote.tweet} />
             <Checkbox name='favouriteQuoteEnabled' text={this.props.language.quote.favourite} />
-            <Dropdown label='Language' name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
+            <Dropdown label={this.props.language.language} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
               <option className='choices' value='English'>English</option>
               <option className='choices' value='French'>Français</option>
             </Dropdown>
           </Section>
 
-          <Section title='Date' name='date'>
-            <Checkbox name='short' text='Short Date' betaFeature={true} />
-            <Dropdown label='Short Format' name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>
+          <Section title={this.props.language.date.title} name='date'>
+            <Checkbox name='short' text={this.props.language.date.short_date} betaFeature={true} />
+            <Dropdown label={this.props.language.date.short_format} name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>
               <option className='choices' value='DMY'>DMY</option>
               <option className='choices' value='MDY'>MDY</option>
               <option className='choices' value='YMD'>YMD</option>
             </Dropdown>
             <br/><br/>
-            <Dropdown label='Short Separator' name='shortFormat' id='shortformat' onChange={() => localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}>
-              <option className='choices' value='default'>Default</option>
-              <option className='choices' value='dash'>Dash</option>
-              <option className='choices' value='gaps'>Gaps</option>
+            <Dropdown label={this.props.language.date.short_separator.title} name='shortFormat' id='shortformat' onChange={() => localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}>
+              <option className='choices' value='default'>{this.props.language.date.short_separator.default}</option>
+              <option className='choices' value='dash'>{this.props.language.date.short_separator.dash}</option>
+              <option className='choices' value='gaps'>{this.props.language.date.short_separator.gaps}</option>
             </Dropdown>
           </Section>
 
@@ -82,7 +82,7 @@ export default class Settings extends React.PureComponent {
             <Checkbox name='darkTheme' text={this.props.language.dark} />
             <Checkbox name='brightnessTime' text={this.props.language.experimental.night_mode} betaFeature={true} />
             <ul>
-              <p>Custom CSS <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span> <span className='newFeature'> NEW</span></p>
+              <p>{this.props.language.custom_css} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span> <span className='newFeature'> NEW</span></p>
               <textarea id='customcss'></textarea>
             </ul>
           </Section>

src/modules/constants.js

@@ -3,4 +3,4 @@ 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;
-export const BETA_VERSION = true;
+export const BETA_VERSION = false;

src/translations/en.json

@@ -30,7 +30,9 @@
             "title": "Greeting",
             "events": "Events",
             "default": "Default Greeting Message",
-            "name": "Name for greeting"
+            "name": "Name for greeting",
+            "birthday_enabled": "Birthday Enabled",
+            "birthday_date": "Birthday Date"
         },
         "quote": {
             "title": "Quote",
@@ -58,8 +60,20 @@
             "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",
             "webp": "Enable WebP",