diff --git a/lib/widgets/app.dart b/lib/widgets/app.dart index 92ed8cb6a4..dc546707d6 100644 --- a/lib/widgets/app.dart +++ b/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.: - // - 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. diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart index ea80368bd6..b68c7c0350 100644 --- a/lib/widgets/compose_box.dart +++ b/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( diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart index f6203f7715..93c4e9c1f5 100644 --- a/lib/widgets/message_list.dart +++ b/lib/widgets/message_list.dart @@ -47,7 +47,8 @@ class MessageListPage extends StatefulWidget { State 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 { final GlobalKey _composeBoxKey = GlobalKey(); @@ -56,21 +57,34 @@ class _MessageListPageState extends State { 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; }