use brighter gray

packages/app/src/components/SearchPage/SearchResultListItem.tsx

@@ -48,12 +48,12 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
     />
   );
 
-  const responsiveListStyleClass = `${isDeviceSmallerThanLg ? '' : `list-group-item-action ${isSelected ? 'active' : ''}`}`;
+  const responsiveListStyleClass = !isDeviceSmallerThanLg && isSelected ? 'active' : '';
 
   return (
     <li
       key={pageData._id}
-      className={`w-100 page-list-li search-result-item border-bottom ${responsiveListStyleClass}`}
+      className={`w-100 page-list-li border-bottom ${responsiveListStyleClass}`}
     >
       <div
         className="h-100 text-break"

packages/app/src/styles/_search.scss

@@ -222,7 +222,7 @@
         }
       }
     }
-    .search-result-item {
+    .page-list-li {
       min-height: 136px;
     }
 

packages/app/src/styles/theme/_apply-colors.scss

@@ -22,6 +22,7 @@ $bgcolor-search-item-active: lighten($bordercolor-search-item-left-active, 76%)
 $color-search-item-pagelist-meta: $gray-500 !default;
 $color-search-page-list-title: $color-global !default;
 $color-search-page-list-snippet: $gray-600 !default;
+$bgcolor-search-page-list-hover: $gray-50 !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -724,3 +725,13 @@ mark.rbt-highlight-text {
     width: 20px;
   }
 }
+
+.on-search {
+  .search-result {
+    @include media-breakpoint-up(lg) {
+      .page-list-li:hover {
+        background-color: $bgcolor-search-page-list-hover;
+      }
+    }
+  }
+}