feat: new welcome modal, refactor many things, various bug fixes, use material-ui v5 etc

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

src/components/widgets/Widgets.jsx

@@ -43,6 +43,11 @@ export default class Widgets extends React.PureComponent {
   }
 
   render() {
+    // don't hide when welcome is there
+    if (localStorage.getItem('showWelcome') === 'true') {
+      return <div id='widgets'></div>
+    }
+
     // allow for re-ordering widgets
     let elements = [];
 

src/components/widgets/background/Background.jsx

@@ -68,7 +68,7 @@ export default class Background extends React.PureComponent {
     const backgroundImage = document.getElementById('backgroundImage');
 
     if (this.state.url !== '') {
-      const url = (localStorage.getItem('ddgProxy') === 'true' && this.state.photoInfo.offline !== true) ? window.constants.DDG_PROXY + this.state.url : this.state.url;
+      const url = (localStorage.getItem('ddgProxy') === 'true' && this.state.photoInfo.offline !== true) ? window.constants.DDG_IMAGE_PROXY + this.state.url : this.state.url;
       const photoInformation = document.querySelector('.photoInformation');
 
       // just set the background
@@ -116,7 +116,10 @@ export default class Background extends React.PureComponent {
 
   // Main background getting function
   async getBackground() {
-    const offline = (localStorage.getItem('offlineMode') === 'true');
+    let offline = (localStorage.getItem('offlineMode') === 'true');
+    if (localStorage.getItem('showWelcome') === 'true') {
+      offline = true;
+    }
 
     switch (localStorage.getItem('backgroundType')) {
       case 'api':
@@ -302,7 +305,9 @@ export default class Background extends React.PureComponent {
             // fix bug
             try {
               document.querySelector('.photoInformation').style.display = 'block';
-            } catch (e) {}
+            } catch (e) {
+              // Disregard exception
+            }
           }
 
           element.style.display = 'block';
@@ -328,7 +333,7 @@ export default class Background extends React.PureComponent {
       }
 
       // uninstall photo pack reverts your background to what you had previously
-      if (data === 'marketplacebackgrounduninstall') {
+      if (data === 'marketplacebackgrounduninstall' || data === 'backgroundwelcome') {
         refresh();
       }
     });
@@ -362,7 +367,7 @@ export default class Background extends React.PureComponent {
 
     return (
       <>
-        <div style={{ 'WebkitFilter': `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}` }} id='backgroundImage'/>
+        <div style={{ WebkitFilter: `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}` }} id='backgroundImage'/>
         {(this.state.photoInfo.credit !== '') ? 
           <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo} api={this.state.currentAPI}/>
         : null}

src/components/widgets/background/Favourite.jsx

@@ -9,7 +9,7 @@ export default class Favourite extends React.PureComponent {
   constructor() {
     super();
     this.state = {
-      favourited: (localStorage.getItem('favourite')) ? <StarIcon onClick={this.favourite} className='topicons' /> : <StarIcon2 onClick={this.favourite}  className='topicons' />
+      favourited: (localStorage.getItem('favourite')) ? <StarIcon onClick={this.favourite} className='topicons' /> : <StarIcon2 onClick={this.favourite} className='topicons' />
     };
   }
 

src/components/widgets/greeting/Greeting.jsx

@@ -114,7 +114,7 @@ export default class Greeting extends React.PureComponent {
         this.getGreeting(0);
 
         element.style.display = 'block';
-        element.style.fontSize = `${1.6 * Number(localStorage.getItem('zoomGreeting') / 100)}em`;
+        element.style.fontSize = `${1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)}em`;
       }
     });
 
@@ -125,6 +125,10 @@ export default class Greeting extends React.PureComponent {
     this.getGreeting(0);
   }
 
+  componentWillUnmount() {
+    EventBus.remove('refresh');
+  }
+
   render() {
     return <h1 className='greeting'>
       {this.state.greeting}

src/components/widgets/navbar/Navbar.jsx

@@ -13,6 +13,10 @@ import Tooltip from '../../helpers/tooltip/Tooltip';
 import './scss/index.scss';
 
 export default function Navbar(props) {
+  if (localStorage.getItem('showWelcome') === 'true') {
+    return null;
+  }
+
   const backgroundEnabled = (localStorage.getItem('background') === 'true');
 
   return (

src/components/widgets/navbar/Notes.jsx

@@ -4,7 +4,7 @@ import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 
 import CopyIcon from '@material-ui/icons/FileCopyRounded';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
-import Pin from './Pin';
+import Pin from '@material-ui/icons/PushPin';
 
 import { toast } from 'react-toastify';
 
@@ -37,7 +37,7 @@ export default class Notes extends React.PureComponent {
 
   copy() {
     window.stats.postEvent('feature', 'Notes copied');
-    // this.state.notes doesnt work for some reason
+    // this.state.notes doesn't work for some reason
     navigator.clipboard.writeText(localStorage.getItem('notes'));
     toast(window.language.toasts.notes);
   }
@@ -61,7 +61,7 @@ export default class Notes extends React.PureComponent {
           <NotesIcon/>
           <h3>{this.language.title}</h3>
         </div>
-        <TextareaAutosize rowsMax={50} placeholder={this.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
+        <TextareaAutosize rowsmax={50} placeholder={this.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
         <button onClick={this.pin} className='pinNote'><Pin/></button>
         <button onClick={this.copy} className='copyNote'><CopyIcon/></button>
       </span>

src/components/widgets/navbar/Pin.jsx

@@ -1,24 +0,0 @@
-// License for original pin SVG below
-/*
-   Copyright 2020 Google Inc.
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
-*/
-export default function Pin() {
-  return (
-    <svg xmlns='http://www.w3.org/2000/svg' enableBackground='new 0 0 24 24' viewBox='0 0 24 24' fill='black' width='18px' height='18px'>
-      <g><rect fill='none' height='24' width='24'/></g>
-      <g><path d='M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z' fillRule='evenodd'/></g>
-    </svg>
-  );
-}

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -119,6 +119,10 @@ export default class QuickLinks extends React.PureComponent {
     };
   }
 
+  componentWillUnmount() {
+    EventBus.remove('refresh');
+  }
+
   render() {
     let target, rel = null;
     if (localStorage.getItem('quicklinksnewtab') === 'true') {
@@ -154,9 +158,9 @@ export default class QuickLinks extends React.PureComponent {
         <span className='quicklinkscontainer' style={{ visibility: this.state.showAddLink }}>
           <div className='topbarquicklinks'>
             <h4>{this.language.new}</h4>
-            <TextareaAutosize rowsMax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
+            <TextareaAutosize rowsmax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
             <p>{this.state.nameError}</p>
-            <TextareaAutosize rowsMax={10} placeholder={this.language.url} value={this.state.url} onChange={(e) => this.setState({ url: e.target.value })} />
+            <TextareaAutosize rowsmax={10} placeholder={this.language.url} value={this.state.url} onChange={(e) => this.setState({ url: e.target.value })} />
             <p>{this.state.urlError}</p>
             <button className='pinNote' onClick={this.addLink}>{this.language.add}</button>
           </div>

src/components/widgets/quote/Quote.jsx

@@ -223,6 +223,10 @@ export default class Quote extends React.PureComponent {
     this.init();
   }
 
+  componentWillUnmount() {
+    EventBus.remove('refresh');
+  }
+
   render() {
     return (
       <div className='quotediv'>

src/components/widgets/time/Clock.jsx

@@ -111,6 +111,10 @@ export default class Clock extends React.PureComponent {
     this.startTime(0);
   }
 
+  componentWillUnmount() {
+    EventBus.remove('refresh');
+  }
+
   render() {
     let clockHTML = <h1 className='clock clock-container'>{this.state.time}<span className='ampm'>{this.state.ampm}</span></h1>;
 

src/components/widgets/time/Date.jsx

@@ -118,6 +118,10 @@ export default class DateWidget extends React.PureComponent {
     this.getDate();
   }
 
+  componentWillUnmount() {
+    EventBus.remove('refresh');
+  }
+
   render() {
     return <span className='date'>{this.state.date} <br/> {this.state.weekNumber}</span>;
   }