Merge pull request #37306 from bernhardoj/fix/36075-search-page-bold

Only bold user display name when it's unread in search page
Expensify · Mar 1, 2024 · ea2bda2 · ea2bda2
2 parents 7587ff8 + 2093642
commit ea2bda2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
@@ -85,7 +85,7 @@ function UserListItem({
                             style={[
                                 styles.optionDisplayName,
                                 isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
-                                styles.sidebarLinkTextBold,
+                                item.isBold !== false && styles.sidebarLinkTextBold,
                                 styles.pre,
                                 item.alternateText ? styles.mb1 : null,
                             ]}

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -61,6 +61,9 @@ type ListItem = {
     /** Whether this option is disabled for selection */
     isDisabled?: boolean;
 
+    /** List title is bold by default. Use this props to customize it */
+    isBold?: boolean;
+
     /** User accountID */
     accountID?: number | null;
 

diff --git a/src/pages/SearchPage/index.js b/src/pages/SearchPage/index.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -93,7 +94,7 @@ function SearchPage({betas, reports, isSearchingForReports}) {
 
         if (recentReports.length > 0) {
             newSections.push({
-                data: recentReports,
+                data: _.map(recentReports, (report) => ({...report, isBold: report.isUnread})),
                 shouldShow: true,
                 indexOffset,
             });