From bdd43b49b24d3f48494d41f82e19b18f9c4e46a8 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Fri, 18 Jan 2019 15:55:20 +0100
Subject: [PATCH] add box shadow

---
 src/components/Button/index.js       | 10 ++++++++--
 src/components/Select/index.js       |  4 ++--
 src/components/Textarea/index.js     |  3 ++-
 src/components/inputs/Input/index.js |  3 ++-
 src/config/colors.js                 |  4 +++-
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 2aef90ae..a5f3931d 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -38,7 +38,8 @@ const Wrapper = styled.button`
     }
 
     &:focus {
-        border-color: ${colors.INPUT_BORDER_FOCUSED};
+        border-color: ${colors.INPUT_FOCUSED_BORDER};
+        box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
     }
 
     ${props => props.isDisabled && css`
@@ -53,7 +54,7 @@ const Wrapper = styled.button`
         border: 1px solid ${colors.DIVIDER};
 
         &:focus {
-            border-color: ${colors.INPUT_BORDER_FOCUSED};
+            border-color: ${colors.INPUT_FOCUSED_BORDER};
         }
 
         &:hover {
@@ -72,6 +73,11 @@ const Wrapper = styled.button`
         border: 0px;
         color: ${colors.TEXT_SECONDARY};
 
+        &:focus {
+            color: ${colors.TEXT_PRIMARY};
+            box-shadow: none;
+        }
+
         &:hover,
         &:active {
             color: ${colors.TEXT_PRIMARY};
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
index 8c07de89..a3691964 100644
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@@ -16,8 +16,8 @@ const styles = isSearchable => ({
         minHeight: 'initial',
         height: '40px',
         borderRadius: '2px',
-        borderColor: isFocused ? colors.INPUT_BORDER_FOCUSED : colors.DIVIDER,
-        boxShadow: 'none',
+        borderColor: isFocused ? colors.INPUT_FOCUSED_BORDER : colors.DIVIDER,
+        boxShadow: isFocused ? `0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}` : 'none',
         background: isDisabled ? colors.LANDING : colors.WHITE,
         '&:hover': {
             cursor: isSearchable ? 'text' : 'pointer',
diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js
index e0d4dbce..b5064ee7 100644
--- a/src/components/Textarea/index.js
+++ b/src/components/Textarea/index.js
@@ -68,7 +68,8 @@ const StyledTextarea = styled(Textarea)`
     }
 
     &:focus {
-        border-color: ${colors.INPUT_BORDER_FOCUSED};
+        border-color: ${colors.INPUT_FOCUSED_BORDER};
+        box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
     }
 
     &:disabled {
diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js
index 80635000..ee2aa96a 100644
--- a/src/components/inputs/Input/index.js
+++ b/src/components/inputs/Input/index.js
@@ -60,7 +60,8 @@ const StyledInput = styled.input`
     transition: ${TRANSITION.HOVER};
 
     &:focus {
-        border-color: ${colors.INPUT_BORDER_FOCUSED};
+        border-color: ${colors.INPUT_FOCUSED_BORDER};
+        box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
     }
 
     &:disabled {
diff --git a/src/config/colors.js b/src/config/colors.js
index 5d422fa6..23140583 100644
--- a/src/config/colors.js
+++ b/src/config/colors.js
@@ -34,5 +34,7 @@ export default {
 
     LABEL_COLOR: '#A9A9A9',
     TOOLTIP_BACKGROUND: '#333333',
-    INPUT_BORDER_FOCUSED: '#A9A9A9',
+
+    INPUT_FOCUSED_BORDER: '#A9A9A9',
+    INPUT_FOCUSED_SHADOW: '#d6d7d7',
 };
\ No newline at end of file