From aa52817a39dc66648708edec6dbaaf5c47f9e44d Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Wed, 1 May 2019 11:11:01 -0700
Subject: [PATCH] improve boolean prop for slider

---
 components/Settings.js |  5 +++--
 components/Slider.js   | 16 +++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/Settings.js b/components/Settings.js
index 4b2fb94..8df654b 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -95,7 +95,8 @@ const WindowSettings = React.memo(
               border-right: 1px solid ${COLORS.SECONDARY};
             }
 
-            .drop-shadow-options {
+            .drop-shadow-options :global(.slider-bg),
+            .drop-shadow-options :global(label) {
               opacity: 0.5;
             }
           `}
@@ -129,7 +130,7 @@ const TypeSettings = React.memo(
           value={lineHeight}
           minValue={90}
           maxValue={250}
-          usePercentage={true}
+          unit="%"
           onChange={onChange.bind(null, 'lineHeight')}
         />
       </div>
diff --git a/components/Slider.js b/components/Slider.js
index 7ed0c85..090497f 100644
--- a/components/Slider.js
+++ b/components/Slider.js
@@ -5,11 +5,12 @@ import { COLORS } from '../lib/constants'
 class Slider extends React.Component {
   static defaultProps = {
     onMouseDown: () => {},
-    onMouseUp: () => {}
+    onMouseUp: () => {},
+    unit: 'px'
   }
 
   handleChange = e => {
-    this.props.onChange(`${e.target.value}${this.props.usePercentage ? '%' : 'px'}`)
+    this.props.onChange(`${e.target.value}${this.props.unit}`)
   }
 
   render() {
@@ -27,7 +28,7 @@ class Slider extends React.Component {
               100}%, 0px, 0px)`
           }}
         />
-        <span className="label">{this.props.label}</span>
+        <label>{this.props.label}</label>
         <input
           type="range"
           defaultValue={this.props.value}
@@ -47,23 +48,28 @@ class Slider extends React.Component {
               user-select: none;
             }
 
+            .slider:focus-within {
+              outline: -webkit-focus-ring-color auto 5px;
+            }
+
             .slider:last-of-type {
               border-bottom: 0;
             }
 
-            .label {
+            label {
               position: absolute;
               left: 8px;
               height: 33px;
               line-height: 33px;
             }
 
-            .slider input {
+            input {
               opacity: 0;
               cursor: ew-resize;
               position: relative;
               height: 100%;
               width: 100%;
+              margin: 0;
             }
 
             .slider-bg {