feat(assets): real walkthrough illustrations and Mostro logo across app bars

lib/features/chat/screens/chat_rooms_screen.dart

@@ -59,7 +59,6 @@ class _ChatRoomsScreenState extends ConsumerState<ChatRoomsScreen> {
     final colors = Theme.of(context).extension<AppColors>();
     if (colors == null) throw StateError('AppColors theme extension must be registered');
     final textTheme = Theme.of(context).textTheme;
-    final green = colors.mostroGreen;
 
     final isDesktop =
         MediaQuery.sizeOf(context).width >= AppBreakpoints.desktop;
@@ -70,7 +69,6 @@ class _ChatRoomsScreenState extends ConsumerState<ChatRoomsScreen> {
           SafeArea(
             bottom: false,
             child: _ChatAppBar(
-              green: green,
               onMenuTap: () => setState(() => _drawerOpen = true),
             ),
           ),
@@ -125,9 +123,8 @@ class _ChatRoomsScreenState extends ConsumerState<ChatRoomsScreen> {
 // ── Mobile app bar ─────────────────────────────────────────────────────────────
 
 class _ChatAppBar extends StatelessWidget {
-  const _ChatAppBar({required this.green, required this.onMenuTap});
+  const _ChatAppBar({required this.onMenuTap});
 
-  final Color green;
   final VoidCallback onMenuTap;
 
   @override
@@ -145,7 +142,7 @@ class _ChatAppBar extends StatelessWidget {
             tooltip: AppLocalizations.of(context).menuTooltip,
           ),
           const Spacer(),
-          Icon(Icons.psychology, size: 28, color: green),
+          Image.asset('assets/images/mostro_logo.webp', height: 32),
           const Spacer(),
           const NotificationBell(),
           const SizedBox(width: AppSpacing.sm),

lib/features/drawer/screens/drawer_menu.dart

@@ -17,7 +17,7 @@ import 'package:mostro/shared/widgets/bottom_nav_bar.dart'
 /// **Persistent mode** (`persistent: true`): renders as a fixed-width
 /// [240 px] sidebar column, suitable for embedding in a [Row] on desktop.
 ///
-/// Header: Mostro mascot icon + "Beta" label + "MOSTRO" title.
+/// Header: Mostro beta logo.
 /// Desktop nav: Order Book, My Trades, Chat — active item highlighted.
 /// Account items: Account, Settings, About.
 class DrawerMenu extends ConsumerWidget {
@@ -50,7 +50,6 @@ class DrawerMenu extends ConsumerWidget {
     final panel = _SidebarContent(
       green: green,
       cardBg: cardBg,
-      theme: theme,
       persistent: persistent,
       tradesCount: tradesCount,
       chatCount: chatCount,
@@ -86,7 +85,6 @@ class _SidebarContent extends StatelessWidget {
   const _SidebarContent({
     required this.green,
     required this.cardBg,
-    required this.theme,
     required this.persistent,
     required this.tradesCount,
     required this.chatCount,
@@ -95,7 +93,6 @@ class _SidebarContent extends StatelessWidget {
 
   final Color green;
   final Color cardBg;
-  final ThemeData theme;
   final bool persistent;
   final int tradesCount;
   final int chatCount;
@@ -122,45 +119,11 @@ class _SidebarContent extends StatelessWidget {
                 AppSpacing.xl,
                 AppSpacing.lg,
               ),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Icon(Icons.psychology_outlined, size: 48, color: green),
-                  const SizedBox(height: AppSpacing.md),
-                  Row(
-                    children: [
-                      Text(
-                        l10n.drawerTitle,
-                        style: (theme.textTheme.headlineLarge ??
-                                theme.textTheme.headlineMedium ??
-                                const TextStyle(
-                                  fontSize: 24,
-                                  fontWeight: FontWeight.bold,
-                                ))
-                            .copyWith(color: green, letterSpacing: 2),
-                      ),
-                      const SizedBox(width: AppSpacing.sm),
-                      Container(
-                        padding: const EdgeInsets.symmetric(
-                          horizontal: AppSpacing.sm,
-                          vertical: 2,
-                        ),
-                        decoration: BoxDecoration(
-                          border: Border.all(color: green),
-                          borderRadius: BorderRadius.circular(AppRadius.chip),
-                        ),
-                        child: Text(
-                          l10n.betaBadgeLabel,
-                          style: TextStyle(
-                            color: green,
-                            fontSize: 10,
-                            fontWeight: FontWeight.w600,
-                          ),
-                        ),
-                      ),
-                    ],
-                  ),
-                ],
+              child: Image.asset(
+                'assets/images/mostro_logo_beta.webp',
+                height: 56,
+                fit: BoxFit.contain,
+                semanticLabel: '${l10n.drawerTitle} ${l10n.betaBadgeLabel}',
               ),
             ),
 

lib/features/home/screens/home_screen.dart

@@ -291,8 +291,8 @@ class _HomeScreenState extends ConsumerState<HomeScreen>
   }
 }
 
-/// Custom app bar per the mock: hamburger left, notification bell right,
-/// empty center, 52px tall over a 1px hairline.
+/// Custom app bar per the mock: hamburger left, Mostro logo centered,
+/// notification bell right, 52px tall over a 1px hairline.
 class _MostroAppBar extends StatelessWidget {
   const _MostroAppBar({
     required this.palette,
@@ -312,17 +312,23 @@ class _MostroAppBar extends StatelessWidget {
           height: 52,
           child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: 4),
-            child: Row(
+            child: Stack(
+              alignment: Alignment.center,
               children: [
-                if (onMenuTap != null)
-                  IconButton(
-                    onPressed: onMenuTap,
-                    iconSize: 22,
-                    icon: Icon(Icons.menu, color: palette.textPrimary),
-                    tooltip: AppLocalizations.of(context).menuTooltip,
-                  ),
-                const Spacer(),
-                const NotificationBell(),
+                Image.asset('assets/images/mostro_logo.webp', height: 32),
+                Row(
+                  children: [
+                    if (onMenuTap != null)
+                      IconButton(
+                        onPressed: onMenuTap,
+                        iconSize: 22,
+                        icon: Icon(Icons.menu, color: palette.textPrimary),
+                        tooltip: AppLocalizations.of(context).menuTooltip,
+                      ),
+                    const Spacer(),
+                    const NotificationBell(),
+                  ],
+                ),
               ],
             ),
           ),

lib/features/trades/screens/trades_screen.dart

@@ -137,8 +137,8 @@ class _TradesScreenState extends ConsumerState<TradesScreen> {
           tooltip: l10n.menuTooltip,
         ),
         title: Image.asset(
-          'assets/images/mostro_logo.png',
-          height: 28,
+          'assets/images/mostro_logo.webp',
+          height: 32,
           errorBuilder: (_, __, ___) => Text(
             'Mostro',
             style: Theme.of(context).textTheme.headlineMedium,

lib/features/walkthrough/screens/walkthrough_screen.dart

@@ -89,32 +89,32 @@ class WalkthroughScreen extends ConsumerWidget {
       (
         title: l10n.walkthroughSlideOneTitle,
         body: l10n.walkthroughSlideOneBody,
-        image: 'assets/images/wt-1.png',
+        image: 'assets/images/wt-1.webp',
       ),
       (
         title: l10n.walkthroughSlideTwoTitle,
         body: l10n.walkthroughSlideTwoBody,
-        image: 'assets/images/wt-2.png',
+        image: 'assets/images/wt-2.webp',
       ),
       (
         title: l10n.walkthroughSlideThreeTitle,
         body: l10n.walkthroughSlideThreeBody,
-        image: 'assets/images/wt-3.png',
+        image: 'assets/images/wt-3.webp',
       ),
       (
         title: l10n.walkthroughSlideFourTitle,
         body: l10n.walkthroughSlideFourBody,
-        image: 'assets/images/wt-4.png',
+        image: 'assets/images/wt-4.webp',
       ),
       (
         title: l10n.walkthroughSlideFiveTitle,
         body: l10n.walkthroughSlideFiveBody,
-        image: 'assets/images/wt-5.png',
+        image: 'assets/images/wt-5.webp',
       ),
       (
         title: l10n.walkthroughSlideSixTitle,
         body: l10n.walkthroughSlideSixBody,
-        image: 'assets/images/wt-6.png',
+        image: 'assets/images/wt-6.webp',
       ),
     ];
 

specs/004-mostro-p2p-client/plan.md

@@ -139,7 +139,7 @@ test/
 └── rust/                     # Cargo unit tests (also in rust/src/**/*.rs)
 specs/                        # Planning artifacts (this directory)
 assets/
-├── images/                   # Walkthrough images (wt-1.png … wt-6.png), logos
+├── images/                   # Walkthrough images (wt-1.webp … wt-6.webp), logos
 ├── data/
 │   └── fiat.json             # Fiat currency + country flag data
 └── l10n/                     # ARB localization files (EN, ES, IT, FR, DE)

specs/004-mostro-p2p-client/tasks.md

@@ -31,7 +31,7 @@
 - [x] T004 Configure `rust/build.rs` to invoke `flutter_rust_bridge_codegen generate` and set up `rust_builder/` scaffolding for wasm-pack web builds
 - [x] T005 [P] Add Rust WASM target and document in `quickstart.md`: `rustup target add wasm32-unknown-unknown`; add `wasm-pack` and `flutter_rust_bridge_codegen` to prerequisites
 - [x] T006 [P] Configure linting: `.clippy.toml` (Rust, deny warnings), `analysis_options.yaml` (Flutter, strict), pre-commit hooks running `cargo clippy -- -D warnings` and `flutter analyze`
-- [x] T007 [P] Populate `assets/data/fiat.json` with full fiat currency list (ISO 4217 code, name, country flag emoji); create placeholder walkthrough images `assets/images/wt-1.png` through `wt-6.png`; create skeleton ARB files `assets/l10n/app_en.arb`, `app_es.arb`, `app_it.arb`, `app_fr.arb`, `app_de.arb`
+- [x] T007 [P] Populate `assets/data/fiat.json` with full fiat currency list (ISO 4217 code, name, country flag emoji); create placeholder walkthrough images `assets/images/wt-1.png` through `wt-6.png`; create skeleton ARB files `assets/l10n/app_en.arb`, `app_es.arb`, `app_it.arb`, `app_fr.arb`, `app_de.arb` (historical: those PNG placeholders were replaced by the real `wt-1.webp` … `wt-6.webp` illustrations in #264)
 
 **Checkpoint**: `flutter pub get`, `cd rust && cargo build`, `flutter analyze` all pass.