Favourite quote button and some changes

src/components/modals/Settings.jsx

@@ -82,6 +82,7 @@ export default class Settings extends React.PureComponent {
           <Section title={this.props.language.quote.title} name='quote'>
             <Checkbox name='copyButton' text={this.props.language.quote.copy} />
             <Checkbox name='tweetButton' text={this.props.language.quote.tweet} />
+            <Checkbox name='favouriteQuoteEnabled' text={this.props.language.experimental.favourite} />
           </Section>
           <Section title={this.props.language.background.title} name='background'>
             <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
@@ -100,9 +101,6 @@ export default class Settings extends React.PureComponent {
           <Section title={this.props.language.experimental.title} name='experimental' slider={false}>
             <Checkbox name='webp' text={this.props.language.experimental.webp} />
             <Checkbox name='animations' text={this.props.language.experimental.animations} />
-            <Checkbox name='view' text={this.props.language.experimental.view} />
-            <Checkbox name='favouriteEnabled' text={this.props.language.experimental.favourite} />
-            <Checkbox name='refresh' text={this.props.language.experimental.refresh} />
             <Checkbox name='voiceSearch' text={this.props.language.experimental.voicesearch} newFeature={true} />
           </Section>
           <LanguageSettings language={this.props.language} />

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { toast } from 'react-toastify';
+import Checkbox from '../Checkbox';
 
 export default class BackgroundSettings extends React.PureComponent {
   DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": "Disabled", "stop": 0 }], "type": "linear" };
@@ -145,12 +146,17 @@ export default class BackgroundSettings extends React.PureComponent {
       colourSettings = (
         <div>
           {gradientInputs}
-          {this.state.gradientSettings.gradient[0].colour !== 'Disabled' ? (<button type="button" className="add" onClick={this.addColour}>{this.props.language.background.addColour}</button>) : null}
+          {this.state.gradientSettings.gradient[0].colour !== 'Disabled' ? (<button type="button" className="add" onClick={this.addColour}>{this.props.language.background.addcolour}</button>) : null}
         </div>);
     }
 
     return (
       <div>
+        <ul>
+          <Checkbox name='view' text={this.props.language.background.view} />
+          <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
+          <Checkbox name='refresh' text={this.props.language.background.refresh} />
+        </ul>
         <ul>
           <label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
           <label className='dropdown'>

src/components/widgets/Quote.jsx

@@ -4,13 +4,16 @@ import FileCopy from '@material-ui/icons/FilterNone';
 import { toast } from 'react-toastify';
 import * as Constants from '../../modules/constants';
 import TwitterIcon from '@material-ui/icons/Twitter';
+import StarIcon from '@material-ui/icons/Star';
+import StarIcon2 from '@material-ui/icons/StarBorder';
 
 export default class Quote extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
         quote: '',
-        author: ''
+        author: '',
+        favourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} />
     };
   }
 
@@ -51,6 +54,12 @@ export default class Quote extends React.PureComponent {
       }
     }
 
+    const favouriteQuote = localStorage.getItem('favouriteQuote');
+    if (favouriteQuote) return this.setState({
+      quote: favouriteQuote.split(' - ')[0],
+      author: favouriteQuote.split(' - ')[1]
+    });
+
     if (localStorage.getItem('offlineMode') === 'true') return this.doOffline();
 
     try { // First we try and get a quote from the API...
@@ -70,8 +79,19 @@ export default class Quote extends React.PureComponent {
     toast(this.props.language.quote);
   }
 
+  favourite() {
+    if (localStorage.getItem('favouriteQuote')) {
+      localStorage.removeItem('favouriteQuote');
+      this.setState({ favourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} /> });
+    } else {
+      localStorage.setItem('favouriteQuote', this.state.quote + ' - ' + this.state.author);
+      this.setState({ favourited: <StarIcon className='copyButton' onClick={() => this.favourite()} /> });
+    }
+  }
+
   componentDidMount() {
     if (localStorage.getItem('quote') === 'false') return;
+    if (localStorage.getItem('favouriteQuote')) this.setState({ favourited: <StarIcon className='copyButton' onClick={() => this.favourite()} /> });
     this.getQuote();
   }
 
@@ -82,10 +102,12 @@ export default class Quote extends React.PureComponent {
     let tweet = <TwitterIcon className='copyButton' onClick={() => window.open(`https://twitter.com/intent/tweet?text=${this.state.quote} - ${this.state.author} on @getmue`, '_blank').focus()}/>
     if (localStorage.getItem('tweetButton') === 'false') tweet = null;
 
+    if (localStorage.getItem('favouriteQuoteEnabled') === 'false') this.setState({ favourited: null });
+
     return (
         <div className='quotediv'>
           <h1 className='quote'>{`${this.state.quote}`}</h1>
-          <h1 className='quoteauthor'>{this.state.author} {copy} {tweet}</h1>
+          <h1 className='quoteauthor'>{this.state.author} {copy} {tweet} {this.state.favourited}</h1>
         </div>
     );
   }