apply text-bg-primary

apps/app/src/features/search/client/components/SearchMenuItem.module.scss

@@ -1,9 +0,0 @@
-.search-menu-item :global {
-  li {
-    cursor: pointer;
-  }
-
-  li.active {
-    background-color: aqua;
-  }
-}

apps/app/src/features/search/client/components/SearchMenuItem.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 
 import type { GetItemProps } from '../interfaces/downshift';
 
-import styles from './SearchMenuItem.module.scss';
-
 type Props = {
   url: string
   index: number
@@ -21,15 +19,13 @@ export const SearchMenuItem = (props: Props): JSX.Element => {
     getItemProps({
       index,
       item: { url },
-      className: `text-muted d-flex p-1 ${isActive ? 'active' : ''}`,
+      className: `d-flex p-1 ${isActive ? 'text-bg-primary' : ''}`,
     })
   );
 
   return (
-    <div className={`search-menu-item ${styles['search-menu-item']}`}>
-      <li {...itemMenuOptions}>
-        { children }
-      </li>
-    </div>
+    <li {...itemMenuOptions}>
+      { children }
+    </li>
   );
 };

apps/app/src/features/search/client/components/SearchResultMenuItem.tsx

@@ -62,7 +62,7 @@ export const SearchResultMenuItem = (props: Props): JSX.Element => {
               <PagePathLabel path={item.data.path} />
             </span>
 
-            <span className="ms-2 text-muted d-flex justify-content-center align-items-center">
+            <span className="ms-2 d-flex justify-content-center align-items-center">
               <span className="material-symbols-outlined fs-5">footprint</span>
               <span>{item.data.seenUsers.length}</span>
             </span>