From 9a6cb3ffdfe8bf077e184674d8850fdf48bfbdcd Mon Sep 17 00:00:00 2001
From: morgmart <98432065+morgmart@users.noreply.github.com>
Date: Thu, 5 Nov 2026 19:23:34 -0800
Subject: [PATCH] mobile: make the first-agent card stand out in dark mode
 (#9171)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to #9036. In dark mode the "Create your first agent" card used
the raised dark surface (#1A1A1A), which barely separates from the black
Home page, and dark mode shows no shadow — feedback was that it's hard
to see.

The card now uses the inverse surface in both themes (light: dark card
on white; dark: light gray card with black text), so it always contrasts
the page. No new tokens.

Tests: `flutter analyze` on the widget; `flutter test
test/shared/widgets/buzz_callout_test.dart test/features/channels/` all
pass.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

| | Before | After |
|---|---|---|
| Dark | ![Dark
before](https://github.com/user-attachments/assets/c5f217aa-df2b-4ce9-9f27-655f2a946d76)
| ![Dark
after](https://github.com/user-attachments/assets/72c6e018-cd6b-4877-85e8-7df8d250db13)
|
| Light (unchanged) | ![Light
before](https://github.com/user-attachments/assets/0cca03fc-ab52-4132-b977-abcc300c104f)
| ![Light
after](https://github.com/user-attachments/assets/12bcf97e-9d11-4445-8406-5d3e196969f0)
|

_Rendered from the widget at phone width with the real fonts and
artwork._

Signed-off-by: morgmart <98432065+morgmart@users.noreply.github.com>
Co-authored-by: Morgarita <6e967af659416160ab4f2fd56d74c8c6f273791ee7bfc9468a1be37c387947be@buzz.block.builderlab.xyz>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
---
 mobile/lib/shared/widgets/buzz_callout.dart | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/mobile/lib/shared/widgets/buzz_callout.dart b/mobile/lib/shared/widgets/buzz_callout.dart
index d5e7e341a4..5bdede615d 100644
--- a/mobile/lib/shared/widgets/buzz_callout.dart
+++ b/mobile/lib/shared/widgets/buzz_callout.dart
@@ -91,7 +91,7 @@ class BuzzCallout extends HookWidget {
             right: padding.right + Grid.xs,
             top: padding.top + Grid.xs,
           ),
-          color: _calloutColors(context).$1,
+          color: context.colors.inverseSurface,
           shadowColor: appPopoverShadowColor(context),
           child: _Card(
             message: message,
@@ -127,16 +127,6 @@ class BuzzCallout extends HookWidget {
   }
 }
 
-/// The callout's background and foreground. Inverse colors set it apart from
-/// menus and the page; in dark mode, whose inverse is a flat light gray, it
-/// uses the raised dark surface instead, as toasts do.
-(Color, Color) _calloutColors(BuildContext context) {
-  final colors = context.colors;
-  return Theme.of(context).brightness == Brightness.dark
-      ? (colors.surfaceContainer, colors.onSurface)
-      : (colors.inverseSurface, colors.onInverseSurface);
-}
-
 /// Where the card's artwork sits, after desktop's empty Agents tile: each
 /// picture hangs partly off an edge, tilted, clear of the close button. The
 /// message sits on top where they meet.
@@ -211,7 +201,7 @@ class _Card extends StatelessWidget {
                       message,
                       textAlign: TextAlign.center,
                       style: context.textTheme.titleLarge?.copyWith(
-                        color: _calloutColors(context).$2,
+                        color: context.colors.onInverseSurface,
                       ),
                     ),
                   ),
@@ -223,7 +213,7 @@ class _Card extends StatelessWidget {
                 child: IconButton(
                   tooltip: 'Dismiss',
                   onPressed: onDismiss,
-                  color: _calloutColors(context).$2,
+                  color: context.colors.onInverseSurface,
                   icon: const Icon(BuzzIcons.x),
                 ),
               ),