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

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:

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:

static const Color textSecondaryWarm = Color(0xFF9E9E9E); // lighter grey for secondary UI text

Step 3: Verify

cd /mnt/c/Users/elia-/Documents/flowproject/flow_mobile
flutter analyze lib/core/theme/app_theme.dart

Expected: no errors.

Step 4: Commit

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:

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:

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:

inputDecorationTheme: InputDecorationTheme(
  filled: true,
  fillColor: brightness == Brightness.dark
      ? const Color(0xFF2A2A2A)
      : warmCanvas,
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(radius14),
    borderSide: BorderSide.none,
  ),
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(radius14),
    borderSide: BorderSide.none,
  ),
  focusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(radius14),
    borderSide: const BorderSide(color: electricCoral, width: 1.5),
  ),
  errorBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(radius14),
    borderSide: const BorderSide(color: Color(0xFFEF4444), width: 1.5),
  ),
  focusedErrorBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(radius14),
    borderSide: const BorderSide(color: Color(0xFFEF4444), width: 1.5),
  ),
  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
  hintStyle: GoogleFonts.inter(
    color: Colors.grey[400],
    fontWeight: FontWeight.w500,
  ),
  prefixIconColor: textSecondary,
),

Key change: filled: false + UnderlineInputBorder → filled: true + OutlineInputBorder with no visible border. This is a breaking visual change — all text fields app-wide will now be rounded filled boxes. After merging branch 1, hot-reload every screen with a form to check nothing looks broken.

Step 4: Update elevatedButtonTheme

Replace existing elevatedButtonTheme:

elevatedButtonTheme: ElevatedButtonThemeData(
  style: ElevatedButton.styleFrom(
    backgroundColor: primary,
    foregroundColor: onPrimary,
    elevation: 0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(radius14),
    ),
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
    textStyle: GoogleFonts.inter(
      fontSize: 15,
      fontWeight: FontWeight.w800,
    ),
    minimumSize: const Size(64, 48),
  ),
),

Key change: radiusFull (pill) → radius14 (squared), font 16 w600 → 15 w800.

Step 5: Update outlinedButtonTheme

Replace existing outlinedButtonTheme:

outlinedButtonTheme: OutlinedButtonThemeData(
  style: OutlinedButton.styleFrom(
    foregroundColor: textPrimary,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(radius14),
    ),
    side: const BorderSide(color: Color(0xFFE0DDD8)),
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
    textStyle: GoogleFonts.inter(
      fontSize: 15,
      fontWeight: FontWeight.w700,
    ),
    minimumSize: const Size(64, 48),
  ),
),

Key change: foreground was primary (coral) → textPrimary (inkBlack/white); border was coral → neutral 0xFFE0DDD8; radius pill → 14.

Step 6: Add bottomSheetTheme

After outlinedButtonTheme, add (new — does not exist yet):

bottomSheetTheme: BottomSheetThemeData(
  backgroundColor: brightness == Brightness.dark
      ? const Color(0xFF1E1E1E)
      : Colors.white,
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: Radius.circular(radius28)),
  ),
  elevation: 0,
  modalBackgroundColor: brightness == Brightness.dark
      ? const Color(0xFF1E1E1E)
      : Colors.white,
  modalElevation: 0,
),

Step 7: Add chipTheme

chipTheme: ChipThemeData(
  backgroundColor: electricCoral.withValues(alpha: 0.10),
  labelStyle: GoogleFonts.inter(
    color: electricCoral,
    fontSize: 12,
    fontWeight: FontWeight.w700,
  ),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(radiusFull),
  ),
  side: BorderSide.none,
  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
),

Step 8: Add dividerTheme

dividerTheme: DividerThemeData(
  color: brightness == Brightness.dark
      ? Colors.white.withValues(alpha: 0.08)
      : const Color(0xFFE8E5E0),
  thickness: 1,
  space: 1,
),

Step 9: Add listTileTheme

listTileTheme: ListTileThemeData(
  contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 4),
  titleTextStyle: GoogleFonts.inter(
    fontSize: 15,
    fontWeight: FontWeight.w600,
    color: textPrimary,
  ),
  subtitleTextStyle: GoogleFonts.inter(
    fontSize: 13,
    // NOTE: textSecondaryWarm is a static const on AppTheme, not a _buildTheme parameter.
    // Use AppTheme.textSecondaryWarm (static access) — do NOT add it as a new parameter.
    color: AppTheme.textSecondaryWarm,
  ),
),

Step 10: Add tabBarTheme

tabBarTheme: TabBarTheme(
  labelColor: electricCoral,
  unselectedLabelColor: Colors.grey[400],
  labelStyle: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.w800),
  unselectedLabelStyle: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.w600),
  indicator: const UnderlineTabIndicator(
    borderSide: BorderSide(color: electricCoral, width: 2.5),
  ),
  indicatorSize: TabBarIndicatorSize.label,
),

Step 11: Run analyze

flutter analyze lib/core/theme/app_theme.dart

Expected: no errors. If there are withValues errors (older Flutter), use withOpacity instead.

Step 12: Hot reload and visually verify

Run flutter run and navigate to:

Any screen with a TextField — should show filled rounded box, not underline
Any ElevatedButton — should now be squared (radius 14), not pill
Settings screen — ListTile subtitle should be lighter grey
Any screen with a BottomSheet — should have rounded top corners

Step 13: Commit

git add lib/core/theme/app_theme.dart
git commit -m "feat(theme): update ThemeData — AppBar w900, filled inputs, radius14 buttons, add BottomSheet/Chip/Divider/ListTile/TabBar themes"

Task 3: Create `FlowSectionHeader` widget

Files:

Create: lib/shared/widgets/flow_section_header.dart

LABEL UPPERCASE ← 11px w800 inkBlack letterSpacing +0.8
Titolo sezione  ← 18px w900 inkBlack letterSpacing -0.3

Step 1: Create the file

// lib/shared/widgets/flow_section_header.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flow_mobile/core/theme/app_theme.dart';
 
class FlowSectionHeader extends StatelessWidget {
  const FlowSectionHeader({
    super.key,
    required this.label,
    this.title,
    this.trailing,
  });
 
  final String label;
  final String? title;
  final Widget? trailing;
 
  @override
  Widget build(BuildContext context) {
    final inkBlack = Theme.of(context).brightness == Brightness.dark
        ? Colors.white
        : AppTheme.inkBlack;
 
    return Padding(
      padding: const EdgeInsets.fromLTRB(24, 20, 24, 12),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  label.toUpperCase(),
                  style: GoogleFonts.inter(
                    fontSize: 11,
                    fontWeight: FontWeight.w800,
                    color: inkBlack,
                    letterSpacing: 0.8,
                  ),
                ),
                if (title != null) ...[
                  const SizedBox(height: 2),
                  Text(
                    title!,
                    style: GoogleFonts.inter(
                      fontSize: 18,
                      fontWeight: FontWeight.w900,
                      color: inkBlack,
                      letterSpacing: -0.3,
                    ),
                  ),
                ],
              ],
            ),
          ),
          if (trailing != null) trailing!,
        ],
      ),
    );
  }
}

Note: The label uses inkBlack (not coral) because coral on warmCanvas is ~3.2:1 — below WCAG AA for 11px text.

Step 2: Verify

flutter analyze lib/shared/widgets/flow_section_header.dart

Step 3: Commit

git add lib/shared/widgets/flow_section_header.dart
git commit -m "feat(widgets): add FlowSectionHeader — label+title section header widget"

Task 4: Create `FlowListTile` widget

Files:

Create: lib/shared/widgets/flow_list_tile.dart

┌──────────────────────────────────────────┐
│ [■ icon coral/10% bg, radius 10]  Title  │ → (arrow or trailing)
│                                  Subtitle│
└──────────────────────────────────────────┘

Step 1: Create the file

// lib/shared/widgets/flow_list_tile.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flow_mobile/core/theme/app_theme.dart';
 
class FlowListTile extends StatelessWidget {
  const FlowListTile({
    super.key,
    required this.icon,
    required this.title,
    this.iconColor,
    this.subtitle,
    this.onTap,
    this.trailing,
    this.destructive = false,
  });
 
  final IconData icon;
  final Color? iconColor;
  final String title;
  final String? subtitle;
  final VoidCallback? onTap;
  final Widget? trailing;
  final bool destructive;
 
  @override
  Widget build(BuildContext context) {
    final effectiveIconColor = destructive
        ? Colors.red
        : (iconColor ?? AppTheme.electricCoral);
    final effectiveTitleColor = destructive
        ? Colors.red
        : Theme.of(context).textTheme.bodyLarge?.color;
 
    return ListTile(
      contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 2),
      onTap: onTap,
      leading: Container(
        width: 36,
        height: 36,
        decoration: BoxDecoration(
          color: effectiveIconColor.withValues(alpha: 0.10),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Icon(icon, color: effectiveIconColor, size: 18),
      ),
      title: Text(
        title,
        style: GoogleFonts.inter(
          fontSize: 15,
          fontWeight: FontWeight.w600,
          color: effectiveTitleColor,
        ),
      ),
      subtitle: subtitle != null
          ? Text(
              subtitle!,
              style: GoogleFonts.inter(
                fontSize: 13,
                color: AppTheme.textSecondaryWarm,
              ),
            )
          : null,
      trailing: trailing ??
          (onTap != null
              ? const Icon(Icons.chevron_right_rounded,
                  color: AppTheme.textSecondaryWarm, size: 20)
              : null),
    );
  }
}

Step 2: Verify

flutter analyze lib/shared/widgets/flow_list_tile.dart

Step 3: Commit

git add lib/shared/widgets/flow_list_tile.dart
git commit -m "feat(widgets): add FlowListTile — icon+title+subtitle tile with coral icon bg"

Task 5: Create `FlowStatCard` widget

Files:

Create: lib/shared/widgets/flow_stat_card.dart

┌───────────────┐
│  [icon]       │
│  1.240        │ ← 22px w900
│  Karma        │ ← 11px textSecondaryWarm
└───────────────┘

Step 1: Create the file

// lib/shared/widgets/flow_stat_card.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flow_mobile/core/theme/app_theme.dart';
 
class FlowStatCard extends StatelessWidget {
  const FlowStatCard({
    super.key,
    required this.icon,
    required this.value,
    required this.label,
    this.color,
  });
 
  final IconData icon;
  final String value;
  final String label;
  final Color? color;
 
  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final effectiveColor = color ?? AppTheme.electricCoral;
 
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
      decoration: BoxDecoration(
        color: isDark ? const Color(0xFF2A2A2A) : AppTheme.warmCanvas,
        borderRadius: BorderRadius.circular(AppTheme.radius16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, color: effectiveColor, size: 20),
          const SizedBox(height: 8),
          Text(
            value,
            style: GoogleFonts.inter(
              fontSize: 22,
              fontWeight: FontWeight.w900,
              color: isDark ? Colors.white : AppTheme.inkBlack,
              letterSpacing: -0.5,
            ),
          ),
          const SizedBox(height: 2),
          Text(
            label,
            style: GoogleFonts.inter(
              fontSize: 11,
              fontWeight: FontWeight.w600,
              color: AppTheme.textSecondaryWarm,
            ),
          ),
        ],
      ),
    );
  }
}

Step 2: Verify

flutter analyze lib/shared/widgets/flow_stat_card.dart

Step 3: Commit and merge

git add lib/shared/widgets/flow_stat_card.dart
git commit -m "feat(widgets): add FlowStatCard — stat display with icon, value, label"

Step 4: Merge branch 1 to develop

git checkout develop
git merge feat/restyling-theme --no-ff -m "feat: restyling-theme — AppTheme overrides + 3 new shared widgets"
git push origin develop

BRANCH 2: feat/restyling-shared-widgets

Cut from: develop (after branch 1 is merged) Merge to: develop (before L1 and L2 branches)

Create branch

git checkout develop
git pull
git checkout -b feat/restyling-shared-widgets

Task 6: Update `vibe_filter_bar.dart`

Files:

Modify: lib/shared/widgets/vibe_filter_bar.dart

Goal: All FilterChip / Chip / ChoiceChip instances must use the ChipTheme instead of hardcoded colors. Remove any explicit backgroundColor, selectedColor, labelStyle, shape, side that duplicate what the theme already provides.

Step 1: Read the file

cat lib/shared/widgets/vibe_filter_bar.dart

Step 2: Remove hardcoded chip styling

For every FilterChip, ChoiceChip, or Chip:

Remove backgroundColor: if it sets a hardcoded color
Remove selectedColor: (or set to electricCoral.withValues(alpha: 0.15))
Remove labelStyle: if it hardcodes colors — let the ChipTheme handle it
Remove shape: if it duplicates the theme’s radiusFull shape
Keep only label:, selected:, onSelected:, avatar: (functional props)

If a chip needs to show a “selected” state differently from the theme default, use:

selectedColor: AppTheme.electricCoral.withValues(alpha: 0.15),
checkmarkColor: AppTheme.electricCoral,

Step 3: Verify and commit

flutter analyze lib/shared/widgets/vibe_filter_bar.dart
git add lib/shared/widgets/vibe_filter_bar.dart
git commit -m "refactor(widgets): vibe_filter_bar — remove hardcoded chip colors, use ChipTheme"

Task 7: Update `chat_tile.dart`

Files:

Modify: lib/shared/widgets/chat_tile.dart

Goal: Avatar gets a coral 2px ring, timestamp uses 11px textSecondaryWarm, unread count badge uses coral background.

Step 1: Read the file

cat lib/shared/widgets/chat_tile.dart

Step 2: Apply changes

Find the avatar widget. Wrap the CircleAvatar with a Container that has a coral border:

Container(
  padding: const EdgeInsets.all(2),
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      color: AppTheme.electricCoral,
      width: 2,
    ),
  ),
  child: CircleAvatar(...),
),

Find the timestamp Text. Apply:

style: GoogleFonts.inter(
  fontSize: 11,
  color: AppTheme.textSecondaryWarm,
),

Find the unread count badge (if any). Make sure its background is AppTheme.electricCoral and text is white.

Step 3: Verify and commit

flutter analyze lib/shared/widgets/chat_tile.dart
git add lib/shared/widgets/chat_tile.dart
git commit -m "refactor(widgets): chat_tile — coral avatar ring, 11px timestamp, coral unread badge"

Task 8: Update `crew_summary_card.dart`

Files:

Modify: lib/shared/widgets/crew_summary_card.dart

Goal: Card uses CardTheme (no manual BoxDecoration with hardcoded color/radius), title is 15–16px w900, accent colors are coral tokens.

Step 1: Read the file

cat lib/shared/widgets/crew_summary_card.dart

Step 2: Apply changes
If the card uses Container with BoxDecoration + color hardcoded: replace with Card widget (picks up CardThemeData automatically)
Or if already using Card, verify color is not overridden

Find the title Text. Update style:

style: GoogleFonts.inter(
  fontSize: 15,
  fontWeight: FontWeight.w900,
  letterSpacing: -0.3,
),

Replace any coral-ish color literals with AppTheme.electricCoral
Replace any dark background literals (if card has dark mode) with Color(0xFF1E1E1E) or let CardTheme handle it
Step 3: Verify and commit

flutter analyze lib/shared/widgets/crew_summary_card.dart
git add lib/shared/widgets/crew_summary_card.dart
git commit -m "refactor(widgets): crew_summary_card — Card theme, w900 title, coral accents"

Task 9: Minor updates to `squad_detail_sheet.dart`, `hero_event_card.dart`, `map_preview.dart`

Files:

Modify: lib/shared/widgets/squad_detail_sheet.dart
Verify: lib/shared/widgets/hero_event_card.dart
Modify: lib/shared/widgets/map_preview.dart
Step 1: squad_detail_sheet.dart

Read the file. The BottomSheetTheme will apply automatically if the sheet uses showModalBottomSheet or showBottomSheet. Check:

The title inside the sheet: update to GoogleFonts.inter(fontSize: 18, fontWeight: FontWeight.w900, letterSpacing: -0.3)
Any ElevatedButton or OutlinedButton inside: they now pick up the theme — remove any hardcoded style: that overrides the theme’s shape/color

flutter analyze lib/shared/widgets/squad_detail_sheet.dart
git add lib/shared/widgets/squad_detail_sheet.dart
git commit -m "refactor(widgets): squad_detail_sheet — w900 title, remove button overrides"

Step 2: hero_event_card.dart

Read the file. Verify:

Shadow: electricCoral.withValues(alpha: 0.25) — should already be in place
borderRadius: 28 — check it uses AppTheme.radius28 (or literal 28, acceptable since it predates the token)
Height: 400

No changes needed if already correct. Just run analyze:

flutter analyze lib/shared/widgets/hero_event_card.dart

Step 3: map_preview.dart

Read the file. Find any hardcoded borderRadius on the map container. Change to AppTheme.radius16:

borderRadius: BorderRadius.circular(AppTheme.radius16),

flutter analyze lib/shared/widgets/map_preview.dart
git add lib/shared/widgets/map_preview.dart
git commit -m "refactor(widgets): map_preview — radius16 token"

Task 9b: Update `message_bubble.dart` (chat bubble colors)

Files:

Modify: lib/shared/widgets/message_bubble.dart

Why here (shared-widgets) not in L2-chat: chat_screen.dart likely delegates bubble rendering to this shared widget. If only chat_screen.dart is edited, the visual bubble changes will have no effect.

Step 1: Read the file

cat lib/shared/widgets/message_bubble.dart

Step 2: Outgoing bubble

Find the outgoing bubble container. Replace its color with a coral gradient:

decoration: BoxDecoration(
  gradient: const LinearGradient(
    colors: [Color(0xFFFF5E57), Color(0xFFFF8A80)],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(18),
    topRight: Radius.circular(4),
    bottomLeft: Radius.circular(18),
    bottomRight: Radius.circular(18),
  ),
),

Outgoing text color: Colors.white.

Step 3: Incoming bubble

decoration: BoxDecoration(
  color: isDark ? const Color(0xFF2A2A2A) : AppTheme.warmCanvas,
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(4),
    topRight: Radius.circular(18),
    bottomLeft: Radius.circular(18),
    bottomRight: Radius.circular(18),
  ),
),

Incoming text color: isDark ? Colors.white : AppTheme.inkBlack.

Step 4: Timestamp

style: GoogleFonts.inter(fontSize: 11, color: Colors.grey[400]),

Step 5: Verify and commit

flutter analyze lib/shared/widgets/message_bubble.dart
git add lib/shared/widgets/message_bubble.dart
git commit -m "refactor(widgets): message_bubble — coral gradient outgoing, warmCanvas incoming, 11px timestamp"

Step 6 (was Step 4): Merge branch 2 to develop

git checkout develop
git merge feat/restyling-shared-widgets --no-ff -m "feat: restyling-shared-widgets — chat_tile, crew_summary_card, vibe_filter_bar, squad_detail_sheet, map_preview, message_bubble"
git push origin develop

BRANCH 3: feat/restyling-l1

Cut from: develop (after branch 2 is merged) Merge to: develop (before L2 branches)

Create branch

git checkout develop
git pull
git checkout -b feat/restyling-l1

General L1 approach for every screen:

For each screen, do a grep pass to find:

Colors.blue / Colors.indigo / other non-system colors → replace with AppTheme.electricCoral or AppTheme.inkBlack
ListTile( without FlowListTile in settings/nav contexts → replace with FlowListTile
AppBar( with elevation > 0 → set to 0
Card( with explicit color: → remove the color override (let CardTheme apply)
Hardcoded TextStyle(fontWeight: FontWeight.bold) on headings → change to w900

Commit per screen or per logical group of 2–3 related screens.

Task 10: Settings + Help screens

Files:

Modify: lib/features/settings/screens/settings_screen.dart
Modify: lib/features/settings/screens/help_support_screen.dart ← in settings/, not help/
Step 1: settings_screen.dart

Read the file. Apply:

Replace any section labels/headers with FlowSectionHeader(label: 'ACCOUNT') etc.
Replace ListTile rows (account, notifications, etc.) with FlowListTile(icon: Icons.person_outline, title: 'Account', onTap: ...)
Remove manual Card containers wrapping groups — FlowListTile doesn’t need them
Verify no hardcoded Color values remain for text or backgrounds
Step 2: help_support_screen.dart

Read the file. Apply:

Replace up to 3 ListTile items with FlowListTile
Remove any emoji used as a visual header (or keep if it’s inline text, not Icon)
Step 3: Verify and commit

flutter analyze lib/features/settings/screens/settings_screen.dart lib/features/settings/screens/help_support_screen.dart
git add lib/features/settings/screens/settings_screen.dart lib/features/settings/screens/help_support_screen.dart
git commit -m "refactor(l1): settings + help — FlowListTile, FlowSectionHeader, remove hardcoded colors"

Task 11: Notifications + Search screens

Files:

Modify: lib/features/notifications/screens/notifications_screen.dart
Modify: lib/features/search/screens/search_screen.dart (find: find lib -name "search_screen.dart")
Step 1: notifications_screen.dart
Add FlowSectionHeader(label: 'RICHIESTE') above request notifications
Add FlowSectionHeader(label: 'TUTTE') above general notifications
Avatar border coral: wrap avatar in the coral ring container (same pattern as chat_tile Task 7)
Step 2: search_screen.dart
Find all Chip/FilterChip/ChoiceChip — remove hardcoded backgroundColor, labelStyle, shape (let ChipTheme apply)
Remove any hardcoded colors for the search bar (it will auto-fill from InputDecorationTheme)
Step 3: Verify and commit

flutter analyze lib/features/notifications/screens/notifications_screen.dart lib/features/search/screens/search_screen.dart
git add lib/features/notifications/screens/notifications_screen.dart lib/features/search/screens/search_screen.dart
git commit -m "refactor(l1): notifications + search — FlowSectionHeader, coral avatar ring, ChipTheme"

Files:

Modify: lib/features/social/screens/friends_screen.dart
Modify: lib/features/profile/screens/social_list_screen.dart ← in profile/, not social/
Modify: lib/features/profile/screens/my_crews_screen.dart ← in profile/, not social/
Step 1: friends_screen.dart
Add FlowSectionHeader for each section (e.g., “SUGGERITI”, “AMICI”)
Remove any hardcoded Color for section labels or dividers
Step 2: social_list_screen.dart
TabBar will auto-apply theme (coral underline, w800 selected label) — remove any explicit TabBar color overrides
Replace raw ListTile items with FlowListTile
Step 3: my_crews_screen.dart
Add FlowSectionHeader

Find “empty state” widget: update icon container to coral/20% bg, radius 16:

Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: AppTheme.electricCoral.withValues(alpha: 0.20),
    borderRadius: BorderRadius.circular(AppTheme.radius16),
  ),
  child: Icon(Icons.group_outlined, color: AppTheme.electricCoral, size: 32),
),

Step 4: Verify and commit

flutter analyze lib/features/social/screens/friends_screen.dart lib/features/profile/screens/social_list_screen.dart lib/features/profile/screens/my_crews_screen.dart
git add lib/features/social/screens/friends_screen.dart lib/features/profile/screens/social_list_screen.dart lib/features/profile/screens/my_crews_screen.dart
git commit -m "refactor(l1): friends/social_list/my_crews — FlowSectionHeader, TabBar theme, coral empty state"

Task 13: Chat screens (chats_screen, chat_details, create_group)

Files:

Modify: lib/features/messaging/screens/chats_screen.dart
Modify: lib/features/messaging/screens/chat_details_screen.dart
Modify: lib/features/messaging/screens/create_group_screen.dart
Step 1: chats_screen.dart
Add FlowSectionHeader(label: 'MESSAGGI') or similar at the top of the list
The chat_tile is already updated — no changes needed to tiles
Step 2: chat_details_screen.dart
Replace settings ListTile rows with FlowListTile
AppBar is automatic from theme
Step 3: create_group_screen.dart
Input fields are automatic from InputDecorationTheme
Button is automatic from ElevatedButtonTheme
Verify no hardcoded input border or button style remains
Step 4: Verify and commit

flutter analyze lib/features/messaging/screens/chats_screen.dart lib/features/messaging/screens/chat_details_screen.dart lib/features/messaging/screens/create_group_screen.dart
git add lib/features/messaging/screens/chats_screen.dart lib/features/messaging/screens/chat_details_screen.dart lib/features/messaging/screens/create_group_screen.dart
git commit -m "refactor(l1): chat screens — FlowSectionHeader, FlowListTile, remove hardcoded input styles"

Task 14: Events screens (my_events)

Files:

Modify: lib/features/events/screens/my_events_screen.dart
Step 1: Apply changes
TabBar → coral underline automatic from theme; remove explicit TabBar styling
Find “empty state” icon — apply coral icon in coral/20% bg container (same pattern as Task 12, Step 3)
Step 2: Verify and commit

flutter analyze lib/features/events/screens/my_events_screen.dart
git add lib/features/events/screens/my_events_screen.dart
git commit -m "refactor(l1): my_events — TabBar theme, coral empty state"

Files:

Modify: lib/features/auth/screens/registration_wizard_screen.dart
Modify: lib/features/onboarding/screens/profile_setup_screen.dart ← in onboarding/, not auth/
Modify: lib/features/onboarding/screens/welcome_screen.dart ← in onboarding/, not auth/
Modify: lib/features/auth/screens/login_screen.dart

These screens are most likely to have hardcoded OutlineInputBorder or UnderlineInputBorder that override the theme.

Step 1: registration_wizard_screen.dart

Search for and remove all inline InputDecoration(border: OutlineInputBorder(...)) — let the theme apply:

grep -n "OutlineInputBorder\|UnderlineInputBorder\|filled:" lib/features/auth/screens/registration_wizard_screen.dart

For each: remove border:, enabledBorder:, focusedBorder:, filled: from the inline InputDecoration. Keep only hintText:, labelText:, prefixIcon:, suffixIcon:.

Step 2: profile_setup_screen.dart

Same grep for border overrides. Also:

Chip/FilterChip for interest selection: remove hardcoded colors
Step 3: welcome_screen.dart
Verify ElevatedButton and OutlinedButton don’t have hardcoded style: that overrides the theme shape
Verify title typography is w900 / letterSpacing tight
Step 4: login_screen.dart

Same border override removal. Verify button style automatic.

Step 5: Verify and commit

flutter analyze lib/features/auth/screens/registration_wizard_screen.dart lib/features/onboarding/screens/profile_setup_screen.dart lib/features/onboarding/screens/welcome_screen.dart lib/features/auth/screens/login_screen.dart
git add lib/features/auth/screens/registration_wizard_screen.dart lib/features/auth/screens/login_screen.dart lib/features/onboarding/screens/profile_setup_screen.dart lib/features/onboarding/screens/welcome_screen.dart
git commit -m "refactor(l1): auth screens — remove hardcoded input borders, ChipTheme, button theme"

Task 16: Profile + Verification screens

Files:

Modify: lib/features/profile/screens/verification_request_screen.dart
Modify: lib/features/profile/screens/edit_profile_screen.dart
Step 1: verification_request_screen.dart
Input → theme (remove border overrides)

Dropdown: if using DropdownButtonFormField, add dropdownColor for dark mode:

dropdownColor: Theme.of(context).brightness == Brightness.dark
    ? const Color(0xFF2A2A2A)
    : AppTheme.warmCanvas,
iconEnabledColor: AppTheme.electricCoral,

Button → theme
Step 2: edit_profile_screen.dart
Input → theme (remove border overrides)
Avatar: wrap in coral ring container (same pattern as Task 7)
Button → theme
Step 3: Verify and commit

flutter analyze lib/features/profile/screens/verification_request_screen.dart lib/features/profile/screens/edit_profile_screen.dart
git add lib/features/profile/screens/verification_request_screen.dart lib/features/profile/screens/edit_profile_screen.dart
git commit -m "refactor(l1): verification + edit_profile — input theme, coral avatar ring, dropdown coral"

Task 17: Crew + Campaign creation screens

Files:

Modify: lib/features/social/screens/create_squad_screen.dart
Modify: lib/features/campaigns/screens/create_campaign_screen.dart (find real path)
Step 1: create_squad_screen.dart

This was already renamed for Crew UI text. Now:

Remove hardcoded input borders
FilterChip for tag/vibe selection → ChipTheme (remove hardcoded colors)
Button → theme
Step 2: create_campaign_screen.dart

Find the file: find lib -name "create_campaign_screen.dart". Read it.

Input → theme
Button → theme
Step 3: Verify and commit

# Note: create_campaign_screen.dart actual path may differ — find it first:
# find lib -name "create_campaign_screen.dart"
flutter analyze lib/features/social/screens/create_squad_screen.dart
CAMPAIGN_PATH=$(find lib -name "create_campaign_screen.dart")
git add lib/features/social/screens/create_squad_screen.dart "$CAMPAIGN_PATH"
git commit -m "refactor(l1): create_squad/create_campaign — input theme, ChipTheme, button theme"

Step 4: Merge branch 3 to develop

git checkout develop
git merge feat/restyling-l1 --no-ff -m "feat: restyling-l1 — 19 screens light pass"
git push origin develop

BRANCH 4a: feat/restyling-l2-events

Cut from: develop (after branch 3 is merged) Merge to: develop

Create branch

git checkout develop
git pull
git checkout -b feat/restyling-l2-events

Task 18: `event_details_screen.dart`

Files:

Modify: lib/features/events/screens/event_details_screen.dart

This is the most complex L2 screen. Work top-to-bottom.

Step 1: Read the file

wc -l lib/features/events/screens/event_details_screen.dart
cat lib/features/events/screens/event_details_screen.dart

Step 2: Hero image section

Find the top image widget. Ensure it’s full-bleed (no horizontal padding). If it’s wrapped in a Padding, remove it. Add a gradient overlay from bottom:

Stack(
  children: [
    // existing image widget here
    Positioned.fill(
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Colors.transparent,
              AppTheme.inkBlack.withValues(alpha: 0.6),
            ],
            stops: const [0.5, 1.0],
          ),
        ),
      ),
    ),
  ],
),

Step 3: Date eyebrow label

Find the date display. Make it coral uppercase eyebrow:

Text(
  dateString.toUpperCase(),
  style: GoogleFonts.inter(
    fontSize: 11,
    fontWeight: FontWeight.w800,
    color: AppTheme.electricCoral,
    letterSpacing: 0.8,
  ),
),

Step 4: Title

Text(
  event.title,
  style: GoogleFonts.inter(
    fontSize: 22,
    fontWeight: FontWeight.w900,
    letterSpacing: -0.5,
  ),
),

Step 5: Section headers

Replace any section heading Text widgets for “Chi partecipa”, “Dove”, “Altro” with:

FlowSectionHeader(label: 'CHI PARTECIPA'),
FlowSectionHeader(label: 'DOVE'),
FlowSectionHeader(label: 'ALTRO'),

Step 6: Sticky CTA bottom bar

Find the bottom action area. Replace with a SafeArea-wrapped row:

Container(
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
  decoration: BoxDecoration(
    color: Theme.of(context).scaffoldBackgroundColor,
    border: Border(
      top: BorderSide(color: const Color(0xFFE8E5E0), width: 1),
    ),
  ),
  child: SafeArea(
    top: false,
    child: Row(
      children: [
        Expanded(
          child: ElevatedButton(
            onPressed: onPartecipa,
            child: const Text('Partecipa'),
          ),
        ),
        const SizedBox(width: 12),
        OutlinedButton(
          onPressed: onSalva,
          child: const Text('Salva'),
        ),
      ],
    ),
  ),
),

Step 7: Attendees facepile

Find the attendee avatars. Wrap each in the coral ring container. Add a “+N” coral pill if count > visible avatars:

Container(
  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
  decoration: BoxDecoration(
    color: AppTheme.electricCoral.withValues(alpha: 0.12),
    borderRadius: BorderRadius.circular(AppTheme.radiusFull),
  ),
  child: Text(
    '+${remaining}',
    style: GoogleFonts.inter(
      fontSize: 12,
      fontWeight: FontWeight.w700,
      color: AppTheme.electricCoral,
    ),
  ),
),

Step 8: Verify and commit

flutter analyze lib/features/events/screens/event_details_screen.dart
git add lib/features/events/screens/event_details_screen.dart
git commit -m "feat(l2): event_details — hero gradient, coral date eyebrow, w900 title, sticky CTA, FlowSectionHeader"

Task 19: `events_screen.dart` + `event_discovery_screen.dart`

Files:

Modify: lib/features/events/screens/events_screen.dart
Modify: lib/features/events/screens/event_discovery_screen.dart (find real path)
Step 1: Read and apply to each

For both screens:

TabBar: remove explicit styling (theme handles coral underline + w800 selected)
FilterChip/Chip for category filters: remove hardcoded colors (ChipTheme handles it)
Empty state widget: update to coral icon in coral/20% bg circle:

Column(
  children: [
    Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: AppTheme.electricCoral.withValues(alpha: 0.20),
        borderRadius: BorderRadius.circular(AppTheme.radius16),
      ),
      child: Icon(Icons.event_outlined, color: AppTheme.electricCoral, size: 32),
    ),
    const SizedBox(height: 16),
    Text(
      'Nessun evento trovato',
      style: GoogleFonts.inter(
        fontSize: 16,
        fontWeight: FontWeight.w700,
        color: AppTheme.inkBlack,
      ),
    ),
  ],
),

Step 2: Verify and commit

flutter analyze lib/features/events/screens/events_screen.dart
git add lib/features/events/screens/events_screen.dart lib/features/events/screens/event_discovery_screen.dart
git commit -m "feat(l2): events + discovery — ChipTheme, TabBar theme, coral empty state"

Step 3: Merge to develop

git checkout develop
git merge feat/restyling-l2-events --no-ff -m "feat: restyling-l2-events — event_details full redesign, events/discovery theme"
git push origin develop

BRANCH 4b: feat/restyling-l2-profile

Cut from: develop (after branch 3 is merged, parallel with 4a/4c/4d)

Create branch

git checkout develop
git pull
git checkout -b feat/restyling-l2-profile

Task 20: `profile_screen.dart` + `public_profile_screen.dart`

Files:

Modify: lib/features/profile/screens/profile_screen.dart
Modify: lib/features/profile/screens/public_profile_screen.dart
Step 1: Read each file
Step 2: Profile header

Find the avatar area. Apply:

Avatar: 80px CircleAvatar wrapped in 2px coral ring container
Name: 22px w900, letterSpacing -0.5
Handle/bio: 14px textSecondaryWarm

Container(
  padding: const EdgeInsets.all(3),
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(color: AppTheme.electricCoral, width: 2),
  ),
  child: CircleAvatar(radius: 40, backgroundImage: ...),
),

Step 3: Stat row

Replace any manual stat display (follower count, following, karma) with a Row of FlowStatCard:

Row(
  children: [
    Expanded(child: FlowStatCard(
      icon: Icons.people_outline,
      value: '${followers}',
      label: 'Follower',
    )),
    const SizedBox(width: 12),
    Expanded(child: FlowStatCard(
      icon: Icons.person_add_outlined,
      value: '${following}',
      label: 'Following',
    )),
    const SizedBox(width: 12),
    Expanded(child: FlowStatCard(
      icon: Icons.star_outline,
      value: '${karma}',
      label: 'Karma',
      // color defaults to electricCoral — spec does not prescribe warmSun here
    )),
  ],
),

Step 4: TabBar + action buttons
TabBar: remove explicit styling (theme handles it)
“Segui” button: ElevatedButton (picks up coral from theme)
“Messaggio” button: OutlinedButton (picks up inkBlack + neutral border from theme)
Step 5: Apply same changes to public_profile_screen.dart

Same structure — if it shares widgets with profile_screen.dart, you may only need to apply changes once. Check with grep -n "CircleAvatar\|FlowStatCard" lib/features/profile/screens/public_profile_screen.dart.

Step 6: Verify and commit

flutter analyze lib/features/profile/screens/profile_screen.dart lib/features/profile/screens/public_profile_screen.dart
git add lib/features/profile/screens/profile_screen.dart lib/features/profile/screens/public_profile_screen.dart
git commit -m "feat(l2): profile — coral avatar ring, FlowStatCard stats, TabBar theme, ElevatedButton/OutlinedButton"

Step 7: Merge to develop

git checkout develop
git merge feat/restyling-l2-profile --no-ff -m "feat: restyling-l2-profile — profile/public_profile redesign"
git push origin develop

BRANCH 4c: feat/restyling-l2-chat

Cut from: develop (after branch 3 is merged, parallel with 4a/4b/4d)

Create branch

git checkout develop
git pull
git checkout -b feat/restyling-l2-chat

Task 21: `chat_screen.dart`

Files:

Modify: lib/features/messaging/screens/chat_screen.dart

Note: Bubble colors (coral gradient outgoing, warmCanvas incoming) were already applied in Branch 2 Task 9b via message_bubble.dart. This task covers AppBar and input bar only. If bubble code is inline in chat_screen.dart (not in the shared widget), apply bubble changes here instead.

Step 1: Read the file
Step 2: AppBar

AppBar(
  leading: CircleAvatar(radius: 18, backgroundImage: ...),
  title: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(recipientName, style: GoogleFonts.inter(fontSize: 15, fontWeight: FontWeight.w800)),
      Row(children: [
        Container(
          width: 7, height: 7,
          decoration: BoxDecoration(
            color: isOnline ? AppTheme.mintGreen : Colors.grey,
            shape: BoxShape.circle,
          ),
        ),
        const SizedBox(width: 4),
        Text(isOnline ? 'Online' : 'Offline',
          style: GoogleFonts.inter(fontSize: 11, color: AppTheme.textSecondaryWarm)),
      ]),
    ],
  ),
),

Step 3: Message bubbles

Find the outgoing bubble widget. Apply:

// Outgoing
Container(
  decoration: BoxDecoration(
    gradient: const LinearGradient(
      colors: [Color(0xFFFF5E57), Color(0xFFFF8A80)],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(18),
      topRight: Radius.circular(4),
      bottomLeft: Radius.circular(18),
      bottomRight: Radius.circular(18),
    ),
  ),
  // child: message text in white
)
 
// Incoming
Container(
  decoration: BoxDecoration(
    color: Theme.of(context).brightness == Brightness.dark
        ? const Color(0xFF2A2A2A)
        : AppTheme.warmCanvas,
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(4),
      topRight: Radius.circular(18),
      bottomLeft: Radius.circular(18),
      bottomRight: Radius.circular(18),
    ),
  ),
  // child: message text in inkBlack/white
)

Step 4: Timestamps

style: GoogleFonts.inter(fontSize: 11, color: Colors.grey[400]),

Step 5: Input bar

The input field will auto-use the theme (filled, radius 14, coral focus). The send button:

IconButton(
  icon: const Icon(Icons.send_rounded),
  color: AppTheme.electricCoral,
  onPressed: onSend,
),

Attach/mic buttons: color: AppTheme.inkBlack (or Colors.white in dark).

Step 6: Verify and commit

flutter analyze lib/features/messaging/screens/chat_screen.dart
git add lib/features/messaging/screens/chat_screen.dart
git commit -m "feat(l2): chat_screen — coral/blush gradient bubbles, warmCanvas incoming, online dot, timestamp 11px"

Step 7: Merge to develop

git checkout develop
git merge feat/restyling-l2-chat --no-ff -m "feat: restyling-l2-chat — chat_screen bubble redesign"
git push origin develop

BRANCH 4d: feat/restyling-l2-misc

Cut from: develop (after branch 3 is merged, parallel with 4a/4b/4c)

Create branch

git checkout develop
git pull
git checkout -b feat/restyling-l2-misc

Task 22: Dashboard screens

Files:

Modify: lib/features/dashboard/screens/vendor_dashboard_screen.dart
Modify: lib/features/pr/screens/pr_dashboard_screen.dart
Step 1: Read each file

# Verify paths (may differ):
find lib -name "*dashboard*" -o -name "*vendor*" -o -name "*pr_dash*"
cat lib/features/dashboard/screens/vendor_dashboard_screen.dart
cat lib/features/pr/screens/pr_dashboard_screen.dart

Step 2: Header pocket

If there’s a header area, make it inkBlack with a large coral stat:

Container(
  padding: const EdgeInsets.all(24),
  color: AppTheme.inkBlack,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        mainStatValue,  // e.g. "1.240"
        style: GoogleFonts.inter(
          fontSize: 36,
          fontWeight: FontWeight.w900,
          color: AppTheme.electricCoral,
          letterSpacing: -1,
        ),
      ),
      Text(
        mainStatLabel,  // e.g. "Visualizzazioni totali"
        style: GoogleFonts.inter(fontSize: 14, color: Colors.white60),
      ),
    ],
  ),
),

Step 3: Stat grid

Replace any manual stat display with a Wrap or GridView of FlowStatCard:

Wrap(
  spacing: 12,
  runSpacing: 12,
  children: [
    FlowStatCard(icon: Icons.visibility_outlined, value: '1.240', label: 'Views'),
    FlowStatCard(icon: Icons.people_outline, value: '340', label: 'Click'),
    // ...
  ],
),

Step 4: Section headers

Replace any Text section titles with FlowSectionHeader.

Step 5: Verify and commit

flutter analyze lib/features/dashboard/ lib/features/pr/
VENDOR_PATH=$(find lib -name "vendor_dashboard_screen.dart")
PR_PATH=$(find lib -name "pr_dashboard_screen.dart")
git add "$VENDOR_PATH" "$PR_PATH"
git commit -m "feat(l2): dashboards — inkBlack header, FlowStatCard grid, FlowSectionHeader"

Task 23: `ticket_wallet_screen.dart`

Files:

Modify: lib/features/tickets/screens/ticket_wallet_screen.dart (find real path: find lib -name "*ticket*")
Step 1: Read the file
Step 2: TabBar

Remove explicit styling (theme handles coral underline).

Step 3: Ticket card

Find the ticket card widget. Apply vibe-color gradient (same pattern as crew card in squad_bento_section.dart). If vibe color is available on the ticket model, use it; otherwise use a coral gradient:

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [vibeColor, vibeColor.withValues(alpha: 0.6)],
    ),
    borderRadius: BorderRadius.circular(AppTheme.radius20),
  ),
  child: ..., // white text
),

Step 4: QR block

Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(AppTheme.radius12),
  ),
  child: qrWidget,
),

Step 5: Verify and commit

flutter analyze
git add lib/features/tickets/
git commit -m "feat(l2): ticket_wallet — TabBar theme, vibe-color gradient card, white QR block"

Task 24: Creation flow screens (create_event, create_crew)

Files:

Modify: lib/features/events/screens/create_event_screen.dart
Modify: lib/features/events/screens/wizard/wizard_step_datetime.dart (if exists)
Modify: lib/features/events/screens/wizard/wizard_step_info.dart (if exists)
Modify: lib/features/events/screens/wizard/wizard_step_location.dart (if exists)
Modify: lib/features/events/screens/wizard/wizard_step_review.dart (if exists)
Modify: lib/features/events/screens/wizard/wizard_step_tickets.dart (if exists)
Modify: lib/features/social/screens/create_crew_screen.dart (find real path)

Important: create_event_screen.dart may be a thin shell that delegates each step to wizard/ sub-files. Check with ls lib/features/events/screens/wizard/ — if wizard sub-files exist, apply input border removal and FlowSectionHeader to each of them, not just the root file.

Shared pattern — step indicator:

Row(
  children: List.generate(totalSteps, (i) {
    final isActive = i == currentStep;
    final isDone = i < currentStep;
    return Expanded(
      child: Row(
        children: [
          Container(
            width: 24, height: 24,
            decoration: BoxDecoration(
              color: isActive || isDone
                  ? AppTheme.electricCoral
                  : AppTheme.textSecondaryWarm.withValues(alpha: 0.3),
              shape: BoxShape.circle,
            ),
            child: Center(
              child: isDone
                  ? const Icon(Icons.check, color: Colors.white, size: 14)
                  : Text('${i + 1}',
                      style: GoogleFonts.inter(
                        fontSize: 12,
                        fontWeight: FontWeight.w800,
                        color: isActive ? Colors.white : AppTheme.textSecondaryWarm,
                      )),
            ),
          ),
          if (i < totalSteps - 1)
            Expanded(
              child: Container(
                height: 2,
                color: isDone
                    ? AppTheme.electricCoral
                    : AppTheme.textSecondaryWarm.withValues(alpha: 0.3),
              ),
            ),
        ],
      ),
    );
  }),
),

Step 1: create_event_screen.dart
Add step indicator above form
Replace section headings with FlowSectionHeader
Input → theme (remove border overrides)
Step 2: create_crew_screen.dart
Add step indicator
FilterChip tag selector → ChipTheme (remove hardcoded colors)
Step 3: Verify and commit

flutter analyze lib/features/events/screens/create_event_screen.dart
git add lib/features/events/screens/create_event_screen.dart lib/features/social/screens/create_crew_screen.dart
git commit -m "feat(l2): create_event + create_crew — coral step indicator, FlowSectionHeader, ChipTheme"

Task 25: Map screens + `crew_matchmaking_wizard.dart`

Files:

Verify: lib/features/events/screens/radar_map_screen.dart (already done)
Modify: lib/features/events/screens/widgets/map_explore_view.dart
Modify: lib/features/events/screens/widgets/timeline_discovery_view.dart
Modify: lib/features/social/screens/crew_matchmaking_wizard.dart
Step 1: radar_map_screen.dart

Read and verify: FAB uses Theme.of(context).colorScheme.surface (automatic), chip bar uses ChipTheme, _MapEventCard is already styled. If everything looks correct, no changes needed. Run analyze only.

Step 2: map_explore_view.dart

Read file. Apply:

Any Chip/FilterChip → ChipTheme (remove hardcoded colors)
Any section header → FlowSectionHeader
Do NOT touch FlutterMap or marker widgets — chrome only
Step 3: timeline_discovery_view.dart

Same policy as map_explore_view.dart. Chrome only.

Step 4: crew_matchmaking_wizard.dart
Add coral step indicator (same code as Task 24)
Any crew suggestion card: replace with Card widget (picks up CardThemeData)
CTA button: ElevatedButton (theme handles coral)
Step 5: Verify and commit

flutter analyze lib/features/events/screens/widgets/map_explore_view.dart lib/features/events/screens/widgets/timeline_discovery_view.dart lib/features/social/screens/crew_matchmaking_wizard.dart
git add lib/features/events/screens/widgets/map_explore_view.dart lib/features/events/screens/widgets/timeline_discovery_view.dart lib/features/social/screens/crew_matchmaking_wizard.dart
git commit -m "feat(l2): map chrome + crew_matchmaking — ChipTheme, coral step indicator, CardTheme"

Step 6: Merge branch 4d to develop

git checkout develop
git merge feat/restyling-l2-misc --no-ff -m "feat: restyling-l2-misc — dashboards, ticket, create flows, map chrome, crew matchmaking"
git push origin develop

Final Verification

After all branches are merged to develop:

Step 1: Full analyze

cd /mnt/c/Users/elia-/Documents/flowproject/flow_mobile
flutter analyze

Expected: 0 errors. Warnings/infos are acceptable.

Step 2: Hot reload sweep

Run flutter run and navigate through every screen category:

Auth flow: welcome → login → registration wizard → profile setup
Feed (unchanged — just verify it didn’t break)
Events: discovery → event details → create event
Profile: own profile → public profile → edit profile
Social: friends → social list → my crews → crew matchmaking
Chat: chats list → chat screen → chat details → create group
Settings → help
Map: embedded in feed → full map explore
Tickets: ticket wallet (if accessible)
Dashboards: vendor/PR (if accessible)

Key things to check visually:

Dark mode: toggle in settings, verify dark tokens applied everywhere
Input fields: every form should show filled rounded box, not underline
Buttons: squared (radius 14) not pill — except chips (radiusFull)
No blue Material default colors visible anywhere
Step 3: Update documentation

cd /mnt/c/Users/elia-/Documents/flowproject/flow-docs
# Update design-system-feed-widgets.md if any shared widget changed its API
git add docs/mobile/features/design-system-feed-widgets.md
git commit -m "docs: update design system doc — FlowSectionHeader, FlowListTile, FlowStatCard added"

Key Reference: `AppTheme` Tokens

Token	Value
`AppTheme.warmCanvas`	`#F0EEE9`
`AppTheme.inkBlack`	`#121212`
`AppTheme.electricCoral`	`#FF5E57`
`AppTheme.textSecondaryWarm`	`#9E9E9E` (new)
`AppTheme.radius14`	14.0 (new)
`AppTheme.radius16`	16.0 (already existed)
`AppTheme.radius20`	20.0 (already existed)
`AppTheme.radius28`	28.0 (new)
`AppTheme.radiusFull`	999.0

Dark mode equivalents: warmCanvas → Color(0xFF1A1A1A), white card → Color(0xFF1E1E1E), input fill → Color(0xFF2A2A2A).

Flow Docs

Explorer

2026-03-18-global-restyling

Global UI Restyling Implementation Plan

Branch Merge Order (MANDATORY)

File Map

BRANCH 1: feat/restyling-theme

Task 1: Create branch and add new AppTheme tokens

Task 2: Update AppTheme ThemeData overrides

Task 3: Create FlowSectionHeader widget

Task 4: Create FlowListTile widget

Task 5: Create FlowStatCard widget

BRANCH 2: feat/restyling-shared-widgets

Task 6: Update vibe_filter_bar.dart

Task 7: Update chat_tile.dart

Task 8: Update crew_summary_card.dart

Task 9: Minor updates to squad_detail_sheet.dart, hero_event_card.dart, map_preview.dart

Task 9b: Update message_bubble.dart (chat bubble colors)

BRANCH 3: feat/restyling-l1

Task 10: Settings + Help screens

Task 11: Notifications + Search screens

Task 12: Social screens (friends, social_list, my_crews)

Task 13: Chat screens (chats_screen, chat_details, create_group)

Task 14: Events screens (my_events)

Task 15: Auth screens (registration_wizard, profile_setup, welcome, login)

Task 16: Profile + Verification screens

Task 17: Crew + Campaign creation screens

BRANCH 4a: feat/restyling-l2-events

Task 18: event_details_screen.dart

Task 19: events_screen.dart + event_discovery_screen.dart

BRANCH 4b: feat/restyling-l2-profile

Task 20: profile_screen.dart + public_profile_screen.dart

BRANCH 4c: feat/restyling-l2-chat

Task 21: chat_screen.dart

BRANCH 4d: feat/restyling-l2-misc

Task 22: Dashboard screens

Task 23: ticket_wallet_screen.dart

Task 24: Creation flow screens (create_event, create_crew)

Task 25: Map screens + crew_matchmaking_wizard.dart

Final Verification

Key Reference: AppTheme Tokens

Graph View

Table of Contents

Task 3: Create `FlowSectionHeader` widget

Task 4: Create `FlowListTile` widget

Task 5: Create `FlowStatCard` widget

Task 6: Update `vibe_filter_bar.dart`

Task 7: Update `chat_tile.dart`

Task 8: Update `crew_summary_card.dart`

Task 9: Minor updates to `squad_detail_sheet.dart`, `hero_event_card.dart`, `map_preview.dart`

Task 9b: Update `message_bubble.dart` (chat bubble colors)

Task 18: `event_details_screen.dart`

Task 19: `events_screen.dart` + `event_discovery_screen.dart`

Task 20: `profile_screen.dart` + `public_profile_screen.dart`

Task 21: `chat_screen.dart`

Task 23: `ticket_wallet_screen.dart`

Task 25: Map screens + `crew_matchmaking_wizard.dart`

Key Reference: `AppTheme` Tokens