fix: patch background fx, attempt navbar fix

src/features/background/Background.jsx

@@ -418,7 +418,18 @@ export default class Background extends PureComponent {
         } else if (backgroundType !== this.state.type) {
           return refresh();
         }
+      }
 
+      // uninstall photo pack reverts your background to what you had previously
+      if (
+        data === 'marketplacebackgrounduninstall' ||
+        data === 'backgroundwelcome' ||
+        data === 'backgroundrefresh'
+      ) {
+        refresh();
+      }
+
+      if (data === 'backgroundeffect') {
         // background effects so we don't get another image again
         const backgroundFilterSetting = localStorage.getItem('backgroundFilter');
         const backgroundFilter = backgroundFilterSetting && backgroundFilterSetting !== 'none';
@@ -448,15 +459,6 @@ export default class Background extends PureComponent {
           }`;
         }
       }
-
-      // uninstall photo pack reverts your background to what you had previously
-      if (
-        data === 'marketplacebackgrounduninstall' ||
-        data === 'backgroundwelcome' ||
-        data === 'backgroundrefresh'
-      ) {
-        refresh();
-      }
     });
 
     if (localStorage.getItem('welcomeTab')) {
@@ -476,43 +478,6 @@ export default class Background extends PureComponent {
       this.getBackground();
       localStorage.setItem('backgroundStartTime', Date.now());
     }
-
-    const test = localStorage.getItem('backgroundchange');
-
-    this.interval = setInterval(() => {
-      const targetTime = Number(Number(localStorage.getItem('backgroundStartTime')) + Number(test));
-      const currentTime = Number(Date.now());
-      const type = localStorage.getItem('backgroundType');
-
-      if (test !== null && test !== 'refresh') {
-        if (currentTime >= targetTime) {
-          element.classList.remove('fade-in');
-          this.getBackground();
-          localStorage.setItem('backgroundStartTime', Date.now());
-        } else {
-          try {
-            const current = JSON.parse(localStorage.getItem('currentBackground'));
-            if (current.type !== type) {
-              this.getBackground();
-            }
-            const offline = localStorage.getItem('offlineMode');
-            if (current.url.startsWith('http') && offline === 'false') {
-              if (this.state.firstTime !== true) {
-                this.setState(current);
-              }
-            } else if (current.url.startsWith('http')) {
-              this.setState(getOfflineImage());
-            }
-            if (this.state.firstTime !== true) {
-              this.setState(current);
-            }
-            this.setState({ firstTime: true });
-          } catch (e) {
-            this.setBackground();
-          }
-        }
-      }
-    });
   }
 
   // only set once we've got the info
@@ -526,7 +491,6 @@ export default class Background extends PureComponent {
 
   componentWillUnmount() {
     EventBus.off('refresh');
-    clearInterval(this.interval);
   }
 
   render() {

src/features/background/options/BackgroundOptions.jsx

@@ -551,7 +551,7 @@ class BackgroundOptions extends PureComponent {
                 default="90"
                 display="%"
                 marks={values.background}
-                category="background"
+                category="backgroundeffect"
                 element="#backgroundImage"
               />
               <Dropdown
@@ -560,7 +560,7 @@ class BackgroundOptions extends PureComponent {
                 )}
                 name="backgroundFilter"
                 onChange={(value) => this.setState({ backgroundFilter: value })}
-                category="background"
+                category="backgroundeffect"
                 element="#backgroundImage"
                 items={[
                   {
@@ -612,7 +612,7 @@ class BackgroundOptions extends PureComponent {
                   default="0"
                   display="%"
                   marks={values.background}
-                  category="background"
+                  category="backgroundeffect"
                   element="#backgroundImage"
                 />
               )}

src/features/navbar/Navbar.jsx

@@ -3,13 +3,9 @@ import { PureComponent, createRef } from 'react';
 
 import { MdSettings } from 'react-icons/md';
 
-// import Notes from './buttons/Notes';
-// import Todo from './buttons/Todo';
-// import Apps from './buttons/Apps';
-
 import { Notes, Todo, Apps, Refresh, Maximise } from './components';
-
 import { Tooltip } from 'components/Elements';
+
 import EventBus from 'utils/eventbus';
 
 import './scss/index.scss';
@@ -67,6 +63,9 @@ class Navbar extends PureComponent {
           refreshEnabled: localStorage.getItem('refresh'),
           refreshOption: localStorage.getItem('refreshOption'),
         });
+
+        this.forceUpdate();
+
         try {
           this.updateRefreshText();
           this.setZoom();

src/features/navbar/options/NavbarOptions.jsx

@@ -1,6 +1,6 @@
 import variables from 'config/variables';
 
-import { useState, memo, useEffect } from 'react';
+import { useState, memo } from 'react';
 
 import Modal from 'react-modal';
 import {
@@ -144,24 +144,29 @@ function NavbarOptions() {
   const NavbarOptions = () => {
     const NavbarButton = ({ icon, messageKey, settingName }) => {
       const [isDisabled, setIsDisabled] = useState(localStorage.getItem(settingName) === 'false');
-
-      useEffect(() => {
-        localStorage.setItem(settingName, isDisabled ? 'false' : 'true');
-      }, [isDisabled, settingName]);
-
       const handleClick = () => {
+        localStorage.setItem(settingName, !isDisabled);
+
+        if (settingName === 'refresh') {
+          setShowRefreshOptions(!showRefreshOptions);
+        } else if (settingName === 'appsEnabled') {
+          setAppsEnabled(!appsEnabled);
+        }
+
         setIsDisabled(!isDisabled);
+
         variables.stats.postEvent(
           'setting',
           `${settingName} ${!isDisabled === true ? 'enabled' : 'disabled'}`,
         );
+
         EventBus.emit('refresh', 'navbar');
       };
 
       return (
         <button
           onClick={handleClick}
-          className={`navbarButtonOption ${isDisabled ? 'disabled' : ''}`}
+          className={`navbarButtonOption ${isDisabled === true ? 'disabled' : ''}`}
         >
           {icon}
           <span className="subtitle">{variables.getMessage(messageKey)}</span>
@@ -194,56 +199,18 @@ function NavbarOptions() {
     ];
 
     return (
-      <>
-        <Row>
-          <Content title="Navbar Options" />
-          <Action>
-            <div className="navbarButtonOptions">
-              {buttons.map((button, index) => (
-                <NavbarButton key={index} {...button} />
-              ))}
-            </div>
-          </Action>
-        </Row>
-        {/*<Row final={false}>
+      <Row>
         <Content
-          title={variables.getMessage('modals.main.settings.additional_settings')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.appearance.navbar.additional',
-          )}
+          title={variables.getMessage('modals.main.settings.sections.appearance.navbar.widgets')}
         />
         <Action>
-          <Checkbox
-            name="notesEnabled"
-            text={variables.getMessage(`${NAVBAR_SECTION}.notes`)}
-            category="navbar"
-          />
-          <Checkbox
-            name="view"
-            text={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
-            category="navbar"
-          />
-          <Checkbox
-            name="refresh"
-            text={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
-            category="navbar"
-            onChange={setShowRefreshOptions}
-          />
-          <Checkbox
-            name="todoEnabled"
-            text={variables.getMessage('widgets.navbar.todo.title')}
-            category="navbar"
-          />
-
-          <Checkbox
-            name="appsEnabled"
-            text={variables.getMessage('widgets.navbar.apps.title')}
-            category="navbar"
-            onChange={setAppsEnabled}
-          />
+          <div className="navbarButtonOptions">
+            {buttons.map((button, index) => (
+              <NavbarButton key={index} {...button} />
+            ))}
+          </div>
         </Action>
-          </Row>*/}
-      </>
+      </Row>
     );
   };
 

src/features/welcome/components/Sections/Final.jsx

@@ -30,7 +30,7 @@ function Final(props) {
         </div>
         {props.importedSettings.length !== 0 && (
           <div className="toggle" onClick={() => props.switchTab(3)}>
-            {variables.getMessage('modals.main.welcome.sections.final.imported', {
+            {variables.getMessage('modals.welcome.sections.final.imported', {
               amount: props.importedSettings.length,
             })}{' '}
             {props.importedSettings.length}

src/i18n/locales/en_GB.json

@@ -363,6 +363,7 @@
             },
             "navbar": {
               "title": "Navbar",
+              "widgets": "Navbar Widgets",
               "notes": "Notes",
               "refresh": "Refresh",
               "refresh_subtitle": "Choose what is refreshed when you click the refresh button",