perf: new tooltip and fix background on/off hot reload

src/components/helpers/tooltip/Tooltip.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './tooltip.scss';
+
+export default function Tooltip(props) {
+  return (
+    <div className='tooltip'>
+      {props.children}
+      <span className='tooltipTitle'>{props.title}</span>
+    </div>
+  );
+}

src/components/helpers/tooltip/tooltip.scss

@@ -0,0 +1,28 @@
+// todo: possibly add tooltip placement option
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  .tooltipTitle {
+    width: 60px;
+    background-color: #000000;
+    color: #ffffff;
+    text-align: center;
+    font-size: 0.6rem;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 50%;
+    margin-left: -30px;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.8s;
+  }
+}
+
+.tooltip:hover .tooltipTitle {
+  visibility: visible;
+  opacity: 1;
+}

src/components/modals/main/scss/marketplace/_buttons.scss

@@ -1,48 +1,48 @@
 %storebutton {
-    cursor: pointer;
-    font-size: 18px;
-    display: block;
-    padding: 5px 30px;
-    background: none;
-    border-radius: 24px;
-    transition: ease 0.33s;
-    border: 2px solid black;
-  
-    &:hover {
-      background: #2d3436;
-      color: map-get($theme-colours, 'main');
-    }
-  }
-  
-  .dark %storebutton {
-    border: 2px solid map-get($theme-colours, 'main');
+  cursor: pointer;
+  font-size: 18px;
+  display: block;
+  padding: 5px 30px;
+  background: none;
+  border-radius: 24px;
+  transition: ease 0.33s;
+  border: 2px solid black;
+
+  &:hover {
+    background: #2d3436;
     color: map-get($theme-colours, 'main');
-  
-    &:hover {
-      background: map-get($theme-colours, 'main');
-      color: #2d3436;
-    }
   }
-  
-  .removeFromMue {
-    @extend %storebutton;
-  
-    border: 2px solid #ff4757;
-    color: #ff4757;
-    margin-top: 5px;
-  
-    &:hover {
-      background: #ff4757;
-      color: map-get($theme-colours, 'main');
-    }
+}
+
+.dark %storebutton {
+  border: 2px solid map-get($theme-colours, 'main');
+  color: map-get($theme-colours, 'main');
+
+  &:hover {
+    background: map-get($theme-colours, 'main');
+    color: #2d3436;
   }
-  
-  .addToMue {
-    @extend %storebutton;
-    margin-top: 5px;
+}
+
+.removeFromMue {
+  @extend %storebutton;
+
+  border: 2px solid #ff4757;
+  color: #ff4757;
+  margin-top: 5px;
+
+  &:hover {
+    background: #ff4757;
+    color: map-get($theme-colours, 'main');
   }
-  
-  .sideload {
-    display: inline;
-    margin-top: 0px;
-  }
+}
+
+.addToMue {
+  @extend %storebutton;
+  margin-top: 5px;
+}
+
+.sideload {
+  display: inline;
+  margin-top: 0px;
+}

src/components/modals/main/scss/settings/_main.scss

@@ -114,7 +114,6 @@ ul {
 .MuiRadio-root,
 .aboutLink,
 .MuiIconButton-root,
-.welcomeLink,
 legend {
   color: var(--modal-text) !important;
 }

src/components/modals/main/settings/sections/About.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '../../../../helpers/tooltip/Tooltip';
 import EmailIcon from '@material-ui/icons/Email';
 import TwitterIcon from '@material-ui/icons/Twitter';
 import ForumIcon from '@material-ui/icons/Forum';
@@ -104,13 +104,13 @@ export default class About extends React.PureComponent {
         <h3>{this.language.contributors}</h3>
         <p>{this.state.loading}</p>
         {this.state.contributors.map((item) => (
-          <Tooltip title={item.login} placement='top' key={item.login}>
+          <Tooltip title={item.login} key={item.login}>
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=128'} alt={item.login}/></a>
           </Tooltip>
         ))}
         { // for those who contributed without opening a pull request
         this.state.other_contributors.map((item) => (
-          <Tooltip title={item.login} placement='top' key={item.login}>
+          <Tooltip title={item.login} key={item.login}>
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=128'} alt={item.login}/></a>
           </Tooltip>
         ))}
@@ -118,7 +118,7 @@ export default class About extends React.PureComponent {
         <h3>{this.language.supporters}</h3>
         <p>{this.state.loading}</p>
         {this.state.sponsors.map((item) => (
-          <Tooltip title={item.handle} placement='top' key={item.handle}>
+          <Tooltip title={item.handle} key={item.handle}>
             <a href={item.profile} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=128'} alt={item.handle}></img></a>
           </Tooltip>
         ))}

src/components/widgets/background/Background.jsx

@@ -60,7 +60,7 @@ export default class Background extends React.PureComponent {
   }
 
   setBackground() {
-    const backgroundImage = document.querySelector('#backgroundImage');
+    const backgroundImage = document.getElementById('backgroundImage');
 
     if (this.state.url !== '') {
       const url = (localStorage.getItem('ddgProxy') === 'true') ? window.constants.DDG_PROXY + this.state.url : this.state.url;
@@ -152,6 +152,7 @@ export default class Background extends React.PureComponent {
           type: 'api',
           currentAPI: backgroundAPI,
           photoInfo: {
+            hidden: false,
             credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ` ${this.language.unsplash}`,
             location: (data.location.replace(/[null]+/g, '') !== ' ') ? data.location : 'N/A',
             camera: data.camera,
@@ -212,6 +213,7 @@ export default class Background extends React.PureComponent {
           return this.setState({
             url: randomPhoto.url.default,
             photoInfo: {
+              hidden: false,
               credit: randomPhoto.photographer
             }
           });
@@ -223,7 +225,7 @@ export default class Background extends React.PureComponent {
   }
 
   componentDidMount() {
-    const element = document.querySelector('#backgroundImage');
+    const element = document.getElementById('backgroundImage');
 
     const refresh = () => {
       element.classList.remove('fade-in');
@@ -239,6 +241,28 @@ export default class Background extends React.PureComponent {
 
     EventBus.on('refresh', (data) => {
       if (data === 'background') {
+        if (localStorage.getItem('background') === 'false') {
+          if (this.state.photoInfo.hidden === false) {
+            document.querySelector('.photoInformation').style.display = 'none';
+          }
+
+          if (this.state.video === true) {
+            return document.getElementById('backgroundVideo').style.display = 'none';
+          } else {
+            return element.style.display = 'none';
+          }
+        }
+
+        if (this.state.video === true) {
+          document.getElementById('backgroundVideo').style.display = 'block';
+        } else {
+          element.style.display = 'block';
+        }
+
+        if (this.state.photoInfo.hidden === false) {
+          document.querySelector('.photoInformation').style.display = 'block';
+        }
+
         const backgroundType = localStorage.getItem('backgroundType');
 
         // todo: make this good
@@ -250,7 +274,7 @@ export default class Background extends React.PureComponent {
         }
 
         if (this.state.video === true) {
-          document.querySelector('#backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
+          document.getElementById('backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
         } else {
           element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
         }

src/components/widgets/background/Favourite.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '../../helpers/tooltip/Tooltip';
 
 import StarIcon from '@material-ui/icons/Star';
 import StarIcon2 from '@material-ui/icons/StarBorder';

src/components/widgets/background/Maximise.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '../../helpers/tooltip/Tooltip';
 
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 

src/components/widgets/background/scss/_photoinformation.scss

@@ -39,10 +39,6 @@
   text-align: left;
   text-shadow: none;
 
-  span {
-    display: block;
-  }
-
   svg {
     margin-right: 0.5rem;
     vertical-align: middle;
@@ -55,7 +51,8 @@
     font-size: 2em;
   }
 
-  h1 {
+  h1,
+  .MuiSvgIcon-root {
     user-select: none;
     cursor: initial;
   }
@@ -76,7 +73,7 @@
     border: none;
   }
 
-  &:hover {
+  &:hover, span {
     display: block !important;
   }
 
@@ -84,8 +81,4 @@
     text-decoration: underline;
     cursor: pointer;
   }
-
-  .MuiSvgIcon-root {
-    cursor: initial;
-  }
 }

src/components/widgets/navbar/Navbar.jsx

@@ -5,11 +5,10 @@ import Gear from '@material-ui/icons/SettingsRounded';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Report from '@material-ui/icons/SmsFailed';
 
-import Tooltip from '@material-ui/core/Tooltip';
-
 import Notes from './Notes';
 import Maximise from '../background/Maximise';
 import Favourite from '../background/Favourite';
+import Tooltip from '../../helpers/tooltip/Tooltip';
 
 import './scss/index.scss';
 
@@ -31,7 +30,7 @@ export default function Navbar(props) {
       :null}
 
       {(window.constants.BETA_VERSION === true) ? 
-        <Tooltip title={language.widgets.navbar.tooltips.feedback} placement='top'>
+        <Tooltip title={language.widgets.navbar.tooltips.feedback}>
           <Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
         </Tooltip>
       :null}
@@ -42,7 +41,7 @@ export default function Navbar(props) {
         </Tooltip>
       :null}
 
-      <Tooltip title={language.modals.main.navbar.settings} placement='top'>
+      <Tooltip title={language.modals.main.navbar.settings}>
         <Gear className='settings-icon topicons' onClick={() => props.openModal('mainModal')}/>
       </Tooltip>
     </div>

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import EventBus from '../../../modules/helpers/eventbus';
 
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '../../helpers/tooltip/Tooltip';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 
 import './quicklinks.scss';
@@ -102,9 +102,7 @@ export default class QuickLinks extends React.PureComponent {
       }
     });
 
-    const addlink = document.querySelector('.topbarquicklinks');
-
-    addlink.onkeydown = (e) => {
+    document.querySelector('.topbarquicklinks').onkeydown = (e) => {
       e = e || window.event;
       let code = e.which || e.keyCode;
       if (code === 13 && this.state.showAddLink === 'visible') {

src/components/widgets/quicklinks/quicklinks.scss

@@ -1,7 +1,6 @@
 .quicklinks {
   position: relative;
   user-select: none;
-
   border: none;
   color: #fff;
   font-size: 42px;