From ba66ed6279a10760f558a9146241bf818f182056 Mon Sep 17 00:00:00 2001
From: David Ralph <davetheprogrammer2@gmail.com>
Date: Tue, 13 Oct 2020 22:08:08 +0100
Subject: [PATCH] Favourite quote button and some changes

---
 src/components/modals/Settings.jsx            |  4 +--
 .../settings/sections/BackgroundSettings.jsx  |  8 +++++-
 src/components/widgets/Quote.jsx              | 26 +++++++++++++++++--
 src/modules/defaultSettings.json              |  4 +++
 src/scss/index.scss                           | 16 +++++++-----
 src/scss/modules/_modal.scss                  | 24 ++++++-----------
 src/scss/modules/_search.scss                 |  4 +++
 src/translations/en.json                      | 11 ++++----
 src/translations/fr.json                      |  2 +-
 src/translations/nl.json                      |  2 +-
 src/translations/no.json                      |  2 +-
 src/translations/ru.json                      |  2 +-
 12 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/src/components/modals/Settings.jsx b/src/components/modals/Settings.jsx
index 566f1214..e673e695 100644
--- a/src/components/modals/Settings.jsx
+++ b/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} />
diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx
index d36c020b..0a5ad236 100644
--- a/src/components/modals/settings/sections/BackgroundSettings.jsx
+++ b/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'>
diff --git a/src/components/widgets/Quote.jsx b/src/components/widgets/Quote.jsx
index 71db3998..765d7115 100644
--- a/src/components/widgets/Quote.jsx
+++ b/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>
     );
   }
diff --git a/src/modules/defaultSettings.json b/src/modules/defaultSettings.json
index e2d92efd..6ca05bc5 100644
--- a/src/modules/defaultSettings.json
+++ b/src/modules/defaultSettings.json
@@ -82,5 +82,9 @@
     {
         "name": "tweetButton",
         "value": false
+    },
+    {
+        "name": "favouriteQuoteEnabled",
+        "value": false
     }
 ]
\ No newline at end of file
diff --git a/src/scss/index.scss b/src/scss/index.scss
index f5591191..55c67406 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -80,8 +80,12 @@ body {
 }
 
 @include keyframes(fadein) {
-    from { opacity: 0; }
-    to   { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .backgroundEffects {
@@ -89,11 +93,11 @@ body {
     transition: ease 0.6s;
 }
 
-#searchEngine {
-    width: 130px;
-}
-
 .creditlink {
     text-decoration: none;
     color: white;
+}
+
+::selection {
+    background-color: #c2c2c2;
 }
\ No newline at end of file
diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss
index ae7d40b8..84c7c801 100644
--- a/src/scss/modules/_modal.scss
+++ b/src/scss/modules/_modal.scss
@@ -49,7 +49,11 @@
   overflow: hidden;
 }
 
-@-webkit-keyframes zoom-in {
+.zoom-in {
+  @include animation('zoom-in');
+}
+
+@include keyframes(zoom-in) {
   0% {
     transform: scale(0);
   }
@@ -63,20 +67,6 @@
   }
 }
 
-@keyframes zoom-in {
-  0% {
-    -webkit-transform: scale(0);
-  }
-
-  50% {
-    -webkit-transform: scale(1.05, 1.05);
-  }
-
-  100% {
-    -webkit-transform: scale(1, 1);
-  }
-}
-
 .Overlay {
   position: fixed;
   z-index: 100;
@@ -175,10 +165,12 @@
 .updateContent {
   width: 400px;
   padding: 5px;
+
   .closeModal {
     margin-top: 10px;
     font-size: 45px;
   }
+
   img {
     width: 100%;
     height: auto;
@@ -196,4 +188,4 @@
   background: #34495e;
   border-top-right-radius: map-get($modal, "border-radius");
   border-bottom-right-radius: map-get($modal, "border-radius");
-}
+}
\ No newline at end of file
diff --git a/src/scss/modules/_search.scss b/src/scss/modules/_search.scss
index fdeca118..f714833b 100644
--- a/src/scss/modules/_search.scss
+++ b/src/scss/modules/_search.scss
@@ -41,3 +41,7 @@
 .micIcon {
   margin-right: 10px;
 }
+
+#searchEngine {
+  width: 130px;
+}
\ No newline at end of file
diff --git a/src/translations/en.json b/src/translations/en.json
index 432707ea..6733a23e 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -33,7 +33,8 @@
         "quote": {
             "title": "Quote",
             "copy": "Copy Button",
-            "tweet": "Tweet Button"
+            "tweet": "Tweet Button",
+            "favourite": "Favourite Button"
         },
         "background": {
             "title": "Background",
@@ -44,7 +45,10 @@
             "custombackground": "Custom Background",
             "customcolour": "Custom Background Colour",
             "upload": "Upload",
-            "addColour": "Add colour"
+            "addcolour": "Add colour",
+            "favourite": "Favourite",
+            "view": "View",
+            "refresh": "Refresh"
         },
         "searchbar": {
             "title": "Search Bar",
@@ -57,9 +61,6 @@
             "webp": "Enable WebP",
             "dark": "Dark Theme",
             "animations": "Animations",
-            "view": "View",
-            "favourite": "Favourite",
-            "refresh": "Refresh",
             "voicesearch": "Voice Search"
         },
         "language": "Language",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index 4c7d1445..ae661ece 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -41,7 +41,7 @@
             "customURL": "URL D'arrière-plan personnalisée",
             "custombackground": "D'arrière-plan personnalisée",
             "customcolour": "Couleur d'arrière-plan personnalisée",
-            "addColour": "Ajouter de la couleur"
+            "addcolour": "Ajouter de la couleur"
         },
         "searchbar": {
             "title": "Barre de Recherche",
diff --git a/src/translations/nl.json b/src/translations/nl.json
index 42ff5656..29c48028 100644
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@@ -42,7 +42,7 @@
             "custombackground": "Aangepaste Achtergrond",
             "customcolour": "Aangepaste Achtergrondkleur",
             "upload": "Uploaden",
-            "addColour": "Kleur toevoegen"
+            "addcolour": "Kleur toevoegen"
         },
         "searchbar": {
             "title": "Zoekbalk",
diff --git a/src/translations/no.json b/src/translations/no.json
index 46e21971..ea92c346 100644
--- a/src/translations/no.json
+++ b/src/translations/no.json
@@ -41,7 +41,7 @@
             "customURL": "Personlig bakgrunn URL",
             "custombackground": "Personlig bakgrunn",
             "customcolour": "Personlig Bakgrunn Farge",
-            "addColour": "Legg til farge"
+            "addcolour": "Legg til farge"
         },
         "searchbar": {
             "title": "Søkebar",
diff --git a/src/translations/ru.json b/src/translations/ru.json
index 3a6320ca..f177a2f2 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -43,7 +43,7 @@
             "custombackground": "Пользовательский фон",
             "customcolour": "Пользовательский цвет фона",
             "upload": "Загрузить",
-            "addColour": "Добавить цвет"
+            "addcolour": "Добавить цвет"
         },
         "searchbar": {
             "title": "Панель поиска",