Add compact UI styles for search reports and expenses tables

src/components/Icon/BankIcons/index.native.ts

@@ -9,7 +9,7 @@ import type {BankIcon} from '@src/types/onyx/Bank';
 /**
  * Returns Bank Icon Object that matches to existing bank icons or default icons
  */
-export default function getBankIcon({styles, bankName, isCard = false}: BankIconParams): BankIcon {
+export default function getBankIcon({styles, bankName, isCard = false, maxIconSize}: BankIconParams): BankIcon {
     const bankIcon: BankIcon = {
         icon: isCard ? GenericBankCard : GenericBank,
     };
@@ -23,11 +23,13 @@ export default function getBankIcon({styles, bankName, isCard = false}: BankIcon
 
     // For default Credit Card icon the icon size should not be set.
     if (!isCard) {
-        bankIcon.iconSize = variables.iconSizeExtraLarge;
-        bankIcon.iconStyles = [styles.bankIconContainer];
+        const defaultSize = variables.iconSizeExtraLarge;
+        bankIcon.iconSize = maxIconSize ? Math.min(defaultSize, maxIconSize) : defaultSize;
+        bankIcon.iconStyles = maxIconSize && maxIconSize < defaultSize ? [{...styles.bankIconContainer, width: bankIcon.iconSize, height: bankIcon.iconSize}] : [styles.bankIconContainer];
     } else {
-        bankIcon.iconHeight = variables.cardIconHeight;
-        bankIcon.iconWidth = variables.cardIconWidth;
+        const scale = maxIconSize ? Math.min(1, maxIconSize / variables.cardIconWidth) : 1;
+        bankIcon.iconHeight = Math.round(variables.cardIconHeight * scale);
+        bankIcon.iconWidth = Math.round(variables.cardIconWidth * scale);
         bankIcon.iconStyles = [styles.cardIcon];
     }
 

src/components/Icon/BankIcons/index.ts

@@ -17,7 +17,7 @@ type BankIconAsset = {
 /**
  * Returns Bank Icon Object that matches to existing bank icons or default icons
  */
-export default function getBankIcon({styles, bankName, isCard = false}: BankIconParams): BankIcon {
+export default function getBankIcon({styles, bankName, isCard = false, maxIconSize}: BankIconParams): BankIcon {
     const bankIcon: BankIcon = {
         icon: isCard ? GenericBankCard : GenericBank,
     };
@@ -31,11 +31,15 @@ export default function getBankIcon({styles, bankName, isCard = false}: BankIcon
 
     // For default Credit Card icon the icon size should not be set.
     if (!isCard) {
-        bankIcon.iconSize = variables.iconSizeExtraLarge;
-        bankIcon.iconStyles = [styles.bankIconContainer];
+        const defaultSize: number = variables.iconSizeExtraLarge;
+        bankIcon.iconSize = maxIconSize ? Math.min(defaultSize, maxIconSize) : defaultSize;
+        bankIcon.iconStyles = maxIconSize && maxIconSize < defaultSize ? [{...styles.bankIconContainer, width: bankIcon.iconSize, height: bankIcon.iconSize}] : [styles.bankIconContainer];
     } else {
-        bankIcon.iconHeight = variables.cardIconHeight;
-        bankIcon.iconWidth = variables.cardIconWidth;
+        const cardWidth: number = variables.cardIconWidth;
+        const cardHeight: number = variables.cardIconHeight;
+        const scale = maxIconSize ? Math.min(1, maxIconSize / cardWidth) : 1;
+        bankIcon.iconHeight = Math.round(cardHeight * scale);
+        bankIcon.iconWidth = Math.round(cardWidth * scale);
         bankIcon.iconStyles = [styles.cardIcon];
     }
 

src/components/Icon/BankIconsUtils.ts

@@ -7,6 +7,7 @@ type BankIconParams = {
     styles: ThemeStyles;
     bankName?: BankName;
     isCard?: boolean;
+    maxIconSize?: number;
 };
 
 /**

src/components/ReportActionAvatars/SearchReportAvatar.tsx

@@ -12,9 +12,12 @@ type SearchReportAvatarProps = {
     shouldShowTooltip: boolean;
     subscriptAvatarBorderColor: ColorValue;
     reportID: string;
+    isLargeScreenWidth?: boolean;
 };
 
-function SearchReportAvatar({primaryAvatar, secondaryAvatar, avatarType, shouldShowTooltip, subscriptAvatarBorderColor, reportID}: SearchReportAvatarProps) {
+function SearchReportAvatar({primaryAvatar, secondaryAvatar, avatarType, shouldShowTooltip, subscriptAvatarBorderColor, reportID, isLargeScreenWidth}: SearchReportAvatarProps) {
+    const avatarSize = isLargeScreenWidth ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
+
     if (!primaryAvatar) {
         return null;
     }
@@ -24,7 +27,7 @@ function SearchReportAvatar({primaryAvatar, secondaryAvatar, avatarType, shouldS
             <ReportActionAvatar.Subscript
                 primaryAvatar={primaryAvatar}
                 secondaryAvatar={secondaryAvatar}
-                size={CONST.AVATAR_SIZE.DEFAULT}
+                size={avatarSize}
                 shouldShowTooltip={shouldShowTooltip}
                 noRightMarginOnContainer={false}
                 subscriptAvatarBorderColor={subscriptAvatarBorderColor}
@@ -37,7 +40,7 @@ function SearchReportAvatar({primaryAvatar, secondaryAvatar, avatarType, shouldS
         return (
             <ReportActionAvatar.Multiple.Diagonal
                 icons={[primaryAvatar, secondaryAvatar]}
-                size={CONST.AVATAR_SIZE.DEFAULT}
+                size={avatarSize}
                 shouldShowTooltip={shouldShowTooltip}
                 isInReportAction={false}
                 useMidSubscriptSize={false}
@@ -49,7 +52,7 @@ function SearchReportAvatar({primaryAvatar, secondaryAvatar, avatarType, shouldS
     return (
         <ReportActionAvatar.Single
             avatar={primaryAvatar}
-            size={CONST.AVATAR_SIZE.DEFAULT}
+            size={avatarSize}
             shouldShowTooltip={shouldShowTooltip}
             accountID={Number(primaryAvatar?.id ?? CONST.DEFAULT_NUMBER_ID)}
             fallbackIcon={primaryAvatar?.fallbackIcon}

src/components/ReportSearchHeader/index.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import AvatarWithDisplayName from '@components/AvatarWithDisplayName';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import type ReportSearchHeaderProps from './types';
 
 function ReportSearchHeader({report, style, transactions, avatarBorderColor}: ReportSearchHeaderProps) {
@@ -23,6 +24,7 @@ function ReportSearchHeader({report, style, transactions, avatarBorderColor}: Re
                 shouldEnableDetailPageNavigation={false}
                 shouldEnableAvatarNavigation={false}
                 avatarBorderColor={avatarBorderColor}
+                size={isLargeScreenWidth ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                 customDisplayNameStyle={styles.fontWeightNormal}
                 parentNavigationSubtitleTextStyles={[styles.textLineHeightNormal, styles.minHeight4, styles.mt1, !isLargeScreenWidth && styles.textMicro]}
                 parentNavigationStatusContainerStyles={statusContainerStyle}

src/components/Search/SearchList/BaseSearchList/index.tsx

@@ -9,7 +9,7 @@
 import {isMobileChrome} from '@libs/Browser';
 import {addKeyDownPressListener, removeKeyDownPressListener} from '@libs/KeyboardShortcut/KeyDownPressListener';
 import CONST from '@src/CONST';
 import type {SearchListItem} from '../ListItem/types';
 import type BaseSearchListProps from './types';
 
 const AnimatedFlashListComponent = Animated.createAnimatedComponent(FlashList<SearchListItem>);
@@ -116,7 +116,7 @@
             renderItem={renderItemWithKeyboardFocus}
             keyExtractor={keyExtractor}
             onScroll={onScroll}
-            showsVerticalScrollIndicator
+            showsVerticalScrollIndicator={false}
             ref={ref}
             extraData={extraData}
             onEndReached={onEndReached}

src/components/Search/SearchList/ListItem/AvatarWithTextCell.tsx

@@ -2,19 +2,18 @@ import React from 'react';
 import {View} from 'react-native';
 import Avatar from '@components/Avatar';
 import Text from '@components/Text';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 
 type AvatarWithTextCellProps = {
     reportName?: string;
     icon?: Icon;
+    isLargeScreenWidth?: boolean;
 };
 
-function AvatarWithTextCell({reportName, icon}: AvatarWithTextCellProps) {
+function AvatarWithTextCell({reportName, icon, isLargeScreenWidth}: AvatarWithTextCellProps) {
     const styles = useThemeStyles();
-    const {isLargeScreenWidth} = useResponsiveLayout();
 
     if (!reportName || !icon) {
         return null;

src/components/Search/SearchList/ListItem/BaseListItemHeader.tsx

@@ -140,7 +140,7 @@ function BaseListItemHeader<TItem extends ListItem>({
 
     return (
         <View>
-            <View style={[styles.pv1Half, styles.pl3, styles.flexRow, styles.alignItemsCenter, isLargeScreenWidth ? styles.gap3 : styles.justifyContentStart]}>
+            <View style={[styles.pl3, styles.flexRow, styles.alignItemsCenter, isLargeScreenWidth ? [styles.pv1, styles.gap3] : [styles.pv1Half, styles.justifyContentStart]]}>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mnh40, styles.flex1, styles.gap3]}>
                     {!!canSelectMultiple && (
                         <Checkbox
@@ -149,7 +149,7 @@ function BaseListItemHeader<TItem extends ListItem>({
                             isIndeterminate={isIndeterminate}
                             disabled={!!isDisabled || item.isDisabledCheckbox}
                             accessibilityLabel={translate('common.select')}
-                            style={isLargeScreenWidth && styles.mr1}
+                            containerStyle={styles.m0}
                             sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_SELECT_ALL_CHECKBOX}
                         />
                     )}

src/components/Search/SearchList/ListItem/CardListItem.tsx

@@ -174,6 +174,7 @@ function CardListItem<TItem extends ListItem>({
                         onPress={handleCheckboxPress}
                         disabled={!!isDisabled}
                         style={styles.ml3}
+                        containerStyle={styles.m0}
                     />
                 )}
             </>

src/components/Search/SearchList/ListItem/CardListItemHeader.tsx

@@ -122,7 +122,7 @@ function CardListItemHeader<TItem extends ListItem>({
 
     return (
         <View>
-            <View style={[styles.pv1Half, styles.pl3, styles.flexRow, styles.alignItemsCenter, isLargeScreenWidth ? styles.gap3 : styles.justifyContentStart]}>
+            <View style={[styles.pl3, styles.flexRow, styles.alignItemsCenter, isLargeScreenWidth ? [styles.pv1, styles.gap3] : [styles.pv1Half, styles.justifyContentStart]]}>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mnh40, styles.flex1, styles.gap3]}>
                     {!!canSelectMultiple && (
                         <Checkbox
@@ -131,7 +131,7 @@ function CardListItemHeader<TItem extends ListItem>({
                             isIndeterminate={isIndeterminate}
                             disabled={!!isDisabled || cardItem.isDisabledCheckbox}
                             accessibilityLabel={translate('common.select')}
-                            style={isLargeScreenWidth && styles.mr1}
+                            containerStyle={styles.m0}
                         />
                     )}
                     {!isLargeScreenWidth && (
@@ -165,6 +165,7 @@ function CardListItemHeader<TItem extends ListItem>({
                                             subscriptAvatarBorderColor={backgroundColor}
                                             noRightMarginOnSubscriptContainer
                                             accountIDs={[cardItem.accountID]}
+                                            size={CONST.AVATAR_SIZE.SMALL}
                                         />
                                     </View>
                                 </UserDetailsTooltip>

src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx

@@ -17,6 +17,7 @@ import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {handleActionButtonPress} from '@libs/actions/Search';
@@ -46,9 +47,11 @@ function ExpenseReportListItem<TItem extends ListItem>({
     onCheckboxPress,
     lastPaymentMethod,
     personalPolicyID,
+    isLastItem,
 }: ExpenseReportListItemProps<TItem>) {
     const reportItem = item as unknown as ExpenseReportListItemType;
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const theme = useTheme();
     const {translate} = useLocalize();
     const {isLargeScreenWidth} = useResponsiveLayout();
@@ -170,8 +173,9 @@ function ExpenseReportListItem<TItem extends ListItem>({
             item.isSelected && styles.activeComponentBG,
             styles.mh0,
             isPendingDelete && styles.cursorDisabled,
+            isLargeScreenWidth && StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected, {vertical: variables.tableRowPaddingVertical}),
         ],
-        [styles, item.isSelected, isPendingDelete],
+        [styles, item.isSelected, isLargeScreenWidth, isLastItem, isPendingDelete, StyleUtils],
     );
 
     const listItemWrapperStyle = useMemo(
@@ -184,7 +188,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
     );
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
-        borderRadius: variables.componentBorderRadius,
+        borderRadius: StyleUtils.getSearchTableHighlightBorderRadius(isLargeScreenWidth),
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
         backgroundColor: theme.highlightBG,
@@ -249,7 +253,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
             item={item}
             pressableStyle={listItemPressableStyle}
             wrapperStyle={listItemWrapperStyle}
-            containerStyle={[styles.mb2]}
+            containerStyle={!isLargeScreenWidth && [styles.mb2]}
             isFocused={isFocused}
             showTooltip={showTooltip}
             canSelectMultiple={canSelectMultiple}
@@ -260,7 +264,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
             onLongPressRow={onLongPressRow}
             shouldSyncFocus={shouldSyncFocus}
             hoverStyle={item.isSelected && styles.activeComponentBG}
-            pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isPendingDelete && styles.cursorDisabled]}
+            pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isPendingDelete && styles.cursorDisabled, isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius]}
             accessible={false}
             shouldShowRightCaret={false}
             shouldUseDefaultRightHandSideCheckmark={false}
@@ -284,6 +288,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
                         isHovered={hovered}
                         isFocused={isFocused}
                         isPendingDelete={isPendingDelete}
+                        isLargeScreenWidth={isLargeScreenWidth}
                     />
                     {getDescription}
                 </View>