fix: modal ui fixes, search and quote widget fix

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

@@ -105,26 +105,33 @@ export default class KeybindSettings extends PureComponent {
         <Header title={this.getMessage('modals.main.settings.sections.keybinds.title')} setting='keybindsEnabled' element='.other' />
         <table className='keybind-table'>
           <tbody>
-            <tr>  
+            <tr>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} setting='favouriteBackground' action={(type, e) => this.action(type, e)}/></th>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} setting='maximiseBackground' action={(type, e) => this.action(type, e)}/></th>
+            </tr>
+            <tr>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} setting='downloadBackground' action={(type, e) => this.action(type, e)}/></th>
-            </tr> 
-            <tr>  
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/></th>
+            </tr>
+            <tr>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/></th>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} setting='favouriteQuote' action={(type, e) => this.action(type, e)}/></th>
+            </tr>
+            <tr>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} setting='copyQuote' action={(type, e) => this.action(type, e)}/></th>
-            </tr> 
-            <tr>  
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} setting='tweetQuote' action={(type, e) => this.action(type, e)}/></th>
+            </tr>
+            <tr>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} setting='pinNotes' action={(type, e) => this.action(type, e)}/></th>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} setting='copyNotes' action={(type, e) => this.action(type, e)}/></th>
-            </tr> 
-            <tr>  
+            </tr>
+            <tr>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} setting='focusSearch' action={(type, e) => this.action(type, e)}/></th>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} setting='toggleQuicklinks' action={(type, e) => this.action(type, e)}/></th>
+            </tr>
+            <tr>
               <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} setting='toggleModal' action={(type, e) => this.action(type, e)}/></th>
-            </tr>  
+            </tr>
           </tbody>
         </table>
       </>

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

@@ -87,7 +87,7 @@ export default class SearchSettings extends PureComponent {
         </Dropdown>
         <ul style={{ display: this.state.customDisplay }}>
           <p style={{ marginTop: '0px' }}><span className='modalLink' onClick={() => this.resetSearch()}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
-          <TextField label={this.getMessage('modals.main.settings.sections.search.custom')} value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })} varient='outlined' />
+          <TextField label={this.getMessage('modals.main.settings.sections.search.custom')} value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })} varient='outlined' InputLabelProps={{ shrink: true }} />
         </ul>
         <Checkbox name='autocomplete' text={this.getMessage('modals.main.settings.sections.search.autocomplete')} category='search' />
         <Radio title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')} options={autocompleteProviders} name='autocompleteProvider' category='search'/>

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

@@ -68,7 +68,7 @@ export default class TimeSettings extends PureComponent {
     return (
       <>
         <Header title={getMessage('modals.main.settings.sections.weather.title')} setting='weatherEnabled' category='widgets' zoomSetting='zoomWeather' zoomCategory='weather'/>
-        <TextField label={getMessage('modals.main.settings.sections.weather.location')} value={this.state.location} onChange={(e) => this.changeLocation(e)} placeholder='London' varient='outlined' />
+        <TextField label={getMessage('modals.main.settings.sections.weather.location')} value={this.state.location} onChange={(e) => this.changeLocation(e)} placeholder='London' varient='outlined' InputLabelProps={{ shrink: true }} />
         <span className='modalLink' onClick={() => this.getAuto()}>{getMessage('modals.main.settings.sections.weather.auto')}</span>
         <Radio name='tempformat' title={getMessage('modals.main.settings.sections.weather.temp_format.title')} options={tempFormat} category='weather'/>
 

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

@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
-import { Cancel, AddLink, AddPhotoAlternate } from '@mui/icons-material';
+import { Cancel, AddLink, AddPhotoAlternate, PersonalVideo } from '@mui/icons-material';
 import EventBus from 'modules/helpers/eventbus';
 
 import Checkbox from '../../Checkbox';
@@ -60,12 +60,18 @@ export default class CustomSettings extends PureComponent {
     this.forceUpdate();
     
     localStorage.setItem('customBackground', JSON.stringify(customBackground));
+    document.querySelector('.reminder-info').style.display = 'block';
+    localStorage.setItem('showReminder', true);
+  }
+
+  videoCheck(url) {
+    return url.startsWith('data:video/') || url.endsWith('.mp4') || url.endsWith('.webm') || url.endsWith('.ogg');
   }
     
   videoCustomSettings = () => {
-    const hasVideo = Object.keys(this.state.customBackground).filter(bg => bg.startsWith('data:video/') || bg.endsWith('.mp4') || bg.endsWith('.webm') || bg.endsWith('.ogg'));
+    const hasVideo = this.state.customBackground.filter(bg => this.videoCheck(bg));
 
-    if (hasVideo) { 
+    if (hasVideo.length > 0) { 
       return (
         <>
           <Checkbox name='backgroundVideoLoop' text={this.getMessage('modals.main.settings.sections.background.source.loop_video')}/>
@@ -114,14 +120,13 @@ export default class CustomSettings extends PureComponent {
           <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) => (
-            <Fragment key={index}>
-              <div style={{ backgroundImage: `url(${this.state.customBackground[index]})` }}> 
-                {this.state.customBackground.length > 0 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
-                  <Cancel/>
-                </button> : null}
-              </div>
-            </Fragment>
+          {this.state.customBackground.map((url, index) => (
+            <div style={{ backgroundImage: `url(${!this.videoCheck(url) ? this.state.customBackground[index] : ''})` }} key={index}>
+              {this.videoCheck(url) ? <PersonalVideo className='customvideoicon'/> : null} 
+              {this.state.customBackground.length > 0 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
+                <Cancel/>
+              </button> : null}
+            </div>
           ))}
         </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)} />

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

@@ -4,13 +4,13 @@ import { Add } from '@mui/icons-material';
 import { TextField } from '@mui/material'; 
 
 export default function CustomURLModal({ modalClose, modalCloseOnly }) {
-  const [url, setURL] = useState('URL');
+  const [url, setURL] = useState();
 
   return (
     <>
       <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' />
+      <TextField value={url} onChange={(e) => setURL(e.target.value)} varient='outlined'/>
       <div className='resetfooter'>
         <button className='round import' style={{ marginLeft: '5px' }} onClick={() => modalClose(url)}>
           <Add/>