82172 selected page design

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

@@ -86,9 +86,9 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   };
 
   return (
-    <li key={pageData._id} className={`page-list-li search-page-item w-100 border-bottom px-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
+    <li key={pageData._id} className="page-list-li search-page-item w-100  px-4 list-group-item-action">
       <a
-        className="d-block pt-3"
+        className={`d-block pt-3 ${isSelected ? 'active' : ''}`}
         href={pageId}
         onClick={() => onClickInvoked(pageData._id)}
       >

packages/app/src/styles/_search.scss

@@ -181,8 +181,6 @@
           height: 123px;
           padding: 2px 4px;
           word-break: break-all;
-          border-radius: 0;
-
           &:hover {
             color: inherit;
             text-decoration: none;

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

@@ -594,11 +594,9 @@ body.pathname-sidebar {
         background-color: $bgcolor-keyword-highlighted;
       }
       .page-list-ul {
-        .page-list-li {
-          &.active {
-            background-color: $bgcolor-search-item-active;
-            border-color: $bordercolor-search-item-left-active;
-          }
+        .page-list-li > a.active {
+          background-color: $bgcolor-search-item-active;
+          border-color: $bordercolor-search-item-left-active;
         }
       }
       .page-list-meta {