fix: new radio buttons, fix background bugs etc

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

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

@@ -3,7 +3,6 @@ import React from 'react';
 import Tooltip from '@material-ui/core/Tooltip';
 
 const other_contributors = require('../../../../../modules/other_contributors.json');
-const { version } = require('../../../../../../package.json');
 
 export default class About extends React.PureComponent {
   constructor(...args) {
@@ -25,7 +24,7 @@ export default class About extends React.PureComponent {
     const newVersion = versionData[0].tag_name;
 
     let updateMsg = this.language.version.no_update;
-    if (version < newVersion) {
+    if (window.constants.VERSION < newVersion) {
       updateMsg = `${this.language.version.update_available}: ${newVersion}`;
     }
 
@@ -54,7 +53,7 @@ export default class About extends React.PureComponent {
         <h2>{this.language.title}</h2>
         <img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
         <p>{this.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
-        <p>{this.language.version.title} {version} ({this.state.update})</p>
+        <p>{this.language.version.title} {window.constants.VERSION} ({this.state.update})</p>
         <h3>{this.language.resources_used.title}</h3>
         <p>Pexels ({this.language.resources_used.bg_images})</p>
         <p>Google ({this.language.resources_used.pin_icon})</p>

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
+import Radio from '../Radio';
 
 import { toast } from 'react-toastify';
 
@@ -55,11 +56,24 @@ export default class AppearanceSettings extends React.PureComponent {
   render() {
     const { appearance } = this.language.sections;
 
+    let themeOptions = [
+      {
+        'name': 'Auto',
+        'value': 'auto'
+      },
+      {
+        'name': 'Light',
+        'value': 'light'
+      }, {
+        'name': 'Dark',
+        'value': 'dark'
+      }
+    ]
+
     return (
       <div>
         <h2>{appearance.title}</h2>
-        <Checkbox name='darkTheme' text={appearance.dark_theme} />
-        <Checkbox name='brightnessTime' text={appearance.night_mode} />
+        <Radio name='theme' title='Theme' options={themeOptions} />
 
         <h3>{appearance.navbar.title}</h3>
         <Checkbox name='notesEnabled' text={appearance.navbar.notes} />
@@ -70,7 +84,7 @@ export default class AppearanceSettings extends React.PureComponent {
           <p>{appearance.font.custom} <span className='modalLink' onClick={() => this.resetItem('font')}>{this.language.buttons.reset}</span></p>
           <input type='text' value={this.state.font} onChange={(e) => this.setState({ font: e.target.value })}></input>
         </ul>
-        <br />
+        <br/>
         <Dropdown
             label='Font Weight'
             name='fontweight'

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Dropdown from '../Dropdown';
+import Radio from '../Radio';
 
 const languages = require('../../../../../modules/languages.json');
 
@@ -10,11 +11,7 @@ export default function LanguageSettings () {
   return (
     <div>
       <h2>{language.title}</h2>
-      <Dropdown label={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>
+      <Radio name='language' options={languages} />
       <br/>
       <Dropdown label={language.quote} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
         <option className='choices' value='English'>English</option>