Merge pull request #36278 from Expensify/georgia-reportPreviewStyling2

Styling fixes for ReportPreview/MoneyRequestPreview
Expensify · Mar 1, 2024 · 39a257d · 39a257d
2 parents 0c09803 + 9994655
commit 39a257d
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 133 deletions.
diff --git 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]}>

diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
@@ -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>
  )}

diff --git 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))}