90388change background color

packages/app/src/components/SearchPage/SearchResultList.jsx

@@ -12,6 +12,7 @@ class SearchResultList extends React.Component {
       return (
         <SearchResultListItem
           page={page}
+          selectedPageId={this.props.selectedPage.id}
           onClickInvoked={this.props.onClickInvoked}
           noLink
         />
@@ -24,6 +25,7 @@ class SearchResultList extends React.Component {
 SearchResultList.propTypes = {
   pages: PropTypes.array.isRequired,
   deletionMode: PropTypes.bool.isRequired,
+  selectedPage: PropTypes.object,
   selectedPages: PropTypes.array.isRequired,
   onClickInvoked: PropTypes.func,
   onChangeInvoked: PropTypes.func,

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

@@ -17,12 +17,13 @@ type Props ={
       snippet: string,
     }
   },
+  selectedPageId: string,
   onClickInvoked: (data: string) => void,
 }
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
 
-  const { page, onClickInvoked } = props;
+  const { page, selectedPageId, onClickInvoked } = props;
 
   // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
   const pageId = `#${page._id}`;
@@ -35,7 +36,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
 
   return (
-    <li key={page._id} className="page-list-li w-100 border-bottom pr-4">
+    <li key={page._id} className={`page-list-li w-100 border-bottom pr-4 ${page._id === selectedPageId ? 'bg-selected' : ''}`}>
       <a
         className="d-block pt-3"
         href={pageId}

packages/app/src/styles/_search.scss

@@ -194,6 +194,13 @@
       margin: 0 10px 0 0;
       vertical-align: middle;
     }
+    .page-list {
+      ul {
+        .bg-selected {
+          background-color: #eff5ff;
+        }
+      }
+    }
   }
 
   .search-result-content {