chore: improve background back btn, update dependencies

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>