refactor: cleanup, use createRef etc

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

@@ -194,6 +194,11 @@ legend {
   h1 {
     max-width: 85%;
     font-size: 2rem;
+    margin-bottom: -10px !important;
+  }
+
+  h5 {
+    line-height: 0px !important;
   }
 
   img {

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

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
@@ -9,6 +9,7 @@ export default class Dropdown extends PureComponent {
       value: localStorage.getItem(this.props.name) || '',
       title: ''
     };
+    this.dropdown = createRef();
   }
 
   getLabel() {
@@ -47,9 +48,8 @@ export default class Dropdown extends PureComponent {
 
   // todo: find a better way to do this
   componentDidMount() {
-    const element = document.getElementById(this.props.name);
     this.setState({
-      title: element[element.selectedIndex].text
+      title: this.dropdown.current[this.dropdown.current.selectedIndex].text
     });
   }
 
@@ -57,7 +57,7 @@ export default class Dropdown extends 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} ref={this.dropdown} 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/sections/Changelog.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 import { WifiOff } from '@material-ui/icons';
 import Modal from 'react-modal';
 
@@ -13,7 +13,9 @@ export default class Changelog extends PureComponent {
       lightboxImg: null
     };
     this.language = window.language.modals.update;
+    this.offlineMode = (localStorage.getItem('offlineMode') === 'true');
     this.controller = new AbortController();
+    this.changelog = createRef();
   }
 
   async getUpdate() {
@@ -39,9 +41,8 @@ export default class Changelog extends PureComponent {
     });
 
     // lightbox etc
-    const content = document.querySelector('.tab-content');
-    const images = content.getElementsByTagName('img');
-    const links = content.getElementsByTagName('a');
+    const images = this.changelog.current.getElementsByTagName('img');
+    const links = this.changelog.current.getElementsByTagName('a');
 
     for (const img of images) {
       img.draggable = false;
@@ -53,6 +54,7 @@ export default class Changelog extends PureComponent {
       };
     }
 
+    // open in new tab
     for (let link = 0; link < links.length; link++) {
       links[link].target = '_blank';
       links[link].rel = 'noopener noreferrer';
@@ -60,7 +62,7 @@ export default class Changelog extends PureComponent {
   }
   
   componentDidMount() {
-    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+    if (navigator.onLine === false || this.offlineMode) {
       return;
     }
   
@@ -83,7 +85,7 @@ export default class Changelog extends PureComponent {
       );
     };
 
-    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+    if (navigator.onLine === false || this.offlineMode) {
       const language = window.language.modals.main.marketplace;
     
       return errorMessage(<>
@@ -98,9 +100,9 @@ export default class Changelog extends PureComponent {
     }
 
     return (
-      <div className='changelogtab'>
-        <h1 style={{ marginBottom: '-10px' }}>{this.state.title}</h1>
-        <h5 style={{ lineHeight: '0px' }}>{this.state.author} • {this.state.date}</h5>
+      <div className='changelogtab' ref={this.changelog}>
+        <h1>{this.state.title}</h1>
+        <h5>{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/Keybinds.jsx

@@ -11,6 +11,11 @@ export default class KeybindSettings extends PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
+  showReminder() {
+    document.querySelector('.reminder-info').style.display = 'none';
+    return localStorage.setItem('showReminder', false);
+  }
+
   listen(type) {
     const currentKeybinds = this.state.keybinds;
     currentKeybinds[type] = this.language.sections.keybinds.recording;
@@ -40,8 +45,7 @@ export default class KeybindSettings extends PureComponent {
 
     document.removeEventListener('keyup', keyup);
 
-    document.querySelector('.reminder-info').style.display = 'block';
-    return localStorage.setItem('showReminder', true);
+    this.showReminder();
   }
 
   reset(type) {
@@ -52,8 +56,7 @@ export default class KeybindSettings extends PureComponent {
       keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
     });
 
-    document.querySelector('.reminder-info').style.display = 'block';
-    return localStorage.setItem('showReminder', true);
+    this.showReminder();
   }
 
   render() {

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

@@ -18,13 +18,17 @@ export default class TimeSettings extends PureComponent {
     localStorage.setItem('location', this.state.location);
   }
 
+  showReminder() {
+    document.querySelector('.reminder-info').style.display = 'block';
+    localStorage.setItem('showReminder', true);
+  }
+
   changeLocation(e) {
     this.setState({ 
       location: e.target.value 
     });
 
-    document.querySelector('.reminder-info').style.display = 'block';
-    localStorage.setItem('showReminder', true);
+    this.showReminder();
   }
 
   getAuto() {
@@ -34,8 +38,7 @@ export default class TimeSettings extends PureComponent {
         location: data[0].name
       });
 
-      document.querySelector('.reminder-info').style.display = 'block';
-      localStorage.setItem('showReminder', true);
+      this.showReminder();
     }, (error) => {
       // firefox requires this 2nd function
       console.log(error);

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

@@ -67,7 +67,7 @@ export default class ColourSettings extends PureComponent {
   }
 
   componentDidUpdate() {
-    localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
+    localStorage.setItem('customBackgroundColour', this.currentGradientSettings());
   }
 
   onGradientChange = (event, index) => {
@@ -83,11 +83,7 @@ export default class ColourSettings extends PureComponent {
       return newState;
     });
 
-    const reminderInfo = document.querySelector('.reminder-info');
-    if (reminderInfo.style.display !== 'block') {
-      reminderInfo.style.display = 'block';
-      localStorage.setItem('showReminder', true);
-    }
+    this.showReminder();
   }
 
   addColour = () => {
@@ -133,12 +129,16 @@ export default class ColourSettings extends PureComponent {
       }
     });
 
+    this.showReminder();
+  };
+
+  showReminder() {
     const reminderInfo = document.querySelector('.reminder-info');
     if (reminderInfo.style.display !== 'block') {
       reminderInfo.style.display = 'block';
       localStorage.setItem('showReminder', true);
     }
-  };
+  }
 
   render() {
     const { background } = this.language.sections;
@@ -183,7 +183,6 @@ export default class ColourSettings extends PureComponent {
     return (
       <>
         <p>{background.source.custom_colour} <span className='modalLink' onClick={() => this.resetColour()}>{this.language.buttons.reset}</span></p>
-        <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
         {colourSettings}
       </>
     );