fix(ui): event Cancel button invisible in light mode + button-style consistency sweep#523
Merged
Merged
Conversation
…tgun)
NativeWind 4's CssInterop silently drops the `style={({ pressed }) => ...}`
function form on Pressable, stripping background/padding/border/radius. Where
the label is light/white this left white-on-transparent — invisible in light
mode. Reported on the event page's "Cancel Registration" button; the same
failure also hit EmptyPanel's accent CTA.
Convert off the function form:
- DestructiveButton → className + active: (matches PrimaryButton.native), exact
red via arbitrary hex so it's theme-config-independent
- SecondaryButton / GhostButton / IconButton → array style + state-driven press
- EmptyPanel accent CTA → static style + state-driven press
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Deploying chinmaya-janata with
|
| Latest commit: |
28e2032
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://9abc4a3b.project-janatha.pages.dev |
| Branch Preview URL: | https://fix-destructive-button-light.project-janatha.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The event page's Cancel Registration button was invisible in light mode (white text on no background — see screenshot).
Root cause
NativeWind 4's CssInterop silently drops the
style={({ pressed }) => ...}function form onPressable(already documented inPrimaryButton.native.tsx). The background/padding/border live in that callback, so they never apply. When the label is light/white, the result is white-on-transparent = invisible.Fixed
DestructiveButton(event + settings cancel)className+active:(arbitrary hex#DC2626/#B91C1C)EmptyPanelaccent CTAtextInverseon dropped accent bg → invisibleSecondaryButton/GhostButton/IconButtonAll keep their exact visuals and regain press feedback.
tsc --noEmitclean.Audit — remaining function-style Pressables (NOT broken, lower priority)
These use the same anti-pattern but their content stays visible today (icon or dark/theme text), so they only lose press-state chrome — safe to harden in a follow-up:
components/ui/TabHeader.tsx(icon buttons)components/ui/AuthPromptModal.tsx(× close —colors.text)components/invite/InviteCodeField.tsxapp/(tabs)/profile.web.tsx(web)components/events/EventDetailPanel.web.tsx(web cancel — dark-red text, visible)Verify