From 7635de8bf5fb4a5d8e17a122cddc4f610787960e Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Mon, 18 Mar 2024 13:14:44 +0100
Subject: [PATCH 01/11] Fix: Hold request style and visibility

---
 src/components/MoneyRequestHeader.tsx          | 12 +++++++++---
 src/components/MoneyRequestHeaderStatusBar.tsx | 10 ++++++++--
 src/styles/index.ts                            |  5 ++++-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index a9304b9c3138..0d1425405a92 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -18,7 +18,6 @@ import type {Policy, Report, ReportAction, ReportActions, Session, Transaction}
 import type {OriginalMessageIOU} from '@src/types/onyx/OriginalMessage';
 import ConfirmModal from './ConfirmModal';
 import HeaderWithBackButton from './HeaderWithBackButton';
-import HoldBanner from './HoldBanner';
 import * as Expensicons from './Icon/Expensicons';
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
 import {usePersonalDetails} from './OnyxProvider';
@@ -119,7 +118,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                 onSelected: () => changeMoneyRequestStatus(),
             });
         }
-        if (!isOnHold && (isRequestIOU || canModifyStatus)) {
+        if (!isOnHold && (isRequestIOU || canModifyStatus) && !isScanning) {
             threeDotsMenuItems.push({
                 icon: Expensicons.Stopwatch,
                 text: translate('iou.holdRequest'),
@@ -188,10 +187,17 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                     <MoneyRequestHeaderStatusBar
                         title={translate('iou.receiptStatusTitle')}
                         description={translate('iou.receiptStatusText')}
+                        shouldShowBorderBottom={!isOnHold}
+                    />
+                )}
+                {isOnHold && (
+                    <MoneyRequestHeaderStatusBar
+                        title={translate('iou.hold')}
+                        description={translate('iou.requestOnHold')}
                         shouldShowBorderBottom
+                        badgeColorStyle={styles.badgeDanger}
                     />
                 )}
-                {isOnHold && <HoldBanner />}
             </View>
             <ConfirmModal
                 title={translate('iou.deleteRequest')}
diff --git a/src/components/MoneyRequestHeaderStatusBar.tsx b/src/components/MoneyRequestHeaderStatusBar.tsx
index 59ef4ee0bd26..99913c3b927b 100644
--- a/src/components/MoneyRequestHeaderStatusBar.tsx
+++ b/src/components/MoneyRequestHeaderStatusBar.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Text from './Text';
@@ -12,14 +13,19 @@ type MoneyRequestHeaderStatusBarProps = {
 
     /** Whether we show the border bottom */
     shouldShowBorderBottom: boolean;
+
+    /** Badge background color Style */
+    badgeColorStyle?: StyleProp<ViewStyle>;
 };
 
-function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom}: MoneyRequestHeaderStatusBarProps) {
+function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, badgeColorStyle}: MoneyRequestHeaderStatusBarProps) {
     const styles = useThemeStyles();
     const borderBottomStyle = shouldShowBorderBottom ? styles.borderBottom : {};
+    const backgroundColorStyle = badgeColorStyle ?? styles.moneyRequestHeaderStatusBarBadgeBackground;
+
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.overflowHidden, styles.ph5, styles.pb3, borderBottomStyle]}>
-            <View style={[styles.moneyRequestHeaderStatusBarBadge]}>
+            <View style={[styles.moneyRequestHeaderStatusBarBadge, backgroundColorStyle]}>
                 <Text style={[styles.textStrong, styles.textMicroBold]}>{title}</Text>
             </View>
             <View style={[styles.flexShrink1]}>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index df89cd823fa4..ca7e4ae8f7cf 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4160,10 +4160,13 @@ const styles = (theme: ThemeColors) =>
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: theme.border,
             marginRight: 12,
         },
 
+        moneyRequestHeaderStatusBarBadgeBackground: {
+            backgroundColor: theme.border,
+        },
+
         staticHeaderImage: {
             minHeight: 240,
         },

From 3e6c006ca8bc275f94b3cc8db694440fd4d1b76b Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Mon, 18 Mar 2024 15:50:35 +0100
Subject: [PATCH 02/11] Fix: scan status badge danger text

---
 src/components/MoneyRequestHeaderStatusBar.tsx | 7 ++++---
 src/styles/index.ts                            | 8 ++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/MoneyRequestHeaderStatusBar.tsx b/src/components/MoneyRequestHeaderStatusBar.tsx
index 99913c3b927b..9bbee03b0926 100644
--- a/src/components/MoneyRequestHeaderStatusBar.tsx
+++ b/src/components/MoneyRequestHeaderStatusBar.tsx
@@ -21,12 +21,13 @@ type MoneyRequestHeaderStatusBarProps = {
 function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, badgeColorStyle}: MoneyRequestHeaderStatusBarProps) {
     const styles = useThemeStyles();
     const borderBottomStyle = shouldShowBorderBottom ? styles.borderBottom : {};
-    const backgroundColorStyle = badgeColorStyle ?? styles.moneyRequestHeaderStatusBarBadgeBackground;
+    const badgeBackgroundColorStyle = badgeColorStyle ?? styles.moneyRequestHeaderStatusBarBadgeBackground;
+    const badgeTextColorStyle = badgeColorStyle ? styles.textMicroBoldDangerColor : styles.textMicroBoldColor;
 
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.overflowHidden, styles.ph5, styles.pb3, borderBottomStyle]}>
-            <View style={[styles.moneyRequestHeaderStatusBarBadge, backgroundColorStyle]}>
-                <Text style={[styles.textStrong, styles.textMicroBold]}>{title}</Text>
+            <View style={[styles.moneyRequestHeaderStatusBarBadge, badgeBackgroundColorStyle]}>
+                <Text style={[styles.textStrong, styles.textMicroBold, badgeTextColorStyle]}>{title}</Text>
             </View>
             <View style={[styles.flexShrink1]}>
                 <Text style={[styles.textLabelSupporting]}>{description}</Text>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ca7e4ae8f7cf..306ab55dd215 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -383,6 +383,14 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightSmall,
         },
 
+        textMicroBoldColor: {
+            color: theme.text,
+        },
+
+        textMicroBoldDangerColor: {
+            color: theme.textLight,
+        },
+
         textMicroSupporting: {
             color: theme.textSupporting,
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,

From 4db5bf9a5a8b502230781084bf0e43a6ae4e8870 Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Thu, 28 Mar 2024 15:19:19 +0100
Subject: [PATCH 03/11] refactor

---
 src/components/MoneyReportHeaderStatusBar.tsx  |  2 +-
 src/components/MoneyRequestHeader.tsx          |  2 +-
 src/components/MoneyRequestHeaderStatusBar.tsx | 11 +++++------
 src/styles/index.ts                            |  4 ++++
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/MoneyReportHeaderStatusBar.tsx b/src/components/MoneyReportHeaderStatusBar.tsx
index 7d2b749cce0a..af23a63b21d0 100644
--- a/src/components/MoneyReportHeaderStatusBar.tsx
+++ b/src/components/MoneyReportHeaderStatusBar.tsx
@@ -24,7 +24,7 @@ function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps)
 
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.overflowHidden, styles.w100]}>
-            <View style={styles.moneyRequestHeaderStatusBarBadge}>
+            <View style={[styles.moneyRequestHeaderStatusBarBadge, styles.moneyRequestHeaderStatusBarBadgeBackground]}>
                 <Text style={[styles.textLabel, styles.textMicroBold]}>{translate(nextStep.title === CONST.NEXT_STEP.FINISHED ? 'iou.finished' : 'iou.nextStep')}</Text>
             </View>
             <View style={[styles.dFlex, styles.flexRow, styles.flexShrink1]}>
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 8cd1e8b57bd2..9cbcf1dd3697 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -192,7 +192,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                         title={translate('iou.hold')}
                         description={translate('iou.requestOnHold')}
                         shouldShowBorderBottom
-                        badgeColorStyle={styles.badgeDanger}
+                        danger
                     />
                 )}
             </View>
diff --git a/src/components/MoneyRequestHeaderStatusBar.tsx b/src/components/MoneyRequestHeaderStatusBar.tsx
index 9bbee03b0926..2ca8195c6d3f 100644
--- a/src/components/MoneyRequestHeaderStatusBar.tsx
+++ b/src/components/MoneyRequestHeaderStatusBar.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Text from './Text';
@@ -14,15 +13,15 @@ type MoneyRequestHeaderStatusBarProps = {
     /** Whether we show the border bottom */
     shouldShowBorderBottom: boolean;
 
-    /** Badge background color Style */
-    badgeColorStyle?: StyleProp<ViewStyle>;
+    /** Red Badge background */
+    danger?: boolean;
 };
 
-function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, badgeColorStyle}: MoneyRequestHeaderStatusBarProps) {
+function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, danger}: MoneyRequestHeaderStatusBarProps) {
     const styles = useThemeStyles();
     const borderBottomStyle = shouldShowBorderBottom ? styles.borderBottom : {};
-    const badgeBackgroundColorStyle = badgeColorStyle ?? styles.moneyRequestHeaderStatusBarBadgeBackground;
-    const badgeTextColorStyle = badgeColorStyle ? styles.textMicroBoldDangerColor : styles.textMicroBoldColor;
+    const badgeBackgroundColorStyle = danger ? styles.moneyRequestHeaderStatusBarBadgeDangerBackground : styles.moneyRequestHeaderStatusBarBadgeBackground;
+    const badgeTextColorStyle = danger ? styles.textMicroBoldDangerColor : styles.textMicroBoldColor;
 
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.overflowHidden, styles.ph5, styles.pb3, borderBottomStyle]}>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 85af51afb6e9..41b0c786c03a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4181,6 +4181,10 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.border,
         },
 
+        moneyRequestHeaderStatusBarBadgeDangerBackground: {
+            backgroundColor: theme.danger,
+        },
+
         staticHeaderImage: {
             minHeight: 240,
         },

From a1db3e049f912076f19d37127651658d3774d882 Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Wed, 24 Apr 2024 21:24:44 +0100
Subject: [PATCH 04/11] revert style

---
 src/styles/index.ts | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index c4195c256957..e3f5b4dc5500 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -398,14 +398,6 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightSmall,
         },
 
-        textMicroBoldColor: {
-            color: theme.text,
-        },
-
-        textMicroBoldDangerColor: {
-            color: theme.textLight,
-        },
-
         textMicroSupporting: {
             color: theme.textSupporting,
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
@@ -4323,14 +4315,6 @@ const styles = (theme: ThemeColors) =>
             marginRight: 12,
         },
 
-        moneyRequestHeaderStatusBarBadgeBackground: {
-            backgroundColor: theme.border,
-        },
-
-        moneyRequestHeaderStatusBarBadgeDangerBackground: {
-            backgroundColor: theme.danger,
-        },
-
         staticHeaderImage: {
             minHeight: 240,
         },

From 46967555a7c8f3bde34228380c70e1d1d1a20328 Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Wed, 24 Apr 2024 21:25:32 +0100
Subject: [PATCH 05/11] undo style

---
 src/styles/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index e3f5b4dc5500..25326fdd5d20 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -544,6 +544,7 @@ const styles = (theme: ThemeColors) =>
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
+            backgroundColor: theme.border,
         },
 
         button: {

From 491ee38b0ad079ee53fa651fb6a69549e1940895 Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Wed, 24 Apr 2024 21:29:42 +0100
Subject: [PATCH 06/11] undo style

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 25326fdd5d20..7b79099532fb 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -544,7 +544,6 @@ const styles = (theme: ThemeColors) =>
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: theme.border,
         },
 
         button: {
@@ -4313,6 +4312,7 @@ const styles = (theme: ThemeColors) =>
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
+            backgroundColor: theme.border,
             marginRight: 12,
         },
 

From 2e551c7613f64717aeb00ccf50fa77288c8c1f0a Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Wed, 24 Apr 2024 21:31:57 +0100
Subject: [PATCH 07/11] undo MoneyRequestHeaderStatusBar

---
 src/components/MoneyRequestHeaderStatusBar.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/MoneyRequestHeaderStatusBar.tsx b/src/components/MoneyRequestHeaderStatusBar.tsx
index 2ca8195c6d3f..59ef4ee0bd26 100644
--- a/src/components/MoneyRequestHeaderStatusBar.tsx
+++ b/src/components/MoneyRequestHeaderStatusBar.tsx
@@ -12,21 +12,15 @@ type MoneyRequestHeaderStatusBarProps = {
 
     /** Whether we show the border bottom */
     shouldShowBorderBottom: boolean;
-
-    /** Red Badge background */
-    danger?: boolean;
 };
 
-function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, danger}: MoneyRequestHeaderStatusBarProps) {
+function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom}: MoneyRequestHeaderStatusBarProps) {
     const styles = useThemeStyles();
     const borderBottomStyle = shouldShowBorderBottom ? styles.borderBottom : {};
-    const badgeBackgroundColorStyle = danger ? styles.moneyRequestHeaderStatusBarBadgeDangerBackground : styles.moneyRequestHeaderStatusBarBadgeBackground;
-    const badgeTextColorStyle = danger ? styles.textMicroBoldDangerColor : styles.textMicroBoldColor;
-
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.overflowHidden, styles.ph5, styles.pb3, borderBottomStyle]}>
-            <View style={[styles.moneyRequestHeaderStatusBarBadge, badgeBackgroundColorStyle]}>
-                <Text style={[styles.textStrong, styles.textMicroBold, badgeTextColorStyle]}>{title}</Text>
+            <View style={[styles.moneyRequestHeaderStatusBarBadge]}>
+                <Text style={[styles.textStrong, styles.textMicroBold]}>{title}</Text>
             </View>
             <View style={[styles.flexShrink1]}>
                 <Text style={[styles.textLabelSupporting]}>{description}</Text>

From b8ff77e002fe187aa9fbff2ca68fa0907f5e0e51 Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Wed, 24 Apr 2024 21:35:27 +0100
Subject: [PATCH 08/11] undo MoneyReportHeaderStatusBar

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

diff --git a/src/components/MoneyReportHeaderStatusBar.tsx b/src/components/MoneyReportHeaderStatusBar.tsx
index af23a63b21d0..7d2b749cce0a 100644
--- a/src/components/MoneyReportHeaderStatusBar.tsx
+++ b/src/components/MoneyReportHeaderStatusBar.tsx
@@ -24,7 +24,7 @@ function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps)
 
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.overflowHidden, styles.w100]}>
-            <View style={[styles.moneyRequestHeaderStatusBarBadge, styles.moneyRequestHeaderStatusBarBadgeBackground]}>
+            <View style={styles.moneyRequestHeaderStatusBarBadge}>
                 <Text style={[styles.textLabel, styles.textMicroBold]}>{translate(nextStep.title === CONST.NEXT_STEP.FINISHED ? 'iou.finished' : 'iou.nextStep')}</Text>
             </View>
             <View style={[styles.dFlex, styles.flexRow, styles.flexShrink1]}>

From e8ce24074d981fc527ec9c631ea4a66e1eda0698 Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Wed, 24 Apr 2024 22:20:52 +0100
Subject: [PATCH 09/11] update with new badge

---
 src/components/MoneyRequestHeader.tsx          |  4 ++--
 src/components/MoneyRequestHeaderStatusBar.tsx | 14 +++++++++++---
 src/pages/ProcessMoneyRequestHoldPage.tsx      |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index e79e09f1a496..429d3a36e734 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -199,9 +199,9 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                 {isOnHold && (
                     <MoneyRequestHeaderStatusBar
                         title={translate('iou.hold')}
-                        description={translate('iou.requestOnHold')}
+                        description={translate('iou.expenseOnHold')}
                         shouldShowBorderBottom
-                        danger
+                        error
                     />
                 )}
             </View>
diff --git a/src/components/MoneyRequestHeaderStatusBar.tsx b/src/components/MoneyRequestHeaderStatusBar.tsx
index 59ef4ee0bd26..cc0b1279204e 100644
--- a/src/components/MoneyRequestHeaderStatusBar.tsx
+++ b/src/components/MoneyRequestHeaderStatusBar.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Badge from './Badge';
 import Text from './Text';
 
 type MoneyRequestHeaderStatusBarProps = {
@@ -12,15 +13,22 @@ type MoneyRequestHeaderStatusBarProps = {
 
     /** Whether we show the border bottom */
     shouldShowBorderBottom: boolean;
+
+    /** Is Error type */
+    error?: boolean;
 };
 
-function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom}: MoneyRequestHeaderStatusBarProps) {
+function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, error = false}: MoneyRequestHeaderStatusBarProps) {
     const styles = useThemeStyles();
     const borderBottomStyle = shouldShowBorderBottom ? styles.borderBottom : {};
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.overflowHidden, styles.ph5, styles.pb3, borderBottomStyle]}>
-            <View style={[styles.moneyRequestHeaderStatusBarBadge]}>
-                <Text style={[styles.textStrong, styles.textMicroBold]}>{title}</Text>
+            <View style={[styles.mr3]}>
+                <Badge
+                    text={title}
+                    badgeStyles={styles.ml0}
+                    error={error}
+                />
             </View>
             <View style={[styles.flexShrink1]}>
                 <Text style={[styles.textLabelSupporting]}>{description}</Text>
diff --git a/src/pages/ProcessMoneyRequestHoldPage.tsx b/src/pages/ProcessMoneyRequestHoldPage.tsx
index ec305cc5adfb..ad04ada569bb 100644
--- a/src/pages/ProcessMoneyRequestHoldPage.tsx
+++ b/src/pages/ProcessMoneyRequestHoldPage.tsx
@@ -33,7 +33,7 @@ function ProcessMoneyRequestHoldPage() {
 
     return (
         <HeaderPageLayout
-            title={translate('common.back')}
+            title={translate('iou.hold')}
             footer={footerComponent}
             onBackButtonPress={() => Navigation.goBack()}
             testID={ProcessMoneyRequestHoldPage.displayName}

From 88c3d4c0e9540f40c69174cc208747a76ab29361 Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Wed, 24 Apr 2024 22:29:01 +0100
Subject: [PATCH 10/11] update MoneyReportHeaderStatusBar too

---
 src/components/MoneyReportHeaderStatusBar.tsx |  9 ++++++---
 src/styles/index.ts                           | 11 -----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/MoneyReportHeaderStatusBar.tsx b/src/components/MoneyReportHeaderStatusBar.tsx
index 7d2b749cce0a..82a82e014697 100644
--- a/src/components/MoneyReportHeaderStatusBar.tsx
+++ b/src/components/MoneyReportHeaderStatusBar.tsx
@@ -5,8 +5,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as NextStepUtils from '@libs/NextStepUtils';
 import CONST from '@src/CONST';
 import type ReportNextStep from '@src/types/onyx/ReportNextStep';
+import Badge from './Badge';
 import RenderHTML from './RenderHTML';
-import Text from './Text';
 
 type MoneyReportHeaderStatusBarProps = {
     /** The next step for the report */
@@ -24,8 +24,11 @@ function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps)
 
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.overflowHidden, styles.w100]}>
-            <View style={styles.moneyRequestHeaderStatusBarBadge}>
-                <Text style={[styles.textLabel, styles.textMicroBold]}>{translate(nextStep.title === CONST.NEXT_STEP.FINISHED ? 'iou.finished' : 'iou.nextStep')}</Text>
+            <View style={[styles.mr3]}>
+                <Badge
+                    text={translate(nextStep.title === CONST.NEXT_STEP.FINISHED ? 'iou.finished' : 'iou.nextStep')}
+                    badgeStyles={styles.ml0}
+                />
             </View>
             <View style={[styles.dFlex, styles.flexRow, styles.flexShrink1]}>
                 <RenderHTML html={messageContent} />
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 7b79099532fb..e17c3a3f2c1a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4305,17 +4305,6 @@ const styles = (theme: ThemeColors) =>
             alignSelf: 'center',
         },
 
-        moneyRequestHeaderStatusBarBadge: {
-            width: 68,
-            height: variables.inputHeightSmall,
-            borderRadius: variables.componentBorderRadiusSmall,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: theme.border,
-            marginRight: 12,
-        },
-
         staticHeaderImage: {
             minHeight: 240,
         },

From 69b603a9ba2cdf8a0efedc63a4fc5f44344957b1 Mon Sep 17 00:00:00 2001
From: dragnoir <mosaixel.org@gmail.com>
Date: Fri, 26 Apr 2024 10:22:28 +0100
Subject: [PATCH 11/11] error to danger

---
 src/components/MoneyRequestHeader.tsx          | 2 +-
 src/components/MoneyRequestHeaderStatusBar.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 85890bd9abd2..a9531fd9f9a3 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -213,7 +213,7 @@ function MoneyRequestHeader({
                         title={translate('iou.hold')}
                         description={translate('iou.expenseOnHold')}
                         shouldShowBorderBottom
-                        error
+                        danger
                     />
                 )}
             </View>
diff --git a/src/components/MoneyRequestHeaderStatusBar.tsx b/src/components/MoneyRequestHeaderStatusBar.tsx
index cc0b1279204e..7f26b239dcc8 100644
--- a/src/components/MoneyRequestHeaderStatusBar.tsx
+++ b/src/components/MoneyRequestHeaderStatusBar.tsx
@@ -14,11 +14,11 @@ type MoneyRequestHeaderStatusBarProps = {
     /** Whether we show the border bottom */
     shouldShowBorderBottom: boolean;
 
-    /** Is Error type */
-    error?: boolean;
+    /** Whether we should use the danger theme color */
+    danger?: boolean;
 };
 
-function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, error = false}: MoneyRequestHeaderStatusBarProps) {
+function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, danger = false}: MoneyRequestHeaderStatusBarProps) {
     const styles = useThemeStyles();
     const borderBottomStyle = shouldShowBorderBottom ? styles.borderBottom : {};
     return (
@@ -27,7 +27,7 @@ function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom
                 <Badge
                     text={title}
                     badgeStyles={styles.ml0}
-                    error={error}
+                    error={danger}
                 />
             </View>
             <View style={[styles.flexShrink1]}>