various fixes and optimisations

src/App.jsx

@@ -27,7 +27,6 @@ const renderLoader = () => <div></div>;
 export default class App extends React.PureComponent {
   constructor(props) {
     super(props);
-
     this.state = {
       settingsModal: false,
       updateModal: false,

src/components/Navbar.jsx

@@ -12,11 +12,11 @@ export default class Navbar extends React.PureComponent {
     return (
       <div className='navbar-container'>
         <div className='navbar1'>
-          <Gear className='settings-icon' onClick={this.props.settingsModalOpen} />
+          <Gear className='settingsicon' onClick={this.props.settingsModalOpen} />
         </div>
         {refreshHTML}
         <div className={refresh === 'false' ? 'navbar2' : 'navbar3'}>
-        <NewReleases className='refreshicon' onClick={this.props.updateModalOpen} />
+        <NewReleases className='updateicon' onClick={this.props.updateModalOpen} />
         </div>
       </div>
     );

src/components/modals/Settings.jsx

@@ -6,7 +6,6 @@ import Section from './settings/Section';
 import { toast } from 'react-toastify';
 
 import BackgroundSettings from './settings/sections/BackgroundSettings';
-import ExperimentalSettings from './settings/sections/ExperimentalSettings';
 import SearchSettings from './settings/sections/SearchSettings';
 import LanguageSettings from './settings/sections/LanguageSettings';
 
@@ -98,7 +97,13 @@ export default class Settings extends React.PureComponent {
             <h4 class='nodropdown'>{this.props.language.experimental.dark}</h4>
             <Slider name='darkTheme'/>
           </div>
-          <ExperimentalSettings language={this.props.language} />
+          <Section title={this.props.language.experimental.title} name='experimental' slider={false}>
+            <Checkbox name='webp' text={this.props.language.experimental.webp} />
+            <Checkbox name='animations' text={this.props.language.experimental.animations} />
+            <Checkbox name='view' text={this.props.language.experimental.view} />
+            <Checkbox name='favouriteEnabled' text={this.props.language.experimental.favourite} />
+            <Checkbox name='refresh' text={this.props.language.experimental.refresh} />
+          </Section>
           <LanguageSettings language={this.props.language} />
 
           <button className='apply' onClick={() => SettingsFunctions.saveStuff()}>{this.props.language.apply}</button>

src/components/modals/settings/Section.jsx

@@ -1,25 +1,49 @@
 import React from 'react';
-import SettingsFunctions from '../../../modules/settingsFunctions';
 import Slider from './Slider';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 
 export default class Section extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      display: 'none',
+      transform: 'rotate(0)'
+    };
+  }
+
+  toggleSection() {
+    let display = 'none';
+    if (this.state.display === 'none') display = 'block';
+    let transform = 'rotate(0)';
+    if (this.state.transform === 'rotate(0)') transform = 'rotate(-180deg)';
+
+    this.setState({
+      display: display,
+      transform: transform
+    });
+  }
+
   render() {
-    let extraHTML, expandMore;
+    let extraHTML, expandMore, slider;
     if (this.props.children) {
-        extraHTML = <li className={'extraSettings ' + this.props.title}>{this.props.children}</li>
+        extraHTML = <li className='extraSettings'>{this.props.children}</li>
         expandMore = <ExpandMore
-                        style={{ 'transition': 'all 0.5s ease 0s' }}
-                        className={`expandIcons expand${this.props.title}`}
-                        onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName(this.props.title)[0], document.getElementsByClassName('expand' + this.props.title)[0])}
-                    />
+                        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} />;
+
     return (
         <div className='section'>
-            <h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName(this.props.title)[0], document.getElementsByClassName('expand' + this.props.title)[0])}>{this.props.title}</h4>
+            <h4 onClick={() => this.toggleSection()}>{this.props.title}</h4>
             {expandMore}
-            <Slider name={this.props.name} />
-            {extraHTML}
+            {slider}
+            <div style={{display: this.state.display}}>
+              {extraHTML}
+            </div>
         </div>
     );
   }

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

@@ -2,6 +2,14 @@ import React from 'react';
 import { toast } from 'react-toastify';
 
 export default class BackgroundSettings extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      blur: 0,
+      brightness: 100
+    };
+  }
+
   resetItem(key) {
     switch (key) {
       case 'customBackgroundColour':
@@ -11,13 +19,11 @@ export default class BackgroundSettings extends React.PureComponent {
       case 'customBackground': document.getElementById('customBackground').value = ''; break;
       case 'blur':
         localStorage.setItem('blur', 0);
-        document.getElementById('blurRange').value = 0;
-        document.getElementById('blurAmount').innerText = '0';
+        this.setState({ blur: 0 });
         break;
       case 'brightness':
         localStorage.setItem('brightness', 100);
-        document.getElementById('brightnessRange').value = 100;
-        document.getElementById('brightnessAmount').innerText = '100';
+        this.setState({ blur: 100 });
         break;
       default: toast('resetItem requires a key!');
     }
@@ -46,14 +52,10 @@ export default class BackgroundSettings extends React.PureComponent {
           document.getElementById('customBackgroundHex').innerText = hex;
       } else document.getElementById('customBackgroundHex').innerText = 'Disabled';
 
-      const blur = localStorage.getItem('blur');
-      const brightness = localStorage.getItem('brightness');
-
-      document.getElementById('blurAmount').innerText = blur;
-      document.getElementById('blurRange').value = blur;
-
-      document.getElementById('brightnessAmount').innerText = brightness;
-      document.getElementById('brightnessRange').value = brightness;
+      this.setState({
+        blur: localStorage.getItem('blur'),
+        brightness: localStorage.getItem('brightness')
+      })
 
       document.getElementById('customBackground').value = localStorage.getItem('customBackground');
       document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
@@ -72,12 +74,12 @@ export default class BackgroundSettings extends React.PureComponent {
             </label>
             </ul>
             <ul>
-              <p>{this.props.language.background.blur} (<span id='blurAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
-              <input className='range' type='range' min='0' max='100' id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
+              <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
+              <input className='range' type='range' min='0' max='100' id='blurRange' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
             </ul>
             <ul>
-              <p>{this.props.language.background.brightness} (<span id='brightnessAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
-              <input className='range' type='range' min='0' max='100' id='brightnessRange' onInput={() => document.getElementById('brightnessAmount').innerText = document.getElementById('brightnessRange').value} />
+              <p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
+              <input className='range' type='range' min='0' max='100' id='brightnessRange' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
             </ul>
             <ul>
               <p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import Checkbox from '../Checkbox';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-import SettingsFunctions from '../../../../modules/settingsFunctions';
-
-export default class ExperimentalSettings extends React.PureComponent {
-  render() {
-    return (
-        <div className='section'>
-          <h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])}>{this.props.language.experimental.title}</h4>
-          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])} />
-          <li className='extraSettings'>
-            <Checkbox name='webp' text={this.props.language.experimental.webp} />
-            <Checkbox name='animations' text={this.props.language.experimental.animations} />
-            <Checkbox name='view' text={this.props.language.experimental.view} />
-            <Checkbox name='favouriteEnabled' text={this.props.language.experimental.favourite} />
-            <Checkbox name='refresh' text={this.props.language.experimental.refresh} />
-          </li>
-        </div>
-    );
-  }
-}

src/components/widgets/Background.jsx

@@ -8,8 +8,7 @@ export default class Background extends React.PureComponent {
     document.querySelector('#backgroundImage').setAttribute(
       'style',
       `${background};
-      -webkit-filter: blur(${localStorage.getItem('blur')}px);
-      -webkit-filter: brightness(${localStorage.getItem('brightness')}%);`
+      -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%);`
     );
 
     if (credit === 'false') document.querySelector('#credits').style.display = 'none'; // Hide the credit

src/modules/settingsFunctions.js

@@ -37,11 +37,6 @@ export default class SettingsFunctions {
         localStorage.setItem(key, val);
     }
 
-    static toggleExtra(element, element2) {
-        (element.style.display === 'none' || !element.style.display) ? element.style.display = 'block' : element.style.display = 'none';
-        (element2.style.transform === 'rotate(-180deg)') ? element2.style.transform = 'rotate(0)' : element2.style.transform = 'rotate(-180deg)';
-    }
-
     static setSearchEngine(input) {
         const searchEngineInput = document.getElementById('searchEngineInput');
         if (input === 'custom') {

src/scss/modules/_navbar.scss

@@ -2,7 +2,6 @@
     position: absolute;
     text-align: right;
     min-width: 50px;
-    cursor: pointer;
     -webkit-filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
     filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
     top: 20px;
@@ -11,20 +10,13 @@
         transition: ease 0.2s;
         font-size: calc(10px + 1.5vmin) !important;
     }
-
-    &:hover {
-        svg {
-            transform: scale(1.1);
-            color: map-get($theme-colours, "main");;
-        }
-    }
 }
 
 .navbar1 {
     @extend %navbar;
     right: 20px;
 
-    svg {
+    svg { // apparently fixes shaking issue that only happens to settings icon
         -webkit-backface-visibility: hidden;
         -webkit-transform: translateZ(0) scale(1, 1);
         backface-visibility: hidden;
@@ -40,4 +32,13 @@
 .navbar3 {
     @extend %navbar;
     right: 100px;
+}
+
+.refreshicon, .settingsicon, .updateicon {
+    cursor: pointer;
+
+    &:hover {
+        transform: scale(1.1);
+        color: map-get($theme-colours, "main");;
+    }
 }

src/scss/modules/_settings.scss

@@ -99,10 +99,10 @@ h4,
 }
 
 .extraSettings {
-  display: none;
   border-left: 10px solid;
   border-image-slice: 1;
   border-width: 5px;
+  list-style: none;
   border-image-source: linear-gradient(to bottom, #ffb032 0%, #dd3b67 100%);
 
   p {