Update held transactions styles

src/components/MoneyReportHeader.tsx

@@ -18,8 +18,8 @@ import * as IOU from '@userActions/IOU';
 import * as TransactionActions from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import type {Route} from '@src/ROUTES';
+import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -30,8 +30,8 @@ import HeaderWithBackButton from './HeaderWithBackButton';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar';
-import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
 import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar';
+import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
 import type {ActionHandledType} from './ProcessMoneyReportHoldMenu';
 import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu';
 import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu';
@@ -197,13 +197,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
 
     const getStatusBarProps: () => MoneyRequestHeaderStatusBarProps | undefined = () => {
         if (hasOnlyHeldExpenses) {
-            return {title: translate('violations.hold'), description: translate('iou.expensesOnHold'), danger: true};
+            return {icon: getStatusIcon(Expensicons.Stopwatch), description: translate('iou.expensesOnHold')};
         }
         if (allHavePendingRTERViolation) {
-            return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
+            return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
         }
         if (hasScanningReceipt) {
-            return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
+            return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
         }
     };
 
@@ -364,9 +364,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                     {shouldShowNextStep && <MoneyReportHeaderStatusBar nextStep={nextStep} />}
                     {statusBarProps && (
                         <MoneyRequestHeaderStatusBar
-                            title={statusBarProps.title}
+                            icon={statusBarProps.icon}
                             description={statusBarProps.description}
-                            danger={statusBarProps.danger}
                         />
                     )}
                 </View>

src/components/MoneyRequestHeader.tsx

@@ -1,8 +1,8 @@
 import type {ReactNode} from 'react';
 import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -80,17 +80,17 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
 
     const getStatusBarProps: () => MoneyRequestHeaderStatusBarProps | undefined = () => {
         if (isOnHold) {
-            return {title: translate('violations.hold'), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold'), danger: true};
+            return {icon: getStatusIcon(Expensicons.Stopwatch), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold')};
         }
 
         if (TransactionUtils.isExpensifyCardTransaction(transaction) && TransactionUtils.isPending(transaction)) {
-            return {title: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription')};
+            return {icon: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription')};
         }
         if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '-1', transactionViolations))) {
-            return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
+            return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
         }
         if (isScanning) {
-            return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
+            return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
         }
     };
 
@@ -185,9 +185,8 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
                 {statusBarProps && (
                     <View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
                         <MoneyRequestHeaderStatusBar
-                            title={statusBarProps.title}
+                            icon={statusBarProps.icon}
                             description={statusBarProps.description}
-                            danger={statusBarProps.danger}
                         />
                     </View>
                 )}

src/components/MoneyRequestHeaderStatusBar.tsx

@@ -2,38 +2,24 @@ import type {ReactNode} from 'react';
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Badge from './Badge';
 import Text from './Text';
 
 type MoneyRequestHeaderStatusBarProps = {
-    /** Title displayed in badge */
-    title: string | ReactNode;
+    /** Icon displayed in badge */
+    icon: ReactNode;
 
     /** Banner Description */
     description: string;
 
-    /** Whether we should use the danger theme color */
-    danger?: boolean;
-
     /** Whether we style flex grow */
     shouldStyleFlexGrow?: boolean;
 };
 
-function MoneyRequestHeaderStatusBar({title, description, danger = false, shouldStyleFlexGrow = true}: MoneyRequestHeaderStatusBarProps) {
+function MoneyRequestHeaderStatusBar({icon, description, shouldStyleFlexGrow = true}: MoneyRequestHeaderStatusBarProps) {
     const styles = useThemeStyles();
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, shouldStyleFlexGrow && styles.flexGrow1, styles.overflowHidden, styles.headerStatusBarContainer]}>
-            {typeof title === 'string' ? (
-                <View style={[styles.mr3]}>
-                    <Badge
-                        text={title}
-                        badgeStyles={styles.ml0}
-                        error={danger}
-                    />
-                </View>
-            ) : (
-                <View style={styles.mr2}>{title}</View>
-            )}
+            <View style={styles.mr2}>{icon}</View>
             <View style={[styles.flexShrink1]}>
                 <Text style={[styles.textLabelSupporting]}>{description}</Text>
             </View>

src/pages/iou/SplitBillDetailsPage.tsx

@@ -107,7 +107,7 @@ function SplitBillDetailsPage({personalDetails, report, route, reportActions, tr
                     {isScanning && (
                         <View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
                             <MoneyRequestHeaderStatusBar
-                                title={
+                                icon={
                                     <Icon
                                         src={Expensicons.ReceiptScan}
                                         height={variables.iconSizeSmall}

src/styles/index.ts

@@ -4716,7 +4716,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         headerStatusBarContainer: {
-            minHeight: variables.componentSizeNormal,
+            minHeight: variables.componentSizeSmall,
         },
 
         walletIllustration: {