From 51eaf3a90eb3a1c454d01a2dc57d07521d62159e Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Thu, 18 Mar 2021 15:22:41 +0000
Subject: [PATCH] fix: translation cleanup

---
 .../modals/settings/sections/Advanced.jsx     | 26 +++++-----
 .../modals/settings/sections/Background.jsx   | 34 ++++++------
 .../modals/settings/sections/Greeting.jsx     | 20 +++----
 .../modals/settings/sections/Language.jsx     | 12 ++---
 .../modals/settings/sections/Quote.jsx        | 16 +++---
 .../modals/settings/sections/Search.jsx       | 14 ++---
 .../modals/settings/sections/Time.jsx         | 52 ++++++++++---------
 src/components/modals/tabs/Settings.jsx       | 20 +++----
 .../widgets/background/Background.jsx         |  2 +-
 src/components/widgets/quote/Quote.jsx        |  4 +-
 src/scss/modules/_settings.scss               | 13 -----
 src/translations/en-GB.json                   | 22 ++++++--
 src/translations/en-US.json                   |  3 ++
 13 files changed, 127 insertions(+), 111 deletions(-)

diff --git a/src/components/modals/settings/sections/Advanced.jsx b/src/components/modals/settings/sections/Advanced.jsx
index 313bba7b..7c263675 100644
--- a/src/components/modals/settings/sections/Advanced.jsx
+++ b/src/components/modals/settings/sections/Advanced.jsx
@@ -34,27 +34,29 @@ export default class AdvancedSettings extends React.PureComponent {
   }
 
   render() {
+    const { advanced } = this.props.language.sections;
+
     return (
       <div>
-        <h2>Advanced</h2>
-        <Checkbox name='offlineMode' text='Offline Mode' />
-        <h3>Data</h3>
-        <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>Reset</button>
-        <button className='export' onClick={() => SettingsFunctions.exportSettings()}>Export</button>
-        <button className='import' onClick={() => document.getElementById('file-input').click()}>Import</button>
+        <h2>{advanced.title}</h2>
+        <Checkbox name='offlineMode' text={advanced.offline_mode} />
+        <h3>{advanced.data}</h3>
+        <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{this.props.language.buttons.reset}</button>
+        <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.buttons.export}</button>
+        <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.buttons.import}</button>
         <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
-        <h3>Customisation</h3>
+        <h3>{advanced.customisation}</h3>
         <ul>
-          <p>Custom CSS <span className='modalLink' onClick={() => this.resetItem('customcss')}>Reset</span></p>
+          <p>{advanced.custom_css} <span className='modalLink' onClick={() => this.resetItem('customcss')}>{this.props.language.buttons.reset}</span></p>
           <textarea id='customcss'></textarea>
         </ul>
         <ul>
-          <p>Custom JS <span className='modalLink' onClick={() => this.resetItem('customjs')}>Reset</span></p>
+          <p>{advanced.custom_js} <span className='modalLink' onClick={() => this.resetItem('customjs')}>{this.props.language.buttons.reset}</span></p>
           <textarea id='customjs'></textarea>
         </ul>
-        <h3>Experimental</h3>
-        <p>Please note that the Mue team cannot provide support if you have experimental mode on. Please disable it first and see if the issues continue to occur before contacting support.</p>
-        <Checkbox name='experimental' text='Enabled' />
+        <h3>{this.props.language.sections.experimental.title}</h3>
+        <p>{advanced.experimental_warning}</p>
+        <Checkbox name='experimental' text={this.props.language.enabled} />
       </div>
     );
   }
diff --git a/src/components/modals/settings/sections/Background.jsx b/src/components/modals/settings/sections/Background.jsx
index bd44c961..b94aab80 100644
--- a/src/components/modals/settings/sections/Background.jsx
+++ b/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.disabled, 'stop': 0 }], 'type': 'linear' };
+  DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': this.props.language.sections.background.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.disabled)) {
+    if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.props.language.sections.background.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.disabled;
+    return this.props.language.sections.background.disabled;
   }
 
   onColorPickerChange = (attrs, name) => {
@@ -171,12 +171,14 @@ export default class BackgroundSettings extends React.PureComponent {
     localStorage.setItem('brightness', this.state.brightness);
     localStorage.setItem('customBackground', this.state.customBackground);
 
-    if (document.getElementById('customBackgroundHex').value !== this.props.backgroundDisabled) {
+    if (document.getElementById('customBackgroundHex').value !== this.props.language.sections.background.disabled) {
       localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
     }
   }
 
   render() {
+    const { background } = this.props.language.sections;
+
     let colourSettings = null;
     if (typeof this.state.gradientSettings === 'object') {
       const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
@@ -209,8 +211,8 @@ export default class BackgroundSettings extends React.PureComponent {
       colourSettings = (
         <div>
           {gradientInputs}
-          {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
+          {this.state.gradientSettings.gradient[0].colour !== background.disabled &&
+           !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{background.add_colour}</button>) : null
           }
         </div>
       );
@@ -222,23 +224,23 @@ export default class BackgroundSettings extends React.PureComponent {
         <Checkbox name='background' text='Enabled' />
         <h3>Buttons</h3>
         <ul>
-          <Checkbox name='view' text={this.props.language.view} />
-          <Checkbox name='favouriteEnabled' text={this.props.language.favourite} />
-          <Checkbox name='refresh' text={this.props.language.refresh} />
+          <Checkbox name='view' text={background.view} />
+          <Checkbox name='favouriteEnabled' text={background.favourite} />
+          <Checkbox name='refresh' text={background.refresh} />
         </ul>
         <h3>Effects</h3>
         <ul>
-          <p>{this.props.language.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
+          <p>{background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.buttons.reset}</span></p>
           <input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
         </ul>
         <ul>
-          <p>{this.props.language.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
+          <p>{background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.buttons.reset}</span></p>
           <input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
         </ul>
         <h3>Source</h3>
         <ul>
           <Dropdown
-            label={this.props.language.api}
+            label={background.api}
             name='backgroundapi'
             id='backgroundAPI'
             onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
@@ -247,16 +249,16 @@ export default class BackgroundSettings extends React.PureComponent {
           </Dropdown>
         </ul>
         <ul>
-          <p>{this.props.language.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+          <p>{background.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.buttons.reset}</span></p>
           <input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
         </ul>
         <ul>
-          <p>{this.props.language.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.upload}</button>
+          <p>{background.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.buttons.reset}</span></p>
+          <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.upload}</button>
           <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
         </ul>
         <ul>
-          <p>{this.props.language.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
+          <p>{background.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.buttons.reset}</span></p>
           <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
           {colourSettings}
         </ul>
diff --git a/src/components/modals/settings/sections/Greeting.jsx b/src/components/modals/settings/sections/Greeting.jsx
index 042cc6c3..53c77b05 100644
--- a/src/components/modals/settings/sections/Greeting.jsx
+++ b/src/components/modals/settings/sections/Greeting.jsx
@@ -19,7 +19,7 @@ export default class GreetingSettings extends React.PureComponent {
       greetingName: ''
     });
 
-    toast(this.props.toastLanguage.reset);
+    toast(this.props.language.toasts.reset);
   }
 
   changeDate(data) {
@@ -40,20 +40,22 @@ export default class GreetingSettings extends React.PureComponent {
   }
 
   render() {
+    const { greeting } = this.props.language.sections;
+
     return (
       <div>
-        <h2>{this.props.language.title}</h2>
-        <Checkbox name='greeting' text={this.props.enabledLanguage} />
-        <Checkbox name='events' text={this.props.language.events} />
-        <Checkbox name='defaultGreetingMessage' text={this.props.language.default} />
+        <h2>{greeting.title}</h2>
+        <Checkbox name='greeting' text={this.props.language.enabled} />
+        <Checkbox name='events' text={greeting.events} />
+        <Checkbox name='defaultGreetingMessage' text={greeting.default} />
         <ul>
-          <p>{this.props.language.name} <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
+          <p>{greeting.name} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.buttons.reset}</span></p>
           <input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
         </ul>
-        <h3>Birthday</h3>
-        <Checkbox name='birthdayenabled' text={this.props.enabledLanguage} />
+        <h3>{greeting.birthday}</h3>
+        <Checkbox name='birthdayenabled' text={this.props.language.enabled} />
         <ul>
-          <p>{this.props.language.birthday_date}</p>
+          <p>{greeting.birthday_date}</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
         </ul>
       </div>
diff --git a/src/components/modals/settings/sections/Language.jsx b/src/components/modals/settings/sections/Language.jsx
index 5f2e7edb..8efd7486 100644
--- a/src/components/modals/settings/sections/Language.jsx
+++ b/src/components/modals/settings/sections/Language.jsx
@@ -6,18 +6,14 @@ const languages = require('../../../../modules/languages.json');
 export default function LanguageSettings (props) {
   return (
     <div>
-      <h2>Language</h2>
-      <h4 htmlFor='language' className='nodropdown'>{props.language.language}</h4>
-      <Dropdown
-        name='language'
-        id='language'
-        onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
+      <h2>{props.language.title}</h2>
+      <Dropdown label={props.language.title} name='language' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
         {languages.map(language =>
           <option className='choices' value={language.code} key={language.code}>{language.text}</option>
         )}
       </Dropdown>
-      <h4 htmlFor='quotelanguage' className='nodropdown'>Quote {props.language.language}</h4>
-      <Dropdown label={props.language.language} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
+      <br/>
+      <Dropdown label={props.language.quote} 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>
diff --git a/src/components/modals/settings/sections/Quote.jsx b/src/components/modals/settings/sections/Quote.jsx
index d34df186..1ce31ce4 100644
--- a/src/components/modals/settings/sections/Quote.jsx
+++ b/src/components/modals/settings/sections/Quote.jsx
@@ -3,15 +3,17 @@ import React from 'react';
 import Checkbox from '../Checkbox';
 
 export default function QuoteSettings (props) {
+  const { quote } = props.language.sections;
+
   return (
     <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} />
-      <Checkbox name='favouriteQuoteEnabled' text={props.language.favourite} />
+      <h2>{quote.title}</h2>
+      <Checkbox name='quote' text={props.language.enabled}></Checkbox>
+      <Checkbox name='authorLink' text={quote.author_link}></Checkbox>
+      <h3>{quote.buttons}</h3>
+      <Checkbox name='copyButton' text={quote.copy} />
+      <Checkbox name='tweetButton' text={quote.tweet} />
+      <Checkbox name='favouriteQuoteEnabled' text={quote.favourite} />
     </div>
   );
 }
diff --git a/src/components/modals/settings/sections/Search.jsx b/src/components/modals/settings/sections/Search.jsx
index ddddd697..6b1fee97 100644
--- a/src/components/modals/settings/sections/Search.jsx
+++ b/src/components/modals/settings/sections/Search.jsx
@@ -55,24 +55,26 @@ export default class SearchSettings extends React.PureComponent {
   }
 
   render() {
+    const { search } = this.props.language.sections;
+
     return (
       <div className='section'>
-        <h2>{this.props.language.title}</h2>
-        <Checkbox name='searchBar' text={this.props.enabledLanguage} />
-        <Checkbox name='voiceSearch' text={this.props.language.voice_search} />
+        <h2>{search.title}</h2>
+        <Checkbox name='searchBar' text={this.props.language.enabled} />
+        <Checkbox name='voiceSearch' text={search.voice_search} />
         <ul>
-          <Dropdown label={this.props.language.search_engine}
+          <Dropdown label={search.search_engine}
             name='searchEngine'
             id='searchEngine'
             onChange={() => this.setSearchEngine(document.getElementById('searchEngine').value)} >
           {searchEngines.map((engine) =>
             <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
           )}
-          <option className='choices' value='custom'>{this.props.language.custom.split(' ')[0]}</option>
+          <option className='choices' value='custom'>{search.custom.split(' ')[0]}</option>
           </Dropdown>
         </ul>
         <ul id='searchEngineInput' style={{ display: 'none' }}>
-          <p style={{ 'marginTop': '0px' }}>{this.props.language.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
+          <p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
           <input type='text' id='customSearchEngine'></input>
         </ul>
       </div>
diff --git a/src/components/modals/settings/sections/Time.jsx b/src/components/modals/settings/sections/Time.jsx
index d2136ff4..54fb19cb 100644
--- a/src/components/modals/settings/sections/Time.jsx
+++ b/src/components/modals/settings/sections/Time.jsx
@@ -26,24 +26,26 @@ export default class TimeSettings extends React.PureComponent {
   }
 
   render() {
+    const { time } = this.props.language.sections;
+
     let digitalSettings = (
       <React.Fragment>
-        <h3>{this.props.language.digital.title}</h3>
-        <Checkbox name='seconds' text={this.props.language.digital.seconds} />
-        <Checkbox name='24hour' text={this.props.language.digital.twentyfourhour} />
-        <Checkbox name='ampm' text={this.props.language.digital.ampm} />
-        <Checkbox name='zero' text={this.props.language.digital.zero} />
+        <h3>{time.digital.title}</h3>
+        <Checkbox name='seconds' text={time.digital.seconds} />
+        <Checkbox name='24hour' text={time.digital.twentyfourhour} />
+        <Checkbox name='ampm' text={time.digital.ampm} />
+        <Checkbox name='zero' text={time.digital.zero} />
       </React.Fragment>
     );
 
     let analogSettings = (
       <React.Fragment>
-        <h3>{this.props.language.analogue.title}</h3>
-        <Checkbox name='secondHand' text={this.props.language.analogue.second_hand} />
-        <Checkbox name='minuteHand' text={this.props.language.analogue.minute_hand} />
-        <Checkbox name='hourHand' text={this.props.language.analogue.hour_hand} />
-        <Checkbox name='hourMarks' text={this.props.language.analogue.hour_marks} />
-        <Checkbox name='minuteMarks' text={this.props.language.analogue.minute_marks} />
+        <h3>{time.analogue.title}</h3>
+        <Checkbox name='secondHand' text={time.analogue.second_hand} />
+        <Checkbox name='minuteHand' text={time.analogue.minute_hand} />
+        <Checkbox name='hourHand' text={time.analogue.hour_hand} />
+        <Checkbox name='hourMarks' text={time.analogue.hour_marks} />
+        <Checkbox name='minuteMarks' text={time.analogue.minute_marks} />
       </React.Fragment>
     );
 
@@ -55,27 +57,27 @@ export default class TimeSettings extends React.PureComponent {
 
     return (
       <div>
-        <h2>{this.props.language.title}</h2>
-        <Checkbox name='time' text={this.props.enabledLanguage} />
+        <h2>{time.title}</h2>
+        <Checkbox name='time' text={this.props.language.enabled} />
         <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>
-          <option className='choices' value='percentageComplete'>{this.props.language.percentage_complete}</option>
+          <option className='choices' value='digital'>{time.digital.title}</option>
+          <option className='choices' value='analogue'>{time.analogue.title}</option>
+          <option className='choices' value='percentageComplete'>{time.percentage_complete}</option>
         </Dropdown>
         {digitalSettings}
-        <h3>{this.props.language.date.title}</h3>
-        <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)}>
+        <h3>{time.date.title}</h3>
+        <Checkbox name='date' text={this.props.language.enabled} />
+        <Checkbox name='dayofweek' text={time.date.day_of_week} />
+        <Checkbox name='short' text={time.date.short_date} betaFeature={true} />
+        <Dropdown label={time.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>
-        <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 label={time.date.short_separator.title} name='shortFormat' id='shortformat' onChange={() => localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}>
+          <option className='choices' value='default'>{time.date.short_separator.default}</option>
+          <option className='choices' value='dash'>{time.date.short_separator.dash}</option>
+          <option className='choices' value='gaps'>{time.date.short_separator.gaps}</option>
          </Dropdown>
       </div>
     );
diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx
index 10b32e8a..62ccfb34 100644
--- a/src/components/modals/tabs/Settings.jsx
+++ b/src/components/modals/tabs/Settings.jsx
@@ -17,28 +17,28 @@ export default function Settings (props) {
     <React.Fragment>
       <SettingsTabs>
         <div label={props.language.sections.time.title}>
-          <Time language={props.language.sections.time} enabledLanguage={props.language.enabled} />
+          <Time language={props.language}/>
         </div>
         <div label={props.language.sections.quote.title}>
-          <Quote language={props.language.sections.quote} enabledLanguage={props.language.enabled}/>
+          <Quote language={props.language}/>
         </div>
         <div label={props.language.sections.greeting.title}>
-          <Greeting language={props.language.sections.greeting} enabledLanguage={props.language.enabled} toastLanguage={props.toastLanguage} />
+          <Greeting language={props.language}/>
         </div>
         <div label={props.language.sections.background.title}>
-          <Background language={props.language.sections.background} enabledLanguage={props.language.enabled} toastLanguage={props.toastLanguage}/>
+          <Background language={props.language}/>
         </div>
         <div label={props.language.sections.search.title}>
-          <Search language={props.language.sections.search} enabledLanguage={props.language.enabled}/>
+          <Search language={props.language}/>
         </div>
         <div label={props.language.sections.appearance.title}>
-          <Appearance language={props.language.sections.appearance} toastLanguage={props.toastLanguage}/>
+          <Appearance language={props.language.sections.appearance} resetLanguage={props.language.buttons.reset} toastLanguage={props.toastLanguage}/>
         </div>
-        <div label={props.language.sections.language}>
-          <Language language={props.language}/>
+        <div label={props.language.sections.language.title}>
+          <Language language={props.language.sections.language}/>
         </div>
-        <div label='Advanced'>
-          <Advanced/>
+        <div label={props.language.sections.advanced.title}>
+          <Advanced language={props.language}/>
         </div>
         <div label='Experimental'>
 
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index bf6a37ba..36e6172e 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -111,7 +111,7 @@ export default class Background extends React.PureComponent {
       this.setBackground(randomPhoto.url.default, null, randomPhoto.photographer);
       this.setCredit(randomPhoto.photographer);
       document.getElementById('location').textContent = randomPhoto.location;
-    } else if (customBackgroundColour) {
+    } else if (customBackgroundColour !== 'Disabled' && customBackgroundColour !== '') {
       this.setBackground(null, customBackgroundColour, 'false');
     } else if (customBackground !== '') {
       if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) {
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 0092e0b8..87301dbc 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -91,7 +91,9 @@ export default class Quote extends React.PureComponent {
       }
 
       let authorlink = `https://${this.props.languagecode.split('-')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
-      if (localStorage.getItem('authorLink') === 'false') authorLink = null;
+      if (localStorage.getItem('authorLink') === 'false') {
+        authorLink = null;
+      }
 
       this.setState({
         quote: '"' + data.quote + '"',
diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss
index 1a356f59..c61ab1ce 100644
--- a/src/scss/modules/_settings.scss
+++ b/src/scss/modules/_settings.scss
@@ -1,16 +1,3 @@
-.switch {
-  position: relative;
-  width: 60px;
-  height: 34px;
-  float: right;
-
-  input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/translations/en-GB.json b/src/translations/en-GB.json
index 68e1e470..f0f017bf 100644
--- a/src/translations/en-GB.json
+++ b/src/translations/en-GB.json
@@ -80,6 +80,7 @@
             "events": "Events",
             "default": "Default Greeting Message",
             "name": "Name for greeting",
+            "birthday": "Birthday",
             "birthday_date": "Birthday Date"
           },
           "background": {
@@ -103,7 +104,7 @@
             "custom": "Custom Search URL",
             "voice_search": "Voice Search"
           },
-          "appearance":{
+          "appearance": {
             "title": "Appearance",
             "dark_theme": "Dark Theme",
             "night_mode": "Night Mode",
@@ -115,7 +116,22 @@
               "milliseconds": "milliseconds"
             }
           },
-          "language": "Language",
+          "advanced": {
+            "title": "Advanced",
+            "offline_mode": "Offline Mode",
+            "data": "Data",
+            "customisation": "Customisation",
+            "custom_css": "Custom CSS",
+            "custom_js": "Custom JS",
+            "experimental_warning": "Please note that the Mue team cannot provide support if you have experimental mode on. Please disable it first and see if the issue continues to occur before contacting support." 
+          },
+          "experimental": {
+            "title": "Experimental"
+          },
+          "language": {
+            "title": "Language",
+            "quote": "Quote Language"
+          },
           "changelog": "Change Log",
           "about": {
             "title": "About",
@@ -206,7 +222,7 @@
       "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?",
+      "question_three": "How likely would you be to recommend this version of Mue to a friend or colleague?",
       "submit": "Submit"
     }
   },
diff --git a/src/translations/en-US.json b/src/translations/en-US.json
index cba3f472..8e0ec380 100644
--- a/src/translations/en-US.json
+++ b/src/translations/en-US.json
@@ -15,6 +15,9 @@
             "analogue": {
               "title": "Analog"
             }
+          },
+          "advanced": {
+            "customisation": "Customization"
           }
         }
       }