chore: improve background back btn, update dependencies

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

@@ -21,10 +21,9 @@ export default class About extends PureComponent {
       photographers: [],
       update: this.getMessage('modals.main.settings.sections.about.version.checking_update'),
       loading: this.getMessage('modals.main.loading'),
-      image:
-        document.body.classList.contains('dark')
-          ? 'icons/mue_dark.png'
-          : 'icons/mue_light.png',
+      image: document.body.classList.contains('dark')
+        ? 'icons/mue_dark.png'
+        : 'icons/mue_light.png',
     };
     this.controller = new AbortController();
   }
@@ -268,7 +267,10 @@ export default class About extends PureComponent {
           </div>
         </div>
 
-        <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start',  minHeight: '70px'}}>
+        <div
+          className="settingsRow"
+          style={{ flexFlow: 'column', alignItems: 'flex-start', minHeight: '70px' }}
+        >
           <span className="title">
             {this.getMessage('modals.main.settings.sections.about.resources_used.title')}
           </span>
@@ -351,7 +353,15 @@ export default class About extends PureComponent {
             })}
           </div>
         </div>
-        <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start',  minHeight: '10px', borderBottom: '0' }}>
+        <div
+          className="settingsRow"
+          style={{
+            flexFlow: 'column',
+            alignItems: 'flex-start',
+            minHeight: '10px',
+            borderBottom: '0',
+          }}
+        >
           <span className="title">
             {this.getMessage('modals.main.settings.sections.about.photographers')}
           </span>

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

@@ -35,11 +35,11 @@ export default class AdvancedSettings extends PureComponent {
         <span className="mainTitle">
           {getMessage('modals.main.settings.sections.advanced.title')}
         </span>
-        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.offline_mode')} subtitle="When enabled, all requests to online services will be disabled.">
-          <Switch
-            name="offlineMode"
-            element=".other"
-          />
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.advanced.offline_mode')}
+          subtitle="When enabled, all requests to online services will be disabled."
+        >
+          <Switch name="offlineMode" element=".other" />
         </SettingsItem>
         {localStorage.getItem('welcomePreview') !== 'true' ? (
           <div className="settingsRow">
@@ -48,7 +48,8 @@ export default class AdvancedSettings extends PureComponent {
                 {getMessage('modals.main.settings.sections.advanced.data')}
               </span>
               <span className="subtitle">
-                Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values.
+                Choose whether to export your Mue settings to your computer, import an existing
+                settings file, or reset your settings to their default values.
               </span>
             </div>
             <div className="action activityButtons">
@@ -82,7 +83,10 @@ export default class AdvancedSettings extends PureComponent {
             ))}
           </Dropdown>
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.tab_name')} subtitle="Change the name of the tab that appears in your browser.">
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.advanced.tab_name')}
+          subtitle="Change the name of the tab that appears in your browser."
+        >
           <Text name="tabName" default={getMessage('tabname')} category="other" />
         </SettingsItem>
         <FileUpload
@@ -91,12 +95,11 @@ export default class AdvancedSettings extends PureComponent {
           type="settings"
           loadFunction={(e) => importSettings(e)}
         />
-        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.custom_css')} subtitle="Make Mue's styling customised to you with Cascading Style Sheets (CSS).">
-          <Text
-            name="customcss"
-            textarea={true}
-            category="other"
-          />
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.advanced.custom_css')}
+          subtitle="Make Mue's styling customised to you with Cascading Style Sheets (CSS)."
+        >
+          <Text name="customcss" textarea={true} category="other" />
         </SettingsItem>
         <SettingsItem
           title={getMessage('modals.main.settings.sections.experimental.title')}

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

@@ -128,9 +128,7 @@ export default class Changelog extends PureComponent {
             className="updateImage"
           />
         ) : null}
-        <div className="updateChangelog">
-          {this.state.content}
-        </div>
+        <div className="updateChangelog">{this.state.content}</div>
         <Modal
           closeTimeoutMS={100}
           onRequestClose={() => this.setState({ showLightbox: false })}

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

@@ -80,7 +80,10 @@ export default class DateSettings extends PureComponent {
           zoomSetting="zoomDate"
           switch={true}
         />
-        <SettingsItem title={getMessage('modals.main.settings.sections.time.type')} subtitle="Whether to display the date in long form or short form">
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.time.type')}
+          subtitle="Whether to display the date in long form or short form"
+        >
           <Dropdown
             name="dateType"
             onChange={(value) => this.setState({ dateType: value })}

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

@@ -36,10 +36,7 @@ export default class GreetingSettings extends PureComponent {
           zoomSetting="zoomGreeting"
           switch={true}
         />
-        <SettingsItem
-          title="Additional Settings"
-          subtitle="Settings for the greeting display"
-        >
+        <SettingsItem title="Additional Settings" subtitle="Settings for the greeting display">
           <Checkbox
             name="events"
             text={getMessage('modals.main.settings.sections.greeting.events')}

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

@@ -25,7 +25,11 @@ export default function Navbar() {
         zoomSetting="zoomNavbar"
         zoomCategory="navbar"
       />
-      <SettingsItem title="Extra Options" subtitle="Modify navbar style and which buttons you want to display" final={!showRefreshOptions}>
+      <SettingsItem
+        title="Extra Options"
+        subtitle="Modify navbar style and which buttons you want to display"
+        final={!showRefreshOptions}
+      >
         <Checkbox
           name="navbarHover"
           text={getMessage('modals.main.settings.sections.appearance.navbar.hover')}

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

@@ -20,7 +20,11 @@ export default function QuickLinks() {
         zoomSetting="zoomQuicklinks"
         switch={true}
       />
-      <SettingsItem title="Extra Options" subtitle="Additional settings for quick links display and functions" final={true}>
+      <SettingsItem
+        title="Extra Options"
+        subtitle="Additional settings for quick links display and functions"
+        final={true}
+      >
         <Checkbox
           name="quicklinksText"
           text={getMessage('modals.main.settings.sections.quicklinks.text_only')}

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

@@ -149,7 +149,11 @@ export default class QuoteSettings extends PureComponent {
     } else {
       // api
       customSettings = (
-        <SettingsItem title="Additional Options" subtitle="Other settings to customise the style of the quote widget" final={true}>
+        <SettingsItem
+          title="Additional Options"
+          subtitle="Other settings to customise the style of the quote widget"
+          final={true}
+        >
           <Dropdown
             label={this.getMessage('modals.main.settings.sections.background.interval.title')}
             name="quotechange"

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

@@ -80,7 +80,10 @@ export default class SearchSettings extends PureComponent {
           category="widgets"
           switch={true}
         />
-        <SettingsItem title="Extra Options" subtitle="Additional options for search widget display and functionality">
+        <SettingsItem
+          title="Extra Options"
+          subtitle="Additional options for search widget display and functionality"
+        >
           {/* not supported on firefox */}
           {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
             <Checkbox

src/components/modals/main/settings/sections/advanced/Advanced.jsx

@@ -36,7 +36,7 @@ export default class AdvancedSettings extends PureComponent {
     const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
     if (this.state.showData) {
-      return <Data goBack={() => this.setState({ showData: false })}/>;
+      return <Data goBack={() => this.setState({ showData: false })} />;
     }
 
     return (

src/components/modals/main/settings/sections/advanced/Data.jsx

@@ -15,15 +15,24 @@ export default class Data extends PureComponent {
 
     return (
       <>
-        <span className="mainTitle"  onClick={() => this.props.goBack()}>
+        <span className="mainTitle" onClick={() => this.props.goBack()}>
           {getMessage('modals.main.settings.sections.advanced.title')}
           <MdOutlineKeyboardArrowRight /> Data
         </span>
-        <div className='moreSettings' style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', gap: '10px', padding: '30px'}}>
-            <MdOutlineSync />
-            <span className='title'>Sync</span>
-            {/*<span className='subtitle'>Last synced at: Sun 10:12PM, 1st May 2022</span>*/}
-            <span className='subtitle'>Sync is not setup yet.</span>
+        <div
+          className="moreSettings"
+          style={{
+            display: 'flex',
+            flexFlow: 'column',
+            alignItems: 'center',
+            gap: '10px',
+            padding: '30px',
+          }}
+        >
+          <MdOutlineSync />
+          <span className="title">Sync</span>
+          {/*<span className='subtitle'>Last synced at: Sun 10:12PM, 1st May 2022</span>*/}
+          <span className="subtitle">Sync is not setup yet.</span>
         </div>
         <div className="settingsRow">
           <div className="content">
@@ -50,9 +59,7 @@ export default class Data extends PureComponent {
             </button>
           </div>
         </div>
-        <SettingsItem title='Sync' subtitle='Setup sync to sync lol'>
-            
-        </SettingsItem>
+        <SettingsItem title="Sync" subtitle="Setup sync to sync lol"></SettingsItem>
       </>
     );
   }

src/components/modals/main/settings/sections/background/Background.jsx

@@ -72,7 +72,6 @@ export default class BackgroundSettings extends PureComponent {
   render() {
     const { getMessage } = this;
 
-    let backgroundSettings;
     const interval = (
       <SettingsItem title="Interval" subtitle="Change how often the background is updated">
         <Dropdown
@@ -176,6 +175,7 @@ export default class BackgroundSettings extends PureComponent {
       </>
     );
 
+    let backgroundSettings = APISettings;
     switch (this.state.backgroundType) {
       case 'custom':
         backgroundSettings = <CustomSettings interval={interval} />;
@@ -184,13 +184,10 @@ export default class BackgroundSettings extends PureComponent {
         backgroundSettings = <ColourSettings />;
         break;
       case 'random_colour':
-        backgroundSettings = <></>;
-        break;
       case 'random_gradient':
         backgroundSettings = <></>;
         break;
       default:
-        backgroundSettings = APISettings;
         break;
     }
 
@@ -210,16 +207,15 @@ export default class BackgroundSettings extends PureComponent {
 
     const breadcrumb = (name, toSet) => (
       <div className="breadcrumb">
-      <div onClick={() => this.setState({ [toSet]: false })}>
-        <Tooltip title="back" key="backArrow">
-          <MdArrowBack />
-        </Tooltip>
+        <div onClick={() => this.setState({ [toSet]: false })} className="settingsReturn">
+          <Tooltip title="back" key="backArrow">
+            <MdArrowBack />
+          </Tooltip>
+        </div>
+        <span className="subtitle">{name}</span>
       </div>
-      <span className="subtitle">{name}</span>
-    </div>
     );
 
-
     return (
       <>
         <Header
@@ -228,12 +224,10 @@ export default class BackgroundSettings extends PureComponent {
           category="background"
           element="#backgroundImage"
         />
-        {this.state.effects ? (
-          breadcrumb('Effects', 'effects')
-        ) : null}
-        {this.state.backgroundSettingsSection ? (
-          breadcrumb('Source', 'backgroundSettingsSection')
-        ) : null}
+        {this.state.effects ? breadcrumb('Effects', 'effects') : null}
+        {this.state.backgroundSettingsSection
+          ? breadcrumb('Source', 'backgroundSettingsSection')
+          : null}
         {this.state.backgroundSettingsSection !== true && this.state.effects !== true ? (
           <>
             <div

src/components/modals/main/settings/sections/background/Custom.jsx

@@ -128,7 +128,7 @@ export default class CustomSettings extends PureComponent {
     const dnd = this.customDnd.current;
     dnd.ondragover = dnd.ondragenter = (e) => {
       e.preventDefault();
-    }
+    };
 
     dnd.ondrop = (e) => {
       e.preventDefault();
@@ -142,7 +142,7 @@ export default class CustomSettings extends PureComponent {
       };
       reader.readAsDataURL(file);
       e.preventDefault();
-    }
+    };
   }
 
   render() {

src/components/modals/main/settings/sections/background/CustomURLModal.jsx

@@ -23,10 +23,15 @@ export default function CustomURLModal({ modalClose, modalCloseOnly }) {
         </Tooltip>
       </div>
       <div className="copy">
-        <input type='text' value={url} onChange={(e) => setURL(e.target.value)} varient="outlined" />
+        <input
+          type="text"
+          value={url}
+          onChange={(e) => setURL(e.target.value)}
+          varient="outlined"
+        />
         <Tooltip title="Add Link" placement="top">
           <button onClick={() => modalClose(url)}>
-          <MdAdd />
+            <MdAdd />
           </button>
         </Tooltip>
       </div>