From b1b1c7d3c41b6a2c0e863c96f72f5cae4b68f692 Mon Sep 17 00:00:00 2001 From: Chirag Chandrakant Salian Date: Tue, 13 Aug 2024 15:34:46 -0700 Subject: [PATCH] Revert "Update held transactions styles" --- src/components/MoneyReportHeader.tsx | 13 ++++++----- src/components/MoneyRequestHeader.tsx | 13 ++++++----- .../MoneyRequestHeaderStatusBar.tsx | 22 +++++++++++++++---- src/pages/iou/SplitBillDetailsPage.tsx | 2 +- src/styles/index.ts | 2 +- 5 files changed, 34 insertions(+), 18 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 66d93067c0e0..ad742b170b0c 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -18,8 +18,8 @@ import * as IOU from '@userActions/IOU'; import * as TransactionActions from '@userActions/Transaction'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Route} from '@src/ROUTES'; import ROUTES from '@src/ROUTES'; +import type {Route} from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import type IconAsset from '@src/types/utils/IconAsset'; @@ -30,8 +30,8 @@ import HeaderWithBackButton from './HeaderWithBackButton'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar'; -import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar'; import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar'; +import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar'; import type {ActionHandledType} from './ProcessMoneyReportHoldMenu'; import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu'; import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu'; @@ -211,13 +211,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea } } if (hasOnlyHeldExpenses) { - return {icon: getStatusIcon(Expensicons.Stopwatch), description: translate('iou.expensesOnHold')}; + return {title: translate('violations.hold'), description: translate('iou.expensesOnHold'), danger: true}; } if (allHavePendingRTERViolation) { - return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')}; + return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')}; } if (hasScanningReceipt) { - return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')}; + return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')}; } }; @@ -378,8 +378,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea {shouldShowNextStep && } {statusBarProps && ( )} diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index 7645028bc28a..cd54c64a652f 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -1,8 +1,8 @@ import type {ReactNode} from 'react'; import React, {useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -80,17 +80,17 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow const getStatusBarProps: () => MoneyRequestHeaderStatusBarProps | undefined = () => { if (isOnHold) { - return {icon: getStatusIcon(Expensicons.Stopwatch), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold')}; + return {title: translate('violations.hold'), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold'), danger: true}; } if (TransactionUtils.isExpensifyCardTransaction(transaction) && TransactionUtils.isPending(transaction)) { - return {icon: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription')}; + return {title: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription')}; } if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '-1', transactionViolations))) { - return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')}; + return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')}; } if (isScanning) { - return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')}; + return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')}; } }; @@ -185,8 +185,9 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow {statusBarProps && ( )} diff --git a/src/components/MoneyRequestHeaderStatusBar.tsx b/src/components/MoneyRequestHeaderStatusBar.tsx index e565f810d574..be4b9953d7c9 100644 --- a/src/components/MoneyRequestHeaderStatusBar.tsx +++ b/src/components/MoneyRequestHeaderStatusBar.tsx @@ -2,24 +2,38 @@ import type {ReactNode} from 'react'; import React from 'react'; import {View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; +import Badge from './Badge'; import Text from './Text'; type MoneyRequestHeaderStatusBarProps = { - /** Icon displayed in badge */ - icon: ReactNode; + /** Title displayed in badge */ + title: string | ReactNode; /** Banner Description */ description: string; + /** Whether we should use the danger theme color */ + danger?: boolean; + /** Whether we style flex grow */ shouldStyleFlexGrow?: boolean; }; -function MoneyRequestHeaderStatusBar({icon, description, shouldStyleFlexGrow = true}: MoneyRequestHeaderStatusBarProps) { +function MoneyRequestHeaderStatusBar({title, description, danger = false, shouldStyleFlexGrow = true}: MoneyRequestHeaderStatusBarProps) { const styles = useThemeStyles(); return ( - {icon} + {typeof title === 'string' ? ( + + + + ) : ( + {title} + )} {description} diff --git a/src/pages/iou/SplitBillDetailsPage.tsx b/src/pages/iou/SplitBillDetailsPage.tsx index 2f882d562b55..24bac1a0dde8 100644 --- a/src/pages/iou/SplitBillDetailsPage.tsx +++ b/src/pages/iou/SplitBillDetailsPage.tsx @@ -107,7 +107,7 @@ function SplitBillDetailsPage({personalDetails, report, route, reportActions, tr {isScanning && ( }, headerStatusBarContainer: { - minHeight: variables.componentSizeSmall, + minHeight: variables.componentSizeNormal, }, walletIllustration: {