From cdca7e6ccd54a0e7db46b28d4e09ad7a287d8ea9 Mon Sep 17 00:00:00 2001
From: Anya Stasiuk <stasiukanya@gmail.com>
Date: Wed, 7 Oct 2020 14:03:03 +0300
Subject: [PATCH] fix: add styles to dropdown for focus state

---
 src/common-elements/dropdown.ts                  | 4 ++--
 src/components/RequestSamples/styled.elements.ts | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

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;
     }
   }
 `;