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='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='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>
+        <h1 style={{ marginBottom: '-10px' }}>{this.state.title}</h1>
-        <h5 style={{ 'lineHeight': '0px' }}>{this.state.author} • {this.state.date}</h5>
+        <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;
+    let customSettings;
-
+    if (this.state.quoteType === 'custom') {
-    const customSettings = (
+      customSettings = (
-      <>
+        <>
-        <Text title={quote.custom} name='customQuote' category='quote' element='.quotediv' />
+          <Text title={quote.custom} name='customQuote' category='quote' element='.quotediv' />
-        <Text title={quote.custom_author} name='customQuoteAuthor' 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;
     }
 
     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>

src/components/widgets/background/Background.jsx

@@ -352,7 +352,7 @@ export default class Background extends React.PureComponent {
       };
 
       return (
-        <video autoPlay muted={enabled('backgroundVideoMute')} loop={enabled('backgroundVideoLoop')} style={{ 'WebkitFilter': `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)` }} id='backgroundVideo'>
+        <video autoPlay muted={enabled('backgroundVideoMute')} loop={enabled('backgroundVideoLoop')} style={{ WebkitFilter: `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)` }} id='backgroundVideo'>
           <source src={this.state.url}/>
         </video>
       );

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -151,7 +151,7 @@ export default class QuickLinks extends React.PureComponent {
           quickLink(item)
         ))}
         <button className='quicklinks' onClick={this.toggleAdd}>+</button>
-        <span className='quicklinkscontainer' style={{ 'visibility': this.state.showAddLink }}>
+        <span className='quicklinkscontainer' style={{ visibility: this.state.showAddLink }}>
           <div className='topbarquicklinks'>
             <h4>{this.language.new}</h4>
             <TextareaAutosize rowsMax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />

src/components/widgets/weather/Weather.jsx

@@ -35,6 +35,8 @@ export default class Weather extends React.PureComponent {
       return null;
     }
 
+    document.querySelector('.weather').style.fontSize = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
+
     let data = {
       weather: [
         {
@@ -118,12 +120,8 @@ export default class Weather extends React.PureComponent {
     EventBus.on('refresh', (data) => {
       if (data === 'weather') {
         this.getWeather();
-        document.querySelector('.weather').style.fontSize = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
-        document.querySelector('.weather svg').style.fontSize = `${0.95 * Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
       }
     });
-
-    document.querySelector('.weather').style.fontSize = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
     this.getWeather();
   }
 
@@ -165,7 +163,7 @@ export default class Weather extends React.PureComponent {
       <div className='weather'>
         <WeatherIcon name={this.state.icon}/>
         <span>{this.state.weather.temp + this.state.temp_text}</span>
-        {enabled('weatherdescription') ? <span className='loc' style={{ 'textTransform': 'capitalize' }}><br/>{this.state.weather.description}</span> : null}
+        {enabled('weatherdescription') ? <span className='loc'><br/>{this.state.weather.description}</span> : null}
         <span className='minmax'>{minmax()}</span>
         {enabled('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
         {enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.wind_speed}<span className='minmax'> m/s</span> {enabled('windDirection') ? <WindDirectionIcon degrees={this.state.weather.wind_degrees}/> : null}</span> : null}

src/components/widgets/weather/WindDirectionIcon.jsx

@@ -2,10 +2,12 @@ import { WiDirectionDownLeft, WiDirectionDownRight, WiDirectionDown, WiDirection
 
 export default function WindDirectionIcon(props) {
   let icon;
+  // fix potential bug, idk what causes it but now it is fixed
+  let degrees = props.degrees;
 
   // convert the number openweathermap gives us to closest direction or something
   const directions = ['North', 'North-West', 'West', 'South-West', 'South', 'South-East', 'East', 'North-East'];
-  const direction = directions[Math.round(((props.degrees %= 360) < 0 ? props.degrees + 360 : props.degrees) / 45) % 8];
+  const direction = directions[Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8];
 
   switch (direction) {
     case 'North': icon = <WiDirectionUp/>; break;

src/components/widgets/weather/weather.scss

@@ -23,6 +23,7 @@
     font-size: 0.7em;
     margin: 0;
     padding: 0;
+    text-transform: capitalize;
   }
 
   .minmax {