Use a shared 12px border radius for tables and content cards

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,

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}

src/pages/UnreportedExpenseListItem.tsx

@@ -49,7 +49,7 @@ function UnreportedExpenseListItem<TItem extends ListItem>({
     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,

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,
@@ -2748,13 +2752,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: {
@@ -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%',
         },
@@ -4175,7 +4179,7 @@ const staticStyles = (theme: ThemeColors) =>
 
         cardSectionContainer: {
             backgroundColor: theme.cardBG,
-            borderRadius: variables.componentBorderRadiusLarge,
+            borderRadius: variables.componentBorderRadiusCardAndTable,
             width: 'auto',
             textAlign: 'left',
             overflow: 'hidden',
@@ -4185,7 +4189,7 @@ const staticStyles = (theme: ThemeColors) =>
 
         widgetContainer: {
             backgroundColor: theme.cardBG,
-            borderRadius: variables.componentBorderRadiusLarge,
+            borderRadius: variables.componentBorderRadiusCardAndTable,
             overflow: 'hidden',
         },
 
@@ -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',
         },
 
@@ -5347,7 +5353,7 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         transactionListItemStyle: {
-            borderRadius: 8,
+            borderRadius: variables.componentBorderRadiusCardAndTable,
             minHeight: variables.optionRowHeight,
             backgroundColor: theme.transparent,
             flex: 1,
@@ -5694,7 +5700,7 @@ const staticStyles = (theme: ThemeColors) =>
 
         workspaceSectionMoreFeaturesItem: {
             backgroundColor: theme.cardBG,
-            borderRadius: variables.componentBorderRadiusNormal,
+            borderRadius: variables.componentBorderRadiusCardAndTable,
             paddingHorizontal: 16,
             paddingVertical: 20,
             minWidth: 350,
@@ -6686,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,
         },
@@ -6722,7 +6728,7 @@ const staticStyles = (theme: ThemeColors) =>
             borderStyle: 'solid',
         },
         chartContainer: {
-            borderRadius: variables.componentBorderRadiusLarge,
+            borderRadius: variables.componentBorderRadiusCardAndTable,
         },
         chartContent: {
             height: CHART_CONTENT_MIN_HEIGHT,

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 {

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,