diff --git a/src/components/ReportActionItem/ActionableItemButtons.tsx b/src/components/ReportActionItem/ActionableItemButtons.tsx index 4ea02ce0fba1a..f4c8e6cef36c7 100644 --- a/src/components/ReportActionItem/ActionableItemButtons.tsx +++ b/src/components/ReportActionItem/ActionableItemButtons.tsx @@ -19,9 +19,9 @@ type ActionableItemButtonsProps = { layout?: 'horizontal' | 'vertical'; shouldUseLocalization?: boolean; primaryTextNumberOfLines?: number; + isBackgroundHovered?: boolean; styles?: { text?: StyleProp; - button?: StyleProp; container?: StyleProp; }; }; @@ -39,7 +39,7 @@ function ActionableItemButtons(props: ActionableItemButtonsProps) { text={props.shouldUseLocalization ? translate(item.text as TranslationPaths) : item.text} medium success={item.isPrimary} - innerStyles={props.styles?.button} + innerStyles={!item.isPrimary && [styles.actionableItemButton, props.isBackgroundHovered && styles.actionableItemButtonBackgroundHovered]} primaryTextNumberOfLines={props.primaryTextNumberOfLines} textStyles={props.styles?.text} /> diff --git a/src/pages/inbox/report/PureReportActionItem.tsx b/src/pages/inbox/report/PureReportActionItem.tsx index afceb51f7b20e..656d925ba31c9 100644 --- a/src/pages/inbox/report/PureReportActionItem.tsx +++ b/src/pages/inbox/report/PureReportActionItem.tsx @@ -1617,6 +1617,7 @@ function PureReportActionItem({ )} @@ -1630,6 +1631,7 @@ function PureReportActionItem({ items={actionableItemButtons} shouldUseLocalization layout={isActionableTrackExpense(action) ? 'vertical' : 'horizontal'} + isBackgroundHovered={hovered} /> )} @@ -1743,6 +1745,7 @@ function PureReportActionItem({ items={actionableItemButtons} shouldUseLocalization layout="vertical" + isBackgroundHovered={hovered} /> )} @@ -1818,9 +1821,9 @@ function PureReportActionItem({ } shouldUseLocalization={!isConciergeOptions && !actionContainsFollowUps} primaryTextNumberOfLines={actionableButtonsNoLines} + isBackgroundHovered={hovered} styles={{ - text: [isConciergeOptions || actionContainsFollowUps ? styles.textAlignLeft : undefined], - button: actionContainsFollowUps ? [styles.actionableItemButton, hovered && styles.actionableItemButtonBackgroundHovered] : undefined, + text: [styles.textAlignLeft, styles.breakWord], container: [ actionContainsFollowUps && shouldUseNarrowLayout ? styles.alignItemsStretch : undefined, actionContainsFollowUps ? styles.mt5 : undefined,