Cleanup things and style custom background gradient

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/Update.jsx

@@ -14,7 +14,7 @@ export default class Update extends React.PureComponent {
  }
 
  async getUpdate() {
-  let supportText = `<br/><p>${this.props.language.contactsupport}: <a target='_blank' class='modalLink' href='https://muetab.xyz/contact.html'</a>https://muetab.xyz/contact</p>`;
+  const supportText = `<br/><p>${this.props.language.contactsupport}: <a target='_blank' class='modalLink' href='https://muetab.xyz/contact.html'</a>https://muetab.xyz/contact</p>`;
 
   if (localStorage.getItem('offlineMode') === 'true') return this.setState({
     title: this.props.language.offline.title,
@@ -27,6 +27,7 @@ export default class Update extends React.PureComponent {
       title: this.props.language.error.title,
       html: this.props.language.error.description + supportText
     });
+
     this.setState({
       title: data.title,
       date: data.published,

src/components/modals/settings/Section.jsx

@@ -12,10 +12,8 @@ export default class Section extends React.PureComponent {
   }
 
   toggleSection() {
-    let display = 'none';
-    if (this.state.display === 'none') display = 'block';
-    let transform = 'rotate(0)';
-    if (this.state.transform === 'rotate(0)') transform = 'rotate(-180deg)';
+    const display = (this.state.display === 'none') ? 'block': 'none';
+    const transform = (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)';
 
     this.setState({
       display: display,
@@ -31,7 +29,7 @@ export default class Section extends React.PureComponent {
                         style={{ 'transition': 'all 0.5s ease 0s', 'transform': this.state.transform }}
                         className={`expandIcons`}
                         onClick={() => this.toggleSection()}
-                      />
+                      />;
     }
 
     if (this.props.slider !== false) slider = <Slider name={this.props.name} />;

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -51,6 +51,7 @@ export default class BackgroundSettings extends React.PureComponent {
 
     const hex = localStorage.getItem('customBackgroundColour');
     let gradientSettings = undefined;
+
     if (hex !== '') {
       try {
         gradientSettings = JSON.parse(hex);
@@ -58,15 +59,14 @@ export default class BackgroundSettings extends React.PureComponent {
         //Disregard exception.
       }
     }
-    if (gradientSettings === undefined) {
-      gradientSettings = this.DefaultGradientSettings
-    }
+
+    if (gradientSettings === undefined) gradientSettings = this.DefaultGradientSettings;
 
     this.setState({
       blur: localStorage.getItem('blur'),
       brightness: localStorage.getItem('brightness'),
       gradientSettings
-    })
+    });
 
     document.getElementById('customBackground').value = localStorage.getItem('customBackground');
     document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
@@ -124,7 +124,7 @@ export default class BackgroundSettings extends React.PureComponent {
         gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
       });
     }
-    return "Disabled";
+    return 'Disabled';
   }
 
   render() {
@@ -134,10 +134,10 @@ export default class BackgroundSettings extends React.PureComponent {
         const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
         return (
           <div key={i}>
-            {gradientHasMoreThanOneColour ? (<button type="button" className="remove" onClick={() => this.removeColour(i)}>x</button>) : null}
+            {gradientHasMoreThanOneColour ? (<button type='button' className='remove' onClick={() => this.removeColour(i)}>×</button>) : null}
             <input id={'colour_' + i} type='color' name='colour' className="colour" onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
             <label htmlFor={'colour_' + i} className="customBackgroundHex">{g.colour}</label>
-            {gradientHasMoreThanOneColour ? (              
+            {gradientHasMoreThanOneColour ? (
                 <input type="number" name='stop' className='stop' min={0} max={100} value={g.stop} onChange={(event) => this.onGradientChange(event, i)} />
               ) : null}
           </div>);