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>

src/components/widgets/background/Background.jsx

@@ -100,10 +100,10 @@ export default class Background extends React.PureComponent {
     if (customBackgroundColour !== 'Disabled' && customBackgroundColour !== '') {
       let gradientSettings = '';
       try {
-        gradientSettings = JSON.parse(colour);
+        gradientSettings = JSON.parse(customBackgroundColour);
       } catch (e) {
         const hexColorRegex = /#[0-9a-fA-F]{6}/s;
-        if (hexColorRegex.exec(colour)) {
+        if (hexColorRegex.exec(customBackgroundColour)) {
           // Colour use to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception)
           gradientSettings = { "type": "linear", "angle": "180", "gradient": [{ "colour": colour, "stop": 0 }] };
           localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));

src/components/widgets/quote/Quote.jsx

@@ -57,6 +57,10 @@ export default class Quote extends React.PureComponent {
   }
 
   async getQuote() {
+    if (localStorage.getItem('offlineMode') === 'true') {
+      return this.doOffline();
+    }
+
     const quotePackAPI = JSON.parse(localStorage.getItem('quoteAPI'));
     if (quotePackAPI) {
       try {
@@ -86,10 +90,6 @@ export default class Quote extends React.PureComponent {
       });
     }
 
-    if (localStorage.getItem('offlineMode') === 'true') {
-      return this.doOffline();
-    }
-
     // First we try and get a quote from the API...
     try {
       const data = await (await fetch(window.constants.API_URL + '/getQuote?language=' + localStorage.getItem('quotelanguage'))).json();

src/modules/constants.js

@@ -5,3 +5,4 @@ export const WEBSITE_URL = 'https://muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const OFFLINE_IMAGES = 20;
 export const BETA_VERSION = false;
+export const VERSION = 5.0; 

src/modules/languages.json

@@ -1,30 +1,30 @@
 [
   {
-    "text": "English (UK)",
-    "code": "en-GB"
+    "name": "English (UK)",
+    "value": "en-GB"
   },
   {
-    "text": "English (US)",
-    "code": "en-US"
+    "name": "English (US)",
+    "value": "en-US"
   },
   {
-    "text": "Español",
-    "code": "es"
+    "name": "Español",
+    "value": "es"
   },
   {
-    "text": "Français",
-    "code": "fr"
+    "name": "Français",
+    "value": "fr"
   },
   {
-    "text": "Nederlands",
-    "code": "nl"
+    "name": "Nederlands",
+    "value": "nl"
   },
   {
-    "text": "Norsk",
-    "code": "no"
+    "name": "Norsk",
+    "value": "no"
   },
   {
-    "text": "Pусский",
-    "code": "ru"
+    "name": "Pусский",
+    "value": "ru"
   }
 ]

src/scss/_variables.scss

@@ -9,6 +9,7 @@ $theme-colours: (
 
 $modal: (
   'background': #fff,
+  'background-dark': #2f3542,
   'text': rgba(0, 0, 0, 1),
   'tab-underline': rgba(204, 204, 204, 1),
   'tab-underline-active': rgba(0, 0, 0, 1),

src/scss/index.scss

@@ -5,6 +5,18 @@
 @import 'modules/marketplace';
 @import 'modules/buttons';
 
+:root {
+  --main-text: map-get($theme-colours, 'main');
+  --modal-text: map-get($modal, 'text');
+  --background: map-get($modal, 'background'); 
+}
+
+.dark {
+  --main-text: map-get($theme-colours, 'secondary');
+  --modal-text: map-get($theme-colours, 'main');
+  --background: map-get($modal, 'background-dark'); 
+}
+
 body {
   background: #2f3640;
   margin: 0;