ui: Stop using deprecated ColorScheme.background and ColorScheme.surfaceVariant

lib/widgets/app.dart

@@ -84,10 +84,15 @@ class ZulipApp extends StatelessWidget {
     final theme = ThemeData(
       typography: zulipTypography(context),
       appBarTheme: const AppBarTheme(
-        // This prevents an elevation change in [AppBar]s so they stop turning
-        // darker if there is something scrolled underneath it. See docs:
-        //   https://api.flutter.dev/flutter/material/AppBar/elevation.html
+        // Set these two fields to prevent a color change in [AppBar]s when
+        // there is something scrolled under it. If an app bar hasn't been
+        // given a backgroundColor directly or by theme, it uses
+        // ColorScheme.surfaceContainer for the scrolled-under state and
+        // ColorScheme.surface otherwise, and those are different colors.
         scrolledUnderElevation: 0,
+        backgroundColor: Color(0xfff5f5f5),
+
+        shape: Border(bottom: BorderSide(color: Color(0xffcccccc))),
       ),
       // This applies Material 3's color system to produce a palette of
       // appropriately matching and contrasting colors for use in a UI.
@@ -99,11 +104,8 @@ class ZulipApp extends StatelessWidget {
       //   https://m3.material.io/theme-builder#/custom
       colorScheme: ColorScheme.fromSeed(
         seedColor: kZulipBrandColor,
-
-        // Used in the Figma for surfaces underneath scrollable content, e.g.:
-        //   <https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=341%3A12362&mode=dev>
-        background: const Color(0xfff6f6f6),
       ),
+      scaffoldBackgroundColor: const Color(0xfff6f6f6),
       // `preferBelow: false` seems like a better default for mobile;
       // the area below a long-press target seems more likely to be hidden by
       // a finger or thumb than the area above.

lib/widgets/compose_box.dart

@@ -812,7 +812,7 @@ class _ComposeBoxLayout extends StatelessWidget {
     );
 
     return Material(
-      color: colorScheme.surfaceVariant,
+      color: colorScheme.surfaceContainerHighest,
       child: SafeArea(
         minimum: const EdgeInsets.fromLTRB(8, 0, 8, 8),
         child: Padding(

lib/widgets/message_list.dart

@@ -47,7 +47,8 @@ class MessageListPage extends StatefulWidget {
   State<MessageListPage> createState() => _MessageListPageState();
 }
 
-const _kFallbackStreamColor = Color(0xfff5f5f5);
+// TODO(design) this seems ad-hoc; is there a better color?
+const _kUnsubscribedStreamRecipientHeaderColor = Color(0xfff5f5f5);
 
 class _MessageListPageState extends State<MessageListPage> {
   final GlobalKey<ComposeBoxController> _composeBoxKey = GlobalKey();
@@ -56,21 +57,34 @@ class _MessageListPageState extends State<MessageListPage> {
   Widget build(BuildContext context) {
     final store = PerAccountStoreWidget.of(context);
 
-    final Color backgroundColor;
+    final Color? backgroundColor;
+    bool removeAppBarBottomBorder = false;
     switch(widget.narrow) {
       case AllMessagesNarrow():
-        backgroundColor = _kFallbackStreamColor;
+        backgroundColor = null; // i.e., inherit
+
       case StreamNarrow(:final streamId):
       case TopicNarrow(:final streamId):
         backgroundColor = store.subscriptions[streamId]?.colorSwatch().barBackground
-          ?? _kFallbackStreamColor;
+          ?? _kUnsubscribedStreamRecipientHeaderColor;
+        // All recipient headers will match this color; remove distracting line
+        // (but are recipient headers even needed for topic narrows?)
+        removeAppBarBottomBorder = true;
+
       case DmNarrow():
-        backgroundColor = _kFallbackStreamColor;
+        backgroundColor = _kDmRecipientHeaderColor;
+        // All recipient headers will match this color; remove distracting line
+        // (but are recipient headers even needed?)
+        removeAppBarBottomBorder = true;
     }
 
     return Scaffold(
       appBar: AppBar(title: MessageListAppBarTitle(narrow: widget.narrow),
-        backgroundColor: backgroundColor),
+        backgroundColor: backgroundColor,
+        shape: removeAppBarBottomBorder
+          ? const Border()
+          : null, // i.e., inherit
+      ),
       // TODO question for Vlad: for a stream view, should we set
       //   [backgroundColor] based on stream color, as in this frame:
       //     https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132%3A9684&mode=dev
@@ -640,7 +654,7 @@ class StreamMessageRecipientHeader extends StatelessWidget {
           : Colors.black;
       iconColor = swatch.iconOnBarBackground;
     } else {
-      backgroundColor = _kFallbackStreamColor;
+      backgroundColor = _kUnsubscribedStreamRecipientHeaderColor;
       contrastingColor = Colors.black;
       iconColor = Colors.black;
     }