From d97a3236cfffa0d69e87d07e138a3e46c7c444b4 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Mon, 26 Apr 2021 14:41:23 +0100
Subject: [PATCH] feat: text input for sliders (WIP)

---
 .../modals/main/scss/settings/_main.scss           |  9 ++++++++-
 src/components/modals/main/settings/Slider.jsx     | 14 ++++++++++++--
 .../settings/sections/background/Background.jsx    |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index 18ab5039..865fd603 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -115,7 +115,6 @@ ul {
 .PrivateSwitchBase-input-4,
 .MuiRadio-root,
 .aboutLink,
-.MuiIconButton-root,
 legend {
   color: var(--modal-text) !important;
 }
@@ -177,3 +176,11 @@ legend {
     }
   }
 }
+
+.sliderText {
+  background: none !important;
+  max-width: 30px;
+  padding: 0px 0px !important;
+  border-radius: 0;
+  font-size: 1rem;
+}
diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx
index 166d13d2..b7acad60 100644
--- a/src/components/modals/main/settings/Slider.jsx
+++ b/src/components/modals/main/settings/Slider.jsx
@@ -14,7 +14,15 @@ export default class Slider extends React.PureComponent {
   }
 
   handleChange = (e) => {
-    const { value } = e.target;
+    let { value } = e.target;
+
+    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({
@@ -35,9 +43,11 @@ export default class Slider extends React.PureComponent {
   }
 
   render() {
+    const text = <input className='sliderText' type='text' onChange={this.handleChange} value={this.state.value}/>;
+
     return (
       <>
-        <p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
+        <p>{this.props.title} ({text}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
         <input className='range' type='range' min={this.props.min} max={this.props.max} step={this.props.step || 1} value={this.state.value} onChange={this.handleChange} />
       </>
     );
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 8890605b..518b4a58 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -162,7 +162,7 @@ export default class BackgroundSettings extends React.PureComponent {
 
         <h3>{background.effects.title}</h3>
         <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' />
-        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' category='background' />
+        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' />
         <br/><br/>
       </>
     );