Adjust desktop table row styles: tighter gaps and padding

src/components/AnimatedCollapsible/index.tsx

@@ -139,7 +139,7 @@ function AnimatedCollapsible({
                     <PressableWithFeedback
                         onPress={onPress}
                         disabled={disabled}
-                        style={[styles.p3Half, styles.justifyContentCenter, styles.alignItemsCenter, expandButtonStyle]}
+                        style={[{paddingHorizontal: 14, paddingVertical: 14}, styles.justifyContentCenter, styles.alignItemsCenter, expandButtonStyle]}
                         accessibilityRole={CONST.ROLE.BUTTON}
                         accessibilityLabel={isExpanded ? CONST.ACCESSIBILITY_LABELS.COLLAPSE : CONST.ACCESSIBILITY_LABELS.EXPAND}
                         sentryLabel={sentryLabel}

src/components/Domain/DomainMenuItem.tsx

@@ -6,6 +6,7 @@ import type {PopoverMenuItem} from '@components/PopoverMenu';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
@@ -21,6 +22,9 @@ type DomainMenuItemProps = {
 
     /** Row index in the menu */
     index: number;
+
+    /** Whether this is the last domain in the list */
+    isLastItem?: boolean;
 };
 
 type DomainItem = {
@@ -50,9 +54,10 @@ type DomainItem = {
 } & Pick<OfflineWithFeedbackProps, 'pendingAction'> &
     WithSentryLabel;
 
-function DomainMenuItem({item, index}: DomainMenuItemProps) {
+function DomainMenuItem({item, index, isLastItem}: DomainMenuItemProps) {
     const icons = useMemoizedLazyExpensifyIcons(['Globe']);
     const styles = useThemeStyles();
+    const {isLargeScreenWidth} = useResponsiveLayout();
     const {translate} = useLocalize();
     const {isAdmin, isValidated, action} = item;
 
@@ -79,7 +84,7 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) {
         <OfflineWithFeedback
             key={`domain_${item.title}_${index}`}
             pendingAction={item.pendingAction}
-            style={[styles.mb2, styles.mh5]}
+            style={[!isLargeScreenWidth && styles.mb2, styles.mh5]}
             contentContainerStyle={item.errors ? styles.mb2 : undefined}
             errors={item?.errors}
             onClose={() => clearDomainErrors(item.accountID)}
@@ -97,6 +102,7 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) {
                         isHovered={hovered}
                         menuItems={threeDotsMenuItems}
                         brickRoadIndicator={item.brickRoadIndicator}
+                        isLastItem={isLastItem}
                     />
                 )}
             </PressableWithoutFeedback>

src/components/Domain/DomainsListRow.tsx

@@ -7,6 +7,7 @@ import type {PopoverMenuItem} from '@components/PopoverMenu';
 import TextWithTooltip from '@components/TextWithTooltip';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -26,16 +27,37 @@ type DomainsListRowProps = {
 
     /** The type of brick road indicator to show */
     brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>;
+
+    /** Whether this is the last domain row in the list */
+    isLastItem?: boolean;
 };
 
-function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuItems}: DomainsListRowProps) {
+function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuItems, isLastItem}: DomainsListRowProps) {
     const styles = useThemeStyles();
+    const {isLargeScreenWidth} = useResponsiveLayout();
     const theme = useTheme();
 
     const icons = useMemoizedLazyExpensifyIcons(['Globe', 'ArrowRight', 'DotIndicator']);
 
     return (
-        <View style={[styles.flexRow, styles.highlightBG, styles.br3, styles.p5, styles.pr3, styles.alignItemsCenter, styles.gap3, isHovered && styles.hoveredComponentBG]}>
+        <View
+            style={[
+                styles.flexRow,
+                styles.highlightBG,
+                !isLargeScreenWidth && styles.br3,
+                isLargeScreenWidth
+                    ? [
+                          styles.pv2,
+                          styles.ph3,
+                          {borderRadius: 0, borderColor: theme.border},
+                          isLastItem ? {borderBottomWidth: 0, borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {borderBottomWidth: 1},
+                      ]
+                    : [styles.p5, styles.pr3],
+                styles.alignItemsCenter,
+                styles.gap3,
+                isHovered && styles.hoveredComponentBG,
+            ]}
+        >
             <View style={[styles.flex1, styles.flexRow, styles.bgTransparent, styles.gap3, styles.alignItemsCenter, styles.justifyContentStart]}>
                 <Icon
                     src={icons.Globe}

src/components/DomainsEmptyStateComponent.tsx

@@ -21,7 +21,7 @@ function DomainsEmptyStateComponent() {
                 title={translate('domain.enhancedSecurity.title')}
                 subtitle={translate('domain.enhancedSecurity.subtitle')}
                 subtitleStyle={[styles.textLabelSupporting, styles.pt1]}
-                style={[styles.borderRadiusComponentLarge, styles.highlightBG]}
+                style={[{borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, styles.highlightBG]}
                 rightComponent={
                     <Button
                         text={translate('domain.enhancedSecurity.enable')}

src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx

@@ -4,7 +4,9 @@ import Checkbox from '@components/Checkbox';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
 import {getCommaSeparatedTagNameWithSanitizedColons} from '@libs/PolicyUtils';
@@ -63,7 +65,9 @@ function MoneyRequestReportGroupHeader({
     pendingAction,
 }: MoneyRequestReportGroupHeaderProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
+    const {isLargeScreenWidth} = useResponsiveLayout();
     const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
 
     const cleanedGroupName = isGroupedByTag && group.groupName ? getCommaSeparatedTagNameWithSanitizedColons(group.groupName) : group.groupName;
@@ -73,7 +77,7 @@ function MoneyRequestReportGroupHeader({
     const shouldShowCheckbox = isSelectionModeEnabled || !shouldUseNarrowLayout;
 
     const conditionalHeight = useMemo(
-        () => (shouldUseNarrowLayout ? {height: shouldShowCheckbox ? MOBILE_HEIGHT_WITH_CHECKBOX : MOBILE_HEIGHT_WITHOUT_CHECKBOX} : {height: DESKTOP_HEIGHT, minHeight: DESKTOP_HEIGHT}),
+        () => (shouldUseNarrowLayout ? {height: shouldShowCheckbox ? MOBILE_HEIGHT_WITH_CHECKBOX : MOBILE_HEIGHT_WITHOUT_CHECKBOX} : {minHeight: 40}),
         [shouldUseNarrowLayout, shouldShowCheckbox],
     );
 
@@ -91,7 +95,7 @@ function MoneyRequestReportGroupHeader({
 
     return (
         <OfflineWithFeedback pendingAction={pendingAction}>
-            <View style={[styles.reportLayoutGroupHeader, conditionalHeight]}>
+            <View style={[styles.reportLayoutGroupHeader, conditionalHeight, isLargeScreenWidth && {borderBottomWidth: 1, borderColor: theme.border}]}>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
                     {shouldShowCheckbox && (
                         <Checkbox

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -66,6 +66,9 @@ type MoneyRequestReportTransactionItemProps = {
 
     /** Whether this transaction should be highlighted as newly added */
     shouldBeHighlighted: boolean;
+
+    /** Whether this is the last item in the list (used for bottom border radius) */
+    isLastItem?: boolean;
 };
 
 function MoneyRequestReportTransactionItem({
@@ -84,11 +87,12 @@ function MoneyRequestReportTransactionItem({
     scrollToNewTransaction,
     onArrowRightPress,
     shouldBeHighlighted,
+    isLastItem,
 }: MoneyRequestReportTransactionItemProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
+    const {isSmallScreenWidth, isMediumScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
     const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
     const theme = useTheme();
     const isPendingDelete = isTransactionPendingDelete(transaction);
@@ -127,7 +131,10 @@ function MoneyRequestReportTransactionItem({
                 role={getButtonRole(true)}
                 isNested
                 id={transaction.transactionID}
-                style={[styles.transactionListItemStyle]}
+                style={[
+                    styles.transactionListItemStyle,
+                    isLargeScreenWidth && {minHeight: variables.tableRowHeight, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})},
+                ]}
                 hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                 onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
@@ -137,7 +144,12 @@ function MoneyRequestReportTransactionItem({
                 }}
                 disabled={isTransactionPendingDelete(transaction)}
                 ref={viewRef}
-                wrapperStyle={[animatedHighlightStyle, styles.userSelectNone]}
+                wrapperStyle={[
+                    animatedHighlightStyle,
+                    styles.userSelectNone,
+                    isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border},
+                    isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8},
+                ]}
             >
                 {({hovered}) => (
                     <TransactionItemRow
@@ -155,7 +167,12 @@ function MoneyRequestReportTransactionItem({
                         onCheckboxPress={toggleTransaction}
                         columns={columns}
                         isDisabled={isPendingDelete}
-                        style={[styles.p3]}
+                        style={[
+                            styles.p3,
+                            isLargeScreenWidth && styles.pv2,
+                            isLargeScreenWidth && styles.noBorderRadius,
+                            isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8},
+                        ]}
                         onButtonPress={() => {
                             handleOnPress(transaction.transactionID);
                         }}

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -30,7 +30,7 @@ import useOnyx from '@hooks/useOnyx';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
-import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
@@ -59,7 +59,6 @@ import {getAmount, getCategory, getCreated, getMerchant, getTag, getTransactionP
 import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear';
 import Navigation from '@navigation/Navigation';
 import type {ReportsSplitNavigatorParamList} from '@navigation/types';
-import variables from '@styles/variables';
 import {createTransactionThreadReport} from '@userActions/Report';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
@@ -165,11 +164,11 @@ function MoneyRequestReportTransactionList({
 }: MoneyRequestReportTransactionListProps) {
     useCopySelectionHelper();
     const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
+    const theme = useTheme();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Location', 'CheckSquare', 'ReceiptPlus', 'Columns']);
     const {translate, localeCompare} = useLocalize();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
+    const {isSmallScreenWidth, isMediumScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
     const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
     const {markReportIDAsExpense} = useWideRHPActions();
     const [isModalVisible, setIsModalVisible] = useState(false);
@@ -528,22 +527,23 @@ function MoneyRequestReportTransactionList({
 
     const transactionListContent = (
         <View
-            style={[listHorizontalPadding, styles.gap2, styles.pb4, styles.mb2]}
+            style={[listHorizontalPadding, !isLargeScreenWidth && styles.gap2]}
             onLayout={onLayout}
         >
             {shouldShowGroupedTransactions
-                ? groupedTransactions.map((group) => {
+                ? groupedTransactions.map((group, groupIndex) => {
                       const selectionState = groupSelectionState.get(group.groupKey) ?? {
                           isSelected: false,
                           isIndeterminate: false,
                           isDisabled: false,
                           pendingAction: undefined,
                       };
+                      const isLastGroup = groupIndex === groupedTransactions.length - 1;
 
                       return (
                           <View
                               key={group.groupKey}
-                              style={styles.gap2}
+                              style={!isLargeScreenWidth ? styles.gap2 : undefined}
                           >
                               <MoneyRequestReportGroupHeader
                                   group={group}
@@ -557,7 +557,7 @@ function MoneyRequestReportTransactionList({
                                   onToggleSelection={toggleGroupSelection}
                                   pendingAction={selectionState.pendingAction}
                               />
-                              {group.transactions.map((transaction) => {
+                              {group.transactions.map((transaction, transactionIndex) => {
                                   return (
                                       <MoneyRequestReportTransactionItem
                                           key={transaction.transactionID}
@@ -576,13 +576,14 @@ function MoneyRequestReportTransactionList({
                                           taxAmountColumnSize={taxAmountColumnSize}
                                           scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
                                           onArrowRightPress={handleArrowRightPress}
+                                          isLastItem={isLastGroup && transactionIndex === group.transactions.length - 1}
                                       />
                                   );
                               })}
                           </View>
                       );
                   })
-                : sortedTransactions.map((transaction) => (
+                : sortedTransactions.map((transaction, index) => (
                       <MoneyRequestReportTransactionItem
                           key={transaction.transactionID}
                           transaction={transaction}
@@ -600,15 +601,30 @@ function MoneyRequestReportTransactionList({
                           taxAmountColumnSize={taxAmountColumnSize}
                           scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
                           onArrowRightPress={handleArrowRightPress}
+                          isLastItem={index === sortedTransactions.length - 1}
                       />
                   ))}
         </View>
     );
 
     const tableHeaderContent = (
         <OfflineWithFeedback pendingAction={reportPendingAction}>
-            <View style={[styles.dFlex, styles.flexRow, styles.pl5, styles.pr16, styles.alignItemsCenter]}>
-                <View style={[styles.dFlex, styles.flexRow, styles.pv2, styles.pr4, StyleUtils.getPaddingLeft(variables.w12)]}>
+            <View
+                style={[
+                    styles.dFlex,
+                    styles.flexRow,
+                    styles.mh5,
+                    styles.pv2,
+                    styles.pl3,
+                    styles.pr11,
+                    styles.mnh40,
+                    styles.alignItemsCenter,
+                    styles.gap3,
+                    styles.highlightBG,
+                    {borderTopLeftRadius: 8, borderTopRightRadius: 8, borderBottomWidth: 1, borderColor: theme.border},
+                ]}
+            >
+                <View style={[styles.dFlex, styles.flexRow]}>
                     <Checkbox
                         onPress={() => {
                             if (selectedTransactionIDs.length !== 0) {

src/components/ReportActionAvatars/SearchReportAvatar.tsx

@@ -24,7 +24,7 @@ function SearchReportAvatar({primaryAvatar, secondaryAvatar, avatarType, shouldS
             <ReportActionAvatar.Subscript
                 primaryAvatar={primaryAvatar}
                 secondaryAvatar={secondaryAvatar}
-                size={CONST.AVATAR_SIZE.DEFAULT}
+                size={CONST.AVATAR_SIZE.SMALL}
                 shouldShowTooltip={shouldShowTooltip}
                 noRightMarginOnContainer={false}
                 subscriptAvatarBorderColor={subscriptAvatarBorderColor}
@@ -37,7 +37,7 @@ function SearchReportAvatar({primaryAvatar, secondaryAvatar, avatarType, shouldS
         return (
             <ReportActionAvatar.Multiple.Diagonal
                 icons={[primaryAvatar, secondaryAvatar]}
-                size={CONST.AVATAR_SIZE.DEFAULT}
+                size={CONST.AVATAR_SIZE.SMALL}
                 shouldShowTooltip={shouldShowTooltip}
                 isInReportAction={false}
                 useMidSubscriptSize={false}
@@ -49,7 +49,7 @@ function SearchReportAvatar({primaryAvatar, secondaryAvatar, avatarType, shouldS
     return (
         <ReportActionAvatar.Single
             avatar={primaryAvatar}
-            size={CONST.AVATAR_SIZE.DEFAULT}
+            size={CONST.AVATAR_SIZE.SMALL}
             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={CONST.AVATAR_SIZE.SMALL}
                 customDisplayNameStyle={styles.fontWeightNormal}
                 parentNavigationSubtitleTextStyles={[styles.textLineHeightNormal, styles.minHeight4, styles.mt1, !isLargeScreenWidth && styles.textMicro]}
                 parentNavigationStatusContainerStyles={statusContainerStyle}