Skip to content

fix: adjust agent promotional banner UI to match design mocks #91795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NicolasBonet merged 5 commits into from
Jun 2, 2026
Merged

fix: adjust agent promotional banner UI to match design mocks #91795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4848897
Update agent promotional banner UI to match design mocks
MelvinBot May 27, 2026
9dee2f2
Remove redundant gap3 style from AgentPromotionalBanner
MelvinBot May 27, 2026
111146c
Fix right-side spacing: 16px gap between button and dismiss icon
MelvinBot May 27, 2026
58e8e62
Merge remote-tracking branch 'origin/main' into claude-agentBannerUIT…
MelvinBot May 31, 2026
cc42a30
Use BillingBanner's built-in rightIcon for dismiss; constrain icon wi…
MelvinBot May 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/AgentPromotionalBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel,
return (
<Button
success
small
medium
text={ctaText}
onPress={onCtaPress}
sentryLabel={ctaSentryLabel}
Expand All @@ -97,8 +97,8 @@ function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel,
icon={illustrations.AiBot}
title={titleNode}
subtitle={subtitle}
subtitleStyle={[styles.mt1]}
style={[styles.borderRadiusComponentLarge, styles.gap4]}
subtitleStyle={[styles.mt1, styles.textLabel]}
style={[styles.borderRadiusComponentLarge]}
rightIcon={expensifyIcons.Close}
onRightIconPress={onDismiss}
rightIconAccessibilityLabel={translate('common.dismiss')}
Expand Down
3 changes: 2 additions & 1 deletion src/pages/settings/Subscription/CardSection/BillingBanner/BillingBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function BillingBanner({
return onRightIconPress && rightIconAccessibilityLabel ? (
<PressableWithoutFeedback
onPress={onRightIconPress}
style={[styles.touchableButtonImage]}
style={[styles.touchableButtonImage, styles.threeDotsMenuIconWidth]}

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 1, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep the dismiss hit target at 40px

When a BillingBanner right icon is pressable (e.g. the agent promo and retry-billing success dismiss buttons), adding threeDotsMenuIconWidth overrides touchableButtonImage's 40px width with componentSizeXSmall (20px at the default font scale). That shrinks the actual tappable area of the close button on touch devices, making the dismiss affordance much harder to hit; adjust the visual spacing without reducing the pressable width, or use hit slop to preserve the old target size.

Useful? React with 👍 / 👎.

role={CONST.ROLE.BUTTON}
accessibilityLabel={rightIconAccessibilityLabel}
sentryLabel={rightIconSentryLabel ?? CONST.SENTRY_LABEL.BILLING_BANNER.RIGHT_ICON}
Expand Down Expand Up @@ -108,6 +108,7 @@ function BillingBanner({
rightIconAccessibilityLabel,
rightIconSentryLabel,
styles.touchableButtonImage,
styles.threeDotsMenuIconWidth,
theme.danger,
theme.icon,
theme.success,
Expand Down
Loading