fix: bug fixes, style improvements, background transition toggle and marketplace language support

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/widgets/Widgets.jsx

@@ -75,7 +75,7 @@ export default class Widgets extends React.PureComponent {
         <React.Suspense fallback={renderLoader()}>
           {this.enabled('searchBar') ? <Search/> : null}
           {elements}
-          {this.enabled('weatherEnabled') && (localStorage.getItem('offlineMode') === 'false') ? <Weather/> : null}
+          {this.enabled('weatherEnabled') && !localStorage.getItem('offlineMode') ? <Weather/> : null}
         </React.Suspense>
       </div>
     );

src/components/widgets/background/Background.jsx

@@ -61,8 +61,15 @@ export default class Background extends React.PureComponent {
   setBackground() {
     if (this.state.url !== '') {
       const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url;
-
       const backgroundImage = document.querySelector('#backgroundImage');
+
+      if (localStorage.getItem('bgtransition') === 'false') {
+        return backgroundImage.setAttribute(
+          'style',
+          `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%);`
+        ); 
+      }
+
       backgroundImage.classList.add('backgroundPreload');
 
       // preloader for background transition
@@ -118,15 +125,16 @@ export default class Background extends React.PureComponent {
 
         // API background
         const backgroundAPI = localStorage.getItem('backgroundAPI');
+        const apiCategory = localStorage.getItem('apiCategory');
 
         let requestURL, data;
         switch (backgroundAPI) {
           case 'unsplash':
-            requestURL = `${window.constants.UNSPLASH_URL}/getImage`;
+            requestURL = `${window.constants.UNSPLASH_URL}/getImage?category=${apiCategory}`;
             break;
           // Defaults to Mue
           default:
-            requestURL = `${window.constants.API_URL}/getImage?category=Outdoors`;
+            requestURL = `${window.constants.API_URL}/images/random?category=${apiCategory}`;
             break;
         }
 

src/components/widgets/background/scss/index.scss

@@ -34,14 +34,4 @@
   to {
     opacity: 1;
   }
-}
-
-.backgroundEffects {
-  opacity: 0.7;
-  transition: ease 0.6s;
-}
-
-.creditlink {
-  text-decoration: none;
-  color: white;
-}
+}

src/components/widgets/navbar/Navbar.jsx

@@ -31,7 +31,7 @@ export default function Navbar(props) {
       :null}
 
       {(window.constants.BETA_VERSION === true) ? 
-        <Tooltip title='Feedback' placement='top'>
+        <Tooltip title={language.widgets.navbar.tooltips.feedback} placement='top'>
           <Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
         </Tooltip>
       :null}

src/components/widgets/quicklinks/quicklinks.scss

@@ -60,9 +60,10 @@ textarea {
 .quicklinks {
   border: none;
   color: #fff;
-  font-size: 22px;
+  font-size: 42px;
   background: none;
   cursor: pointer;
+  text-shadow: 0 0 10px rgb(0 0 0 / 60%);
 }
 
 .quicklinks-container>a,

src/components/widgets/quote/Quote.jsx

@@ -16,9 +16,9 @@ export default class Quote extends React.PureComponent {
     this.state = {
       quote: '',
       author: '',
-      favourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} />,
-      tweet: <TwitterIcon className='copyButton' onClick={() => this.tweetQuote()} />,
-      copy: <FileCopy className='copyButton' onClick={() => this.copyQuote()} />
+      favourited: <StarIcon2 className='copyButton' onClick={this.favourite} />,
+      tweet: <TwitterIcon className='copyButton' onClick={this.tweetQuote} />,
+      copy: <FileCopy className='copyButton' onClick={this.copyQuote} />
     };
   
     this.language = window.language.widgets.quote;
@@ -92,7 +92,7 @@ export default class Quote extends React.PureComponent {
 
     // 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();
+      const data = await (await fetch(window.constants.API_URL + '/quotes/random?language=' + localStorage.getItem('quotelanguage'))).json();
 
       // If we hit the ratelimit, we fallback to local quotes
       if (data.statusCode === 429) {
@@ -115,25 +115,25 @@ export default class Quote extends React.PureComponent {
     }
   }
 
-  copyQuote() {
+  copyQuote = () => {
     navigator.clipboard.writeText(`${this.state.quote} - ${this.state.author}`);
-    toast(this.language.quote);
+    toast(window.language.toasts.quote);
   }
 
-  tweetQuote() {
+  tweetQuote = () => {
     window.open(`https://twitter.com/intent/tweet?text=${this.state.quote} - ${this.state.author} on @getmue`, '_blank').focus();
   }
 
-  favourite() {
+  favourite = () => {
     if (localStorage.getItem('favouriteQuote')) {
       localStorage.removeItem('favouriteQuote');
       this.setState({
-        favourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} />
+        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()} />
+        favourited: <StarIcon className='copyButton' onClick={this.favourite} />
       });
     }
   }
@@ -141,7 +141,7 @@ export default class Quote extends React.PureComponent {
   componentDidMount() {
     let favouriteQuote = '';
     if (localStorage.getItem('favouriteQuoteEnabled') === 'true') {
-      favouriteQuote = localStorage.getItem('favouriteQuote') ? <StarIcon className='copyButton' onClick={() => this.favourite()} /> : <StarIcon2 className='copyButton' onClick={() => this.favourite()} />;
+      favouriteQuote = localStorage.getItem('favouriteQuote') ? <StarIcon className='copyButton' onClick={this.favourite} /> : <StarIcon2 className='copyButton' onClick={this.favourite} />;
     }
 
     this.setState({
@@ -158,7 +158,8 @@ export default class Quote extends React.PureComponent {
       <div className='quotediv'>
         <h1 className='quote'>{`${this.state.quote}`}</h1>
         <h1 className='quoteauthor'>
-          <a href={this.state.authorlink} className='quoteauthorlink' target='_blank' rel='noopener noreferrer'>{this.state.author}</a> 
+          <a href={this.state.authorlink} className='quoteauthorlink' target='_blank' rel='noopener noreferrer'>{this.state.author}</a>
+          <br/>
           {this.state.copy} {this.state.tweet} {this.state.favourited}
         </h1>
       </div>

src/components/widgets/quote/quote.scss

@@ -15,8 +15,10 @@
 .quoteauthor {
   font-size: 0.9em;
   letter-spacing: 0.5px;
+
   svg {
     margin-left: 10px;
+    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
   }
 }