feat: add work in progress 7.0 code

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

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

@@ -9,7 +9,7 @@ export default class SliderComponent extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      value: localStorage.getItem(this.props.name) || this.props.default
+      value: localStorage.getItem(this.props.name) || this.props.default,
     };
   }
 
@@ -20,56 +20,64 @@ export default class SliderComponent extends PureComponent {
     if (text) {
       if (value === '') {
         return this.setState({
-          value: 0
+          value: 0,
         });
       }
 
       if (value > this.props.max) {
         value = this.props.max;
       }
-  
+
       if (value < this.props.min) {
         value = this.props.min;
       }
     }
-  
+
     localStorage.setItem(this.props.name, value);
     this.setState({
-      value
+      value,
     });
 
     if (this.props.element) {
       if (!document.querySelector(this.props.element)) {
-        document.querySelector('.reminder-info').style.display = 'block';
+        document.querySelector('.reminder-info').style.display = 'flex';
         return localStorage.setItem('showReminder', true);
       }
     }
 
     EventBus.dispatch('refresh', this.props.category);
-  }
+  };
 
   resetItem = () => {
     this.handleChange({
       target: {
-        value: this.props.default || ''
-      }
+        value: this.props.default || '',
+      },
     });
     toast(variables.language.getMessage(variables.languagecode, 'toasts.reset'));
-  }
+  };
 
   render() {
     return (
       <>
-        <p>{this.props.title}<span className='modalLink' onClick={this.resetItem}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
-        <Slider 
-          value={Number(this.state.value)} 
-          onChange={this.handleChange} 
-          valueLabelDisplay='auto' 
-          default={Number(this.props.default)} 
-          min={Number(this.props.min)} 
-          max={Number(this.props.max)} 
-          step={Number(this.props.step) || 1} 
-          getAriaValueText={(value) => `${value}`} 
+        <span className={'sliderTitle'}>
+          {this.props.title}
+          <span className="link" onClick={this.resetItem}>
+            {variables.language.getMessage(
+              variables.languagecode,
+              'modals.main.settings.buttons.reset',
+            )}
+          </span>
+        </span>
+        <Slider
+          value={Number(this.state.value)}
+          onChange={this.handleChange}
+          valueLabelDisplay="auto"
+          default={Number(this.props.default)}
+          min={Number(this.props.min)}
+          max={Number(this.props.max)}
+          step={Number(this.props.step) || 1}
+          getAriaValueText={(value) => `${value}`}
           marks={this.props.marks || []}
         />
       </>