From 7f5b8266834991667a6eba92686e700fdb4ce325 Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Thu, 4 Nov 2021 13:58:53 +0000
Subject: [PATCH] fix: various modal things, improve ui, add missing
 translations etc

---
 .../main/marketplace/SideloadFailedModal.jsx  |  2 +-
 .../main/marketplace/sections/Create.jsx      | 19 +++++++----------
 .../main/marketplace/sections/Sideload.jsx    | 12 +++++------
 .../scss/settings/modules/_material-ui.scss   |  9 ++++++++
 .../modals/main/settings/Checkbox.jsx         |  6 +++++-
 src/components/modals/main/settings/Radio.jsx |  4 ++++
 .../modals/main/settings/Slider.jsx           |  2 +-
 src/components/modals/main/settings/Text.jsx  |  2 +-
 .../modals/main/settings/sections/About.jsx   | 20 +++++++++++++-----
 .../modals/main/settings/sections/Date.jsx    |  2 +-
 .../modals/main/settings/sections/Navbar.jsx  |  2 +-
 .../main/settings/sections/QuickLinks.jsx     |  8 ++++---
 .../sections/background/Background.jsx        | 21 +++++++++++--------
 .../settings/sections/background/Custom.jsx   |  8 +++----
 .../sections/background/CustomURLModal.jsx    |  6 ++++--
 src/translations/de_DE.json                   |  3 +++
 src/translations/en_GB.json                   |  3 +++
 src/translations/en_US.json                   |  3 +++
 src/translations/es.json                      |  3 +++
 src/translations/fr.json                      |  3 +++
 src/translations/nl.json                      |  3 +++
 src/translations/no.json                      |  3 +++
 src/translations/ru.json                      |  3 +++
 src/translations/zh_CN.json                   |  3 +++
 24 files changed, 103 insertions(+), 47 deletions(-)

diff --git a/src/components/modals/main/marketplace/SideloadFailedModal.jsx b/src/components/modals/main/marketplace/SideloadFailedModal.jsx
index 1d769f74..c28f44b7 100644
--- a/src/components/modals/main/marketplace/SideloadFailedModal.jsx
+++ b/src/components/modals/main/marketplace/SideloadFailedModal.jsx
@@ -5,7 +5,7 @@ export default function SideloadFailedModal({ modalClose, reason }) {
 
   return (
     <>
-      <h1 style={{ textAlign: 'center' }}>{getMessage('modals.main.error_boundary.error')}</h1>
+      <h1>{getMessage('modals.main.error_boundary.title')}</h1>
       <span>{getMessage('modals.main.addons.sideload.failed')}</span>
       <br/><br/>
       <span>{reason}</span>
diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index feb813ab..a1a4f7e8 100644
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@@ -5,6 +5,7 @@ import {
   PhotoOutlined as Photos, 
   FormatQuoteOutlined as Quotes
 } from '@mui/icons-material';
+import { TextField } from '@mui/material';
 import { toast } from 'react-toastify';
 
 import { saveFile } from 'modules/helpers/settings/modals';
@@ -207,18 +208,12 @@ export default class Create extends PureComponent {
     const writeDescription = ( 
       <>
         <h3>{getMessage('modals.main.marketplace.product.information')}</h3>
-        <p>{getMessage('modals.main.addons.create.metadata.name')}</p>
-        <input type='text' value={this.state.addonMetadata.name} onInput={(e) => setMetadata(e.target.value, 'name')}/>
-        <p>{getMessage('modals.main.marketplace.product.version')}</p>
-        <input type='text' value={this.state.addonMetadata.version} onInput={(e) => setMetadata(e.target.value, 'version')}/>
-        <p>{getMessage('modals.main.marketplace.product.author')}</p>
-        <input type='text' value={this.state.addonMetadata.author} onInput={(e) => setMetadata(e.target.value, 'author')}/>
-        <p>{getMessage('modals.main.addons.create.metadata.icon_url')}</p>
-        <input type='text' value={this.state.addonMetadata.icon_url} onInput={(e) => setMetadata(e.target.value, 'icon_url')}/>
-        <p>{getMessage('modals.main.addons.create.metadata.screenshot_url')}</p>
-        <input type='text' value={this.state.addonMetadata.screenshot_url} onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}/>
-        <p>{getMessage('modals.main.addons.create.metadata.description')}</p>
-        <textarea className='settingsTextarea' value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}/>
+        <TextField label={getMessage('modals.main.addons.create.metadata.name')} varient='outlined' value={this.state.addonMetadata.name} onInput={(e) => setMetadata(e.target.value, 'name')}/>
+        <TextField label={getMessage('modals.main.marketplace.product.version')} varient='outlined' value={this.state.addonMetadata.version} onInput={(e) => setMetadata(e.target.value, 'version')}/>
+        <TextField label={getMessage('modals.main.marketplace.product.author')} varient='outlined' value={this.state.addonMetadata.author} onInput={(e) => setMetadata(e.target.value, 'author')}/>
+        <TextField label={getMessage('modals.main.addons.create.metadata.icon_url')} varient='outlined' value={this.state.addonMetadata.icon_url} onInput={(e) => setMetadata(e.target.value, 'icon_url')}/>
+        <TextField label={getMessage('modals.main.addons.create.metadata.screenshot_url')} varient='outlined' value={this.state.addonMetadata.screenshot_url} onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}/>
+        <TextField label={getMessage('modals.main.addons.create.metadata.description')} varient='outlined' multiline spellCheck={false} rows={4} InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}/>
         <br/>
         <button onClick={() => this.changeTab(1)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
         <button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' disabled={nextDescriptionDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
diff --git a/src/components/modals/main/marketplace/sections/Sideload.jsx b/src/components/modals/main/marketplace/sections/Sideload.jsx
index 96f3e47b..122def02 100644
--- a/src/components/modals/main/marketplace/sections/Sideload.jsx
+++ b/src/components/modals/main/marketplace/sections/Sideload.jsx
@@ -24,17 +24,17 @@ export default class Sideload extends PureComponent {
   installAddon(input) {
     let failedReason = '';
     if (!input.name) {
-      failedReason = getMessage('modals.main.addons.sideload.errors.no_name');
+      failedReason = this.getMessage('modals.main.addons.sideload.errors.no_name');
     } else if (!input.author) {
-      failedReason = getMessage('modals.main.addons.sideload.errors.no_author');
+      failedReason = this.getMessage('modals.main.addons.sideload.errors.no_author');
     } else if (!input.type) {
-      failedReason = getMessage('modals.main.addons.sideload.errors.no_type');
+      failedReason = this.getMessage('modals.main.addons.sideload.errors.no_type');
     } else if (!input.version) {
-      failedReason = getMessage('modals.main.addons.sideload.errors.no_version');
+      failedReason = this.getMessage('modals.main.addons.sideload.errors.no_version');
     } else if (input.type === 'photos' && (!input.photos || !input.photos.length || !input.photos[0].url.default || !input.photos[0].photographer || !input.photos[0].location)) {
-      failedReason = getMessage('modals.main.addons.sideload.errors.invalid_photos');
+      failedReason = this.getMessage('modals.main.addons.sideload.errors.invalid_photos');
     } else if (input.type === 'quotes' && (!input.quotes || !input.quotes.length || !input.quotes[0].quote || !input.quotes[0].author)) {
-      failedReason = getMessage('modals.main.addons.sideload.errors.invalid_quotes');
+      failedReason = this.getMessage('modals.main.addons.sideload.errors.invalid_quotes');
     }
 
     if (failedReason !== '') {
diff --git a/src/components/modals/main/scss/settings/modules/_material-ui.scss b/src/components/modals/main/scss/settings/modules/_material-ui.scss
index 4b6eff43..5d68f428 100644
--- a/src/components/modals/main/scss/settings/modules/_material-ui.scss
+++ b/src/components/modals/main/scss/settings/modules/_material-ui.scss
@@ -84,3 +84,12 @@ legend,
   width: 300px !important;
   display: flex !important;
 }
+
+.Mui-disabled {
+  color: #818181 !important;
+  cursor: not-allowed;
+
+  .checkbox svg {
+    fill: #818181 !important;
+  }
+}
diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx
index 0c2c4746..991f1511 100644
--- a/src/components/modals/main/settings/Checkbox.jsx
+++ b/src/components/modals/main/settings/Checkbox.jsx
@@ -20,6 +20,10 @@ export default class Checkbox extends PureComponent {
       checked: value
     });
 
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+
     variables.stats.postEvent('setting', `${this.props.name} ${(this.state.checked === true) ? 'enabled' : 'disabled'}`);
 
     if (this.props.element) {
@@ -36,7 +40,7 @@ export default class Checkbox extends PureComponent {
     return (
       <>
         <FormControlLabel
-          control={<CheckboxUI name={this.props.name} color='primary' className='checkbox' checked={this.state.checked} onChange={this.handleChange} />}
+          control={<CheckboxUI name={this.props.name} color='primary' className='checkbox' checked={this.state.checked} onChange={this.handleChange} disabled={this.props.disabled || false} />}
           label={this.props.text}
         />
         <br/>
diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx
index 09cf52d7..1497bdd2 100644
--- a/src/components/modals/main/settings/Radio.jsx
+++ b/src/components/modals/main/settings/Radio.jsx
@@ -32,6 +32,10 @@ export default class Radio extends PureComponent {
       value
     });
 
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+
     variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
     
     if (this.props.element) {
diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx
index aad62add..e61af3b6 100644
--- a/src/components/modals/main/settings/Slider.jsx
+++ b/src/components/modals/main/settings/Slider.jsx
@@ -68,7 +68,7 @@ export default class SliderComponent extends PureComponent {
           default={Number(this.props.default)} 
           min={Number(this.props.min)} 
           max={Number(this.props.max)} 
-          step={this.props.step || 1} 
+          step={Number(this.props.step) || 1} 
           getAriaValueText={(value) => `${value}`} 
           marks={this.props.marks || []}
         />
diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx
index 0a66a36c..727b0ced 100644
--- a/src/components/modals/main/settings/Text.jsx
+++ b/src/components/modals/main/settings/Text.jsx
@@ -49,7 +49,7 @@ export default class Text extends PureComponent {
     return (
       <>
         {(this.props.textarea === true) ?
-          <TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' multiline spellCheck={false} minRows={4} maxRows={10}  InputLabelProps={{ shrink: true }} />
+          <TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' multiline spellCheck={false} minRows={4} maxRows={10} InputLabelProps={{ shrink: true }} />
           : <TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' />
         }
         <span className='modalLink' onClick={this.resetItem}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span>
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index f61e8cb3..4d184010 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -41,6 +41,10 @@ export default class About extends PureComponent {
       });
     }
 
+    if (sponsors.length === 0) { 
+      sponsors = [{ handle: 'empty' }];
+    }
+
     if (this.controller.signal.aborted === true) {
       return;
     }
@@ -126,11 +130,17 @@ export default class About extends PureComponent {
 
         <h3>{this.getMessage('modals.main.settings.sections.about.supporters')}</h3>
         <p>{this.state.loading}</p>
-        {this.state.sponsors.map(({ handle, avatar }) => (
-          <Tooltip title={handle} key={handle}>
-            <a href={'https://github.com/' + handle} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={avatar.split('?')[0] + '?s=128'} alt={handle}></img></a>
-          </Tooltip>
-        ))}
+        {this.state.sponsors.map(({ handle, avatar }) => {
+          if (handle === 'empty') {
+            return <p>{this.getMessage('modals.main.settings.sections.about.no_supporters')}</p>;
+          }
+
+          return (
+            <Tooltip title={handle} key={handle}>
+              <a href={'https://github.com/' + handle} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={avatar.split('?')[0] + '?s=128'} alt={handle}></img></a>
+            </Tooltip>
+          )
+        })}
 
         <h3>{this.getMessage('modals.main.settings.sections.about.photographers')}</h3>
         <p>{this.state.photographers}</p>
diff --git a/src/components/modals/main/settings/sections/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx
index 98389583..483859fe 100644
--- a/src/components/modals/main/settings/sections/Date.jsx
+++ b/src/components/modals/main/settings/sections/Date.jsx
@@ -52,13 +52,13 @@ export default class DateSettings extends PureComponent {
     return (
       <>
         <Header title={getMessage('modals.main.settings.sections.date.title')} setting='date' category='date' element='.date' zoomSetting='zoomDate'/>
+        <Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.date.week_number')} category='date'/>
         <Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
           <option value='long'>{getMessage('modals.main.settings.sections.date.type.long')}</option>
           <option value='short'>{getMessage('modals.main.settings.sections.date.type.short')}</option>
         </Dropdown>
         
         <Checkbox name='datezero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='date'/>
-        <Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.date.week_number')} category='date'/>
         {dateSettings}
       </>
     );
diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
index c12022af..b03fe749 100644
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/src/components/modals/main/settings/sections/Navbar.jsx
@@ -16,7 +16,7 @@ export default class Navbar extends PureComponent {
       <>
         <h2>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h2>
         <Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' marks={values('zoom')} category='navbar' />
-        <Checkbox name='navbarHover' text={'Only display on hover'} category='navbar'/>
+        <Checkbox name='navbarHover' text={getMessage('modals.main.settings.sections.appearance.navbar.hover')} category='navbar'/>
         <Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
         <Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
         <Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx
index 7b602070..61ada28d 100644
--- a/src/components/modals/main/settings/sections/QuickLinks.jsx
+++ b/src/components/modals/main/settings/sections/QuickLinks.jsx
@@ -1,18 +1,20 @@
 import variables from 'modules/variables';
+import { useState } from 'react';
 
 import Header from '../Header';
 import Checkbox from '../Checkbox';
 
 export default function QuickLinks() {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+  const [textOnly, setTextOnly] = useState(localStorage.getItem('quicklinksText') === 'true');
 
   return (
     <>
       <Header title={getMessage('modals.main.settings.sections.quicklinks.title')} setting='quicklinksenabled' category='quicklinks' element='.quicklinks-container' zoomSetting='zoomQuicklinks'/>
-      <Checkbox name='quicklinksText' text={getMessage('modals.main.settings.sections.quicklinks.text_only')} category='quicklinks'/>
-      <Checkbox name='quicklinksddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks'/>
+      <Checkbox name='quicklinksText' text={getMessage('modals.main.settings.sections.quicklinks.text_only')} category='quicklinks' onChange={(value) => setTextOnly(value)}/>
+      <Checkbox name='quicklinksddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks' disabled={textOnly}/>
       <Checkbox name='quicklinksnewtab' text={getMessage('modals.main.settings.sections.quicklinks.open_new')} category='quicklinks'/>
-      <Checkbox name='quicklinkstooltip' text={getMessage('modals.main.settings.sections.quicklinks.tooltip')} category='quicklinks'/>
+      <Checkbox name='quicklinkstooltip' text={getMessage('modals.main.settings.sections.quicklinks.tooltip')} category='quicklinks' disabled={textOnly}/>
     </>
   );
 }
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 10e19a66..5b18561a 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -21,7 +21,8 @@ export default class BackgroundSettings extends PureComponent {
     this.state = {
       backgroundType: localStorage.getItem('backgroundType') || 'api',
       backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
-      backgroundCategories: [this.getMessage('modals.main.loading')]
+      backgroundCategories: [this.getMessage('modals.main.loading')],
+      backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue'
     };
     this.controller = new AbortController();
   }
@@ -93,8 +94,8 @@ export default class BackgroundSettings extends PureComponent {
 
     const APISettings = (
       <>
-        <Radio title={getMessage('modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
-        <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory' manual={true}>
+        <Radio title={getMessage('modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage' onChange={(e) => this.setState({ backgroundAPI: e })}/>
+        <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
           {this.state.backgroundCategories.map((category) => (
             <MenuItem value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</MenuItem>
           ))}
@@ -120,14 +121,16 @@ export default class BackgroundSettings extends PureComponent {
     if (localStorage.getItem('photo_packs') && this.state.backgroundType !== 'custom' && this.state.backgroundType !== 'colour' && this.state.backgroundType !== 'api') {
       backgroundSettings = null;
     }
+
+    const usingImage = this.state.backgroundType !== 'colour' && this.state.backgroundType !== 'random_colour' && this.state.backgroundType !== 'random_gradient';
   
     return (
       <>
         <Header title={getMessage('modals.main.settings.sections.background.title')} setting='background' category='background' element='#backgroundImage'/>
-        <Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
-        <Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' />
-        <Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' />
-        <Checkbox name='photoMap' text={getMessage('modals.main.settings.sections.background.show_map')} element='.other'/>
+        <Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' disabled={!usingImage} />
+        <Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' disabled={!usingImage} />
+        <Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' disabled={this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'} />
+        <Checkbox name='photoMap' text={getMessage('modals.main.settings.sections.background.show_map')} element='.other' disabled={this.state.backgroundAPI !== 'unsplash'}/>
 
         <h3>{getMessage('modals.main.settings.sections.background.source.title')}</h3>
         <Dropdown label={getMessage('modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
@@ -141,7 +144,7 @@ export default class BackgroundSettings extends PureComponent {
         
         {backgroundSettings}
 
-        {this.state.backgroundType === 'api' && APISettings ? 
+        {this.state.backgroundType === 'api' && APISettings && this.state.backgroundAPI === 'mue' ? 
           <>
             <h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
             <Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
@@ -155,7 +158,7 @@ export default class BackgroundSettings extends PureComponent {
             <Slider title={getMessage('modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' marks={values('background')} category='background' element='#backgroundImage' />
             <br/>
             <Dropdown label={getMessage('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' onChange={(value) => this.setState({ backgroundFilter: value })} category='background' element='#backgroundImage'>
-              <option value='none'>None</option>
+              <option value='none'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
               <option value='grayscale'>{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}</option>
               <option value='sepia'>{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}</option>
               <option value='invert'>{getMessage('modals.main.settings.sections.background.effects.filters.invert')}</option>
diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx
index 29fd8f36..3c99c90c 100644
--- a/src/components/modals/main/settings/sections/background/Custom.jsx
+++ b/src/components/modals/main/settings/sections/background/Custom.jsx
@@ -108,8 +108,8 @@ export default class CustomSettings extends PureComponent {
       <ul>
         <p>{this.getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
         <div className='data-buttons-row'>
-          <button onClick={() => this.uploadCustomBackground()}>Add background <AddPhotoAlternate/> </button>
-          <button onClick={() => this.setState({ customURLModal: true })}>Add URL <AddLink/></button>
+          <button onClick={() => this.uploadCustomBackground()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <AddPhotoAlternate/></button>
+          <button onClick={() => this.setState({ customURLModal: true })}>{this.getMessage('modals.main.settings.sections.background.source.add_url')} <AddLink/></button>
         </div>
         <div className='images-row'>
           {this.state.customBackground.map((_url, index) => (
@@ -125,8 +125,8 @@ export default class CustomSettings extends PureComponent {
         </div>
         <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
         {this.props.interval}
-        <Modal closeTimeoutMS={100} isOpen={this.state.customURLModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
-          <CustomURLModal modalClose={(e) => this.addCustomURL(e)} />
+        <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ customURLModal: false })} isOpen={this.state.customURLModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
+          <CustomURLModal modalClose={(e) => this.addCustomURL(e)} modalCloseOnly={() => this.setState({ customURLModal: false })} />
         </Modal>
       </ul>
     );
diff --git a/src/components/modals/main/settings/sections/background/CustomURLModal.jsx b/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
index badc92c7..56e67a19 100644
--- a/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
+++ b/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
@@ -1,13 +1,15 @@
+import variables from 'modules/variables';
 import { useState } from 'react';
 import { Add } from '@mui/icons-material';
 import { TextField } from '@mui/material'; 
 
-export default function CustomURLModal({ modalClose }) {
+export default function CustomURLModal({ modalClose, modalCloseOnly }) {
   const [url, setURL] = useState('URL');
 
   return (
     <>
-      <h1>Add URL</h1>
+      <span className='closeModal' onClick={modalCloseOnly}>&times;</span>
+      <h1>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.background.source.add_url')}</h1>
       <TextField value={url} onChange={(e) => setURL(e.target.value)} varient='outlined' />
       <div className='resetfooter'>
         <button className='round import' style={{ marginLeft: '5px' }} onClick={() => modalClose(url)}>
diff --git a/src/translations/de_DE.json b/src/translations/de_DE.json
index 632e84b8..48458f82 100644
--- a/src/translations/de_DE.json
+++ b/src/translations/de_DE.json
@@ -171,6 +171,7 @@
               "upload": "Hochladen",
               "add_colour": "Farbe hinzufügen",
               "add_background": "Add background",
+              "add_url": "Add URL",
               "disabled": "Deaktiviert",
               "loop_video": "Video schleife",
               "mute_video": "Video stumm",
@@ -247,6 +248,7 @@
               "title": "Navigationsleiste",
               "notes": "Notizen",
               "refresh": "Aktualisieren",
+              "hover": "Only display on hover",
               "refresh_options": {
                 "none": "Keine",
                 "page": "Seite"
@@ -381,6 +383,7 @@
             },
             "contributors": "Mitwirkende",
             "supporters": "Unterstützer",
+            "no_supporters": "There are currently no Mue supporters",
             "photographers": "Photographers"
           }
         },
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index f6b3e2eb..161d6415 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -171,6 +171,7 @@
               "upload": "Upload",
               "add_colour": "Add colour",
               "add_background": "Add background",
+              "add_url": "Add URL",
               "disabled": "Disabled",
               "loop_video": "Loop video",
               "mute_video": "Mute video",
@@ -247,6 +248,7 @@
               "title": "Navbar",
               "notes": "Notes",
               "refresh": "Refresh button",
+              "hover": "Only display on hover",
               "refresh_options": {
                 "none": "None",
                 "page": "Page"
@@ -380,6 +382,7 @@
             },
             "contributors": "Contributors",
             "supporters": "Supporters",
+            "no_supporters": "There are currently no Mue supporters",
             "photographers": "Photographers"
           }
         },
diff --git a/src/translations/en_US.json b/src/translations/en_US.json
index 814320a6..036da99d 100644
--- a/src/translations/en_US.json
+++ b/src/translations/en_US.json
@@ -171,6 +171,7 @@
               "upload": "Upload",
               "add_colour": "Add color",
               "add_background": "Add background",
+              "add_url": "Add URL",
               "disabled": "Disabled",
               "loop_video": "Loop video",
               "mute_video": "Mute video",
@@ -247,6 +248,7 @@
               "title": "Navbar",
               "notes": "Notes",
               "refresh": "Refresh button",
+              "hover": "Only display on hover",
               "refresh_options": {
                 "none": "None",
                 "page": "Page"
@@ -380,6 +382,7 @@
             },
             "contributors": "Contributors",
             "supporters": "Supporters",
+            "no_supporters": "There are currently no Mue supporters",
             "photographers": "Photographers"
           }
         },
diff --git a/src/translations/es.json b/src/translations/es.json
index b9e0d28d..9071f802 100644
--- a/src/translations/es.json
+++ b/src/translations/es.json
@@ -171,6 +171,7 @@
               "upload": "Subir",
               "add_colour": "Añadir color",
               "add_background": "Add background",
+              "add_url": "Add URL",
               "disabled": "Desactivado",
               "loop_video": "Vídeo en bucle",
               "mute_video": "Silenciar video",
@@ -247,6 +248,7 @@
               "title": "Barra de búsqueda",
               "notes": "Notas",
               "refresh": "Botón de recargar",
+              "hover": "Only display on hover",
               "refresh_options": {
                 "none": "None",
                 "page": "Página"
@@ -380,6 +382,7 @@
             },
             "contributors": "Contribuyentes",
             "supporters": "Partidarios",
+            "no_supporters": "There are currently no Mue supporters",
             "photographers": "Fotógrafos"
           }
         },
diff --git a/src/translations/fr.json b/src/translations/fr.json
index adc3d24a..2bddf285 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -171,6 +171,7 @@
               "upload": "Ajouter",
               "add_colour": "Ajouter une couleur",
               "add_background": "Add background",
+              "add_url": "Add URL",
               "disabled": "Disabled",
               "loop_video": "Boucle vidéo",
               "mute_video": "Mettre la vidéo en sourdine",
@@ -247,6 +248,7 @@
               "title": "Navbar",
               "notes": "Notes",
               "refresh": "Refresh button",
+              "hover": "Only display on hover",
               "refresh_options": {
                 "none": "None",
                 "page": "Page"
@@ -380,6 +382,7 @@
             },
             "contributors": "Collaborateurs",
             "supporters": "Partisans",
+            "no_supporters": "There are currently no Mue supporters",
             "photographers": "Photographes"
           }
         },
diff --git a/src/translations/nl.json b/src/translations/nl.json
index 7ba71e06..76a6f2ac 100644
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@@ -171,6 +171,7 @@
               "upload": "Uploaden",
               "add_colour": "Kleur toevoegen",
               "add_background": "Add background",
+              "add_url": "Add URL",
               "disabled": "Uitgeschakeld",
               "loop_video": "Loop video",
               "mute_video": "Mute video",
@@ -247,6 +248,7 @@
               "title": "Navbar",
               "notes": "Notes",
               "refresh": "Refresh button",
+              "hover": "Only display on hover",
               "refresh_options": {
                 "none": "None",
                 "page": "Page"
@@ -380,6 +382,7 @@
             },
             "contributors": "Contributors",
             "supporters": "Supporters",
+            "no_supporters": "There are currently no Mue supporters",
             "photographers": "Photographers"
           }
         },
diff --git a/src/translations/no.json b/src/translations/no.json
index 27456a0d..0cf0c094 100644
--- a/src/translations/no.json
+++ b/src/translations/no.json
@@ -171,6 +171,7 @@
               "upload": "Upload",
               "add_colour": "Legg til farge",
               "add_background": "Add background",
+              "add_url": "Add URL",
               "disabled": "Disabled",
               "loop_video": "Loop video",
               "mute_video": "Mute video",
@@ -247,6 +248,7 @@
               "title": "Navbar",
               "notes": "Notes",
               "refresh": "Refresh button",
+              "hover": "Only display on hover",
               "refresh_options": {
                 "none": "None",
                 "page": "Page"
@@ -380,6 +382,7 @@
             },
             "contributors": "Contributors",
             "supporters": "Supporters",
+            "no_supporters": "There are currently no Mue supporters",
             "photographers": "Photographers"
           }
         },
diff --git a/src/translations/ru.json b/src/translations/ru.json
index d78f0fce..81d7db47 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -171,6 +171,7 @@
               "upload": "Загрузить",
               "add_colour": "Добавить цвет",
               "add_background": "Add background",
+              "add_url": "Add URL",
               "disabled": "Выключен",
               "loop_video": "Loop video",
               "mute_video": "Mute video",
@@ -247,6 +248,7 @@
               "title": "Navbar",
               "notes": "Notes",
               "refresh": "Refresh button",
+              "hover": "Only display on hover",
               "refresh_options": {
                 "none": "None",
                 "page": "Page"
@@ -380,6 +382,7 @@
             },
             "contributors": "Contributors",
             "supporters": "Supporters",
+            "no_supporters": "There are currently no Mue supporters",
             "photographers": "Photographers"
           }
         },
diff --git a/src/translations/zh_CN.json b/src/translations/zh_CN.json
index 04e72b72..42ef4b24 100644
--- a/src/translations/zh_CN.json
+++ b/src/translations/zh_CN.json
@@ -171,6 +171,7 @@
               "upload": "选择",
               "add_colour": "添加颜色",
               "add_background": "继续添加背景",
+              "add_url": "Add URL",
               "disabled": "已禁用",
               "loop_video": "循环播放",
               "mute_video": "静音",
@@ -247,6 +248,7 @@
               "title": "右上方功能键",
               "notes": "便签",
               "refresh": "刷新键",
+              "hover": "Only display on hover",
               "refresh_options": {
                 "none": "不显示",
                 "page": "页面"
@@ -380,6 +382,7 @@
             },
             "contributors": "贡献者",
             "supporters": "支持者",
+            "no_supporters": "There are currently no Mue supporters",
             "photographers": "背景摄影者"
           }
         },