fix: all settings tabs with translations and add quote author link setting

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

@@ -5,16 +5,16 @@ export default function AppearanceSettings (props) {
   return (
     <div>
       <h2>{props.language.title}</h2>
-      <Checkbox name='darkTheme' text={props.language.dark} />
-      <Checkbox name='brightnessTime' text={props.language.night_mode} betaFeature={true} />
-      <h3>Accessibility</h3>
+      <Checkbox name='darkTheme' text={props.language.dark_theme} />
+      <Checkbox name='brightnessTime' text={props.language.night_mode} />
+      <h3>{props.language.accessibility.title}</h3>
       <Checkbox name='animations' text={props.language.animations} betaFeature={true} />
       <ul>
-        <p>Zoom (100%) <span className='modalLink'>{props.language.reset}</span></p>
+        <p>{props.language.accessibility.zoom} (100%) <span className='modalLink'>Reset</span></p>
         <input className='range' type='range' min='50' max='200' value={100} />
       </ul>
       <ul>
-        <p>Toast Duration (2500 milliseconds) <span className='modalLink'>{props.language.reset}</span></p>
+        <p>{props.language.accessibility.toast_duration} (2500 {props.language.accessibility.milliseconds}) <span className='modalLink'>{props.language.reset}</span></p>
         <input className='range' type='range' min='50' max='200' value={100} />
       </ul>
     </div>

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

@@ -14,7 +14,7 @@ import 'react-color-gradient-picker/dist/index.css';
 import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';
 
 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.disabled, 'stop': 0 }], 'type': 'linear' };
   GradientPickerInitalState = undefined;
 
   constructor(...args) {
@@ -131,14 +131,14 @@ export default class BackgroundSettings extends React.PureComponent {
   }
 
   currentGradientSettings = () => {
-    if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.props.language.background.disabled)) {
+    if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.props.language.disabled)) {
       const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
       return JSON.stringify({
         ...this.state.gradientSettings,
         gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
       });
     }
-    return this.props.language.background.disabled;
+    return this.props.language.disabled;
   }
 
   onColorPickerChange = (attrs, name) => {
@@ -209,7 +209,7 @@ export default class BackgroundSettings extends React.PureComponent {
       colourSettings = (
         <div>
           {gradientInputs}
-          {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled &&
+          {this.state.gradientSettings.gradient[0].colour !== this.props.language.disabled &&
            !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{this.props.language.add_colour}</button>) : null
           }
         </div>

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

@@ -43,7 +43,7 @@ export default class GreetingSettings extends React.PureComponent {
     return (
       <div>
         <h2>{this.props.language.title}</h2>
-        <Checkbox name='greeting' text={'Enabled'}>Enabled</Checkbox>
+        <Checkbox name='greeting' text={this.props.enabledLanguage} />
         <Checkbox name='events' text={this.props.language.events} />
         <Checkbox name='defaultGreetingMessage' text={this.props.language.default} />
         <ul>
@@ -51,7 +51,7 @@ export default class GreetingSettings extends React.PureComponent {
           <input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
         </ul>
         <h3>Birthday</h3>
-        <Checkbox name='birthdayenabled' text={'Enabled'} />
+        <Checkbox name='birthdayenabled' text={this.props.enabledLanguage} />
         <ul>
           <p>{this.props.language.birthday_date}</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>

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

@@ -7,6 +7,7 @@ export default function QuoteSettings (props) {
     <div>
       <h2>{props.language.title}</h2>
       <Checkbox name='greeting' text={'Enabled'}></Checkbox>
+      <Checkbox name='authorLink' text={props.language.author_link}></Checkbox>
       <h3>{props.language.buttons}</h3>
       <Checkbox name='copyButton' text={props.language.copy} />
       <Checkbox name='tweetButton' text={props.language.tweet} />

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

@@ -57,8 +57,8 @@ export default class SearchSettings extends React.PureComponent {
   render() {
     return (
       <div className='section'>
-        <h2>Search</h2>
-        <Checkbox name='searchBar' text='Enabled' />
+        <h2>{this.props.language.title}</h2>
+        <Checkbox name='searchBar' text={this.props.enabledLanguage} />
         <Checkbox name='voiceSearch' text={this.props.language.voice_search} />
         <ul>
           <Dropdown label={this.props.language.search_engine}
@@ -68,7 +68,7 @@ export default class SearchSettings extends React.PureComponent {
           {searchEngines.map((engine) =>
             <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
           )}
-          <option className='choices' value='custom'>Custom</option>
+          <option className='choices' value='custom'>{this.props.language.custom.split(' ')[0]}</option>
           </Dropdown>
         </ul>
         <ul id='searchEngineInput' style={{ display: 'none' }}>

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

@@ -56,7 +56,7 @@ export default class TimeSettings extends React.PureComponent {
     return (
       <div>
         <h2>{this.props.language.title}</h2>
-        <Checkbox name='time' text='Enabled' />
+        <Checkbox name='time' text={this.props.enabledLanguage} />
         <Dropdown label='Type' name='timeType' id='timeType' onChange={() => this.changeType()}>
           <option className='choices' value='digital'>{this.props.language.digital.title}</option>
           <option className='choices' value='analogue'>{this.props.language.analogue.title}</option>
@@ -64,7 +64,7 @@ export default class TimeSettings extends React.PureComponent {
         </Dropdown>
         {digitalSettings}
         <h3>{this.props.language.date.title}</h3>
-        <Checkbox name='date' text='Enabled' />
+        <Checkbox name='date' text={this.props.enabledLanguage} />
         <Checkbox name='dayofweek' text={this.props.language.date.day_of_week} />
         <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)}>

src/components/modals/tabs/Settings.jsx

@@ -17,21 +17,21 @@ export default function Settings (props) {
     <React.Fragment>
       <SettingsTabs>
         <div label={props.language.sections.time.title}>
-          <Time language={props.language.sections.time}/>
+          <Time language={props.language.sections.time} enabledLanguage={props.language.enabled} />
         </div>
         <div label={props.language.sections.quote.title}>
-          <Quote language={props.language.sections.quote}/>
+          <Quote language={props.language.sections.quote} enabledLanguage={props.language.enabled}/>
         </div>
         <div label={props.language.sections.greeting.title}>
-          <Greeting language={props.language.sections.greeting} toastLanguage={props.language.toasts} />
+          <Greeting language={props.language.sections.greeting} enabledLanguage={props.language.enabled} toastLanguage={props.toastLanguage} />
         </div>
         <div label={props.language.sections.background.title}>
-          <Background language={props.language.sections.background} toastLanguage={props.toastLanguage}/>
+          <Background language={props.language.sections.background} enabledLanguage={props.language.enabled} toastLanguage={props.toastLanguage}/>
         </div>
         <div label={props.language.sections.search.title}>
-          <Search language={props.language.sections.search}/>
+          <Search language={props.language.sections.search} enabledLanguage={props.language.enabled}/>
         </div>
-        <div label={props.language.sections.appearance}>
+        <div label={props.language.sections.appearance.title}>
           <Appearance language={props.language.sections.appearance} toastLanguage={props.toastLanguage}/>
         </div>
         <div label={props.language.sections.language}>

src/components/widgets/quote/Quote.jsx

@@ -90,10 +90,13 @@ export default class Quote extends React.PureComponent {
         return this.doOffline();
       }
 
+      let authorlink = `https://${this.props.languagecode.split('-')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
+      if (localStorage.getItem('authorLink') === 'false') authorLink = null;
+
       this.setState({
         quote: '"' + data.quote + '"',
         author: data.author,
-        authorlink: `https://${this.props.languagecode}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`
+        authorlink: authorlink
       });
     } catch (e) {
       // ..and if that fails we load one locally

src/translations/en-GB.json

@@ -34,6 +34,7 @@
         "marketplace": "Marketplace"
       },
       "settings": {
+        "enabled": "Enabled",
         "sections": {
           "time": {
             "title": "Time",
@@ -60,9 +61,9 @@
               "short_format": "Short Format",
               "short_separator": {
                 "title": "Short Separator",
-                "default": "Default",
-                "dash": "Dash",
-                "gaps": "Gaps"
+                "default": "Dots (.)",
+                "dash": "Dash (-)",
+                "gaps": "Gaps ( )"
               }
             }
           },
@@ -71,7 +72,8 @@
             "buttons": "Buttons",
             "copy": "Copy",
             "tweet": "Tweet",
-            "favourite": "Favourite"
+            "favourite": "Favourite",
+            "author_link": "Author Link"
           },
           "greeting": {
             "title": "Greeting",
@@ -98,9 +100,21 @@
           "search": {
             "title": "Search",
             "search_engine": "Search Engine",
-            "custom": "Custom Search URL"
+            "custom": "Custom Search URL",
+            "voice_search": "Voice Search"
+          },
+          "appearance":{
+            "title": "Appearance",
+            "dark_theme": "Dark Theme",
+            "night_mode": "Night Mode",
+            "animations": "Animations",
+            "accessibility": {
+              "title": "Accessibility",
+              "zoom": "Zoom",
+              "toast_duration": "Toast Duration",
+              "milliseconds": "milliseconds"
+            }
           },
-          "appearance": "Appearance",
           "language": "Language",
           "changelog": "Change Log",
           "about": {
@@ -121,7 +135,6 @@
           }
         },
         "buttons": {
-          "apply": "Apply",
           "reset": "Reset",
           "import": "Import",
           "export": "Export"