From 7d2976177e7529ae064b103f778e33b33ba3cfab Mon Sep 17 00:00:00 2001
From: Tahnik Mustasin <tahnik@live.co.uk>
Date: Wed, 3 Jan 2018 15:04:18 +0600
Subject: [PATCH] Fixed some settings colors

---
 app/src/js/components/settings/button.js  |  5 ++++
 app/src/js/components/settings/general.js |  3 +++
 app/src/js/components/settings/slider.js  |  2 ++
 app/src/js/components/settings/toggle.js  |  2 ++
 app/src/res/sass/modules/common.sass      | 29 ++++++++++++-----------
 5 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/app/src/js/components/settings/button.js b/app/src/js/components/settings/button.js
index 3850c459..4bcb9ea8 100644
--- a/app/src/js/components/settings/button.js
+++ b/app/src/js/components/settings/button.js
@@ -8,6 +8,10 @@ const Button = props => (
       <button
         onClick={() => props.handleChange()}
         disabled={!props.setting.value}
+        style={{
+          backgroundColor: props.theme.backgroundColor,
+          color: props.theme.item_card.color,
+        }}
       >{props.setting.buttonText}
       </button>
     </div>
@@ -16,6 +20,7 @@ const Button = props => (
 
 Button.propTypes = {
   setting: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
   handleChange: PropTypes.func.isRequired,
 };
 
diff --git a/app/src/js/components/settings/general.js b/app/src/js/components/settings/general.js
index 1df32cf4..e86e70f4 100644
--- a/app/src/js/components/settings/general.js
+++ b/app/src/js/components/settings/general.js
@@ -22,6 +22,7 @@ class General extends Component {
             handleChange={(value) => {
               this.handleChange(primaryKey, secondaryKey, value);
             }}
+            theme={this.props.theme}
           />
         );
       }
@@ -33,6 +34,7 @@ class General extends Component {
             handleChange={() => {
               this.handleChange(primaryKey, secondaryKey, !setting.value);
             }}
+            theme={this.props.theme}
           />
         );
       }
@@ -56,6 +58,7 @@ class General extends Component {
             handleChange={() => {
               this.handleChange(primaryKey, secondaryKey);
             }}
+            theme={this.props.theme}
           />
         );
       }
diff --git a/app/src/js/components/settings/slider.js b/app/src/js/components/settings/slider.js
index 21cacf12..0dcd16e5 100644
--- a/app/src/js/components/settings/slider.js
+++ b/app/src/js/components/settings/slider.js
@@ -22,6 +22,7 @@ class Slider extends Component {
             value={this.state.value}
             onChange={(e) => { this.setState({ value: e.target.value }); }}
             onMouseUp={() => this.props.handleChange(this.state.value)}
+            style={{ backgroundColor: this.props.theme.backgroundColor }}
           />
         </div>
       </div>
@@ -31,6 +32,7 @@ class Slider extends Component {
 
 Slider.propTypes = {
   setting: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
   handleChange: PropTypes.func.isRequired,
 };
 
diff --git a/app/src/js/components/settings/toggle.js b/app/src/js/components/settings/toggle.js
index ac7cc0d9..de9924da 100644
--- a/app/src/js/components/settings/toggle.js
+++ b/app/src/js/components/settings/toggle.js
@@ -14,6 +14,7 @@ const Toggle = props => (
         />
         <span
           className="slider"
+          style={{ backgroundColor: props.theme.backgroundColor }}
         />
       </label>
     </div>
@@ -22,6 +23,7 @@ const Toggle = props => (
 
 Toggle.propTypes = {
   setting: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
   handleChange: PropTypes.func.isRequired,
 };
 
diff --git a/app/src/res/sass/modules/common.sass b/app/src/res/sass/modules/common.sass
index 686054b0..47d0b175 100644
--- a/app/src/res/sass/modules/common.sass
+++ b/app/src/res/sass/modules/common.sass
@@ -132,36 +132,37 @@ $post_comment_height: 13rem
 .range_input
   -webkit-appearance: none
   width: 100%
+  height: 21px
   margin: 7px 0
   border: none
   position: relative
+  border-radius: 12px
   &:focus
     outline: none
-  &::-webkit-slider-runnable-track
-    width: 100%
-    padding: 0px 5px
-    height: 24px
-    cursor: pointer
-    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0)
-    background: #c14857
-    border-radius: 12px
-    border: 0px solid rgba(0, 0, 0, 0)
+  // &::-webkit-slider-runnable-track
+  //   width: 100%
+  //   padding: 0px 5px
+  //   height: 24px
+  //   cursor: pointer
+  //   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0)
+  //   background: #c14857
+  //   border-radius: 12px
+  //   border: 0px solid rgba(0, 0, 0, 0)
 
   &::-webkit-slider-thumb
     position: relative
-    top: 10px
+    top: 1px
     box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0)
     border: 0px solid rgba(0, 0, 0, 0)
     height: 18.2px
     width: 18.2px
-    border-radius: 18px
+    border-radius: 18.2px
     background: #ffffff
     cursor: pointer
     -webkit-appearance: none
-    margin-top: -7px
 
-  &:focus::-webkit-slider-runnable-track
-    background: #c14857
+  // &:focus::-webkit-slider-runnable-track
+  //   background: #c14857
 
 body
   padding: 0