From 25f4d94cda0c60240382a9f37a03bdecff1eab49 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 9 Feb 2024 10:59:37 -0800
Subject: [PATCH 01/16] Fix text styling/gaps on
 ReportPreview/MoneyRequestPreview

---
 .../ReportActionItem/MoneyRequestPreview.tsx  | 128 +++++++++---------
 .../ReportActionItem/ReportPreview.tsx        | 124 +++++++++--------
 src/styles/index.ts                           |  17 ++-
 3 files changed, 147 insertions(+), 122 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.tsx b/src/components/ReportActionItem/MoneyRequestPreview.tsx
index e89193108d24..2aa2c0047d64 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview.tsx
@@ -275,70 +275,76 @@ function MoneyRequestPreview({
                     {isEmptyObject(transaction) && !ReportActionsUtils.isMessageDeleted(action) && action.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ? (
                         <MoneyRequestSkeletonView />
                     ) : (
-                        <View style={styles.moneyRequestPreviewBoxText}>
-                            <View style={[styles.flexRow]}>
-                                <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh20, styles.mb1]}>
-                                    {getPreviewHeaderText() + (isSettled && !iouReport?.isCancelledIOU ? ` • ${getSettledMessage()}` : '')}
-                                </Text>
-                                {!isSettled && hasFieldErrors && (
-                                    <Icon
-                                        src={Expensicons.DotIndicator}
-                                        fill={theme.danger}
-                                    />
-                                )}
-                            </View>
-                            <View style={[styles.flexRow]}>
-                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                    <Text
-                                        style={[
-                                            styles.textHeadline,
-                                            isBillSplit && StyleUtils.getAmountFontSizeAndLineHeight(isSmallScreenWidth, windowWidth, displayAmount.length, sortedParticipantAvatars.length),
-                                            isDeleted && styles.lineThrough,
-                                        ]}
-                                        numberOfLines={1}
-                                    >
-                                        {displayAmount}
-                                    </Text>
-                                    {ReportUtils.isSettled(iouReport?.reportID) && !isBillSplit && (
-                                        <View style={styles.defaultCheckmarkWrapper}>
-                                            <Icon
-                                                src={Expensicons.Checkmark}
-                                                fill={theme.iconSuccessFill}
-                                            />
+                        <View style={styles.expenseAndReportPreviewBoxBody}>
+                            <View style={styles.expenseAndReportPreviewTextButtonContainer}>
+                                <View style={styles.expenseAndReportPreviewTextContainer}>
+                                        <View style={[styles.flexRow]}>
+                                            <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16]}>
+                                                {getPreviewHeaderText() + (isSettled && !iouReport?.isCancelledIOU ? ` • ${getSettledMessage()}` : '')}
+                                            </Text>
+                                            {!isSettled && hasFieldErrors && (
+                                                <Icon
+                                                    src={Expensicons.DotIndicator}
+                                                    fill={theme.danger}
+                                                />
+                                            )}
+                                        </View>
+                                        <View style={styles.reportPreviewAmountSubtitleContainer}>
+                                                <View style={[styles.flexRow]}>
+                                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                                        <Text
+                                                            style={[
+                                                                styles.textHeadline,
+                                                                isBillSplit && StyleUtils.getAmountFontSizeAndLineHeight(isSmallScreenWidth, windowWidth, displayAmount.length, sortedParticipantAvatars.length),
+                                                                isDeleted && styles.lineThrough,
+                                                            ]}
+                                                            numberOfLines={1}
+                                                        >
+                                                            {displayAmount}
+                                                        </Text>
+                                                        {ReportUtils.isSettled(iouReport?.reportID) && !isBillSplit && (
+                                                            <View style={styles.defaultCheckmarkWrapper}>
+                                                                <Icon
+                                                                    src={Expensicons.Checkmark}
+                                                                    fill={theme.iconSuccessFill}
+                                                                />
+                                                            </View>
+                                                        )}
+                                                    </View>
+                                                    {isBillSplit && (
+                                                        <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                                            <MultipleAvatars
+                                                                icons={sortedParticipantAvatars}
+                                                                shouldStackHorizontally
+                                                                size="small"
+                                                                isHovered={isHovered}
+                                                                shouldUseCardBackground
+                                                            />
+                                                        </View>
+                                                    )}
+                                                </View>
+                                                <View style={[styles.flexRow, styles.mt1]}>
+                                                    <View style={[styles.flex1]}>
+                                                        {!isCurrentUserManager && shouldShowPendingConversionMessage && (
+                                                            <Text style={[styles.textLabel, styles.colorMuted]}>{translate('iou.pendingConversionMessage')}</Text>
+                                                        )}
+                                                        {shouldShowDescription && <RenderHTML html={parser.replace(merchantOrDescription)} />}
+                                                        {shouldShowMerchant && <Text style={[styles.textLabelSupporting, styles.textNormal]}>{merchantOrDescription}</Text>}
+                                                    </View>
+                                                    {isBillSplit && participantAccountIDs.length > 0 && !!requestAmount && requestAmount > 0 && (
+                                                        <Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>
+                                                            {translate('iou.amountEach', {
+                                                                amount: CurrencyUtils.convertToDisplayString(
+                                                                    IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency ?? ''),
+                                                                    requestCurrency,
+                                                                ),
+                                                            })}
+                                                        </Text>
+                                                    )}
+                                                </View>
                                         </View>
-                                    )}
-                                </View>
-                                {isBillSplit && (
-                                    <View style={styles.moneyRequestPreviewBoxAvatar}>
-                                        <MultipleAvatars
-                                            icons={sortedParticipantAvatars}
-                                            shouldStackHorizontally
-                                            size="small"
-                                            isHovered={isHovered}
-                                            shouldUseCardBackground
-                                        />
                                     </View>
-                                )}
-                            </View>
-                            <View style={[styles.flexRow, styles.mt1]}>
-                                <View style={[styles.flex1]}>
-                                    {!isCurrentUserManager && shouldShowPendingConversionMessage && (
-                                        <Text style={[styles.textLabel, styles.colorMuted]}>{translate('iou.pendingConversionMessage')}</Text>
-                                    )}
-                                    {shouldShowDescription && <RenderHTML html={parser.replace(merchantOrDescription)} />}
-                                    {shouldShowMerchant && <Text style={[styles.textLabelSupporting, styles.textNormal]}>{merchantOrDescription}</Text>}
                                 </View>
-                                {isBillSplit && participantAccountIDs.length > 0 && !!requestAmount && requestAmount > 0 && (
-                                    <Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>
-                                        {translate('iou.amountEach', {
-                                            amount: CurrencyUtils.convertToDisplayString(
-                                                IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency ?? ''),
-                                                requestCurrency,
-                                            ),
-                                        })}
-                                    </Text>
-                                )}
-                            </View>
                         </View>
                     )}
                 </View>
diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 4066776711b1..caa443dba2e9 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -269,70 +269,76 @@ function ReportPreview({
                                 size={CONST.RECEIPT.MAX_REPORT_PREVIEW_RECEIPTS}
                             />
                         )}
-                        <View style={styles.reportPreviewBoxBody}>
-                            <View style={styles.flexRow}>
-                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                    <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewMessage()}</Text>
-                                </View>
-                                {!iouSettled && hasErrors && (
-                                    <Icon
-                                        src={Expensicons.DotIndicator}
-                                        fill={theme.danger}
-                                    />
-                                )}
-                            </View>
-                            <View style={styles.flexRow}>
-                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                    <Text style={styles.textHeadline}>{getDisplayAmount()}</Text>
-                                    {ReportUtils.isSettled(iouReportID) && (
-                                        <View style={styles.defaultCheckmarkWrapper}>
+                        <View style={[styles.expenseAndReportPreviewBoxBody]}>
+                            <View style={styles.expenseAndReportPreviewTextButtonContainer}>
+                                <View style={styles.expenseAndReportPreviewTextContainer}>
+                                    <View style={styles.flexRow}>
+                                        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                            <Text style={[styles.textLabelSupporting, styles.lh16]}>{getPreviewMessage()}</Text>
+                                        </View>
+                                        {!iouSettled && hasErrors && (
                                             <Icon
-                                                src={Expensicons.Checkmark}
-                                                fill={theme.iconSuccessFill}
+                                                src={Expensicons.DotIndicator}
+                                                fill={theme.danger}
                                             />
+                                        )}
+                                    </View>
+                                    <View style={styles.reportPreviewAmountSubtitleContainer}>
+                                        <View style={styles.flexRow}>
+                                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                                <Text style={styles.textHeadline}>{getDisplayAmount()}</Text>
+                                                {ReportUtils.isSettled(iouReportID) && (
+                                                    <View style={styles.defaultCheckmarkWrapper}>
+                                                        <Icon
+                                                            src={Expensicons.Checkmark}
+                                                            fill={theme.iconSuccessFill}
+                                                        />
+                                                    </View>
+                                                )}
+                                            </View>
+                                        </View>
+                                        {shouldShowSubtitle && (
+                                            <View style={styles.flexRow}>
+                                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                                    <Text style={[styles.textLabelSupporting, styles.textNormal, styles.mb1, styles.lh20]}>{previewSubtitle || moneyRequestComment}</Text>
+                                                </View>
+                                            </View>
+                                        )}
                                         </View>
+                                    </View> 
+                                    {shouldShowSettlementButton && (
+                                        <SettlementButton
+                                            currency={iouReport?.currency}
+                                            policyID={policyID}
+                                            chatReportID={chatReportID}
+                                            iouReport={iouReport}
+                                            onPress={(paymentType?: PaymentMethodType) => chatReport && iouReport && paymentType && IOU.payMoneyRequest(paymentType, chatReport, iouReport)}
+                                            enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+                                            addBankAccountRoute={bankAccountRoute}
+                                            shouldHidePaymentOptions={!shouldShowPayButton}
+                                            shouldShowApproveButton={shouldShowApproveButton}
+                                            style={[styles.mt3]}
+                                            kycWallAnchorAlignment={{
+                                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                                            }}
+                                            paymentMethodDropdownAnchorAlignment={{
+                                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                                            }}
+                                            isDisabled={!canAllowSettlement}
+                                        />
+                                    )}
+                                    {shouldShowSubmitButton && (
+                                        <Button
+                                            medium
+                                            success={isWaitingForSubmissionFromCurrentUser}
+                                            text={translate('common.submit')}
+                                            style={styles.mt3}
+                                            onPress={() => iouReport && IOU.submitReport(iouReport)}
+                                        />
                                     )}
                                 </View>
-                            </View>
-                            {shouldShowSubtitle && (
-                                <View style={styles.flexRow}>
-                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                        <Text style={[styles.textLabelSupporting, styles.textNormal, styles.mb1, styles.lh20]}>{previewSubtitle || moneyRequestComment}</Text>
-                                    </View>
-                                </View>
-                            )}
-                            {shouldShowSettlementButton && (
-                                <SettlementButton
-                                    currency={iouReport?.currency}
-                                    policyID={policyID}
-                                    chatReportID={chatReportID}
-                                    iouReport={iouReport}
-                                    onPress={(paymentType?: PaymentMethodType) => chatReport && iouReport && paymentType && IOU.payMoneyRequest(paymentType, chatReport, iouReport)}
-                                    enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
-                                    addBankAccountRoute={bankAccountRoute}
-                                    shouldHidePaymentOptions={!shouldShowPayButton}
-                                    shouldShowApproveButton={shouldShowApproveButton}
-                                    style={[styles.mt3]}
-                                    kycWallAnchorAlignment={{
-                                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-                                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                                    }}
-                                    paymentMethodDropdownAnchorAlignment={{
-                                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                                    }}
-                                    isDisabled={!canAllowSettlement}
-                                />
-                            )}
-                            {shouldShowSubmitButton && (
-                                <Button
-                                    medium
-                                    success={isWaitingForSubmissionFromCurrentUser}
-                                    text={translate('common.submit')}
-                                    style={styles.mt3}
-                                    onPress={() => iouReport && IOU.submitReport(iouReport)}
-                                />
-                            )}
                         </View>
                     </View>
                 </PressableWithoutFeedback>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index d1c7b5a5d8d7..56b610417e6d 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3961,14 +3961,27 @@ const styles = (theme: ThemeColors) =>
             borderRadius: variables.componentBorderRadiusLarge,
         },
 
-        reportPreviewBoxBody: {
+        expenseAndReportPreviewBoxBody: {
             padding: 16,
+            marginTop: -4,
+        },
+
+        expenseAndReportPreviewTextContainer: {
+            gap: 8,
+        },
+
+        reportPreviewAmountSubtitleContainer: {
+            gap: 4,
+        },
+
+        expenseAndReportPreviewTextButtonContainer: {
+            gap: 16,
         },
 
         reportActionItemImages: {
             flexDirection: 'row',
             margin: 4,
-            borderRadius: variables.componentBorderRadiusLarge,
+            borderRadius: 12,
             overflow: 'hidden',
             height: variables.reportActionImagesSingleImageHeight,
         },

From 96197e0799c4a70bdf2522b86ef24e029bff601b Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 9 Feb 2024 11:04:38 -0800
Subject: [PATCH 02/16] remove corner hover styling for reportPreviews with 3+
 receipts

---
 src/components/ReportActionItem/ReportPreview.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index caa443dba2e9..7190f4805754 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -265,7 +265,6 @@ function ReportPreview({
                             <ReportActionItemImages
                                 images={lastThreeReceipts}
                                 total={transactionsWithReceipts.length}
-                                isHovered={isHovered || isScanning}
                                 size={CONST.RECEIPT.MAX_REPORT_PREVIEW_RECEIPTS}
                             />
                         )}

From 8c5d3829c98acbe989bcf33a651800d5d3b4b6a8 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 9 Feb 2024 11:14:38 -0800
Subject: [PATCH 03/16] add {# requests, # scanning, #pending} pattern

---
 src/components/ReportActionItem/ReportPreview.tsx | 4 +++-
 src/languages/en.ts                               | 4 ++--
 src/languages/es.ts                               | 4 ++--
 src/languages/types.ts                            | 1 +
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 7190f4805754..851b9449e81f 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -136,6 +136,7 @@ function ReportPreview({
     const isMoneyRequestReport = ReportUtils.isMoneyRequestReport(iouReport);
     const transactionsWithReceipts = ReportUtils.getTransactionsWithReceipts(iouReportID);
     const numberOfScanningReceipts = transactionsWithReceipts.filter((transaction) => TransactionUtils.isReceiptBeingScanned(transaction)).length;
+    const numberOfPendingReceipts = transactionsWithReceipts.filter((transaction) => TransactionUtils.isPending(transaction) && TransactionUtils.isCardTransaction(transaction)).length;
 
     const hasReceipts = transactionsWithReceipts.length > 0;
     const isScanning = hasReceipts && areAllRequestsBeingSmartScanned;
@@ -152,8 +153,9 @@ function ReportPreview({
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         formattedMerchant ||
         translate('iou.requestCount', {
-            count: numberOfRequests - numberOfScanningReceipts,
+            count: numberOfRequests - numberOfScanningReceipts - numberOfPendingReceipts,
             scanningReceipts: numberOfScanningReceipts,
+            pendingReceipts: numberOfPendingReceipts,
         });
 
     const shouldShowSubmitButton = isDraftExpenseReport && reimbursableSpend !== 0;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index cd1797d78220..8e09d778995d 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -593,8 +593,8 @@ export default {
         receiptStatusText: "Only you can see this receipt when it's scanning. Check back later or enter the details now.",
         receiptScanningFailed: 'Receipt scanning failed. Enter the details manually.',
         transactionPendingText: 'It takes a few days from the date the card was used for the transaction to post.',
-        requestCount: ({count, scanningReceipts = 0}: RequestCountParams) =>
-            `${count} ${Str.pluralize('request', 'requests', count)}${scanningReceipts > 0 ? `, ${scanningReceipts} scanning` : ''}`,
+        requestCount: ({count, scanningReceipts = 0, pendingReceipts = 0}: RequestCountParams) =>
+            `${count} ${Str.pluralize('request', 'requests', count)}${scanningReceipts > 0 ? `, ${scanningReceipts} scanning` : ''}${pendingReceipts > 0 ? `, ${pendingReceipts} pending` : ''}`,
         deleteRequest: 'Delete request',
         deleteConfirmation: 'Are you sure that you want to delete this request?',
         settledExpensify: 'Paid',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index f61abda6cd4d..10719ff51d78 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -585,8 +585,8 @@ export default {
         receiptStatusText: 'Solo tú puedes ver este recibo cuando se está escaneando. Vuelve más tarde o introduce los detalles ahora.',
         receiptScanningFailed: 'El escaneo de recibo ha fallado. Introduce los detalles manualmente.',
         transactionPendingText: 'La transacción tarda unos días en contabilizarse desde la fecha en que se utilizó la tarjeta.',
-        requestCount: ({count, scanningReceipts = 0}: RequestCountParams) =>
-            `${count} ${Str.pluralize('solicitude', 'solicitudes', count)}${scanningReceipts > 0 ? `, ${scanningReceipts} escaneando` : ''}`,
+        requestCount: ({count, scanningReceipts = 0, pendingReceipts = 0}: RequestCountParams) =>
+            `${count} ${Str.pluralize('solicitude', 'solicitudes', count)}${scanningReceipts > 0 ? `, ${scanningReceipts} escaneando` : ''}${pendingReceipts > 0 ? `, ${pendingReceipts} pendiente` : ''}`,
         deleteRequest: 'Eliminar solicitud',
         deleteConfirmation: '¿Estás seguro de que quieres eliminar esta solicitud?',
         settledExpensify: 'Pagado',
diff --git a/src/languages/types.ts b/src/languages/types.ts
index c9442c6560a3..fdcd3b813991 100644
--- a/src/languages/types.ts
+++ b/src/languages/types.ts
@@ -99,6 +99,7 @@ type ReportArchiveReasonsPolicyDeletedParams = {
 type RequestCountParams = {
     count: number;
     scanningReceipts: number;
+    pendingReceipts: number;
 };
 
 type SettleExpensifyCardParams = {

From 5cc0c0b85092504039e78051bff23142e73ab7cc Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 9 Feb 2024 11:21:49 -0800
Subject: [PATCH 04/16] prettier

---
 .../ReportActionItem/MoneyRequestPreview.tsx  | 123 +++++++++---------
 .../ReportActionItem/ReportPreview.tsx        |  68 +++++-----
 src/languages/en.ts                           |   4 +-
 src/languages/es.ts                           |   4 +-
 4 files changed, 102 insertions(+), 97 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.tsx b/src/components/ReportActionItem/MoneyRequestPreview.tsx
index 2aa2c0047d64..9c3de596c77a 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview.tsx
@@ -278,73 +278,74 @@ function MoneyRequestPreview({
                         <View style={styles.expenseAndReportPreviewBoxBody}>
                             <View style={styles.expenseAndReportPreviewTextButtonContainer}>
                                 <View style={styles.expenseAndReportPreviewTextContainer}>
+                                    <View style={[styles.flexRow]}>
+                                        <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16]}>
+                                            {getPreviewHeaderText() + (isSettled && !iouReport?.isCancelledIOU ? ` • ${getSettledMessage()}` : '')}
+                                        </Text>
+                                        {!isSettled && hasFieldErrors && (
+                                            <Icon
+                                                src={Expensicons.DotIndicator}
+                                                fill={theme.danger}
+                                            />
+                                        )}
+                                    </View>
+                                    <View style={styles.reportPreviewAmountSubtitleContainer}>
                                         <View style={[styles.flexRow]}>
-                                            <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16]}>
-                                                {getPreviewHeaderText() + (isSettled && !iouReport?.isCancelledIOU ? ` • ${getSettledMessage()}` : '')}
-                                            </Text>
-                                            {!isSettled && hasFieldErrors && (
-                                                <Icon
-                                                    src={Expensicons.DotIndicator}
-                                                    fill={theme.danger}
-                                                />
-                                            )}
-                                        </View>
-                                        <View style={styles.reportPreviewAmountSubtitleContainer}>
-                                                <View style={[styles.flexRow]}>
-                                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                                        <Text
-                                                            style={[
-                                                                styles.textHeadline,
-                                                                isBillSplit && StyleUtils.getAmountFontSizeAndLineHeight(isSmallScreenWidth, windowWidth, displayAmount.length, sortedParticipantAvatars.length),
-                                                                isDeleted && styles.lineThrough,
-                                                            ]}
-                                                            numberOfLines={1}
-                                                        >
-                                                            {displayAmount}
-                                                        </Text>
-                                                        {ReportUtils.isSettled(iouReport?.reportID) && !isBillSplit && (
-                                                            <View style={styles.defaultCheckmarkWrapper}>
-                                                                <Icon
-                                                                    src={Expensicons.Checkmark}
-                                                                    fill={theme.iconSuccessFill}
-                                                                />
-                                                            </View>
-                                                        )}
-                                                    </View>
-                                                    {isBillSplit && (
-                                                        <View style={styles.moneyRequestPreviewBoxAvatar}>
-                                                            <MultipleAvatars
-                                                                icons={sortedParticipantAvatars}
-                                                                shouldStackHorizontally
-                                                                size="small"
-                                                                isHovered={isHovered}
-                                                                shouldUseCardBackground
-                                                            />
-                                                        </View>
-                                                    )}
-                                                </View>
-                                                <View style={[styles.flexRow, styles.mt1]}>
-                                                    <View style={[styles.flex1]}>
-                                                        {!isCurrentUserManager && shouldShowPendingConversionMessage && (
-                                                            <Text style={[styles.textLabel, styles.colorMuted]}>{translate('iou.pendingConversionMessage')}</Text>
-                                                        )}
-                                                        {shouldShowDescription && <RenderHTML html={parser.replace(merchantOrDescription)} />}
-                                                        {shouldShowMerchant && <Text style={[styles.textLabelSupporting, styles.textNormal]}>{merchantOrDescription}</Text>}
+                                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                                <Text
+                                                    style={[
+                                                        styles.textHeadline,
+                                                        isBillSplit &&
+                                                            StyleUtils.getAmountFontSizeAndLineHeight(isSmallScreenWidth, windowWidth, displayAmount.length, sortedParticipantAvatars.length),
+                                                        isDeleted && styles.lineThrough,
+                                                    ]}
+                                                    numberOfLines={1}
+                                                >
+                                                    {displayAmount}
+                                                </Text>
+                                                {ReportUtils.isSettled(iouReport?.reportID) && !isBillSplit && (
+                                                    <View style={styles.defaultCheckmarkWrapper}>
+                                                        <Icon
+                                                            src={Expensicons.Checkmark}
+                                                            fill={theme.iconSuccessFill}
+                                                        />
                                                     </View>
-                                                    {isBillSplit && participantAccountIDs.length > 0 && !!requestAmount && requestAmount > 0 && (
-                                                        <Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>
-                                                            {translate('iou.amountEach', {
-                                                                amount: CurrencyUtils.convertToDisplayString(
-                                                                    IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency ?? ''),
-                                                                    requestCurrency,
-                                                                ),
-                                                            })}
-                                                        </Text>
-                                                    )}
+                                                )}
+                                            </View>
+                                            {isBillSplit && (
+                                                <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                                    <MultipleAvatars
+                                                        icons={sortedParticipantAvatars}
+                                                        shouldStackHorizontally
+                                                        size="small"
+                                                        isHovered={isHovered}
+                                                        shouldUseCardBackground
+                                                    />
                                                 </View>
+                                            )}
+                                        </View>
+                                        <View style={[styles.flexRow, styles.mt1]}>
+                                            <View style={[styles.flex1]}>
+                                                {!isCurrentUserManager && shouldShowPendingConversionMessage && (
+                                                    <Text style={[styles.textLabel, styles.colorMuted]}>{translate('iou.pendingConversionMessage')}</Text>
+                                                )}
+                                                {shouldShowDescription && <RenderHTML html={parser.replace(merchantOrDescription)} />}
+                                                {shouldShowMerchant && <Text style={[styles.textLabelSupporting, styles.textNormal]}>{merchantOrDescription}</Text>}
+                                            </View>
+                                            {isBillSplit && participantAccountIDs.length > 0 && !!requestAmount && requestAmount > 0 && (
+                                                <Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>
+                                                    {translate('iou.amountEach', {
+                                                        amount: CurrencyUtils.convertToDisplayString(
+                                                            IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency ?? ''),
+                                                            requestCurrency,
+                                                        ),
+                                                    })}
+                                                </Text>
+                                            )}
                                         </View>
                                     </View>
                                 </View>
+                            </View>
                         </View>
                     )}
                 </View>
diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 851b9449e81f..9f5988499f7f 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -305,41 +305,41 @@ function ReportPreview({
                                                 </View>
                                             </View>
                                         )}
-                                        </View>
-                                    </View> 
-                                    {shouldShowSettlementButton && (
-                                        <SettlementButton
-                                            currency={iouReport?.currency}
-                                            policyID={policyID}
-                                            chatReportID={chatReportID}
-                                            iouReport={iouReport}
-                                            onPress={(paymentType?: PaymentMethodType) => chatReport && iouReport && paymentType && IOU.payMoneyRequest(paymentType, chatReport, iouReport)}
-                                            enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
-                                            addBankAccountRoute={bankAccountRoute}
-                                            shouldHidePaymentOptions={!shouldShowPayButton}
-                                            shouldShowApproveButton={shouldShowApproveButton}
-                                            style={[styles.mt3]}
-                                            kycWallAnchorAlignment={{
-                                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-                                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                                            }}
-                                            paymentMethodDropdownAnchorAlignment={{
-                                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                                            }}
-                                            isDisabled={!canAllowSettlement}
-                                        />
-                                    )}
-                                    {shouldShowSubmitButton && (
-                                        <Button
-                                            medium
-                                            success={isWaitingForSubmissionFromCurrentUser}
-                                            text={translate('common.submit')}
-                                            style={styles.mt3}
-                                            onPress={() => iouReport && IOU.submitReport(iouReport)}
-                                        />
-                                    )}
+                                    </View>
                                 </View>
+                                {shouldShowSettlementButton && (
+                                    <SettlementButton
+                                        currency={iouReport?.currency}
+                                        policyID={policyID}
+                                        chatReportID={chatReportID}
+                                        iouReport={iouReport}
+                                        onPress={(paymentType?: PaymentMethodType) => chatReport && iouReport && paymentType && IOU.payMoneyRequest(paymentType, chatReport, iouReport)}
+                                        enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+                                        addBankAccountRoute={bankAccountRoute}
+                                        shouldHidePaymentOptions={!shouldShowPayButton}
+                                        shouldShowApproveButton={shouldShowApproveButton}
+                                        style={[styles.mt3]}
+                                        kycWallAnchorAlignment={{
+                                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                                        }}
+                                        paymentMethodDropdownAnchorAlignment={{
+                                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                                        }}
+                                        isDisabled={!canAllowSettlement}
+                                    />
+                                )}
+                                {shouldShowSubmitButton && (
+                                    <Button
+                                        medium
+                                        success={isWaitingForSubmissionFromCurrentUser}
+                                        text={translate('common.submit')}
+                                        style={styles.mt3}
+                                        onPress={() => iouReport && IOU.submitReport(iouReport)}
+                                    />
+                                )}
+                            </View>
                         </View>
                     </View>
                 </PressableWithoutFeedback>
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 8e09d778995d..26807a6e25fe 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -594,7 +594,9 @@ export default {
         receiptScanningFailed: 'Receipt scanning failed. Enter the details manually.',
         transactionPendingText: 'It takes a few days from the date the card was used for the transaction to post.',
         requestCount: ({count, scanningReceipts = 0, pendingReceipts = 0}: RequestCountParams) =>
-            `${count} ${Str.pluralize('request', 'requests', count)}${scanningReceipts > 0 ? `, ${scanningReceipts} scanning` : ''}${pendingReceipts > 0 ? `, ${pendingReceipts} pending` : ''}`,
+            `${count} ${Str.pluralize('request', 'requests', count)}${scanningReceipts > 0 ? `, ${scanningReceipts} scanning` : ''}${
+                pendingReceipts > 0 ? `, ${pendingReceipts} pending` : ''
+            }`,
         deleteRequest: 'Delete request',
         deleteConfirmation: 'Are you sure that you want to delete this request?',
         settledExpensify: 'Paid',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 10719ff51d78..ed0006e4940b 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -586,7 +586,9 @@ export default {
         receiptScanningFailed: 'El escaneo de recibo ha fallado. Introduce los detalles manualmente.',
         transactionPendingText: 'La transacción tarda unos días en contabilizarse desde la fecha en que se utilizó la tarjeta.',
         requestCount: ({count, scanningReceipts = 0, pendingReceipts = 0}: RequestCountParams) =>
-            `${count} ${Str.pluralize('solicitude', 'solicitudes', count)}${scanningReceipts > 0 ? `, ${scanningReceipts} escaneando` : ''}${pendingReceipts > 0 ? `, ${pendingReceipts} pendiente` : ''}`,
+            `${count} ${Str.pluralize('solicitude', 'solicitudes', count)}${scanningReceipts > 0 ? `, ${scanningReceipts} escaneando` : ''}${
+                pendingReceipts > 0 ? `, ${pendingReceipts} pendiente` : ''
+            }`,
         deleteRequest: 'Eliminar solicitud',
         deleteConfirmation: '¿Estás seguro de que quieres eliminar esta solicitud?',
         settledExpensify: 'Pagado',

From d7c63ea0d78f9e6e2fc97ff9b66144c55af78b52 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 12 Feb 2024 11:25:47 -0800
Subject: [PATCH 05/16] remove button margin top

---
 src/components/ReportActionItem/ReportPreview.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 9f5988499f7f..8a8e61391329 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -318,7 +318,6 @@ function ReportPreview({
                                         addBankAccountRoute={bankAccountRoute}
                                         shouldHidePaymentOptions={!shouldShowPayButton}
                                         shouldShowApproveButton={shouldShowApproveButton}
-                                        style={[styles.mt3]}
                                         kycWallAnchorAlignment={{
                                             horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                                             vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
@@ -335,7 +334,6 @@ function ReportPreview({
                                         medium
                                         success={isWaitingForSubmissionFromCurrentUser}
                                         text={translate('common.submit')}
-                                        style={styles.mt3}
                                         onPress={() => iouReport && IOU.submitReport(iouReport)}
                                     />
                                 )}

From 920c84eb0c9216969875973b93e607eddcbe8eb5 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 12 Feb 2024 11:48:10 -0800
Subject: [PATCH 06/16] remove extra margin top on MoneyRequestPreview

---
 src/components/ReportActionItem/MoneyRequestPreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.tsx b/src/components/ReportActionItem/MoneyRequestPreview.tsx
index 9c3de596c77a..ac805f7534a7 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview.tsx
@@ -324,7 +324,7 @@ function MoneyRequestPreview({
                                                 </View>
                                             )}
                                         </View>
-                                        <View style={[styles.flexRow, styles.mt1]}>
+                                        <View style={[styles.flexRow]}>
                                             <View style={[styles.flex1]}>
                                                 {!isCurrentUserManager && shouldShowPendingConversionMessage && (
                                                     <Text style={[styles.textLabel, styles.colorMuted]}>{translate('iou.pendingConversionMessage')}</Text>

From c3bc9c5b5971b49a8f584af548804abfb403e42a Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 20 Feb 2024 14:30:47 -0800
Subject: [PATCH 07/16] remove split hover

---
 .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
index 052f96a8dea5..43cd4efc9b05 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
@@ -259,7 +259,6 @@ function MoneyRequestPreviewContent({
                                                         icons={sortedParticipantAvatars}
                                                         shouldStackHorizontally
                                                         size="small"
-                                                        isHovered={isHovered}
                                                         shouldUseCardBackground
                                                     />
                                                 </View>

From 209400893c4a88521c6fe27806f601b0861d1cf7 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 21 Feb 2024 11:15:03 -0800
Subject: [PATCH 08/16] fix variable name, refers to pending transactions not
 receipts

---
 src/components/ReportActionItem/ReportPreview.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index fda803e37956..b86e9e9bc537 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -135,7 +135,7 @@ function ReportPreview({
     const isMoneyRequestReport = ReportUtils.isMoneyRequestReport(iouReport);
     const transactionsWithReceipts = ReportUtils.getTransactionsWithReceipts(iouReportID);
     const numberOfScanningReceipts = transactionsWithReceipts.filter((transaction) => TransactionUtils.isReceiptBeingScanned(transaction)).length;
-    const numberOfPendingReceipts = transactionsWithReceipts.filter((transaction) => TransactionUtils.isPending(transaction) && TransactionUtils.isCardTransaction(transaction)).length;
+    const numberOfPendingRequests = transactionsWithReceipts.filter((transaction) => TransactionUtils.isPending(transaction) && TransactionUtils.isCardTransaction(transaction)).length;
 
     const hasReceipts = transactionsWithReceipts.length > 0;
     const isScanning = hasReceipts && areAllRequestsBeingSmartScanned;
@@ -152,9 +152,9 @@ function ReportPreview({
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         formattedMerchant ||
         translate('iou.requestCount', {
-            count: numberOfRequests - numberOfScanningReceipts - numberOfPendingReceipts,
+            count: numberOfRequests - numberOfScanningReceipts - numberOfPendingRequests,
             scanningReceipts: numberOfScanningReceipts,
-            pendingReceipts: numberOfPendingReceipts,
+            pendingReceipts: numberOfPendingRequests,
         });
 
     const shouldShowSubmitButton = isDraftExpenseReport && reimbursableSpend !== 0;

From 31f0c7d4164ef889982f95ff2b9eb917d718c2b6 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 28 Feb 2024 16:40:23 +0000
Subject: [PATCH 09/16] prettier

---
 .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
index abd0ca6df964..f7a510124051 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
@@ -282,10 +282,10 @@ function MoneyRequestPreviewContent({
                                                     <Text style={[styles.textLabel, styles.colorMuted]}>{translate('iou.pendingConversionMessage')}</Text>
                                                 )}
                                                 {shouldShowDescription && (
-                                        <View style={[styles.breakWord, styles.preWrap]}>
-                                            <RenderHTML html={`<muted-text>${parser.replace(merchantOrDescription)}</muted-text>`} />
-                                        </View>
-                                    )}
+                                                    <View style={[styles.breakWord, styles.preWrap]}>
+                                                        <RenderHTML html={`<muted-text>${parser.replace(merchantOrDescription)}</muted-text>`} />
+                                                    </View>
+                                                )}
                                                 {shouldShowMerchant && <Text style={[styles.textLabelSupporting, styles.textNormal]}>{merchantOrDescription}</Text>}
                                             </View>
                                             {isBillSplit && participantAccountIDs.length > 0 && !!requestAmount && requestAmount > 0 && (

From 622bb42ceac78d2bb96bb7d9a0c29405ae187ad0 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 29 Feb 2024 11:33:26 +0000
Subject: [PATCH 10/16] remove rogue margin-bottom

---
 src/components/ReportActionItem/ReportPreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 1fa7d46b321a..bdadd4de5205 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -301,7 +301,7 @@ function ReportPreview({
                                         {shouldShowSubtitle && (
                                             <View style={styles.flexRow}>
                                                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                                    <Text style={[styles.textLabelSupporting, styles.textNormal, styles.mb1, styles.lh20]}>{previewSubtitle || moneyRequestComment}</Text>
+                                                    <Text style={[styles.textLabelSupporting, styles.textNormal, styles.lh20]}>{previewSubtitle || moneyRequestComment}</Text>
                                                 </View>
                                             </View>
                                         )}

From 9144a9eda638c2c92e833096eaad97aed01573ea Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 29 Feb 2024 14:35:17 +0000
Subject: [PATCH 11/16] rename to h2 to match figma without breaking anything

---
 .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx      | 2 +-
 src/components/ReportActionItem/ReportPreview.tsx           | 2 +-
 src/styles/index.ts                                         | 6 +++---
 src/styles/utils/index.ts                                   | 4 ++--
 src/styles/variables.ts                                     | 2 ++
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
index f7a510124051..3fddf4e6bd4c 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
@@ -247,7 +247,7 @@ function MoneyRequestPreviewContent({
                                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                                 <Text
                                                     style={[
-                                                        styles.textHeadline,
+                                                        styles.textHeadlineH2,
                                                         isBillSplit &&
                                                             StyleUtils.getAmountFontSizeAndLineHeight(isSmallScreenWidth, windowWidth, displayAmount.length, sortedParticipantAvatars.length),
                                                         isDeleted && styles.lineThrough,
diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index bdadd4de5205..2f104fe0e3f0 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -287,7 +287,7 @@ function ReportPreview({
                                     <View style={styles.reportPreviewAmountSubtitleContainer}>
                                         <View style={styles.flexRow}>
                                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                                <Text style={styles.textHeadline}>{getDisplayAmount()}</Text>
+                                                <Text style={styles.textHeadlineH2}>{getDisplayAmount()}</Text>
                                                 {ReportUtils.isSettled(iouReportID) && (
                                                     <View style={styles.defaultCheckmarkWrapper}>
                                                         <Icon
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ce5ff76386fb..f651a2feb0de 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -440,12 +440,12 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightXXXLarge,
         },
 
-        textHeadlineH1: {
+        textHeadlineH2: {
             ...headlineFont,
             ...whiteSpace.preWrap,
             color: theme.heading,
-            fontSize: variables.fontSizeh1,
-            lineHeight: variables.lineHeightSizeh1,
+            fontSize: variables.fontSizeh2,
+            lineHeight: variables.lineHeightSizeh2,
         },
 
         textWhite: {
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 72719e4795c4..bb8437fb1f87 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -952,8 +952,8 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle {
  */
 function getAmountFontSizeAndLineHeight(isSmallScreenWidth: boolean, windowWidth: number, displayAmountLength: number, numberOfParticipant: number): TextStyle {
     let toSubtract = 0;
-    const baseFontSize = variables.fontSizeXLarge;
-    const baseLineHeight = variables.lineHeightXXLarge;
+    const baseFontSize = variables.fontSizeh2;
+    const baseLineHeight = variables.lineHeightSizeh2;
 
     const numberOfAvatar = numberOfParticipant < 4 ? numberOfParticipant : 4;
     const differentWithMaxLength = 17 - displayAmountLength;
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index f7c9bd055041..c4ecbd4e36c3 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -58,6 +58,7 @@ export default {
     fontSizeHero: 36,
     fontSizeHeroXL: 72,
     fontSizeh1: 19,
+    fontSizeh2: 19,
     fontSizeXLarge: 22,
     fontSizeXXLarge: 28,
     fontSizeXXXLarge: 32,
@@ -107,6 +108,7 @@ export default {
     lineHeightXXLarge: getValueUsingPixelRatio(27, 32),
     lineHeightXXXLarge: getValueUsingPixelRatio(32, 37),
     lineHeightSizeh1: getValueUsingPixelRatio(23, 28),
+    lineHeightSizeh2: getValueUsingPixelRatio(23, 28),
     lineHeightSignInHeroXSmall: getValueUsingPixelRatio(32, 37),
     inputHeight: getValueUsingPixelRatio(52, 72),
     inputHeightSmall: 28,

From f8c4ca715277c57dc3053b016638ff8737a915cf Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 29 Feb 2024 14:38:53 +0000
Subject: [PATCH 12/16] remove one more rogue margin top from merge

---
 .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
index 3fddf4e6bd4c..159eb26baf74 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
@@ -276,7 +276,7 @@ function MoneyRequestPreviewContent({
                                                 </View>
                                             )}
                                         </View>
-                                        <View style={[styles.flexRow, styles.mt1]}>
+                                        <View style={[styles.flexRow]}>
                                             <View style={[styles.flex1]}>
                                                 {!isCurrentUserManager && shouldShowPendingConversionMessage && (
                                                     <Text style={[styles.textLabel, styles.colorMuted]}>{translate('iou.pendingConversionMessage')}</Text>

From 7346f09ff538fae1ef50b2c98226473daa05370c Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 29 Feb 2024 14:48:38 +0000
Subject: [PATCH 13/16] forgot to rename one

---
 src/components/HeaderWithBackButton/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index 97e915d47b22..3a1c35d46c94 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -128,7 +128,7 @@ function HeaderWithBackButton({
                     <Header
                         title={title}
                         subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle}
-                        textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, isCentralPaneSettings && styles.textHeadlineH1]}
+                        textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, isCentralPaneSettings && styles.textHeadlineH2]}
                     />
                 )}
                 <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>

From 9b5d041d4e8b1e1d758da4e30a7a7f9cb49266a1 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 29 Feb 2024 15:10:23 +0000
Subject: [PATCH 14/16] money request uses h1

---
 .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx        | 2 +-
 src/styles/utils/index.ts                                     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
index 159eb26baf74..1d8b0dce63dc 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
@@ -247,7 +247,7 @@ function MoneyRequestPreviewContent({
                                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                                 <Text
                                                     style={[
-                                                        styles.textHeadlineH2,
+                                                        styles.textHeadline,
                                                         isBillSplit &&
                                                             StyleUtils.getAmountFontSizeAndLineHeight(isSmallScreenWidth, windowWidth, displayAmount.length, sortedParticipantAvatars.length),
                                                         isDeleted && styles.lineThrough,
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index bb8437fb1f87..72719e4795c4 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -952,8 +952,8 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle {
  */
 function getAmountFontSizeAndLineHeight(isSmallScreenWidth: boolean, windowWidth: number, displayAmountLength: number, numberOfParticipant: number): TextStyle {
     let toSubtract = 0;
-    const baseFontSize = variables.fontSizeh2;
-    const baseLineHeight = variables.lineHeightSizeh2;
+    const baseFontSize = variables.fontSizeXLarge;
+    const baseLineHeight = variables.lineHeightXXLarge;
 
     const numberOfAvatar = numberOfParticipant < 4 ? numberOfParticipant : 4;
     const differentWithMaxLength = 17 - displayAmountLength;

From a50923478ce163873c905e3566ccdc22f5284ce1 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 29 Feb 2024 15:23:18 +0000
Subject: [PATCH 15/16] money request and reportpreview h1 amount

---
 .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx    | 2 +-
 src/components/ReportActionItem/ReportPreview.tsx         | 2 +-
 src/styles/index.ts                                       | 8 ++++++++
 src/styles/variables.ts                                   | 4 ++--
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
index 1d8b0dce63dc..1fc8645d91e0 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
@@ -247,7 +247,7 @@ function MoneyRequestPreviewContent({
                                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                                 <Text
                                                     style={[
-                                                        styles.textHeadline,
+                                                        styles.textHeadlineH1,
                                                         isBillSplit &&
                                                             StyleUtils.getAmountFontSizeAndLineHeight(isSmallScreenWidth, windowWidth, displayAmount.length, sortedParticipantAvatars.length),
                                                         isDeleted && styles.lineThrough,
diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 2f104fe0e3f0..a84e4a041609 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -287,7 +287,7 @@ function ReportPreview({
                                     <View style={styles.reportPreviewAmountSubtitleContainer}>
                                         <View style={styles.flexRow}>
                                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                                <Text style={styles.textHeadlineH2}>{getDisplayAmount()}</Text>
+                                                <Text style={styles.textHeadlineH1}>{getDisplayAmount()}</Text>
                                                 {ReportUtils.isSettled(iouReportID) && (
                                                     <View style={styles.defaultCheckmarkWrapper}>
                                                         <Icon
diff --git a/src/styles/index.ts b/src/styles/index.ts
index f651a2feb0de..c272b7b223c5 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -448,6 +448,14 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightSizeh2,
         },
 
+        textHeadlineH1: {
+            ...headlineFont,
+            ...whiteSpace.preWrap,
+            color: theme.heading,
+            fontSize: variables.fontSizeXLarge,
+            lineHeight: variables.lineHeightSizeh1,
+        },
+
         textWhite: {
             color: theme.textLight,
         },
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index c4ecbd4e36c3..e318c3d10ecf 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -107,8 +107,8 @@ export default {
     lineHeightXLarge: getValueUsingPixelRatio(20, 24),
     lineHeightXXLarge: getValueUsingPixelRatio(27, 32),
     lineHeightXXXLarge: getValueUsingPixelRatio(32, 37),
-    lineHeightSizeh1: getValueUsingPixelRatio(23, 28),
-    lineHeightSizeh2: getValueUsingPixelRatio(23, 28),
+    lineHeightSizeh1: getValueUsingPixelRatio(28, 32),
+    lineHeightSizeh2: getValueUsingPixelRatio(24, 28),
     lineHeightSignInHeroXSmall: getValueUsingPixelRatio(32, 37),
     inputHeight: getValueUsingPixelRatio(52, 72),
     inputHeightSmall: 28,

From 333d2cac6c9b52e10d55f6c7af8f8edff6c2921e Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 29 Feb 2024 15:32:04 +0000
Subject: [PATCH 16/16] fix amount in menuitem

---
 src/components/ReportActionItem/MoneyRequestView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
index 0af7140e1523..0bd18d8ee7ea 100644
--- a/src/components/ReportActionItem/MoneyRequestView.tsx
+++ b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -292,7 +292,7 @@ function MoneyRequestView({
                         shouldShowTitleIcon={isSettled}
                         titleIcon={Expensicons.Checkmark}
                         description={amountDescription}
-                        titleStyle={styles.newKansasLarge}
+                        titleStyle={styles.textHeadlineH2}
                         interactive={canEditAmount}
                         shouldShowRightIcon={canEditAmount}
                         onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}