diff --git a/src/components/modals/settings/sections/Quote.jsx b/src/components/modals/settings/sections/Quote.jsx index bb7ca338..3f6f493d 100644 --- a/src/components/modals/settings/sections/Quote.jsx +++ b/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 ( -
-

{quote.title}

- - -

{quote.buttons}

- - - -
- ); +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 ( +
+

{quote.title}

+ + +
    +

    {quote.custom} this.resetItem('customQuote')}>{this.props.language.buttons.reset}

    + this.setState({ customQuote: e.target.value })}> +
+
    +

    {quote.custom_author} this.resetItem('customQuoteAuthor')}>{this.props.language.buttons.reset}

    + this.setState({ customQuoteAuthor: e.target.value })}> +
+

{quote.buttons}

+ + + +
+ ); + } } diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index 87301dbc..30fde99d 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/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(); } diff --git a/src/scss/modules/_dropdown.scss b/src/scss/modules/_dropdown.scss index 9298494d..7cb1ca7c 100644 --- a/src/scss/modules/_dropdown.scss +++ b/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; +} diff --git a/src/scss/modules/modals/_main.scss b/src/scss/modules/modals/_main.scss index 4bf9e874..cf4b684b 100644 --- a/src/scss/modules/modals/_main.scss +++ b/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'); } diff --git a/src/translations/en-GB.json b/src/translations/en-GB.json index 9b487163..011504ff 100644 --- a/src/translations/en-GB.json +++ b/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." diff --git a/src/translations/en-US.json b/src/translations/en-US.json index 8e0ec380..043760f2 100644 --- a/src/translations/en-US.json +++ b/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",