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