diff --git a/src/components/Button/index.js b/src/components/Button/index.js index c0704b56..a5f3931d 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -37,6 +37,11 @@ const Wrapper = styled.button` background: ${colors.GREEN_TERTIARY}; } + &:focus { + border-color: ${colors.INPUT_FOCUSED_BORDER}; + box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; + } + ${props => props.isDisabled && css` pointer-events: none; color: ${colors.TEXT_SECONDARY}; @@ -48,6 +53,10 @@ const Wrapper = styled.button` color: ${colors.TEXT_SECONDARY}; border: 1px solid ${colors.DIVIDER}; + &:focus { + border-color: ${colors.INPUT_FOCUSED_BORDER}; + } + &:hover { color: ${colors.TEXT_PRIMARY}; background: ${colors.DIVIDER}; @@ -64,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 1d7c020b..a3691964 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, - 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', - borderColor: colors.DIVIDER, }, }), indicatorSeparator: () => ({ diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index b0dbad2c..b5064ee7 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -67,6 +67,11 @@ const StyledTextarea = styled(Textarea)` color: ${colors.TEXT_SECONDARY}; } + &:focus { + border-color: ${colors.INPUT_FOCUSED_BORDER}; + box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; + } + &: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..ee2aa96a 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -59,6 +59,11 @@ const StyledInput = styled.input` background-color: ${colors.WHITE}; transition: ${TRANSITION.HOVER}; + &:focus { + border-color: ${colors.INPUT_FOCUSED_BORDER}; + box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; + } + &:disabled { pointer-events: none; background: ${colors.GRAY_LIGHT}; diff --git a/src/config/colors.js b/src/config/colors.js index efca1cda..23140583 100644 --- a/src/config/colors.js +++ b/src/config/colors.js @@ -34,4 +34,7 @@ export default { LABEL_COLOR: '#A9A9A9', TOOLTIP_BACKGROUND: '#333333', + + INPUT_FOCUSED_BORDER: '#A9A9A9', + INPUT_FOCUSED_SHADOW: '#d6d7d7', }; \ No newline at end of file