gray footcount

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

@@ -0,0 +1,7 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+.search-result-menu-item :global {
+  .foot-count{
+    color: var(--bs-gray-500);
+  }
+}

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

@@ -9,6 +9,8 @@ import type { GetItemProps } from '../interfaces/downshift';
 
 import { SearchMenuItem } from './SearchMenuItem';
 
+import styles from './SearchResultMenuItem.module.scss';
+
 type Props = {
   activeIndex: number | null,
   searchKeyword: string,
@@ -46,7 +48,7 @@ export const SearchResultMenuItem = (props: Props): JSX.Element => {
   }
 
   return (
-    <>
+    <div className={`search-result-menu-item ${styles['search-result-menu-item']}`}>
       {searchResult?.data
         .map((item, index) => (
           <SearchMenuItem
@@ -62,13 +64,13 @@ export const SearchResultMenuItem = (props: Props): JSX.Element => {
               <PagePathLabel path={item.data.path} />
             </span>
 
-            <span className="ms-2 d-flex justify-content-center align-items-center">
+            <span className="foot-count ms-2 d-flex justify-content-center align-items-center">
               <span className="material-symbols-outlined fs-6 p-0">footprint</span>
               <span className="fs-6">{item.data.seenUsers.length}</span>
             </span>
           </SearchMenuItem>
         ))
       }
-    </>
+    </div>
   );
 };