From e8c5f546cd19bf2fe1b9935789526b0f1acdd0fe Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Fri, 18 Sep 2020 12:12:44 +0100
Subject: [PATCH] fix and enable custom background colour

---
 src/components/modals/Settings.jsx               | 16 +++++-----------
 .../settings/sections/BackgroundSettings.jsx     | 12 +++++++++---
 src/modules/settingsFunctions.js                 |  5 ++++-
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/modals/Settings.jsx b/src/components/modals/Settings.jsx
index b07846cb..94853f8a 100644
--- a/src/components/modals/Settings.jsx
+++ b/src/components/modals/Settings.jsx
@@ -16,7 +16,7 @@ export default class Settings extends React.PureComponent {
       case 'greetingName': document.getElementById('greetingName').value = ''; break;
       case 'customBackgroundColour':
         localStorage.setItem('customBackgroundColour', '');
-        document.getElementById('customBackgroundColour').enabled = 'false';
+        document.getElementById('customBackgroundHex').textContent = 'Disabled';
         break;
       case 'customBackground': document.getElementById('customBackground').value = ''; break;
       case 'blur':
@@ -90,12 +90,6 @@ export default class Settings extends React.PureComponent {
       };
     };
 
-    /*const hex = localStorage.getItem('customBackgroundColour');
-    if (!hex === '') {
-      document.getElementById('customBackgroundColour').value = hex;
-      document.getElementById('customBackgroundHex').innerText = hex;
-    }*/
-
     document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
     document.getElementById('center').classList.toggle('backgroundEffects');
   }
@@ -112,10 +106,10 @@ export default class Settings extends React.PureComponent {
     return <div className='content'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <h1>{this.props.modalLanguage.title}</h1>
-        <div className="tab">
-          <button className="tablinks" onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
-          <button className="tablinks" onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
-          <button className="tablinks" id="active">{this.props.modalLanguage.settings}</button>
+        <div className='tab'>
+          <button className='tablinks' onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
+          <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
+          <button className='tablinks' id='active'>{this.props.modalLanguage.settings}</button>
         </div>
         <br/>
 
diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx
index b50c68af..680693f7 100644
--- a/src/components/modals/settings/sections/BackgroundSettings.jsx
+++ b/src/components/modals/settings/sections/BackgroundSettings.jsx
@@ -19,6 +19,12 @@ export default class BackgroundSettings extends React.PureComponent {
 
             reader.readAsDataURL(file);
         };
+
+        const hex = localStorage.getItem('customBackgroundColour');
+        if (hex !== '') {
+            document.getElementById('customBackgroundColour').value = hex;
+            document.getElementById('customBackgroundHex').innerText = hex;
+        } else document.getElementById('customBackgroundHex').innerText = 'Disabled';
     }
 
   render() {
@@ -50,11 +56,11 @@ export default class BackgroundSettings extends React.PureComponent {
               <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
               <input id='bg-input' type='file' name='name' className='hidden' accept='image/svg+xml, image/jpeg, image/png, image/webp, image/webm, image/gif' />
             </ul>
-           { /* <ul>
-              <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>Reset</span></p>
+           <ul>
+              <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.props.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
               <input name='colour' type='color' id='customBackgroundColour' onChange={() => document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}></input>
               <label htmlFor='colour' id='customBackgroundHex'>#00000</label>
-           </ul> */ }
+           </ul>
         </div>
     );
   }
diff --git a/src/modules/settingsFunctions.js b/src/modules/settingsFunctions.js
index 8f90d16c..f833647e 100644
--- a/src/modules/settingsFunctions.js
+++ b/src/modules/settingsFunctions.js
@@ -59,13 +59,16 @@ export default class SettingsFunctions {
         localStorage.setItem('brightness', document.getElementById('brightnessRange').value);
         localStorage.setItem('greetingName', document.getElementById('greetingName').value);
         localStorage.setItem('customBackground', document.getElementById('customBackground').value);
+        if (document.getElementById('customBackgroundHex').textContent !== 'Disabled') {
+            localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').textContent);
+        }
         if (!document.getElementById('searchEngineInput').enabled === 'false') {
           localStorage.setItem('customSearchEngine', document.getElementById('searchEngineInput').value);
         }
         window.location.reload();
     }
 
-    static async setDefaultSettings() {
+    static setDefaultSettings() {
         localStorage.clear();
         defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value));