From ba7c2ffc74160e29a2964344ccd2c122db6fb6da Mon Sep 17 00:00:00 2001
From: Alex Clapperton <Alex.Clapperton@codecomputerlove.com>
Date: Wed, 3 Oct 2018 08:03:30 +0100
Subject: [PATCH] :lipstick: Update input slider thumb tracks size

---
 src/components/01-Atoms/Range/Range.styles.js | 12 ++++++++++--
 src/components/App.js                         |  4 ++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/01-Atoms/Range/Range.styles.js b/src/components/01-Atoms/Range/Range.styles.js
index 25ac0e3..219de7b 100644
--- a/src/components/01-Atoms/Range/Range.styles.js
+++ b/src/components/01-Atoms/Range/Range.styles.js
@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { rgba } from '../../../styles/settings.colors.styles';
+import { minWidth } from '../../../styles/settings.breakpoints.styles';
 import spacing from '../../../styles/settings.spacing.styles';
 
 const Range = styled.input`
@@ -11,13 +12,20 @@ const Range = styled.input`
   border-radius: 20px;
 
   &::-webkit-slider-thumb {
-    width: 25px;
-    height: 25px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     cursor: pointer;
     appearance: none;
   }
 
+  ${minWidth('992', () => css`
+    &::-webkit-slider-thumb {
+      width: 25px;
+      height: 25px;
+    }
+  `)}
+
   ${props => props.color && css`
     background-color: ${rgba(props.color, 0.3)};
 
diff --git a/src/components/App.js b/src/components/App.js
index baf6275..2a5b25d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -182,7 +182,7 @@ class App extends Component {
 
         <Flex justify="between" align="center">
           <BlockDiv inputs color={colorState}>
-            <Label htmlFor="background">Background Hex Colour</Label>
+            <Label htmlFor="background">Background Colour</Label>
             <Input
               value={background}
               id="background"
@@ -201,7 +201,7 @@ class App extends Component {
           </BlockDiv>
 
           <BlockDiv inputs color={colorState}>
-            <Label htmlFor="foreground">Foreground Hex Colour</Label>
+            <Label htmlFor="foreground">Foreground Colour</Label>
             <Input
               value={foreground}
               id="foreground"