# Global UI Restyling Implementation Plan
> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Propagate the "Light Foundation + Cinematic Pockets" design system (warmCanvas scaffold, white elevated cards, coral accents, tight Inter typography) from the feed to all ~45 screens of the Flow mobile app.
**Architecture:** Hybrid approach — AppTheme overrides propagate automatically via ThemeData, 3 new shared widgets cover patterns the theme can't reach, ~6 existing shared widgets get targeted updates, then 19 screens get a light pass and 15 get a targeted redesign. Work is split across 7 git branches with a strict merge order so each level builds on the previous.
**Tech Stack:** Flutter/Dart, Riverpod, GoRouter, `google_fonts` (Inter via `GoogleFonts.inter()`), Supabase. No test framework for widget tests — verification is `flutter analyze` + visual hot-reload inspection.
**Spec:** `flow-docs/docs/superpowers/specs/2026-03-18-global-restyling-design.md`
---
## Branch Merge Order (MANDATORY)
```
develop
└── feat/restyling-theme ← merge first
└── feat/restyling-shared-widgets ← merge second
├── feat/restyling-l1 ← merge third
├── feat/restyling-l2-events ← parallel with l2-profile/chat/misc
├── feat/restyling-l2-profile
├── feat/restyling-l2-chat
└── feat/restyling-l2-misc
```
Each branch is cut from the tip of its parent. Merging out-of-order will create widget conflicts.
---
## File Map
| File | Branch | Action |
|---|---|---|
| `lib/core/theme/app_theme.dart` | feat/restyling-theme | Modify: add tokens + all ThemeData overrides |
| `lib/shared/widgets/flow_section_header.dart` | feat/restyling-theme | Create new |
| `lib/shared/widgets/flow_list_tile.dart` | feat/restyling-theme | Create new |
| `lib/shared/widgets/flow_stat_card.dart` | feat/restyling-theme | Create new |
| `lib/shared/widgets/vibe_filter_bar.dart` | feat/restyling-shared-widgets | Modify |
| `lib/shared/widgets/chat_tile.dart` | feat/restyling-shared-widgets | Modify |
| `lib/shared/widgets/crew_summary_card.dart` | feat/restyling-shared-widgets | Modify |
| `lib/shared/widgets/hero_event_card.dart` | feat/restyling-shared-widgets | Verify (minor) |
| `lib/shared/widgets/squad_detail_sheet.dart` | feat/restyling-shared-widgets | Modify (minor) |
| `lib/shared/widgets/map_preview.dart` | feat/restyling-shared-widgets | Modify (radius only) |
| `lib/features/settings/screens/settings_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/help/screens/help_support_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/notifications/screens/notifications_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/search/screens/search_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/social/screens/friends_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/messaging/screens/chats_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/events/screens/my_events_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/profile/screens/social_list_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/messaging/screens/chat_details_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/messaging/screens/create_group_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/profile/screens/my_crews_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/profile/screens/verification_request_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/auth/screens/registration_wizard_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/onboarding/screens/profile_setup_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/onboarding/screens/welcome_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/auth/screens/login_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/profile/screens/edit_profile_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/social/screens/create_squad_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/campaigns/screens/create_campaign_screen.dart` | feat/restyling-l1 | Modify |
| `lib/features/events/screens/event_details_screen.dart` | feat/restyling-l2-events | Modify |
| `lib/features/events/screens/events_screen.dart` | feat/restyling-l2-events | Modify |
| `lib/features/events/screens/event_discovery_screen.dart` | feat/restyling-l2-events | Modify |
| `lib/features/profile/screens/profile_screen.dart` | feat/restyling-l2-profile | Modify |
| `lib/features/profile/screens/public_profile_screen.dart` | feat/restyling-l2-profile | Modify |
| `lib/shared/widgets/message_bubble.dart` | feat/restyling-shared-widgets | Modify (bubble colors) |
| `lib/features/messaging/screens/chat_screen.dart` | feat/restyling-l2-chat | Modify (AppBar + input bar only) |
| `lib/features/tickets/screens/ticket_wallet_screen.dart` | feat/restyling-l2-misc | Modify |
| `lib/features/dashboard/screens/vendor_dashboard_screen.dart` | feat/restyling-l2-misc | Modify |
| `lib/features/pr/screens/pr_dashboard_screen.dart` | feat/restyling-l2-misc | Modify |
| `lib/features/events/screens/create_event_screen.dart` | feat/restyling-l2-misc | Modify |
| `lib/features/social/screens/create_crew_screen.dart` | feat/restyling-l2-misc | Modify |
| `lib/features/events/screens/radar_map_screen.dart` | feat/restyling-l2-misc | Verify (already done) |
| `lib/features/events/screens/widgets/map_explore_view.dart` | feat/restyling-l2-misc | Modify (chrome only) |
| `lib/features/events/screens/widgets/timeline_discovery_view.dart` | feat/restyling-l2-misc | Modify (chrome only) |
| `lib/features/social/screens/crew_matchmaking_wizard.dart` | feat/restyling-l2-misc | Modify |
> **Note:** Before touching any screen, `grep` for the actual file path — the folder structure above is inferred from naming conventions and may differ slightly. Use `find lib -name "settings_screen.dart"` to locate the real path.
---
## BRANCH 1: feat/restyling-theme
Cut from: `develop`
Merge to: `develop` (first, before all other restyling branches)
---
### Task 1: Create branch and add new AppTheme tokens
**Files:**
- Modify: `lib/core/theme/app_theme.dart`
- [ ] **Step 1: Create branch**
```bash
git checkout develop
git pull
git checkout -b feat/restyling-theme
```
- [ ] **Step 2: Open `lib/core/theme/app_theme.dart`**
Read the current radius section (lines ~24–31). You will see that `radius16 = 16.0` already exists. Only `radius14` and `radius28` are missing. Add them after `radius12`:
```dart
static const double radius14 = 14.0; // input fields
// radius16 = 16.0 already exists — FlowStatCard, map preview
// radius20 = 20.0 already exists — card standard
// ...
static const double radius28 = 28.0; // bottom sheet, hero card
```
Also add the new color token after the existing text color block:
```dart
static const Color textSecondaryWarm = Color(0xFF9E9E9E); // lighter grey for secondary UI text
```
- [ ] **Step 3: Verify**
```bash
cd /mnt/c/Users/elia-/Documents/flowproject/flow_mobile
flutter analyze lib/core/theme/app_theme.dart
```
Expected: no errors.
- [ ] **Step 4: Commit**
```bash
git add lib/core/theme/app_theme.dart
git commit -m "feat(theme): add radius14, radius28, textSecondaryWarm tokens"
```
---
### Task 2: Update AppTheme ThemeData overrides
**Files:**
- Modify: `lib/core/theme/app_theme.dart`
This task replaces or adds 9 `ThemeData` components inside `_buildTheme`. Work one component at a time.
**Context for `_buildTheme`:** The method receives `brightness`, `scaffoldBg`, `surfaceBg`, `primary`, `onPrimary`, `textPrimary`, `textSecondary`, `divider`. Use these parameters inside the theme — don't hardcode `electricCoral` or `inkBlack` directly in the theme body; use `primary` for coral and `textPrimary` for the primary text color. The two callers pass the right values already.
- [ ] **Step 1: Update `appBarTheme`**
Replace the existing `appBarTheme` block with:
```dart
appBarTheme: AppBarTheme(
backgroundColor: scaffoldBg,
elevation: 0,
scrolledUnderElevation: 0,
centerTitle: false,
titleTextStyle: GoogleFonts.inter(
color: textPrimary,
fontSize: 20,
fontWeight: FontWeight.w900,
letterSpacing: -0.5,
),
iconTheme: IconThemeData(color: textPrimary),
actionsIconTheme: IconThemeData(color: textPrimary),
systemOverlayStyle: brightness == Brightness.dark
? SystemUiOverlayStyle.light
: SystemUiOverlayStyle.dark,
),
```
Key changes from current: `FontWeight.bold` → `FontWeight.w900`, `letterSpacing: -0.5` added, `actionsIconTheme` added.
- [ ] **Step 2: Update `cardTheme`**
Replace existing `cardTheme` block:
```dart
cardTheme: CardThemeData(
color: brightness == Brightness.dark
? const Color(0xFF1E1E1E)
: Colors.white,
elevation: 0,
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius20),
),
),
```
Key changes: light card was `Color(0xFFF4F4F5)` (zinc 100) → `Colors.white`; radius `radius32` → `radius20`.
- [ ] **Step 3: Replace `inputDecorationTheme`**
Replace the entire existing `inputDecorationTheme` block with:
```dart
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: brightness == Brightness.dark
? const Color(0xFF2A2A2A)