diff --git a/src/common-elements/dropdown.ts b/src/common-elements/dropdown.ts index c06295a0..cd06c888 100644 --- a/src/common-elements/dropdown.ts +++ b/src/common-elements/dropdown.ts @@ -99,8 +99,8 @@ export const StyledDropdown = styled(Dropdown)` &[aria-selected='true'] { background-color: rgba(0, 0, 0, 0.05); } - - &:hover { + &:hover, + &.focused { background-color: rgba(38, 50, 56, 0.12); } } diff --git a/src/components/RequestSamples/styled.elements.ts b/src/components/RequestSamples/styled.elements.ts index b63870b1..998bdf33 100644 --- a/src/components/RequestSamples/styled.elements.ts +++ b/src/components/RequestSamples/styled.elements.ts @@ -1,6 +1,6 @@ import styled from '../../styled-components'; import { InvertedSimpleDropdown } from '../PayloadSamples/styled.elements'; -import { darken } from 'polished'; +import { darken, lighten } from 'polished'; export const Flex = styled.div` display: flex; @@ -14,13 +14,15 @@ export const SamplesDropdown = styled(InvertedSimpleDropdown)` padding: 6px 10px; border: 1px solid ${({ theme }) => darken(0.05, theme.codeBlock.backgroundColor)}; border-radius: 5px; - &:hover, - &:focus-within { + &:hover { border: 1px solid ${({ theme }) => darken(0.05, theme.codeBlock.backgroundColor)}; box-shadow: none; } + &:focus-within { background-color: ${({ theme }) => theme.codeBlock.backgroundColor}; + border: 1px solid ${({ theme }) => lighten(0.25, theme.codeBlock.backgroundColor)}; + box-shadow: none; } } `;