UI: Redesign TimeTableScreen header and journey route display

[ksharma-xyz]

TL;DR

Redesigned the time table screen header with improved styling and animations.
Making trip info at top scrollable because for large font size it will take lot of space. Could make it adaptive so only scrolls when large font size, but too complicated UX for MVP, when things are changing so often

What changed?

• Added text layout callback support to the Text component
• Increased stroke width of star outline icon from 1 to 2
• Replaced animated journey route with a new origin-destination component
• Updated title bar styling with a themed background color
• Implemented a new timeline-based design for origin and destination display
• Added preview functionality for the origin-destination component
• Modified the save button to use a circle background with improved touch target

Why make this change?

The new design improves visual hierarchy and user experience by:

• Making the origin-destination more visually distinct
• Providing better touch targets for interactive elements
• Creating a more cohesive and polished appearance with themed colors
• Improving readability with timeline-based station display

Screenshots

Screen.Recording.2024-10-31.at.11.54.43.pm.mov

[ksharma-xyz]

• UI: Redesign TimeTableScreen header and journey route display #279 👈
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ksharma-xyz and the rest of your teammates on Graphite

[ksharma-xyz]

Merge activity

• Oct 31, 9:12 AM EDT: A user started a stack merge that includes this pull request via Graphite.
• Oct 31, 9:12 AM EDT: A user merged this pull request with Graphite.