Add race header design variations and preview screen#22
Open
selfire1 wants to merge 2 commits into
Open
Conversation
Adds a preview screen (`/race-header-preview`) showing three candidate mobile race header designs stacked for comparison: 1. Blurred flag + subtle gradient (port of the web FlagBackgroundCard) 2. Native polish — typographic hierarchy, date tile, season progress 3. Creative HUD — tilted flag, oversized type, pulsing countdown Adds `expo-linear-gradient` and a small "Preview header designs" link at the top of the home screen for navigation. Existing header.tsx is untouched. https://claude.ai/code/session_01BJkyoozsLDLYpu42zmmB3T
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
2 participants
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.
Summary
Added three different design variations for the race header component and a preview screen to showcase them. This allows the team to evaluate different UI approaches for displaying race information on the home screen.
Key Changes
Three header design variations:
BlurredFlagHeader: Clean design with blurred race image background, circular image badge, and gradient overlayNativePolishHeader: Native-style card with race details, date badge, progress bar showing season progress, and clock icon for qualifying lock timeCreativeHeader: Bold, animated design with large background text, pulsing status indicators, countdown timer, and gradient overlaysPreview screen (
race-header-preview.tsx): New route that displays all three header variations side-by-side for easy comparison and design evaluationDummy data (
dummy.ts): Centralized mock race metadata used across all header variations (round number, circuit name, countdown timers, etc.)Home screen link: Added a subtle link on the home screen to navigate to the header preview screen for quick access during development
Implementation Details
Raceobject and display race-specific informationreact-native-reanimated(fade-in entrance animation on CreativeHeader, pulsing dots for status indicators)PulseDotcomponent for animated status indicators in the creative headerhttps://claude.ai/code/session_01BJkyoozsLDLYpu42zmmB3T