refactor: improve dark theme, add switch component etc, fix stuff

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/main/settings/Radio.jsx

@@ -28,7 +28,7 @@ export default class Radio extends React.PureComponent {
         <FormLabel className='radio-title' component='legend'>{this.props.title}</FormLabel>
         <RadioGroup aria-label={this.props.name} name={this.props.name} onChange={(e) => this.handleChange(e.target.value)} value={this.state.value}>
           {this.props.options.map(option =>
-            <FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} />
+            <FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} key={option.name} />
           )}
         </RadioGroup>
       </FormControl>

src/components/modals/main/settings/Switch.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import SettingsFunctions from '../../../../modules/helpers/settings';
+
+import SwitchUI from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+export default class Switch extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      checked: (localStorage.getItem(this.props.name) === 'true')
+    };
+  }
+
+  handleChange() {
+    SettingsFunctions.setItem(this.props.name);
+
+    this.setState({
+      checked: (this.state.checked === true) ? false : true
+    });
+  }
+
+  render() {
+    let text = this.props.text;
+
+    if (this.props.newFeature) {
+      text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
+    } else if (this.props.betaFeature) {
+      text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
+    }
+
+    return (
+      <React.Fragment>
+        <FormControlLabel
+          control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
+          label={text}
+          labelPlacement='start'
+        />
+        <br/>
+      </React.Fragment>
+    );
+  }
+}

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

@@ -24,7 +24,7 @@ export default class About extends React.PureComponent {
     const newVersion = versionData[0].tag_name;
 
     let updateMsg = this.language.version.no_update;
-    if (window.constants.VERSION < newVersion) {
+    if (Number(window.constants.VERSION) < newVersion) {
       updateMsg = `${this.language.version.update_available}: ${newVersion}`;
     }
 

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

@@ -223,10 +223,8 @@ export default class BackgroundSettings extends React.PureComponent {
         <h2>{background.title}</h2>
         <Checkbox name='background' text='Enabled' />
         <h3>{background.buttons.title}</h3>
-        <ul>
-          <Checkbox name='view' text={background.buttons.view} />
-          <Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
-        </ul>
+        <Checkbox name='view' text={background.buttons.view} />
+        <Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
 
         <h3>{background.effects.title}</h3>
         <ul>
@@ -239,12 +237,10 @@ export default class BackgroundSettings extends React.PureComponent {
         </ul>
     
         <h3>{background.source.title}</h3>
-        <ul>
-          <Dropdown label={background.source.api} name='backgroundAPI'>
-            <option className='choices' value='mue'>Mue</option>
-            <option className='choices' value='unsplash'>Unsplash</option>
-          </Dropdown>
-        </ul>
+        <Dropdown label={background.source.api} name='backgroundAPI'>
+          <option className='choices' value='mue'>Mue</option>
+          <option className='choices' value='unsplash'>Unsplash</option>
+        </Dropdown>
         <ul>
           <p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
           <input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Checkbox from '../Checkbox';
+import Switch from '../Switch';
 
 import DatePicker from 'react-date-picker';
 import { toast } from 'react-toastify';
@@ -46,7 +47,7 @@ export default class GreetingSettings extends React.PureComponent {
     return (
       <div>
         <h2>{greeting.title}</h2>
-        <Checkbox name='greeting' text={this.language.enabled} />
+        <Switch name='greeting' text={this.language.enabled} />
         <Checkbox name='events' text={greeting.events} />
         <Checkbox name='defaultGreetingMessage' text={greeting.default} />
         <ul>

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

@@ -67,7 +67,6 @@ export default class TimeSettings extends React.PureComponent {
         <h3>{time.date.title}</h3>
         <Checkbox name='date' text={this.language.enabled} />
         <Checkbox name='dayofweek' text={time.date.day_of_week} />
-        <Checkbox name='weeknumber' text={time.date.week_number} />
         <Checkbox name='datenth' text={time.date.datenth} />
         <Checkbox name='short' text={time.date.short_date} betaFeature={true} />
         <Dropdown label={time.date.short_format} name='dateFormat'>