From 0f2ef6672b30e0c52dff48eceeb54ef4a0e5688c Mon Sep 17 00:00:00 2001
From: Anton Kozachuk <54616703+AntonKozachuk@users.noreply.github.com>
Date: Sat, 13 Feb 2021 21:07:29 +0200
Subject: [PATCH] fix: background-color in search results

---
 src/components/SearchBox/styled.elements.tsx | 26 +++++++++++---------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/SearchBox/styled.elements.tsx b/src/components/SearchBox/styled.elements.tsx
index 22aae826..2619bc58 100644
--- a/src/components/SearchBox/styled.elements.tsx
+++ b/src/components/SearchBox/styled.elements.tsx
@@ -11,11 +11,11 @@ export const SearchWrap = styled.div`
 export const SearchInput = styled.input.attrs(() => ({
   className: 'search-input',
 }))`
-  width: calc(100% - ${props => props.theme.spacing.unit * 8}px);
+  width: calc(100% - ${(props) => props.theme.spacing.unit * 8}px);
   box-sizing: border-box;
-  margin: 0 ${props => props.theme.spacing.unit * 4}px;
-  padding: 5px ${props => props.theme.spacing.unit * 2}px 5px
-    ${props => props.theme.spacing.unit * 4}px;
+  margin: 0 ${(props) => props.theme.spacing.unit * 4}px;
+  padding: 5px ${(props) => props.theme.spacing.unit * 2}px 5px
+    ${(props) => props.theme.spacing.unit * 4}px;
   border: 0;
   border-bottom: 1px solid
     ${({ theme }) =>
@@ -26,7 +26,7 @@ export const SearchInput = styled.input.attrs(() => ({
   font-family: ${({ theme }) => theme.typography.fontFamily};
   font-weight: bold;
   font-size: 13px;
-  color: ${props => props.theme.sidebar.textColor};
+  color: ${(props) => props.theme.sidebar.textColor};
   background-color: transparent;
   outline: none;
 `;
@@ -46,19 +46,19 @@ export const SearchIcon = styled((props: { className?: string }) => (
   className: 'search-icon',
 })`
   position: absolute;
-  left: ${props => props.theme.spacing.unit * 4}px;
+  left: ${(props) => props.theme.spacing.unit * 4}px;
   height: 1.8em;
   width: 0.9em;
 
   path {
-    fill: ${props => props.theme.sidebar.textColor};
+    fill: ${(props) => props.theme.sidebar.textColor};
   }
 `;
 
 export const SearchResultsBox = styled.div`
-  padding: ${props => props.theme.spacing.unit}px 0;
+  padding: ${(props) => props.theme.spacing.unit}px 0;
   background-color: ${({ theme }) => darken(0.05, theme.sidebar.backgroundColor)}};
-  color: ${props => props.theme.sidebar.textColor};
+  color: ${(props) => props.theme.sidebar.textColor};
   min-height: 150px;
   max-height: 250px;
   border-top: ${({ theme }) => darken(0.1, theme.sidebar.backgroundColor)}};
@@ -66,6 +66,10 @@ export const SearchResultsBox = styled.div`
   margin-top: 10px;
   line-height: 1.4;
   font-size: 0.9em;
+  
+  li {
+    background-color: inherit;
+  }
 
   ${MenuItemLabel} {
     padding-top: 6px;
@@ -85,9 +89,9 @@ export const SearchResultsBox = styled.div`
 export const ClearIcon = styled.i`
   position: absolute;
   display: inline-block;
-  width: ${props => props.theme.spacing.unit * 2}px;
+  width: ${(props) => props.theme.spacing.unit * 2}px;
   text-align: center;
-  right: ${props => props.theme.spacing.unit * 4}px;
+  right: ${(props) => props.theme.spacing.unit * 4}px;
   line-height: 2em;
   vertical-align: middle;
   margin-right: 2px;