fix: modal ui fixes, search and quote widget fix

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

@@ -208,12 +208,12 @@ export default class Create extends PureComponent {
     const writeDescription = ( 
       <>
         <h3>{getMessage('modals.main.marketplace.product.information')}</h3>
-        <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')}/>
+        <TextField label={getMessage('modals.main.addons.create.metadata.name')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.name} onInput={(e) => setMetadata(e.target.value, 'name')}/>
+        <TextField label={getMessage('modals.main.marketplace.product.version')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.version} onInput={(e) => setMetadata(e.target.value, 'version')}/>
+        <TextField label={getMessage('modals.main.marketplace.product.author')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.author} onInput={(e) => setMetadata(e.target.value, 'author')}/>
+        <TextField label={getMessage('modals.main.addons.create.metadata.icon_url')} varient='outlined' InputLabelProps={{ shrink: true }} 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' InputLabelProps={{ shrink: true }} 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' InputLabelProps={{ shrink: true }} 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>

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

@@ -99,3 +99,9 @@
     }
   }
 }
+
+.customvideoicon {
+  position: absolute;
+  margin-bottom: 45px;
+  font-size: 3em !important;
+}

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

@@ -74,4 +74,8 @@ h4 {
 
 .keybind-table {
   text-align: left;
+
+  th {
+    padding-right: 10px;
+  }
 }

src/components/modals/main/scss/settings/modules/_material-ui.scss

@@ -93,3 +93,7 @@ legend,
     fill: #818181 !important;
   }
 }
+
+.MuiPaper-root {
+  background-color: var(--background) !important;
+}

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

@@ -9,7 +9,7 @@ export default function KeybindInput(props) {
     if (!value) {
       return <button className='cleanButton' style={{ visibility: 'hidden' }} onClick={() => props.action('reset', props.setting)}><Cancel/></button>;;
     } else if (value === variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.recording')) {
-      return <span className='modalLink' onClick={() => props.action('cancel', props.setting)}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.cancel')}</span>
+      return <button className='cleanButton' onClick={() => props.action('cancel', props.setting)}><Cancel/></button>;
     } else {
       return <button className='cleanButton' onClick={() => props.action('reset', props.setting)}><Cancel/></button>;
     }
@@ -17,8 +17,7 @@ export default function KeybindInput(props) {
 
   return (
     <>
-      <p>{props.name}</p>
-      <TextField onClick={() => props.action('listen', props.setting)} value={value || variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.click_to_record')} readOnly spellCheck={false} varient='outlined' />
+      <TextField label={props.name} onClick={() => props.action('listen', props.setting)} value={value || variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.click_to_record')} readOnly spellCheck={false} varient='outlined' InputLabelProps={{ shrink: true }} />
       {getButton()}
     </>
   );

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

@@ -19,7 +19,7 @@ export default function ResetModal({ modalClose }) {
         <button className='round reset' style={{ marginLeft: 0 }} onClick={() => reset()}>
           <Delete/>
         </button>
-        <button className='round import' style={{ marginLeft: '5px' }} onClick={modalClose}>
+        <button className='round add' style={{ marginLeft: '5px' }} onClick={modalClose}>
           <Close/>
         </button>
       </div>

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

@@ -50,7 +50,7 @@ export default class Text extends PureComponent {
       <>
         {(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' />
+          : <TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' InputLabelProps={{ shrink: true }} />
         }
         <span className='modalLink' onClick={this.resetItem}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span>
       </>

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/>