fix: new radio buttons, fix background bugs etc

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

src/components/modals/main/scss/index.scss

@@ -50,25 +50,6 @@
   }
 }
 
-.dark {
-  background-color: #2f3542 !important;
-  color: white !important;
-
-  .sidebar {
-    background-color: #2a303b !important;
-  }
-
-  .tab-list-active {
-    background: rgba(161, 159, 159, 0.8);
-  }
-
-  .tab-list-item {
-    &:hover {
-      background: rgba(161, 159, 159, 0.8);
-    }
-  }
-}
-
 .ReactModal__Html--open,
 .ReactModal__Body--open {
   overflow: hidden;

src/components/modals/main/scss/settings/_main.scss

@@ -5,11 +5,11 @@
 input {
   &[type=text] {
     width: 200px;
-    padding: 0.5rem 1rem;
-    box-sizing: border-box;
-    border-image-slice: 1;
-    border-image-source: map-get($theme-colours, 'gradient');
-    background: transparent;
+    color: black;
+    background: #f0f0f0;
+    border: none;
+    padding: 10px 10px;
+    border-radius: 5px;
   }
 
   &:checked+.slider {
@@ -47,7 +47,7 @@ h4 {
 }
 
 ul {
-  padding-left: 5px;
+  padding-left: 0px;
   margin: 0;
 
   >label {
@@ -196,3 +196,8 @@ input[type=color]::-moz-color-swatch {
     font-size: 1em;
   }
 }
+
+.radio-title {
+  text-transform: uppercase;
+  font-weight: bold;
+}

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

@@ -13,8 +13,8 @@ export default class Checkbox extends React.PureComponent {
     };
   }
 
-  handleChange(name) {
-    SettingsFunctions.setItem(name);
+  handleChange() {
+    SettingsFunctions.setItem(this.props.name);
 
     this.setState({
       checked: (this.state.checked === true) ? false : true
@@ -33,7 +33,7 @@ export default class Checkbox extends React.PureComponent {
     return (
       <React.Fragment>
         <FormControlLabel
-          control={<CheckboxUI name='checkedB' color='primary' checked={this.state.checked} onChange={() => this.handleChange(this.props.name)} />}
+          control={<CheckboxUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
           label={text}
         />
         <br/>

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

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import RadioUI from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+
+export default class Radio extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      value: localStorage.getItem(this.props.name)
+    };
+  }
+  
+  handleChange(value) {
+    localStorage.setItem(this.props.name, value);
+  
+    this.setState({
+      value: value
+    });
+  }
+  
+  render() {
+    return (
+      <FormControl component='fieldset'>
+        <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} />
+          )}
+        </RadioGroup>
+      </FormControl>
+    );
+  }
+}

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>