compose: Redesign error banner that replaces the compose box

This cherry-picks (with some adjustments) UI changes from Zixuan's
current revision of PR zulip#924 (for issue zulip#720):

  compose: Support error banner redesign for replacing the compose box

See the Figma:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4031-15770&node-type=frame&t=vOSEWlXAhBa5EsAv-0

The new design is meant to be flush with the top of the compose-box
surface, so zulip#1089 (where the old banner's top margin disappeared,
looking buggy) is resolved.

The surface (but not content) of the redesigned banner seems like it
should extend through any left/right device insets to those edges of
the screen. By taking the banner as param separate from `body`,
_ComposeBoxContainer lets the banner do that -- without dropping its
responsibility for keeping the body (inputs, compose buttons, and
send button) out of the insets. The body doesn't need to consume the
insets itself and it's already complicated enough without needing
its own SafeAreas.

It also seems like the banner should pad the bottom inset when it's
meant to replace the body, so we do that and make the expectation
clear in the `errorBanner` dartdoc.

Co-authored-by: Zixuan James Li <[email protected]>
Fixes: zulip#1089

Author: chrisbobbe

lib/widgets/compose_box.dart

@@ -1010,23 +1010,60 @@ class _SendButtonState extends State<_SendButton> {
 }
 
 class _ComposeBoxContainer extends StatelessWidget {
-  const _ComposeBoxContainer({required this.child});
+  const _ComposeBoxContainer({
+    required this.body,
+    this.errorBanner,
+  }) : assert(body != null || errorBanner != null);
 
-  final Widget child;
+  /// The text inputs, compose-button row, and send button.
+  ///
+  /// This widget does not need a [SafeArea] to consume any device insets.
+  ///
+  /// Can be null, but only if [errorBanner] is non-null.
+  final Widget? body;
+
+  /// An error bar that goes at the top.
+  ///
+  /// This may be present on its own or with a [body].
+  /// If [body] is null this must be present.
+  ///
+  /// This widget should use a [SafeArea] to pad the left/right device insets.
+  /// If [body] is null it will also receive a bottom inset to pad;
+  /// it should pad that too.
+  final Widget? errorBanner;
+
+  Widget _paddedBody() {
+    assert(body != null);
+    return SafeArea(minimum: const EdgeInsets.symmetric(horizontal: 8),
+      child: body!);
+  }
 
   @override
   Widget build(BuildContext context) {
     final designVariables = DesignVariables.of(context);
 
+    final List<Widget> children = switch ((errorBanner, body)) {
+      (Widget(), Widget()) => [
+        // _paddedBody() already pads the bottom inset,
+        // so make sure the error banner doesn't double-pad it.
+        MediaQuery.removePadding(context: context, removeBottom: true,
+          child: errorBanner!),
+        _paddedBody(),
+      ],
+      (Widget(),     null) => [errorBanner!],
+      (null,     Widget()) => [_paddedBody()],
+      (null,         null) => throw UnimplementedError(), // not allowed, see dartdoc
+    };
+
     // TODO(design): Maybe put a max width on the compose box, like we do on
     //   the message list itself
     return Container(width: double.infinity,
       decoration: BoxDecoration(
         border: Border(top: BorderSide(color: designVariables.borderBar))),
       child: Material(
         color: designVariables.composeBoxBg,
-        child: SafeArea(minimum: const EdgeInsets.symmetric(horizontal: 8),
-          child: child)));
+        child: Column(
+          children: children)));
   }
 }
 
@@ -1194,16 +1231,30 @@ class _ErrorBanner extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final designVariables = DesignVariables.of(context);
-    return Container(
-      padding: const EdgeInsets.all(8),
+    final labelTextStyle = TextStyle(
+      fontSize: 17,
+      height: 22 / 17,
+      color: designVariables.btnLabelAttMediumDanger,
+    ).merge(weightVariableTextStyle(context, wght: 600));
+
+    return DecoratedBox(
       decoration: BoxDecoration(
-        color: designVariables.errorBannerBackground,
-        border: Border.all(color: designVariables.errorBannerBorder),
-        borderRadius: BorderRadius.circular(5)),
-      child: Text(label,
-        style: TextStyle(fontSize: 18, color: designVariables.errorBannerLabel),
-      ),
-    );
+        color: designVariables.bannerBgIntDanger),
+      child: SafeArea(
+        minimum: const EdgeInsetsDirectional.only(start: 8)
+          // (SafeArea.minimum doesn't take an EdgeInsetsDirectional)
+          .resolve(Directionality.of(context)),
+        child: Row(
+          children: [
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsetsDirectional.fromSTEB(8, 9, 0, 9),
+                child: Text(style: labelTextStyle,
+                  label))),
+            const SizedBox(width: 8),
+            // TODO(#720) "x" button goes here.
+            //   24px square with 8px touchable padding in all directions?
+          ])));
   }
 }
 
@@ -1291,12 +1342,18 @@ class _ComposeBoxState extends State<ComposeBox> implements ComposeBoxState {
 
   @override
   Widget build(BuildContext context) {
-    final Widget body;
+    final Widget? body;
+    Widget? errorBanner;
 
-    final errorBanner = _errorBanner(context);
+    errorBanner = _errorBanner(context);
     if (errorBanner != null) {
-      body = errorBanner;
+      body = null;
     } else {
+      // TODO(#720) dismissable message-send error, maybe something like:
+      //     if (controller.sendMessageError.value != null) {
+      //       errorBanner = _ErrorBanner(label:
+      //         ZulipLocalizations.of(context).errorSendMessageTimeout);
+      //     }
       final narrow = widget.narrow;
       switch (narrow) {
         case ChannelNarrow():
@@ -1315,10 +1372,10 @@ class _ComposeBoxState extends State<ComposeBox> implements ComposeBoxState {
         case MentionsNarrow():
         case StarredMessagesNarrow():
           assert(false);
-          body = const SizedBox.shrink();
+          body = null;
       }
     }
 
-    return _ComposeBoxContainer(child: body);
+    return _ComposeBoxContainer(body: body, errorBanner: errorBanner);
   }
 }

lib/widgets/theme.dart

@@ -114,10 +114,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   DesignVariables.light() :
     this._(
       background: const Color(0xffffffff),
+      bannerBgIntDanger: const Color(0xfff2e4e4),
       bgContextMenu: const Color(0xfff2f2f2),
       bgCounterUnread: const Color(0xff666699).withValues(alpha: 0.15),
       bgTopBar: const Color(0xfff5f5f5),
       borderBar: Colors.black.withValues(alpha: 0.2),
+      btnLabelAttLowIntDanger: const Color(0xffc0070a),
+      btnLabelAttMediumDanger: const Color(0xffac0508),
       composeBoxBg: const Color(0xffffffff),
       contextMenuCancelText: const Color(0xff222222),
       contextMenuItemBg: const Color(0xff6159e1),
@@ -135,9 +138,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
       contextMenuCancelBg: const Color(0xff797986),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
-      errorBannerBackground: const HSLColor.fromAHSL(1, 4, 0.33, 0.90).toColor(),
-      errorBannerBorder: const HSLColor.fromAHSL(0.4, 3, 0.57, 0.33).toColor(),
-      errorBannerLabel: const HSLColor.fromAHSL(1, 4, 0.58, 0.33).toColor(),
       groupDmConversationIcon: Colors.black.withValues(alpha: 0.5),
       groupDmConversationIconBg: const Color(0x33808080),
       loginOrDivider: const Color(0xffdedede),
@@ -154,10 +154,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   DesignVariables.dark() :
     this._(
       background: const Color(0xff000000),
+      bannerBgIntDanger: const Color(0xff461616),
       bgContextMenu: const Color(0xff262626),
       bgCounterUnread: const Color(0xff666699).withValues(alpha: 0.37),
       bgTopBar: const Color(0xff242424),
       borderBar: Colors.black.withValues(alpha: 0.5),
+      btnLabelAttLowIntDanger: const Color(0xffff8b7c),
+      btnLabelAttMediumDanger: const Color(0xffff8b7c),
       composeBoxBg: const Color(0xff0f0f0f),
       contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
       contextMenuItemBg: const Color(0xff7977fe),
@@ -176,9 +179,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
       atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
-      errorBannerBackground: const HSLColor.fromAHSL(1, 0, 0.61, 0.19).toColor(),
-      errorBannerBorder: const HSLColor.fromAHSL(0.4, 3, 0.73, 0.74).toColor(),
-      errorBannerLabel: const HSLColor.fromAHSL(1, 2, 0.73, 0.80).toColor(),
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
       groupDmConversationIcon: Colors.white.withValues(alpha: 0.5),
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
@@ -201,10 +201,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   DesignVariables._({
     required this.background,
+    required this.bannerBgIntDanger,
     required this.bgContextMenu,
     required this.bgCounterUnread,
     required this.bgTopBar,
     required this.borderBar,
+    required this.btnLabelAttLowIntDanger,
+    required this.btnLabelAttMediumDanger,
     required this.composeBoxBg,
     required this.contextMenuCancelText,
     required this.contextMenuItemBg,
@@ -222,9 +225,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.atMentionMarker,
     required this.contextMenuCancelBg,
     required this.dmHeaderBg,
-    required this.errorBannerBackground,
-    required this.errorBannerBorder,
-    required this.errorBannerLabel,
     required this.groupDmConversationIcon,
     required this.groupDmConversationIconBg,
     required this.loginOrDivider,
@@ -249,10 +249,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   }
 
   final Color background;
+  final Color bannerBgIntDanger;
   final Color bgContextMenu;
   final Color bgCounterUnread;
   final Color bgTopBar;
   final Color borderBar;
+  final Color btnLabelAttLowIntDanger;
+  final Color btnLabelAttMediumDanger;
   final Color composeBoxBg;
   final Color contextMenuCancelText;
   final Color contextMenuItemBg;
@@ -274,9 +277,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color atMentionMarker;
   final Color contextMenuCancelBg; // In Figma, but unnamed.
   final Color dmHeaderBg;
-  final Color errorBannerBackground;
-  final Color errorBannerBorder;
-  final Color errorBannerLabel;
   final Color groupDmConversationIcon;
   final Color groupDmConversationIconBg;
   final Color loginOrDivider; // TODO(design-dark) need proper dark-theme color (this is ad hoc)
@@ -292,10 +292,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   @override
   DesignVariables copyWith({
     Color? background,
+    Color? bannerBgIntDanger,
     Color? bgContextMenu,
     Color? bgCounterUnread,
     Color? bgTopBar,
     Color? borderBar,
+    Color? btnLabelAttLowIntDanger,
+    Color? btnLabelAttMediumDanger,
     Color? composeBoxBg,
     Color? contextMenuCancelText,
     Color? contextMenuItemBg,
@@ -313,9 +316,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? atMentionMarker,
     Color? contextMenuCancelBg,
     Color? dmHeaderBg,
-    Color? errorBannerBackground,
-    Color? errorBannerBorder,
-    Color? errorBannerLabel,
     Color? groupDmConversationIcon,
     Color? groupDmConversationIconBg,
     Color? loginOrDivider,
@@ -330,10 +330,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   }) {
     return DesignVariables._(
       background: background ?? this.background,
+      bannerBgIntDanger: bannerBgIntDanger ?? this.bannerBgIntDanger,
       bgContextMenu: bgContextMenu ?? this.bgContextMenu,
       bgCounterUnread: bgCounterUnread ?? this.bgCounterUnread,
       bgTopBar: bgTopBar ?? this.bgTopBar,
       borderBar: borderBar ?? this.borderBar,
+      btnLabelAttLowIntDanger: btnLabelAttLowIntDanger ?? this.btnLabelAttLowIntDanger,
+      btnLabelAttMediumDanger: btnLabelAttMediumDanger ?? this.btnLabelAttMediumDanger,
       composeBoxBg: composeBoxBg ?? this.composeBoxBg,
       contextMenuCancelText: contextMenuCancelText ?? this.contextMenuCancelText,
       contextMenuItemBg: contextMenuItemBg ?? this.contextMenuItemBg,
@@ -351,9 +354,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       atMentionMarker: atMentionMarker ?? this.atMentionMarker,
       contextMenuCancelBg: contextMenuCancelBg ?? this.contextMenuCancelBg,
       dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
-      errorBannerBackground: errorBannerBackground ?? this.errorBannerBackground,
-      errorBannerBorder: errorBannerBorder ?? this.errorBannerBorder,
-      errorBannerLabel: errorBannerLabel ?? this.errorBannerLabel,
       groupDmConversationIcon: groupDmConversationIcon ?? this.groupDmConversationIcon,
       groupDmConversationIconBg: groupDmConversationIconBg ?? this.groupDmConversationIconBg,
       loginOrDivider: loginOrDivider ?? this.loginOrDivider,
@@ -375,10 +375,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     }
     return DesignVariables._(
       background: Color.lerp(background, other.background, t)!,
+      bannerBgIntDanger: Color.lerp(bannerBgIntDanger, other.bannerBgIntDanger, t)!,
       bgContextMenu: Color.lerp(bgContextMenu, other.bgContextMenu, t)!,
       bgCounterUnread: Color.lerp(bgCounterUnread, other.bgCounterUnread, t)!,
       bgTopBar: Color.lerp(bgTopBar, other.bgTopBar, t)!,
       borderBar: Color.lerp(borderBar, other.borderBar, t)!,
+      btnLabelAttLowIntDanger: Color.lerp(btnLabelAttLowIntDanger, other.btnLabelAttLowIntDanger, t)!,
+      btnLabelAttMediumDanger: Color.lerp(btnLabelAttMediumDanger, other.btnLabelAttMediumDanger, t)!,
       composeBoxBg: Color.lerp(composeBoxBg, other.composeBoxBg, t)!,
       contextMenuCancelText: Color.lerp(contextMenuCancelText, other.contextMenuCancelText, t)!,
       contextMenuItemBg: Color.lerp(contextMenuItemBg, other.contextMenuItemBg, t)!,
@@ -396,9 +399,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
       contextMenuCancelBg: Color.lerp(contextMenuCancelBg, other.contextMenuCancelBg, t)!,
       dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,
-      errorBannerBackground: Color.lerp(errorBannerBackground, other.errorBannerBackground, t)!,
-      errorBannerBorder: Color.lerp(errorBannerBorder, other.errorBannerBorder, t)!,
-      errorBannerLabel: Color.lerp(errorBannerLabel, other.errorBannerLabel, t)!,
       groupDmConversationIcon: Color.lerp(groupDmConversationIcon, other.groupDmConversationIcon, t)!,
       groupDmConversationIconBg: Color.lerp(groupDmConversationIconBg, other.groupDmConversationIconBg, t)!,
       loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, t)!,