feat: custom quote option

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

@@ -2,18 +2,67 @@ import React from 'react';
 
 import Checkbox from '../Checkbox';
 
-export default function QuoteSettings (props) {
-  const { quote } = props.language.sections;
+import { toast } from 'react-toastify';
 
-  return (
-    <div>
-      <h2>{quote.title}</h2>
-      <Checkbox name='quote' text={props.language.enabled}/>
-      <Checkbox name='authorLink' text={quote.author_link}/>
-      <h3>{quote.buttons}</h3>
-      <Checkbox name='copyButton' text={quote.copy}/>
-      <Checkbox name='tweetButton' text={quote.tweet}/>
-      <Checkbox name='favouriteQuoteEnabled' text={quote.favourite}/>
-    </div>
-  );
+export default class QuoteSettings extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      customQuote: localStorage.getItem('customQuote'),
+      customQuoteAuthor: localStorage.getItem('customQuoteAuthor') || 'Unknown'
+    };
+  }
+
+
+  resetItem(key) {
+    switch (key) {
+      case 'customQuote':
+        localStorage.setItem('customQuote', '');
+        this.setState({
+          customQuote: ''
+        });
+        break;
+
+      case 'customQuoteAuthor':
+        localStorage.setItem('customQuoteAuthor', '');
+        this.setState({
+          customQuoteAuthor: 'Unknown'
+        });
+        break;
+
+      default:
+        toast('resetItem requires a key!');
+    }
+
+    toast(this.props.language.toasts.reset);
+  }
+
+  componentDidUpdate() {
+    localStorage.setItem('customQuote', this.state.customQuote);
+    localStorage.setItem('customQuoteAuthor', this.state.customQuoteAuthor);
+  }
+
+  render() {
+    const { quote } = this.props.language.sections;
+
+    return (
+      <div>
+        <h2>{quote.title}</h2>
+        <Checkbox name='quote' text={this.props.language.enabled}/>
+        <Checkbox name='authorLink' text={quote.author_link}/>
+        <ul>
+            <p>{quote.custom} <span className='modalLink' onClick={() => this.resetItem('customQuote')}>{this.props.language.buttons.reset}</span></p>
+            <input type='text' value={this.state.customQuote} onChange={(e) => this.setState({ customQuote: e.target.value })}></input>
+        </ul>
+        <ul>
+            <p>{quote.custom_author} <span className='modalLink' onClick={() => this.resetItem('customQuoteAuthor')}>{this.props.language.buttons.reset}</span></p>
+            <input type='text' value={this.state.customQuoteAuthor} onChange={(e) => this.setState({ customQuoteAuthor: e.target.value })}></input>
+        </ul>
+        <h3>{quote.buttons}</h3>
+        <Checkbox name='copyButton' text={quote.copy}/>
+        <Checkbox name='tweetButton' text={quote.tweet}/>
+        <Checkbox name='favouriteQuoteEnabled' text={quote.favourite}/>
+      </div>
+    );
+  }
 }

src/components/widgets/quote/Quote.jsx

@@ -77,6 +77,14 @@ export default class Quote extends React.PureComponent {
       });
     }
 
+    const customQuote = localStorage.getItem('customQuote');
+    if (customQuote) {
+      return this.setState({
+        quote: '"' + customQuote + '"',
+        author: localStorage.getItem('customQuoteAuthor')
+      });
+    }
+
     if (localStorage.getItem('offlineMode') === 'true') {
       return this.doOffline();
     }

src/scss/modules/_dropdown.scss

@@ -25,3 +25,12 @@
     background-position: calc(100% - 5px) center !important;
   }
 }
+
+.react-date-picker__wrapper{
+  padding: 0.5rem 1rem  !important;
+    box-sizing: border-box  !important;
+    border-image-slice: 1  !important;
+    border-image-source: linear-gradient( 90deg, #ffb032 0%, #dd3b67 100%)  !important;
+    background: transparent  !important;
+    color: #fff  !important; 
+}

src/scss/modules/modals/_main.scss

@@ -124,7 +124,7 @@ ul.sidebar {
   left: 0;
   margin: 0;
   padding-left: 0;
-  height: 100%;
+  height: 100vh;
   background: #f0f0f0;
   left: 0;
   border-radius: 12px 0 0 12px;
@@ -306,14 +306,13 @@ li {
 }
 
 ::-webkit-scrollbar {
-  width: 13px;
-  background: #bdc3c7;
+  width: 6px;
   border-top-right-radius: map-get($modal, 'border-radius');
   border-bottom-right-radius: map-get($modal, 'border-radius');
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #34495e;
+  background: #636e72;
   border-top-right-radius: map-get($modal, 'border-radius');
   border-bottom-right-radius: map-get($modal, 'border-radius');
 }

src/translations/en-GB.json

@@ -74,7 +74,9 @@
             "copy": "Copy",
             "tweet": "Tweet",
             "favourite": "Favourite",
-            "author_link": "Author Link"
+            "author_link": "Authour Link",
+            "custom": "Custom Quote",
+            "custom_author": "Custom Authour"
           },
           "greeting": {
             "title": "Greeting",
@@ -179,7 +181,7 @@
           "information": "Information",
           "last_updated": "Last Updated",
           "version": "Version",
-          "author": "Author",
+          "author": "Authour",
           "notice": {
             "title": "Notice",
             "description": "In order for the change to take place, the page must be refreshed."

src/translations/en-US.json

@@ -4,7 +4,9 @@
       "settings": {
         "sections": {
           "quote": {
-            "favourite": "Favorite"
+            "favourite": "Favorite",
+            "author_link": "Author Link",
+            "custom_author": "Custom Author"
           },
           "background": {
             "custom_colour": "Custom Background Color",