Apply updated design changes to Compose screens

[Joe3112]

Ticket | Artifacts | Task

What problems was I solving

TV Timer+ needed a visual refresh to improve the TV viewing experience with larger, more readable tiles, prominent focus states for D-pad navigation, and a more polished editorial design. The previous design used small 100dp tiles with subtle focus states that were difficult to navigate on a TV. This update brings the Compose UI in line with the updated design spec from the Claude Design export.

What user-facing changes did I ship

• Color.kt - Added FocusRing, BgGradientTop, BgGradientBottom, DashedBorder color tokens
• Theme.kt - Added V2BackgroundBrush radial gradient
• MainActivity.kt - Applied gradient background to root Surface
• V2Header.kt - New editorial header with step dots and 96sp title
• V2StepDots.kt - Progress indicator pills
• V2FocusableCard.kt - Reusable card with pink focus ring and lift animation
• DashedBorder.kt - Custom modifier for dashed tile borders
• TVCPBanner.kt - Cross-promo banner for TV Control Plus
• HomeScreen.kt - Major refresh: 232dp time tiles, V2Header, TVCP banner, refactored app grids
• TimerScreen.kt - Simplified layout with 520dp ring and 124dp action buttons

How I implemented it

Phase 1: Foundation

Added four new color tokens to Color.kt and created V2BackgroundBrush in Theme.kt as a radial gradient from top-left lighter to bottom-right darker. Applied the gradient to the root Surface in MainActivity.kt with transparent container color. Copied the TVCP logo asset.

Phase 2: Editorial Header

Created V2StepDots with active (24dp) and inactive (12dp) pill indicators. Built V2Header composable with step dots, eyebrow text, and 96sp title. Integrated into HomeScreen's time and app selection flows with correct step numbering.

Phase 3: Time Tiles

Created V2FocusableCard with pink (#FFD8E4) 3dp focus ring border and -2dp lift animation on focus. Built DashedBorder modifier for custom tile styling. Refactored TimeOption to 232dp height with 56sp/W700 typography. Updated grid to 22dp spacing.

Phase 4: TVCP Banner

Created TVCPBanner component with logo, eyebrow, title, description, and "Get it" CTA pill. Added to time selection screen with Play Store deep link (market:// intent with web fallback).

Phase 5: App Selection

Refactored AppCard with size parameters (height, iconSize, labelSize) for different grid contexts. Updated CuratedApps to 4-column 232dp tiles. Updated AllApps to 6-column 184dp tiles with 60dp icons and 22sp labels. Redesigned "Start Timer Only" and "Add Apps" special tiles.

Phase 6: Timer Screen

Replaced ConstraintLayout with centered Column layout. Increased timer ring to 520dp. Updated action buttons to 124dp with V2FocusableCard styling. Applied gradient background.

Deviations from the plan

Implemented as planned

• All six phases completed as specified
• Color tokens, gradient brush, and logo asset added exactly as planned
• V2Header, V2StepDots, V2FocusableCard, DashedBorder, TVCPBanner all created per spec
• HomeScreen padding, tile sizes, grid spacing all match plan values
• TimerScreen layout simplification with specified dimensions

Deviations/surprises

• V2FocusableCard border API: Used Border(BorderStroke(...)) wrapper instead of direct BorderStroke — necessary adaptation to actual TV Material3 API
• V2FocusableCard shape: Used CardDefaults.shape(shape) instead of direct shape parameter — API compatibility fix
• TimerScreen gradient: Applied V2BackgroundBrush directly on Column in addition to MainActivity root — redundant but harmless

Additions not in plan

• None — all changes are within planned scope

Items planned but not implemented

• None — all six phases fully implemented

How to verify it

Manual Testing

• Launch app and verify gradient background appears on all screens
• Navigate time selection with D-pad — confirm pink focus ring and lift animation
• Verify 232dp tall time tiles with 56sp typography
• Check TVCP banner appears below header on time selection
• Click TVCP banner to verify Play Store deep link
• Navigate to app selection — confirm 232dp curated tiles, 184dp all apps tiles
• Verify Start Timer Only and Add Apps special tiles have correct styling
• Start timer and verify 520dp ring with 124dp action buttons
• Confirm all focus states work with D-pad navigation

Automated Tests

./gradlew composeApp:compileDebugKotlin

Description for the changelog

Visual refresh for TV Timer+ with larger tiles (232dp), editorial header with step indicators, pink focus ring animations, TVCP cross-promo banner, and simplified timer screen layout.