feat(ui): Complete UI/UX Overhaul with Material 3 Design

[MasuRii]

🎨 Complete UI/UX Overhaul with Material 3 Design

Summary

This PR delivers a comprehensive redesign of the entire PH Fare Calculator application, modernizing all 8 screens and 2 shared widgets to follow modern Material 3 design standards. The design draws inspiration from Philippine Jeepney aesthetics, using the national colors (Blue, Yellow, Red) as the primary palette.

---

🖼️ What Changed

Theme System

• New centralized theme at lib/src/core/theme/app_theme.dart
• Philippine-inspired color palette:
  • 🔵 Primary: #0038A8 (PH Blue)
  • 🟡 Secondary: #FCD116 (PH Yellow)
  • 🔴 Tertiary: #CE1126 (PH Red)
• Material 3 enabled globally (useMaterial3: true)
• Stadium-shaped buttons, 16dp rounded cards
• Consistent 8dp grid spacing

Screens Redesigned (8)

Screen	Key Improvements
SplashScreen	Animated logo with scale/fade, gradient background, pulsing circular loader
OnboardingScreen	4-page flow, animated illustrations, smooth page transitions, progress dots
MainScreen	Modal bottom sheet for passengers (replaces dialog), floating action buttons, improved fare cards
MapPickerScreen	Draggable bottom sheet, animated location pin markers, loading/error overlays
SavedRoutesScreen	Swipe-to-delete with Dismissible, staggered list animations, empty state illustrations
SettingsScreen	Grouped sections with headers, toggle switches, themed cards with icons
ReferenceScreen	4 tabs (Road/Train/Ferry/Discounts), data tables, search functionality
OfflineMenuScreen	Feature cards with icons, gradient header, visual hierarchy

Widgets Improved (2)

Widget	Key Improvements
FareResultCard	"Best Value" badge, colored status bars, icon containers, fare breakdown
MapSelectionWidget	Animated bouncing markers, loading overlay, floating action buttons, error states

---

📁 Files Changed

New Files Created

lib/src/core/theme/app_theme.dart      # Centralized theme definition
docs/UIUX_DESIGN_SPEC.md               # Comprehensive design system guide
docs/THEME_SPEC.md                     # Theme implementation details
docs/CURRENT_UI_ANALYSIS.md            # Initial UI audit report

Modified Files (22)

• 8 screens in lib/src/presentation/screens/
• 2 widgets in lib/src/presentation/widgets/
• 6 test files updated for new UI structure
• Localization files with new strings
• lib/main.dart - theme integration

---

📊 Statistics

Metric	Value
Files Changed	26
Insertions	+7,260
Deletions	-1,709
Net Change	+5,551 lines

---

✅ Testing

Verification Protocol Passed

✅ flutter clean
✅ flutter pub get
✅ flutter pub run build_runner build --delete-conflicting-outputs
✅ flutter format --set-exit-if-changed -n .
✅ dart analyze --fatal-infos --fatal-warnings → No issues found!
✅ flutter test → 95/95 tests passing (100%)

Manual Testing Recommended

1. Run the app: flutter run
2. Navigate through all screens
3. Test light/dark mode transitions
4. Verify animations are smooth (60fps)
5. Test on different screen sizes

---

🎯 Design Principles Applied

1. Material 3 Compliance - Uses latest Flutter theming with useMaterial3: true
2. Cultural Identity - Philippine Jeepney-inspired vibrant color palette
3. Accessibility - Proper touch targets (48x48dp), semantic labels
4. Animation - Smooth 300-500ms transitions with proper easing curves
5. Consistency - Unified spacing (8dp grid), typography, and component styling
6. Empty States - Informative illustrations when lists are empty
7. Error Handling - Visual feedback for loading and error states

---

📝 Documentation

See the docs/ folder for:

• UIUX_DESIGN_SPEC.md - Complete design system reference
• THEME_SPEC.md - Theme implementation guide
• CURRENT_UI_ANALYSIS.md - Original UI audit

---

🔮 Future Recommendations

1. Add screenshot/golden tests to lock in designs
2. Run Flutter accessibility scanner for WCAG compliance
3. Profile animations on low-end devices
4. Gather user feedback on new interface
5. Consider adding dark mode toggle in settings