From 960efa56e9f5a4bbceb89f78b3274f22e25a5e31 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Thu, 17 Sep 2026 20:04:00 +0000 Subject: [PATCH 1/4] Add componentBorderRadiusCardAndTable var and apply 12px radius to tables and content cards Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionItem.tsx | 2 +- src/pages/UnreportedExpenseListItem.tsx | 2 +- src/styles/index.ts | 14 +++++++------- src/styles/utils/index.ts | 2 +- src/styles/variables.ts | 2 ++ 5 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 910980f43773..2b25f50259c5 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -318,7 +318,7 @@ function MoneyRequestReportTransactionItem(props: MoneyRequestReportTransactionI // Hoisted out of the body so the highlight animation timeline survives the narrow↔wide // component-type swap caused by browser resize. const animatedHighlightStyle = useAnimatedHighlightStyle({ - borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0, + borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadiusCardAndTable : 0, shouldHighlight: shouldBeHighlighted, highlightColor: theme.messageHighlightBG, backgroundColor: theme.highlightBG, diff --git a/src/pages/UnreportedExpenseListItem.tsx b/src/pages/UnreportedExpenseListItem.tsx index ed3cf4b9bace..2bd465eead07 100644 --- a/src/pages/UnreportedExpenseListItem.tsx +++ b/src/pages/UnreportedExpenseListItem.tsx @@ -49,7 +49,7 @@ function UnreportedExpenseListItem({ const pressableStyle = [styles.transactionListItemStyle, isSelected && styles.activeComponentBG]; const animatedHighlightStyle = useAnimatedHighlightStyle({ - borderRadius: variables.componentBorderRadius, + borderRadius: variables.componentBorderRadiusCardAndTable, shouldHighlight: item?.shouldAnimateInHighlight ?? false, highlightColor: theme.messageHighlightBG, backgroundColor: theme.highlightBG, diff --git a/src/styles/index.ts b/src/styles/index.ts index 28371fa3527f..42d5457975d1 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2748,13 +2748,13 @@ const staticStyles = (theme: ThemeColors) => }, tableTopRadius: { - borderTopLeftRadius: variables.componentBorderRadius, - borderTopRightRadius: variables.componentBorderRadius, + borderTopLeftRadius: variables.componentBorderRadiusCardAndTable, + borderTopRightRadius: variables.componentBorderRadiusCardAndTable, }, tableBottomRadius: { - borderBottomLeftRadius: variables.componentBorderRadius, - borderBottomRightRadius: variables.componentBorderRadius, + borderBottomLeftRadius: variables.componentBorderRadiusCardAndTable, + borderBottomRightRadius: variables.componentBorderRadiusCardAndTable, }, tableBorder: { @@ -4175,7 +4175,7 @@ const staticStyles = (theme: ThemeColors) => cardSectionContainer: { backgroundColor: theme.cardBG, - borderRadius: variables.componentBorderRadiusLarge, + borderRadius: variables.componentBorderRadiusCardAndTable, width: 'auto', textAlign: 'left', overflow: 'hidden', @@ -4185,7 +4185,7 @@ const staticStyles = (theme: ThemeColors) => widgetContainer: { backgroundColor: theme.cardBG, - borderRadius: variables.componentBorderRadiusLarge, + borderRadius: variables.componentBorderRadiusCardAndTable, overflow: 'hidden', }, @@ -5347,7 +5347,7 @@ const staticStyles = (theme: ThemeColors) => }, transactionListItemStyle: { - borderRadius: 8, + borderRadius: variables.componentBorderRadiusCardAndTable, minHeight: variables.optionRowHeight, backgroundColor: theme.transparent, flex: 1, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 314ec3de6b00..78e5b1ced68d 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1974,7 +1974,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ borderColor: isSelected ? theme.buttonHoveredBG : theme.border, }), - getSearchTableHighlightBorderRadius: (isLargeScreenWidth: boolean): number => (isLargeScreenWidth ? 0 : variables.componentBorderRadius), + getSearchTableHighlightBorderRadius: (isLargeScreenWidth: boolean): number => (isLargeScreenWidth ? 0 : variables.componentBorderRadiusCardAndTable), getReportTableColumnStyles: (columnName: string, options: GetReportTableColumnStylesParams = {}): ViewStyle => { const { diff --git a/src/styles/variables.ts b/src/styles/variables.ts index b6e09ce0d44e..4e692a7484f6 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -49,6 +49,8 @@ export default { componentBorderRadiusSmall: 4, componentBorderRadiusMedium: 6, componentBorderRadiusNormal: 8, + /** Shared radius for the surfaces that wrap content on a different background: tables and content cards */ + componentBorderRadiusCardAndTable: 12, componentBorderRadiusLarge: 16, componentBorderRadiusXLarge: 28, componentBorderRadiusCard: 20, From efb6578a11607ea8625ba3eb85ef2b792d57d5d6 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Thu, 17 Sep 2026 21:14:30 +0000 Subject: [PATCH 2/4] Apply the 12px card radius to chat expense report, invoice and trip previews Co-authored-by: Shawn Borton --- .../MoneyRequestReportPreviewBody.tsx | 2 +- src/styles/index.ts | 20 ++++++++++++------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewBody.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewBody.tsx index 2710498e3cae..4e52fbcf82c3 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewBody.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewBody.tsx @@ -114,7 +114,7 @@ function MoneyRequestReportPreviewBody({ styles.flexRow, styles.justifyContentBetween, StyleUtils.getBackgroundColorStyle(theme.cardBG), - shouldShowBorder ? styles.borderedContentCardLarge : styles.reportContainerBorderRadius, + shouldShowBorder ? styles.borderedReportPreviewCard : styles.reportContainerBorderRadius, isReportDeleted && styles.pointerEventsNone, ]} role={CONST.ROLE.BUTTON} diff --git a/src/styles/index.ts b/src/styles/index.ts index 42d5457975d1..4bbf40726d89 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -288,6 +288,10 @@ const compactPopoverMenuItemBaseStyle = { const COMPOSER_SIZE_BUTTON_SIZE = 40; const COMPOSER_SIZE_BUTTON_MARGIN = 3; +// How far the receipt image row is inset from the edge of its preview card, shared by +// reportActionItemImagesContainer and reportActionItemImages so the two corners stay concentric. +const reportActionItemImagesInset = 4; + const staticStyles = (theme: ThemeColors) => StyleSheet.create({ ...spacing, @@ -3202,10 +3206,10 @@ const staticStyles = (theme: ThemeColors) => borderRadius: variables.componentBorderRadiusNormal, }, - borderedContentCardLarge: { + borderedReportPreviewCard: { borderWidth: 1, borderColor: theme.border, - borderRadius: variables.componentBorderRadiusLarge, + borderRadius: variables.componentBorderRadiusCardAndTable, }, sectionMenuItemTopDescription: { @@ -3503,7 +3507,7 @@ const staticStyles = (theme: ThemeColors) => moneyRequestPreviewBox: { backgroundColor: theme.cardBG, - borderRadius: variables.componentBorderRadiusLarge, + borderRadius: variables.componentBorderRadiusCardAndTable, maxWidth: variables.reportPreviewMaxWidth, width: '100%', }, @@ -5011,7 +5015,7 @@ const staticStyles = (theme: ThemeColors) => reportPreviewBox: { backgroundColor: theme.cardBG, - borderRadius: variables.componentBorderRadiusLarge, + borderRadius: variables.componentBorderRadiusCardAndTable, maxWidth: variables.reportPreviewMaxWidth, width: '100%', }, @@ -5026,7 +5030,7 @@ const staticStyles = (theme: ThemeColors) => }, reportContainerBorderRadius: { - borderRadius: variables.componentBorderRadiusLarge, + borderRadius: variables.componentBorderRadiusCardAndTable, }, expenseAndReportPreviewBoxBody: { @@ -5042,7 +5046,7 @@ const staticStyles = (theme: ThemeColors) => }, reportActionItemImagesContainer: { - margin: 4, + margin: reportActionItemImagesInset, }, receiptPreviewAspectRatio: { @@ -5051,7 +5055,9 @@ const staticStyles = (theme: ThemeColors) => reportActionItemImages: { flexDirection: 'row', - borderRadius: 12, + // The receipt row sits inside the preview card, inset by the margin on + // `reportActionItemImagesContainer`, so subtract that inset to stay concentric with the card corner. + borderRadius: variables.componentBorderRadiusCardAndTable - reportActionItemImagesInset, overflow: 'hidden', }, From 3fef26a6e0f60803efbde21aa1b75dc01fd404b6 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Fri, 18 Sep 2026 07:02:04 +0000 Subject: [PATCH 3/4] Apply the 12px card radius to the Spend > Insights chart container cards Co-authored-by: Shawn Borton --- src/styles/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 4bbf40726d89..c2cc65532da9 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -6692,7 +6692,7 @@ const staticStyles = (theme: ThemeColors) => justifyContent: 'center', alignItems: 'center', backgroundColor: theme.highlightBG, - borderRadius: variables.componentBorderRadiusLarge, + borderRadius: variables.componentBorderRadiusCardAndTable, padding: 20, minHeight: CHART_CONTENT_MIN_HEIGHT, }, @@ -6728,7 +6728,7 @@ const staticStyles = (theme: ThemeColors) => borderStyle: 'solid', }, chartContainer: { - borderRadius: variables.componentBorderRadiusLarge, + borderRadius: variables.componentBorderRadiusCardAndTable, }, chartContent: { height: CHART_CONTENT_MIN_HEIGHT, From ebd8477e1f74b075c6ceafdd7c47c5f3a4bf6dd2 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Fri, 18 Sep 2026 10:09:02 +0000 Subject: [PATCH 4/4] Apply the 12px card radius to the More features toggle cards Co-authored-by: Shawn Borton --- 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 c2cc65532da9..95e4499cf711 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5700,7 +5700,7 @@ const staticStyles = (theme: ThemeColors) => workspaceSectionMoreFeaturesItem: { backgroundColor: theme.cardBG, - borderRadius: variables.componentBorderRadiusNormal, + borderRadius: variables.componentBorderRadiusCardAndTable, paddingHorizontal: 16, paddingVertical: 20, minWidth: 350,