fix: various settings bug fixes and style changes

src/components/modals/main/Main.jsx

@@ -18,7 +18,7 @@ const renderLoader = () => (
         </div>
       </div>
     </div>
-    <div label='' style={{ 'display': 'none' }}></div>
+    <div label='' style={{ display: 'none' }}></div>
   </Tabs>
 );
 

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

@@ -168,7 +168,7 @@ export default class Marketplace extends React.PureComponent {
         window.open(this.state.featured.buttonLink);
       }
       return (
-        <div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
+        <div className='featured' style={{ backgroundColor: this.state.featured.colour }}>
           <p>{this.state.featured.title}</p>
           <h1>{this.state.featured.name}</h1>
           <button className='addToMue' onClick={() => openFeatured()}>{this.state.featured.buttonText}</button>

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

@@ -57,7 +57,7 @@ export default class Dropdown extends React.PureComponent {
     return (
       <>
         {this.getLabel()}
-        <select id={this.props.name} value={this.state.value} onChange={this.onChange} style={{width: `${(8*this.state.title.length) + 50}px`}}>
+        <select id={this.props.name} value={this.state.value} onChange={this.onChange} style={{ width: `${(8*this.state.title.length) + 50}px` }}>
           {this.props.children}
         </select>
       </>

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

@@ -30,7 +30,7 @@ export default class Radio extends React.PureComponent {
     });
 
     window.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
-
+    
     if (this.props.element) {
       if (!document.querySelector(this.props.element)) {
         document.querySelector('.reminder-info').style.display = 'block';

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

@@ -11,12 +11,12 @@ export default function ResetModal(props) {
 
   return (
     <>
-      <h3 style={{ 'textAlign': 'center' }}>{language.title}</h3>
+      <h3 style={{ textAlign: 'center' }}>{language.title}</h3>
       <h4>{language.question}</h4>
       <p>{language.information}</p>
       <div className='resetfooter'>
-        <button className='reset' style={{ 'marginLeft': '0' }} onClick={() => reset()}>{window.language.modals.main.settings.buttons.reset}</button>
-        <button className='import' style={{ 'marginLeft': '5px' }} onClick={props.modalClose}>{language.cancel}</button>
+        <button className='reset' style={{ marginLeft: 0 }} onClick={() => reset()}>{window.language.modals.main.settings.buttons.reset}</button>
+        <button className='import' style={{ marginLeft: '5px' }} onClick={props.modalClose}>{language.cancel}</button>
       </div>
     </>
   );

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

@@ -51,7 +51,7 @@ export default class AdvancedSettings extends React.PureComponent {
         <Text title={advanced.custom_css} name='customcss' textarea={true} category='other'/>
 
         <h3>{this.language.sections.experimental.title}</h3>
-        <p style={{ 'maxWidth': '75%'}}>{advanced.experimental_warning}</p>
+        <p style={{ maxWidth: '75%' }}>{advanced.experimental_warning}</p>
         <Switch name='experimental' text={this.language.enabled} element='.other'/>
 
         <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>

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

@@ -101,8 +101,8 @@ export default class Changelog extends React.PureComponent {
 
     return (
       <div className='changelogtab'>
-        <h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
-        <h5 style={{ 'lineHeight': '0px' }}>{this.state.author} • {this.state.date}</h5>
+        <h1 style={{ marginBottom: '-10px' }}>{this.state.title}</h1>
+        <h5 style={{ lineHeight: '0px' }}>{this.state.author} • {this.state.date}</h5>
         {this.state.image ? <img draggable='false' src={this.state.image} alt={window.language.modals.update.title} className='updateimage'/> : null}
         <div className='updatechangelog' dangerouslySetInnerHTML={{ __html: this.state.html }}/>
         <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>

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

@@ -24,7 +24,7 @@ export default function ExperimentalSettings() {
       <br/><br/>
       <button className='uploadbg' onClick={() => EventBus.dispatch(document.getElementById('eventType').value, document.getElementById('eventName').value)}>Send</button>
       <br/><br/>
-      <button className='reset' style={{ 'marginLeft': '0px' }} onClick={() => localStorage.clear()}>Clear LocalStorage</button>
+      <button className='reset' style={{ marginLeft: '0px' }} onClick={() => localStorage.clear()}>Clear LocalStorage</button>
     </>
   );
 }

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

@@ -27,7 +27,7 @@ const widget_name = {
 
 const SortableItem = sortableElement(({ value }) => (
   <li className='sortableitem' style={{ display: enabled(value) ? 'block' : 'none' }}>
-    <DragHandleIcon style={{'verticalAlign': 'middle'}} />
+    <DragHandleIcon style={{ verticalAlign: 'middle' }} />
     {widget_name[value]}
   </li>
 ));

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

@@ -23,18 +23,14 @@ export default class QuoteSettings extends React.PureComponent {
   render() {
     const { quote } = window.language.modals.main.settings.sections;
 
-    let quoteSettings;
-
-    const customSettings = (
-      <>
-        <Text title={quote.custom} name='customQuote' category='quote' element='.quotediv' />
-        <Text title={quote.custom_author} name='customQuoteAuthor' category='quote' element='.quotediv'/>
-      </>
-    );
-
-    switch (this.state.quoteType) {
-      case 'custom': quoteSettings = customSettings; break;
-      default: break;
+    let customSettings;
+    if (this.state.quoteType === 'custom') {
+      customSettings = (
+        <>
+          <Text title={quote.custom} name='customQuote' category='quote' element='.quotediv' />
+          <Text title={quote.custom_author} name='customQuoteAuthor' category='quote' element='.quotediv'/>
+        </>
+      );
     }
 
     return (
@@ -47,7 +43,7 @@ export default class QuoteSettings extends React.PureComponent {
           <option value='api'>{window.language.modals.main.settings.sections.background.type.api}</option>
           <option value='custom'>{quote.custom}</option>
         </Dropdown>
-        {quoteSettings}
+        {customSettings}
         <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' element='.quotediv' />
   
         <h3>{quote.buttons.title}</h3>

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

@@ -29,7 +29,7 @@ export default class SearchSettings extends React.PureComponent {
       customValue: ''
     });
 
-    toast(window.language.modals.main.settings.toasts.reset);
+    toast(window.language.toasts.reset);
   }
 
   componentDidMount() {
@@ -88,7 +88,7 @@ export default class SearchSettings extends React.PureComponent {
 
         <ul style={{ display: this.state.customDisplay }}>
           <br/>
-          <p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>
+          <p style={{ marginTop: '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>
           <input type='text' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
         </ul>
         <br/>

src/components/modals/main/tabs/Settings.jsx

@@ -41,7 +41,7 @@ export default function Settings() {
         <div label={sections.changelog}><Changelog/></div>
         <div label={sections.about.title}><About/></div>
       </Tabs>
-      <div className='reminder-info' style={{ 'display': display }}>
+      <div className='reminder-info' style={{ display: display }}>
         <h1>{reminder.title}</h1>
         <p>{reminder.message}</p>
         <button className='pinNote' onClick={() => window.location.reload()}>{window.language.modals.main.error_boundary.refresh}</button>

src/components/modals/main/tabs/backend/Tabs.jsx

@@ -32,7 +32,7 @@ export default class Tabs extends React.PureComponent {
       tabClass = '';
       optionsText = '';
     }
-
+    
     return (
       <>
         <ul className={className}>

src/components/modals/welcome/Welcome.jsx

@@ -13,7 +13,7 @@ export default function WelcomeModal(props) {
       <div className='welcomeModalText'>
         <h2 className='subtitle'>{language.title}</h2>
         <h1 className='welcometitle'>Mue Tab</h1>
-        <img alt='celebration' style={{ 'height': '200px', 'width': 'auto' }} draggable={false} src='./././icons/undraw_celebration.svg' />
+        <img alt='celebration' style={{ height: '200px', width: 'auto' }} draggable={false} src='./././icons/undraw_celebration.svg' />
         <h2 className='subtitle'>{language.information}</h2>
         <p>{language.thankyoumessage1}<br/> {language.thankyoumessage2}</p>
         <h2 className='subtitle'>{language.support}</h2>