Skip to content

Commit

Permalink
Merge pull request #36278 from Expensify/georgia-reportPreviewStyling2
Browse files Browse the repository at this point in the history 
Styling fixes for ReportPreview/MoneyRequestPreview
  • Loading branch information
@grgia
grgia authored Mar 1, 2024
2 parents 0c09803 + 9994655 commit 39a257d
Show file tree
Hide file tree
Showing 10 changed files with 175 additions and 133 deletions.
2 changes: 1 addition & 1 deletion src/components/HeaderWithBackButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]}>
Expand Down
130 changes: 68 additions & 62 deletions src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,73 +228,79 @@ function MoneyRequestPreviewContent({
{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 && shouldShowRBR && (
<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}>
<View style={[styles.expenseAndReportPreviewBoxBody, hasReceipt ? styles.mtn1 : {}]}>
<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 && shouldShowRBR && (
<Icon
src={Expensicons.Checkmark}
fill={theme.iconSuccessFill}
src={Expensicons.DotIndicator}
fill={theme.danger}
/>
</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 && (
<View style={[styles.breakWord, styles.preWrap]}>
<RenderHTML html={`<muted-text>${parser.replace(merchantOrDescription)}</muted-text>`} />
<View style={styles.reportPreviewAmountSubtitleContainer}>
<View style={[styles.flexRow]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<Text
style={[
styles.textHeadlineH1,
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"
shouldUseCardBackground
/>
</View>
)}
</View>
<View style={[styles.flexRow]}>
<View style={[styles.flex1]}>
{!isCurrentUserManager && shouldShowPendingConversionMessage && (
<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>
)}
{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>
)}
{shouldShowMerchant && <Text style={[styles.textLabelSupporting, styles.textNormal]}>{merchantOrDescription}</Text>}
</View>
</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>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ReportActionItem/MoneyRequestView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))}
Expand Down
Loading

0 comments on commit 39a257d

Please sign in to comment.