From 8edb6b66b8fada5ee6b013fbac351757a23798d6 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Fri, 18 Jan 2019 14:50:26 +0100
Subject: [PATCH] set border color when focused for input, button, textarea,
 select

---
 src/components/Button/index.js       | 8 ++++++++
 src/components/Select/index.js       | 5 ++---
 src/components/Textarea/index.js     | 4 ++++
 src/components/inputs/Input/index.js | 4 ++++
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index c0704b56..2aef90ae 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -37,6 +37,10 @@ const Wrapper = styled.button`
         background: ${colors.GREEN_TERTIARY};
     }
 
+    &:focus {
+        border-color: ${colors.INPUT_BORDER_FOCUSED};
+    }
+
     ${props => props.isDisabled && css`
         pointer-events: none;
         color: ${colors.TEXT_SECONDARY};
@@ -48,6 +52,10 @@ const Wrapper = styled.button`
         color: ${colors.TEXT_SECONDARY};
         border: 1px solid ${colors.DIVIDER};
 
+        &:focus {
+            border-color: ${colors.INPUT_BORDER_FOCUSED};
+        }
+
         &:hover {
             color: ${colors.TEXT_PRIMARY};
             background: ${colors.DIVIDER};
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
index 1d7c020b..8c07de89 100644
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@@ -11,17 +11,16 @@ const styles = isSearchable => ({
         width: '100%',
         color: colors.TEXT_SECONDARY,
     }),
-    control: (base, { isDisabled }) => ({
+    control: (base, { isDisabled, isFocused }) => ({
         ...base,
         minHeight: 'initial',
         height: '40px',
         borderRadius: '2px',
-        borderColor: colors.DIVIDER,
+        borderColor: isFocused ? colors.INPUT_BORDER_FOCUSED : colors.DIVIDER,
         boxShadow: 'none',
         background: isDisabled ? colors.LANDING : colors.WHITE,
         '&:hover': {
             cursor: isSearchable ? 'text' : 'pointer',
-            borderColor: colors.DIVIDER,
         },
     }),
     indicatorSeparator: () => ({
diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js
index b0dbad2c..e0d4dbce 100644
--- a/src/components/Textarea/index.js
+++ b/src/components/Textarea/index.js
@@ -67,6 +67,10 @@ const StyledTextarea = styled(Textarea)`
         color: ${colors.TEXT_SECONDARY};
     }
 
+    &:focus {
+        border-color: ${colors.INPUT_BORDER_FOCUSED};
+    }
+
     &:disabled {
         pointer-events: none;
         background: ${colors.GRAY_LIGHT};
diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js
index 5bda40dd..80635000 100644
--- a/src/components/inputs/Input/index.js
+++ b/src/components/inputs/Input/index.js
@@ -59,6 +59,10 @@ const StyledInput = styled.input`
     background-color: ${colors.WHITE};
     transition: ${TRANSITION.HOVER};
 
+    &:focus {
+        border-color: ${colors.INPUT_BORDER_FOCUSED};
+    }
+
     &:disabled {
         pointer-events: none;
         background: ${colors.GRAY_LIGHT};