Merge pull request #834 from blockscout/search/change-highlight-color

change highlight color for search result

theme/global.ts

@@ -11,7 +11,7 @@ const global = (props: StyleFunctionProps) => ({
     'font-variant-ligatures': 'no-contextual',
   },
   mark: {
-    bgColor: 'yellow.200',
+    bgColor: mode('green.100', 'green.800')(props),
     color: 'inherit',
   },
   'svg *::selection': {

ui/snippets/searchBar/SearchBar.tsx

@@ -114,7 +114,7 @@ const SearchBar = ({ isHomepage }: Props) => {
         />
       </PopoverTrigger>
       <PopoverContent w={ `${ menuWidth.current }px` } maxH={{ base: '300px', lg: '500px' }} overflowY="scroll" ref={ menuRef }>
-        <PopoverBody py={ 6 }>
+        <PopoverBody py={ 6 } sx={ isHomepage ? { mark: { bgColor: 'green.100' } } : {} }>
           <SearchBarSuggest query={ query } redirectCheckQuery={ redirectCheckQuery } searchTerm={ searchTerm } onItemClick={ handleItemClick }/>
         </PopoverBody>
       </PopoverContent>