From 4128fbae46347c9125b70b214c37de3c02e05c72 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Thu, 22 Apr 2021 14:20:51 +0100
Subject: [PATCH] fix: background component and style tweaks

---
 src/components/modals/Modals.jsx                  |  2 +-
 src/components/modals/main/scss/index.scss        | 10 ++++++++++
 .../modals/main/settings/sections/Advanced.jsx    |  2 +-
 src/components/modals/welcome/welcome.scss        |  4 ----
 src/components/widgets/background/Background.jsx  | 15 ++++++---------
 5 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx
index d5ae60e8..14850650 100644
--- a/src/components/modals/Modals.jsx
+++ b/src/components/modals/Modals.jsx
@@ -48,7 +48,7 @@ export default class Modals extends React.PureComponent {
           <Main modalClose={() => this.setState({ mainModal: false })}/>
         </Modal>
         <React.Suspense fallback={renderLoader()}>
-          <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}>
+          <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}>
             <Welcome modalClose={() => this.closeWelcome()}/>
           </Modal>
           <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss
index e8cb2ce8..7a2d6a34 100644
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -351,6 +351,16 @@ li {
 .aboutIcon {
   color: var(--modal-text) !important;
   padding-right: 10px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.aboutLink {
+  &:hover {
+    opacity: 0.8;
+  }
 }
 
 .MuiFormControl-root {
diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx
index 3cfa2a18..81badb06 100644
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -52,7 +52,7 @@ export default class AdvancedSettings extends React.PureComponent {
         <p>{advanced.experimental_warning}</p>
         <Checkbox name='experimental' text={this.language.enabled} element='.other'/>
 
-        <Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'Modal resetmodal'} overlayClassName={'Overlay resetoverlay'} ariaHideApp={false}>
+        <Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
           <ResetModal modalClose={() => this.setState({ resetModal: false })} />
         </Modal>
       </>
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss
index bf1f288a..5cbe715a 100644
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -28,10 +28,6 @@
     line-height: 20px !important;
     color: var(--modal-link);
     cursor: pointer;
-
-    &:hover {
-      opacity: 0.8;
-    }
   }
 
   img.icon,
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index db3db760..9c4f6ecc 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -71,12 +71,12 @@ export default class Background extends React.PureComponent {
         if (photoInformation) {
           photoInformation.style.display = 'block';
         }
-        backgroundImage.style.backgroundImage = null;
-        return backgroundImage.style.backgroundImage = `url(${url})`; 
+        backgroundImage.style.background = null;
+        return backgroundImage.style.background = `url(${url})`; 
       }
 
       backgroundImage.classList.add('backgroundPreload');
-      backgroundImage.style.backgroundImage = null;
+      backgroundImage.style.background = null;
 
       if (photoInformation) {
         photoInformation.classList.add('backgroundPreload');
@@ -91,7 +91,7 @@ export default class Background extends React.PureComponent {
         backgroundImage.classList.remove('backgroundPreload');
         backgroundImage.classList.add('fade-in');
 
-        backgroundImage.style.backgroundImage = `url(${url})`;        
+        backgroundImage.style.background = `url(${url})`;        
         preloader.remove();
 
         if (photoInformation) {
@@ -100,7 +100,7 @@ export default class Background extends React.PureComponent {
         }
       });
     } else {
-      backgroundImage.setAttribute('style', `${this.state.style};`);
+      backgroundImage.setAttribute('style', this.state.style);
     }
   }
 
@@ -232,6 +232,7 @@ export default class Background extends React.PureComponent {
       element.classList.remove('fade-in');
       this.setState({
         url: '',
+        style: '',
         video: false,
         photoInfo: {
           hidden: true
@@ -260,10 +261,6 @@ export default class Background extends React.PureComponent {
           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