From 32c17e7f567d8f6fa7aee725a74fd40bc28ef2c9 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Fri, 16 Jun 2023 13:45:07 +0200
Subject: [PATCH 01/23] Display IOUs as card

---
 .../ReportActionItem/ReportPreview.js         | 25 +++++++++++++------
 src/languages/en.js                           |  2 ++
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 585e91c3f559..a3863d94f894 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -25,6 +25,7 @@ import themeColors from '../../styles/themes/default';
 import getButtonState from '../../libs/getButtonState';
 import * as IOU from '../../libs/actions/IOU';
 import refPropTypes from '../refPropTypes';
+import MultipleAvatars from "../MultipleAvatars";
 
 const propTypes = {
     /** All the data of the action */
@@ -97,7 +98,7 @@ const defaultProps = {
 function ReportPreview(props) {
     const reportAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.iouReport), props.iouReport.currency);
     const managerEmail = props.iouReport.managerEmail || '';
-    const managerName = ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true);
+    const managerName = (ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true)) || managerEmail;
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     return (
@@ -114,27 +115,35 @@ function ReportPreview(props) {
                     style={[styles.flexRow, styles.justifyContentBetween]}
                     focusable
                 >
-                    <View style={[styles.flexShrink1]}>
+                    <View style={[styles.iouPreviewBox]}>
+                        <View style={[styles.flexRow]}>
+                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                         {props.iouReport.hasOutstandingIOU ? (
-                            <Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>
-                                {lodashGet(message, 'html', props.translate('iou.payerOwesAmount', {payer: managerName, amount: reportAmount}))}
+                            <Text style={[styles.textLabelSupporting, styles.lh16]}>
+                                {props.translate('iou.payerOwes', {payer: managerName})}
                             </Text>
                         ) : (
                             <View style={[styles.flexRow]}>
-                                <Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>
-                                    {lodashGet(message, 'html', props.translate('iou.payerSettled', {amount: reportAmount}))}
+                                <Text style={[styles.textLabelSupporting, styles.lh16]}>
+                                    {props.translate('iou.payerPaid', {payer: managerName})}
                                 </Text>
+                            </View>
+                        )}
+                            </View>
+                        </View>
+                        <View style={[styles.flexRow]}>
+                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                <Text style={styles.textHeadline}>{reportAmount}</Text>
                                 {!props.iouReport.hasOutstandingIOU && (
                                     <View style={styles.iouPreviewBoxCheckmark}>
                                         <Icon
-                                            style={[styles.ml10]}
                                             src={Expensicons.Checkmark}
                                             fill={themeColors.iconSuccessFill}
                                         />
                                     </View>
                                 )}
                             </View>
-                        )}
+                        </View>
                     </View>
                     <Icon
                         src={Expensicons.ArrowRight}
diff --git a/src/languages/en.js b/src/languages/en.js
index f2f0adad2eff..a49c5374f5ec 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -355,7 +355,9 @@ export default {
         splitAmount: ({amount}) => `split ${amount}`,
         amountEach: ({amount}) => `${amount} each`,
         payerOwesAmount: ({payer, amount}) => `${payer} owes ${amount}`,
+        payerOwes: ({payer}) => `${payer} owes: `,
         payerPaidAmount: ({payer, amount}) => `${payer} paid ${amount}`,
+        payerPaid: ({payer}) => `${payer} paid: `,
         payerSettled: ({amount}) => `paid ${amount}`,
         noReimbursableExpenses: 'This report has an invalid amount',
         pendingConversionMessage: "Total will update when you're back online",

From f80c5f5ed211986d3d5cad2b64c9a71ba5103262 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Fri, 16 Jun 2023 13:50:19 +0200
Subject: [PATCH 02/23] add arrow

---
 src/components/ReportActionItem/ReportPreview.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index a3863d94f894..e3be4eb8c1bd 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -123,12 +123,14 @@ function ReportPreview(props) {
                                 {props.translate('iou.payerOwes', {payer: managerName})}
                             </Text>
                         ) : (
-                            <View style={[styles.flexRow]}>
                                 <Text style={[styles.textLabelSupporting, styles.lh16]}>
                                     {props.translate('iou.payerPaid', {payer: managerName})}
                                 </Text>
-                            </View>
                         )}
+                                <Icon
+                                    src={Expensicons.ArrowRight}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
+                                />
                             </View>
                         </View>
                         <View style={[styles.flexRow]}>

From aca525e17bc76f7795bd3fd157e3428fa3f0bf42 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Fri, 16 Jun 2023 13:50:40 +0200
Subject: [PATCH 03/23] remove extra arrow

---
 src/components/ReportActionItem/ReportPreview.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index e3be4eb8c1bd..c1a64b8de620 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -147,10 +147,6 @@ function ReportPreview(props) {
                             </View>
                         </View>
                     </View>
-                    <Icon
-                        src={Expensicons.ArrowRight}
-                        fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
-                    />
                 </Pressable>
             ))}
             {isCurrentUserManager && !ReportUtils.isSettled(props.iouReport.reportID) && (

From 4db3f62de736481b8969d15abd17b2ac75778549 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Fri, 16 Jun 2023 13:51:11 +0200
Subject: [PATCH 04/23] style

---
 .../ReportActionItem/ReportPreview.js         | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index c1a64b8de620..eb11a80b7db6 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -25,7 +25,6 @@ import themeColors from '../../styles/themes/default';
 import getButtonState from '../../libs/getButtonState';
 import * as IOU from '../../libs/actions/IOU';
 import refPropTypes from '../refPropTypes';
-import MultipleAvatars from "../MultipleAvatars";
 
 const propTypes = {
     /** All the data of the action */
@@ -118,15 +117,15 @@ function ReportPreview(props) {
                     <View style={[styles.iouPreviewBox]}>
                         <View style={[styles.flexRow]}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                        {props.iouReport.hasOutstandingIOU ? (
-                            <Text style={[styles.textLabelSupporting, styles.lh16]}>
-                                {props.translate('iou.payerOwes', {payer: managerName})}
-                            </Text>
-                        ) : (
-                                <Text style={[styles.textLabelSupporting, styles.lh16]}>
-                                    {props.translate('iou.payerPaid', {payer: managerName})}
-                                </Text>
-                        )}
+                                {props.iouReport.hasOutstandingIOU ? (
+                                    <Text style={[styles.textLabelSupporting, styles.lh16]}>
+                                        {props.translate('iou.payerOwes', {payer: managerName})}
+                                    </Text>
+                                ) : (
+                                    <Text style={[styles.textLabelSupporting, styles.lh16]}>
+                                        {props.translate('iou.payerPaid', {payer: managerName})}
+                                    </Text>
+                                )}
                                 <Icon
                                     src={Expensicons.ArrowRight}
                                     fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}

From 4b76b006820c0cf0e5bc49fd4906bd8b9ce76b52 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Fri, 16 Jun 2023 13:57:55 +0200
Subject: [PATCH 05/23] prettier

---
 src/components/ReportActionItem/ReportPreview.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index eb11a80b7db6..4b7af7bf15a0 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -97,7 +97,8 @@ const defaultProps = {
 function ReportPreview(props) {
     const reportAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.iouReport), props.iouReport.currency);
     const managerEmail = props.iouReport.managerEmail || '';
-    const managerName = (ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true)) || managerEmail;
+    const managerName =
+        (ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true)) || managerEmail;
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     return (
@@ -118,13 +119,9 @@ function ReportPreview(props) {
                         <View style={[styles.flexRow]}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                 {props.iouReport.hasOutstandingIOU ? (
-                                    <Text style={[styles.textLabelSupporting, styles.lh16]}>
-                                        {props.translate('iou.payerOwes', {payer: managerName})}
-                                    </Text>
+                                    <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('iou.payerOwes', {payer: managerName})}</Text>
                                 ) : (
-                                    <Text style={[styles.textLabelSupporting, styles.lh16]}>
-                                        {props.translate('iou.payerPaid', {payer: managerName})}
-                                    </Text>
+                                    <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('iou.payerPaid', {payer: managerName})}</Text>
                                 )}
                                 <Icon
                                     src={Expensicons.ArrowRight}

From 64b43801b2bd2ff102ab9bcf26c63d970e201bc8 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Tue, 20 Jun 2023 12:41:20 +0200
Subject: [PATCH 06/23] import issue

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

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 30413564e1ac..0230c5a80747 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -25,6 +25,7 @@ import getButtonState from '../../libs/getButtonState';
 import * as IOU from '../../libs/actions/IOU';
 import refPropTypes from '../refPropTypes';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import themeColors from '../../styles/themes/default';
 
 const propTypes = {
     /** All the data of the action */

From e6b9b7b295c23631bf80d74c6237e85db8114738 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Tue, 20 Jun 2023 15:07:57 +0200
Subject: [PATCH 07/23] fix display

---
 src/components/ReportActionItem/ReportPreview.js | 12 +++++++-----
 src/libs/ReportUtils.js                          |  7 +++++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 0230c5a80747..cca27b0eb82a 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -96,10 +96,12 @@ const defaultProps = {
 };
 
 function ReportPreview(props) {
+    const requestComment = 'Hey';
     const reportAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.iouReport), props.iouReport.currency);
     const managerEmail = props.iouReport.managerEmail || '';
+    const manageraccountID = props.iouReport.managerID || 0;
     const managerName =
-        (ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true)) || managerEmail;
+        (ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(manageraccountID, true)) || managerEmail;
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     return (
@@ -125,11 +127,11 @@ function ReportPreview(props) {
                                 ) : (
                                     <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('iou.payerPaid', {payer: managerName})}</Text>
                                 )}
-                                <Icon
-                                    src={Expensicons.ArrowRight}
-                                    fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
-                                />
                             </View>
+                            <Icon
+                                src={Expensicons.ArrowRight}
+                                fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
+                            />
                         </View>
                         <View style={[styles.flexRow]}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 996c97e18269..641e3223d2f6 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -937,6 +937,13 @@ function getMoneyRequestTotal(report, moneyRequestReports = {}) {
     return 0;
 }
 
+function getMoneyRequestComment(report) {
+    if (!report.hasOutstandingIOU || !isMoneyRequestReport(report)) {
+        return '';
+    }
+
+}
+
 /**
  * Get the title for a policy expense chat which depends on the role of the policy member seeing this report
  *

From 80cc6248b13c532f1aab76f6b9d0fd26829463ae Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Tue, 20 Jun 2023 16:02:34 +0200
Subject: [PATCH 08/23] lint

---
 src/components/ReportActionItem/ReportPreview.js | 3 +--
 src/libs/ReportUtils.js                          | 7 -------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index cca27b0eb82a..1d32140ffa9e 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -96,10 +96,9 @@ const defaultProps = {
 };
 
 function ReportPreview(props) {
-    const requestComment = 'Hey';
     const reportAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.iouReport), props.iouReport.currency);
     const managerEmail = props.iouReport.managerEmail || '';
-    const manageraccountID = props.iouReport.managerID || 0;
+    const managerAccountID = props.iouReport.managerID || 0;
     const managerName =
         (ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(manageraccountID, true)) || managerEmail;
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 641e3223d2f6..996c97e18269 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -937,13 +937,6 @@ function getMoneyRequestTotal(report, moneyRequestReports = {}) {
     return 0;
 }
 
-function getMoneyRequestComment(report) {
-    if (!report.hasOutstandingIOU || !isMoneyRequestReport(report)) {
-        return '';
-    }
-
-}
-
 /**
  * Get the title for a policy expense chat which depends on the role of the policy member seeing this report
  *

From 3ea662bd6b0287bbacfac57ac94c2d81e00fc4e4 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Tue, 20 Jun 2023 16:06:05 +0200
Subject: [PATCH 09/23] typo

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

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 1d32140ffa9e..c1516b019f8c 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -100,7 +100,7 @@ function ReportPreview(props) {
     const managerEmail = props.iouReport.managerEmail || '';
     const managerAccountID = props.iouReport.managerID || 0;
     const managerName =
-        (ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(manageraccountID, true)) || managerEmail;
+        (ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerAccountID, true)) || managerEmail;
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     return (

From 4425403b5cb15cbb945a5187fe31f2f9911bc5ee Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Tue, 20 Jun 2023 16:15:56 +0200
Subject: [PATCH 10/23] translation

---
 src/languages/es.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/languages/es.js b/src/languages/es.js
index d54fa5110117..6ed1b4a615b5 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -357,7 +357,9 @@ export default {
         splitAmount: ({amount}) => `dividir ${amount}`,
         amountEach: ({amount}) => `${amount} cada uno`,
         payerOwesAmount: ({payer, amount}) => `${payer} debe ${amount}`,
+        payerOwes: ({payer}) => `${payer} debe: `,
         payerPaidAmount: ({payer, amount}) => `${payer} pagó ${amount}`,
+        payerPaid: ({payer}) => `${payer} pagó: `,
         payerSettled: ({amount}) => `pagó ${amount}`,
         noReimbursableExpenses: 'El monto de este informe es inválido',
         pendingConversionMessage: 'El total se actualizará cuando estés online',

From 172c7ef8b1f892cab74e3e14b49a68329a376d46 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Wed, 21 Jun 2023 11:28:59 +0200
Subject: [PATCH 11/23] styles

---
 src/components/ReportActionItem/ReportPreview.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index c1516b019f8c..ddcb1f2b0abb 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -104,7 +104,7 @@ function ReportPreview(props) {
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     return (
-        <View style={[styles.chatItemMessage]}>
+        <View style={styles.chatItemMessage}>
             {_.map(props.action.message, (message, index) => (
                 <PressableWithoutFeedback
                     key={`ReportPreview-${props.action.reportActionID}-${index}`}
@@ -118,8 +118,8 @@ function ReportPreview(props) {
                     accessibilityRole="button"
                     accessibilityLabel={props.translate('iou.viewDetails')}
                 >
-                    <View style={[styles.iouPreviewBox]}>
-                        <View style={[styles.flexRow]}>
+                    <View style={styles.iouPreviewBox}>
+                        <View style={styles.flexRow}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                 {props.iouReport.hasOutstandingIOU ? (
                                     <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('iou.payerOwes', {payer: managerName})}</Text>
@@ -132,7 +132,7 @@ function ReportPreview(props) {
                                 fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
                             />
                         </View>
-                        <View style={[styles.flexRow]}>
+                        <View style={styles.flexRow}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                 <Text style={styles.textHeadline}>{reportAmount}</Text>
                                 {!props.iouReport.hasOutstandingIOU && (

From 34d5f7c08510bc894e05677b0aa481bdc6678b9f Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Wed, 21 Jun 2023 13:32:02 +0200
Subject: [PATCH 12/23] better syntax

---
 src/components/ReportActionItem/ReportPreview.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index ddcb1f2b0abb..2c28abee63e0 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -121,11 +121,7 @@ function ReportPreview(props) {
                     <View style={styles.iouPreviewBox}>
                         <View style={styles.flexRow}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                {props.iouReport.hasOutstandingIOU ? (
-                                    <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('iou.payerOwes', {payer: managerName})}</Text>
-                                ) : (
-                                    <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('iou.payerPaid', {payer: managerName})}</Text>
-                                )}
+                                <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate(props.iouReport.hasOutstandingIOU ? 'iou.payerPaid' :'iou.payerPaid' , {payer: managerName})}</Text>
                             </View>
                             <Icon
                                 src={Expensicons.ArrowRight}

From 6f79bb78f436d9ee8137473a1b1dd5b0f66c9658 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Wed, 21 Jun 2023 13:38:47 +0200
Subject: [PATCH 13/23] prettier

---
 src/components/ReportActionItem/ReportPreview.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 2c28abee63e0..2fcb1306047b 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -121,7 +121,9 @@ function ReportPreview(props) {
                     <View style={styles.iouPreviewBox}>
                         <View style={styles.flexRow}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate(props.iouReport.hasOutstandingIOU ? 'iou.payerPaid' :'iou.payerPaid' , {payer: managerName})}</Text>
+                                <Text style={[styles.textLabelSupporting, styles.lh16]}>
+                                    {props.translate(props.iouReport.hasOutstandingIOU ? 'iou.payerPaid' : 'iou.payerPaid', {payer: managerName})}
+                                </Text>
                             </View>
                             <Icon
                                 src={Expensicons.ArrowRight}

From e7c1a5a3ae3df20e1ff9ef8d89dd23134d56fd44 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Thu, 22 Jun 2023 13:43:32 +0200
Subject: [PATCH 14/23] typo

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

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 2fcb1306047b..7627b0c5888c 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -122,7 +122,7 @@ function ReportPreview(props) {
                         <View style={styles.flexRow}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                 <Text style={[styles.textLabelSupporting, styles.lh16]}>
-                                    {props.translate(props.iouReport.hasOutstandingIOU ? 'iou.payerPaid' : 'iou.payerPaid', {payer: managerName})}
+                                    {props.translate(props.iouReport.hasOutstandingIOU ? 'iou.payerOwes' : 'iou.payerPaid', {payer: managerName})}
                                 </Text>
                             </View>
                             <Icon

From 159edd860ba4fe651e8e722d4a9479df1c89cadc Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Fri, 23 Jun 2023 10:03:32 +0200
Subject: [PATCH 15/23] remove carat

---
 src/components/ReportActionItem/ReportPreview.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 7627b0c5888c..457367d1aff8 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -125,10 +125,6 @@ function ReportPreview(props) {
                                     {props.translate(props.iouReport.hasOutstandingIOU ? 'iou.payerOwes' : 'iou.payerPaid', {payer: managerName})}
                                 </Text>
                             </View>
-                            <Icon
-                                src={Expensicons.ArrowRight}
-                                fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
-                            />
                         </View>
                         <View style={styles.flexRow}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>

From ddb57fa0ada1cfdab61efa30023badf7aa8c0f03 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Fri, 23 Jun 2023 11:00:39 +0200
Subject: [PATCH 16/23] lint

---
 src/components/ReportActionItem/ReportPreview.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 457367d1aff8..69dcc98f2d05 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -15,13 +15,11 @@ import ONYXKEYS from '../../ONYXKEYS';
 import ControlSelection from '../../libs/ControlSelection';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import {showContextMenuForReport} from '../ShowContextMenuContext';
-import * as StyleUtils from '../../styles/StyleUtils';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import SettlementButton from '../SettlementButton';
-import getButtonState from '../../libs/getButtonState';
 import * as IOU from '../../libs/actions/IOU';
 import refPropTypes from '../refPropTypes';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
@@ -78,15 +76,11 @@ const propTypes = {
     /** Callback for updating context menu active state, used for showing context menu */
     checkIfContextMenuActive: PropTypes.func,
 
-    /** Whether the IOU is hovered so we can modify its style */
-    isHovered: PropTypes.bool,
-
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     contextMenuAnchor: null,
-    isHovered: false,
     chatReport: {},
     iouReport: {},
     checkIfContextMenuActive: () => {},

From 73041e7b74e02f20d62c879a6b01cb106e09648d Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Fri, 23 Jun 2023 13:33:57 +0200
Subject: [PATCH 17/23] use isSettled

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

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 69dcc98f2d05..81029c01f1fe 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -116,7 +116,7 @@ function ReportPreview(props) {
                         <View style={styles.flexRow}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                 <Text style={[styles.textLabelSupporting, styles.lh16]}>
-                                    {props.translate(props.iouReport.hasOutstandingIOU ? 'iou.payerOwes' : 'iou.payerPaid', {payer: managerName})}
+                                    {props.translate(ReportUtils.isSettled(props.iouReportID) ? 'iou.payerOwes' : 'iou.payerPaid', {payer: managerName})}
                                 </Text>
                             </View>
                         </View>

From d4a0570f90e124120725fc3bf59a6470fc9a2fce Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Tue, 4 Jul 2023 15:28:48 +0200
Subject: [PATCH 18/23] conflicts

---
 .../ReportActionItem/ReportPreview.js         | 23 -------------------
 1 file changed, 23 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index d5098b6c3b66..fc5a9d340043 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -96,7 +96,6 @@ function ReportPreview(props) {
         (ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerAccountID, true)) || managerEmail;
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
-    const displayingMessage = ReportUtils.getReportPreviewMessage(props.iouReport, props.action);
     return (
         <View style={styles.chatItemMessage}>
             {_.map(props.action.message, (message, index) => (
@@ -136,28 +135,6 @@ function ReportPreview(props) {
                     </View>
                 </PressableWithoutFeedback>
             ))}
-=======
-        <View style={[styles.chatItemMessage]}>
-            <PressableWithoutFeedback
-                onPress={() => {
-                    Navigation.navigate(ROUTES.getReportRoute(props.iouReportID));
-                }}
-                onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                onPressOut={() => ControlSelection.unblock()}
-                onLongPress={(event) => showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive)}
-                style={[styles.flexRow, styles.justifyContentBetween]}
-                accessibilityRole="button"
-                accessibilityLabel={props.translate('iou.viewDetails')}
-            >
-                <View style={[styles.flexShrink1]}>
-                    <Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>{displayingMessage}</Text>
-                </View>
-                <Icon
-                    src={Expensicons.ArrowRight}
-                    fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
-                />
-            </PressableWithoutFeedback>
->>>>>>> main
             {isCurrentUserManager && !ReportUtils.isSettled(props.iouReport.reportID) && (
                 <SettlementButton
                     currency={props.iouReport.currency}

From bf341b34286fd6cc3c801effb4de1d9d4fee9a08 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Tue, 4 Jul 2023 16:06:18 +0200
Subject: [PATCH 19/23] styles

---
 src/components/ReportActionItem/ReportPreview.js | 5 +++--
 src/styles/styles.js                             | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index fc5a9d340043..2c47c4a799c7 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -90,6 +90,7 @@ const defaultProps = {
 };
 
 function ReportPreview(props) {
+    const reportAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.iouReport), props.iouReport.currency);
     const managerEmail = props.iouReport.managerEmail || '';
     const managerAccountID = props.iouReport.managerID || 0;
     const managerName =
@@ -115,14 +116,14 @@ function ReportPreview(props) {
                         <View style={styles.flexRow}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                 <Text style={[styles.textLabelSupporting, styles.lh16]}>
-                                    {props.translate(ReportUtils.isSettled(props.iouReportID) ? 'iou.payerOwes' : 'iou.payerPaid', {payer: managerName})}
+                                    {props.translate(ReportUtils.isSettled(props.iouReportID) ? 'iou.payerPaid' : 'iou.payerOwes', {payer: managerName})}
                                 </Text>
                             </View>
                         </View>
                         <View style={styles.flexRow}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                 <Text style={styles.textHeadline}>{reportAmount}</Text>
-                                {!props.iouReport.hasOutstandingIOU && (
+                                {ReportUtils.isSettled(props.iouReportID) && (
                                     <View style={styles.iouPreviewBoxCheckmark}>
                                         <Icon
                                             src={Expensicons.Checkmark}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 1d0770d5ceb8..63db0215cdc9 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2540,8 +2540,8 @@ const styles = {
 
     iouPreviewBox: {
         backgroundColor: themeColors.cardBG,
-        borderRadius: variables.componentBorderRadiusCard,
-        padding: 20,
+        borderRadius: variables.componentBorderRadiusLarge,
+        padding: 16,
         maxWidth: variables.sideBarWidth,
         width: '100%',
     },

From 392f9d804f2e5c23dbae0e43c21bb1979de68803 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Wed, 5 Jul 2023 11:06:21 +0200
Subject: [PATCH 20/23] remove unneeded imports

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

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index a32985a06cea..7f32a67ddbef 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -15,7 +15,6 @@ import ControlSelection from '../../libs/ControlSelection';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import {showContextMenuForReport} from '../ShowContextMenuContext';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
-import * as StyleUtils from '../../styles/StyleUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
@@ -24,7 +23,6 @@ import * as IOU from '../../libs/actions/IOU';
 import refPropTypes from '../refPropTypes';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 import themeColors from '../../styles/themes/default';
-import CONST from '../../CONST';
 
 const propTypes = {
     /** All the data of the action */

From 777c1fab3b11fa7ec611b691c6077e44ddbe8c61 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Wed, 5 Jul 2023 11:22:50 +0200
Subject: [PATCH 21/23] remove map

---
 .../ReportActionItem/ReportPreview.js         | 64 +++++++++----------
 1 file changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 7f32a67ddbef..d591e8bb1b65 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -98,42 +98,40 @@ function ReportPreview(props) {
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     return (
         <View style={styles.chatItemMessage}>
-            {_.map(props.action.message, (message, index) => (
-                <PressableWithoutFeedback
-                    onPress={() => {
-                        Navigation.navigate(ROUTES.getReportRoute(props.iouReportID));
-                    }}
-                    onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                    onPressOut={() => ControlSelection.unblock()}
-                    onLongPress={(event) => showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive)}
-                    style={[styles.flexRow, styles.justifyContentBetween]}
-                    accessibilityRole="button"
-                    accessibilityLabel={props.translate('iou.viewDetails')}
-                >
-                    <View style={styles.iouPreviewBox}>
-                        <View style={styles.flexRow}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={[styles.textLabelSupporting, styles.lh16]}>
-                                    {props.translate(ReportUtils.isSettled(props.iouReportID) ? 'iou.payerPaid' : 'iou.payerOwes', {payer: managerName})}
-                                </Text>
-                            </View>
+            <PressableWithoutFeedback
+                onPress={() => {
+                    Navigation.navigate(ROUTES.getReportRoute(props.iouReportID));
+                }}
+                onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                onPressOut={() => ControlSelection.unblock()}
+                onLongPress={(event) => showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive)}
+                style={[styles.flexRow, styles.justifyContentBetween]}
+                accessibilityRole="button"
+                accessibilityLabel={props.translate('iou.viewDetails')}
+            >
+                <View style={styles.iouPreviewBox}>
+                    <View style={styles.flexRow}>
+                        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                            <Text style={[styles.textLabelSupporting, styles.lh16]}>
+                                {props.translate(ReportUtils.isSettled(props.iouReportID) ? 'iou.payerPaid' : 'iou.payerOwes', {payer: managerName})}
+                            </Text>
                         </View>
-                        <View style={styles.flexRow}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={styles.textHeadline}>{reportAmount}</Text>
-                                {ReportUtils.isSettled(props.iouReportID) && (
-                                    <View style={styles.iouPreviewBoxCheckmark}>
-                                        <Icon
-                                            src={Expensicons.Checkmark}
-                                            fill={themeColors.iconSuccessFill}
-                                        />
-                                    </View>
-                                )}
-                            </View>
+                    </View>
+                    <View style={styles.flexRow}>
+                        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                            <Text style={styles.textHeadline}>{reportAmount}</Text>
+                            {ReportUtils.isSettled(props.iouReportID) && (
+                                <View style={styles.iouPreviewBoxCheckmark}>
+                                    <Icon
+                                        src={Expensicons.Checkmark}
+                                        fill={themeColors.iconSuccessFill}
+                                    />
+                                </View>
+                            )}
                         </View>
                     </View>
-                </PressableWithoutFeedback>
-            ))}
+                </View>
+            </PressableWithoutFeedback>
             {isCurrentUserManager && !ReportUtils.isSettled(props.iouReport.reportID) && (
                 <SettlementButton
                     currency={props.iouReport.currency}

From e45ae49141e0e66ffe7300853caacdb541602ae2 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Thu, 6 Jul 2023 10:33:44 +0200
Subject: [PATCH 22/23] styles

---
 src/components/ReportActionItem/IOUPreview.js |  6 ++---
 .../ReportActionItem/ReportPreview.js         | 26 +++++++++----------
 src/styles/styles.js                          |  2 +-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index f3878c2f2acb..2f584eff2f7b 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -189,7 +189,7 @@ function IOUPreview(props) {
                 <View style={[styles.iouPreviewBox, ...props.containerStyles]}>
                     <View style={[styles.flexRow]}>
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                            <Text style={[styles.textLabelSupporting, styles.lh16]}>{getPreviewHeaderText()}</Text>
+                            <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh16]}>{getPreviewHeaderText()}</Text>
                             {Boolean(getSettledMessage()) && (
                                 <>
                                     <Icon
@@ -230,9 +230,9 @@ function IOUPreview(props) {
                     <View style={[styles.flexRow]}>
                         <View style={[styles.flex1]}>
                             {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
-                                <Text style={[styles.textLabel, styles.colorMuted]}>{props.translate('iou.pendingConversionMessage')}</Text>
+                                <Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
                             )}
-                            {!_.isEmpty(requestComment) && <Text style={[styles.colorMuted]}>{requestComment}</Text>}
+                            {!_.isEmpty(requestComment) && <Text style={[styles.mt1, styles.colorMuted]}>{requestComment}</Text>}
                         </View>
                         {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
                             <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index d591e8bb1b65..fdd5979136f3 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -112,7 +112,7 @@ function ReportPreview(props) {
                 <View style={styles.iouPreviewBox}>
                     <View style={styles.flexRow}>
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                            <Text style={[styles.textLabelSupporting, styles.lh16]}>
+                            <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh16]}>
                                 {props.translate(ReportUtils.isSettled(props.iouReportID) ? 'iou.payerPaid' : 'iou.payerOwes', {payer: managerName})}
                             </Text>
                         </View>
@@ -130,20 +130,20 @@ function ReportPreview(props) {
                             )}
                         </View>
                     </View>
+                    {isCurrentUserManager && !ReportUtils.isSettled(props.iouReport.reportID) && (
+                        <SettlementButton
+                            currency={props.iouReport.currency}
+                            policyID={props.iouReport.policyID}
+                            chatReportID={props.chatReportID}
+                            iouReport={props.iouReport}
+                            onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.iouReport)}
+                            enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
+                            addBankAccountRoute={bankAccountRoute}
+                            style={[styles.requestPreviewBox]}
+                        />
+                    )}
                 </View>
             </PressableWithoutFeedback>
-            {isCurrentUserManager && !ReportUtils.isSettled(props.iouReport.reportID) && (
-                <SettlementButton
-                    currency={props.iouReport.currency}
-                    policyID={props.iouReport.policyID}
-                    chatReportID={props.chatReportID}
-                    iouReport={props.iouReport}
-                    onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.iouReport)}
-                    enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
-                    addBankAccountRoute={bankAccountRoute}
-                    style={[styles.requestPreviewBox]}
-                />
-            )}
         </View>
     );
 }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 63db0215cdc9..424f08a0d050 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2534,7 +2534,7 @@ const styles = {
     },
 
     requestPreviewBox: {
-        marginTop: 8,
+        marginTop: 12,
         maxWidth: variables.sideBarWidth,
     },
 

From 7f02e90763c3a0a9374d649bed99f01c25ad94e8 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Fri, 7 Jul 2023 11:57:46 +0200
Subject: [PATCH 23/23] checkmark style

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

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index fdd5979136f3..087f8494d392 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -121,7 +121,7 @@ function ReportPreview(props) {
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                             <Text style={styles.textHeadline}>{reportAmount}</Text>
                             {ReportUtils.isSettled(props.iouReportID) && (
-                                <View style={styles.iouPreviewBoxCheckmark}>
+                                <View style={styles.defaultCheckmarkWrapper}>
                                     <Icon
                                         src={Expensicons.Checkmark}
                                         fill={themeColors.iconSuccessFill}