chore: improve background back btn, update dependencies

src/components/helpers/tooltip/infoTooltip.jsx

@@ -32,8 +32,10 @@ export default function InfoTooltip({ children, title, style, placement, subtitl
               </div>
             </Tooltip>
           </div>
-          <span className='subtitle'>{subtitle}</span>
-          <span className='link'>Open Knowledgebase <MdOpenInNew /></span>
+          <span className="subtitle">{subtitle}</span>
+          <span className="link">
+            Open Knowledgebase <MdOpenInNew />
+          </span>
         </div>
       )}
     </div>

src/components/helpers/tooltip/tooltip.scss

@@ -100,7 +100,7 @@
   @include themed() {
     background-color: t($modal-background);
     border-radius: t($borderRadius);
-    box-shadow: 0 0 0 1px t($modal-sidebarActive);  
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
   }
   .tooltipHeader {
     display: flex;
@@ -126,4 +126,4 @@
       }
     }
   }
-}
+}

src/components/modals/main/marketplace/Item.jsx

@@ -190,7 +190,7 @@ export default class Item extends PureComponent {
                   </div>
                 </div>
               ) : null}
-              {!this.props.data.data.photos && this.props.data.data.language !== "" ? (
+              {!this.props.data.data.photos && this.props.data.data.language !== '' ? (
                 <div className="infoItem">
                   <MdTranslate />
                   <div className="text">

src/components/modals/main/marketplace/Items.jsx

@@ -46,7 +46,7 @@ export default function Items({
           <MdAutoFixHigh />
           <span className="title">Can't find what you're looking for?</span>
           <span className="subtitle">
-          Visit the <a className='link'>knowledgebase</a> to create your own.
+            Visit the <a className="link">knowledgebase</a> to create your own.
           </span>
         </div>
       ) : null}

src/components/modals/main/marketplace/sections/Sideload.jsx

@@ -70,13 +70,14 @@ export default class Sideload extends PureComponent {
             accept="application/json"
             loadFunction={(e) => this.installAddon(JSON.parse(e.target.result))}
           />
-          <MdIntegrationInstructions className='sideloadIcon'/>
+          <MdIntegrationInstructions className="sideloadIcon" />
           <span className="title">{this.getMessage('modals.main.addons.sideload.title')}</span>
-          <span className="subtitle">Install a Mue addon not on the marketplace from your computer</span>
-          <button
-            onClick={() => document.getElementById('file-input').click()}
-          >
-            <MdOutlineFileUpload />{this.getMessage('modals.main.settings.sections.background.source.upload')}
+          <span className="subtitle">
+            Install a Mue addon not on the marketplace from your computer
+          </span>
+          <button onClick={() => document.getElementById('file-input').click()}>
+            <MdOutlineFileUpload />
+            {this.getMessage('modals.main.settings.sections.background.source.upload')}
           </button>
         </div>
         <Modal

src/components/modals/main/scss/index.scss

@@ -218,4 +218,4 @@ h5 {
     gap: 20px;
     align-items: center;
   }
-}
+}

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

@@ -99,7 +99,6 @@
     width: 170px;
     box-sizing: border-box !important;
 
-
     img {
       width: 100%;
       height: auto;
@@ -119,8 +118,8 @@
 
     .iconButtons {
       display: grid;
-      grid-template-columns: 1fr 1fr; 
-      grid-template-rows: 1fr; 
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr;
       grid-gap: 20px;
       button {
         width: 100%;
@@ -228,7 +227,7 @@
   }
   svg {
     font-size: 70px;
-   /* background: -webkit-linear-gradient(90deg,rgba(255,92,39,.7) 37%,rgba(255,70,110,.67) 60%);
+    /* background: -webkit-linear-gradient(90deg,rgba(255,92,39,.7) 37%,rgba(255,70,110,.67) 60%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;*/
   }
@@ -260,7 +259,6 @@ p.author {
   overflow-x: hidden;
 }
 
-
 .returnButton {
   display: grid;
   place-items: center;
@@ -412,6 +410,6 @@ p.author {
   align-items: center;
   margin-top: 30px;
   svg {
-    font-size: 30px; 
+    font-size: 30px;
   }
 }

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

@@ -163,6 +163,19 @@ h4 {
   padding-top: 20px;
   gap: 10px;
   align-items: center;
+
+  .settingsReturn {
+    border-radius: 12px;
+    cursor: pointer;
+    padding: 4px;
+
+    svg {
+      font-size: 2em;
+    }
+    &:hover {
+      background: rgba(121, 121, 121, 0.226);
+    }
+  }
   .returnButton {
     display: grid;
     place-items: center;

src/components/modals/main/settings/Header.jsx

@@ -18,7 +18,7 @@ export default class Header extends PureComponent {
       <>
         <div className="flexTopMarketplace">
           {this.props.backButton ? (
-            <div className="returnButton" onClick={this.props.clickEffect} >
+            <div className="returnButton" onClick={this.props.clickEffect}>
               <Tooltip title="back" key="backArrow">
                 <MdArrowBack className="backArrow" />
               </Tooltip>

src/components/modals/main/settings/ResetModal.jsx

@@ -13,11 +13,12 @@ export default function ResetModal({ modalClose }) {
   return (
     <div className="smallModal">
       <div className="shareHeader">
-        <span className="title">         
-        {variables.language.getMessage(
-          variables.languagecode,
-          'modals.main.settings.sections.advanced.reset_modal.title',
-        )}</span>
+        <span className="title">
+          {variables.language.getMessage(
+            variables.languagecode,
+            'modals.main.settings.sections.advanced.reset_modal.title',
+          )}
+        </span>
         <Tooltip title="Close">
           <div className="close" onClick={modalClose}>
             <MdClose />
@@ -37,7 +38,7 @@ export default function ResetModal({ modalClose }) {
         )}
       </span>
       <div className="resetFooter">
-        <button className='textButton' onClick={modalClose}>
+        <button className="textButton" onClick={modalClose}>
           <MdClose />
           Close
         </button>

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>

src/components/modals/welcome/welcome.scss

@@ -12,8 +12,8 @@
   right: 0;
   bottom: 0;
   left: 0;
-   height: 80vh;
-   width: clamp(70vw,1200px,90vw);
+  height: 80vh;
+  width: clamp(70vw, 1200px, 90vw);
   padding: 0;
   overflow-x: hidden !important;
 
@@ -213,8 +213,6 @@ a.privacy {
   }
 }
 
-
-
 .createButtons {
   display: flex;
   flex-flow: row;

src/components/widgets/background/PhotoInformation.jsx

@@ -209,10 +209,7 @@ export default function PhotoInformation({ info, url, api }) {
         ariaHideApp={false}
         onRequestClose={() => openShareModal(false)}
       >
-        <ShareModal
-          data={info.url}
-          modalClose={() => openShareModal(false)}
-        />
+        <ShareModal data={info.url} modalClose={() => openShareModal(false)} />
       </Modal>
       {localStorage.getItem('widgetStyle') === 'legacy' && (
         <div className="photoInformation-legacy">

src/components/widgets/navbar/Navbar.jsx

@@ -90,9 +90,13 @@ export default class Navbar extends PureComponent {
           <Tooltip
             title={variables.language.getMessage(
               variables.languagecode,
-              'modals.main.navbar.settings', {
-                type: variables.language.getMessage(variables.languagecode, 'modals.main.navbar.tooltips.refresh_' + this.refreshValue),
-              }
+              'modals.main.navbar.settings',
+              {
+                type: variables.language.getMessage(
+                  variables.languagecode,
+                  'modals.main.navbar.tooltips.refresh_' + this.refreshValue,
+                ),
+              },
             )}
           >
             <button onClick={() => this.props.openModal('mainModal')}>

src/components/widgets/navbar/Todo.jsx

@@ -14,11 +14,7 @@ import { shift, useFloating } from '@floating-ui/react-dom';
 //import Hotkeys from 'react-hot-keys';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 
-const SortableItem = sortableElement(({ value }) => (
-  <div>
-    {value}
-  </div>
-));
+const SortableItem = sortableElement(({ value }) => <div>{value}</div>);
 
 const SortableContainer = sortableContainer(({ children }) => <div>{children}</div>);