compose_box: Support redesigned button feedback

This disables the splash effect for all the compose buttons and the
send button, and implements a rounded rectangular background that
appears on hover/pressed.

In the future we should migrate more buttons to use this style.

See also:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3707-41711&node-type=frame&t=sSYomsJzGCt34D8N-0

Fixes: zulip#915

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/compose_box.dart

@@ -1047,6 +1047,7 @@ class _ComposeBoxLayout extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final themeData = Theme.of(context);
+    final designVariables = DesignVariables.of(context);
 
     final inputThemeData = themeData.copyWith(
       inputDecorationTheme: const InputDecorationTheme(
@@ -1055,6 +1056,18 @@ class _ComposeBoxLayout extends StatelessWidget {
         contentPadding: EdgeInsets.zero,
         border: InputBorder.none));
 
+    // TODO(#417): Disable splash effects for all buttons globally.
+    final iconButtonThemeData = IconButtonThemeData(
+      style: IconButton.styleFrom(
+        splashFactory: NoSplash.splashFactory,
+        // TODO(#417): The Figma design specifies a different icon color on
+        //   pressed, but `IconButton` currently does not have support for
+        //   that.  See also:
+        //     https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3707-41711&node-type=frame&t=sSYomsJzGCt34D8N-0
+        highlightColor: designVariables.editorButtonPressedBg,
+        shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(4)))));
+
     return _ComposeBoxContainer(
       child: Column(children: [
         SafeArea(
@@ -1069,22 +1082,24 @@ class _ComposeBoxLayout extends StatelessWidget {
           minimum: const EdgeInsets.symmetric(horizontal: 8),
           child: SizedBox(
             height: _composeButtonsRowHeight,
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                Row(children: [
-                  _AttachFileButton(
-                    contentController: contentController,
-                    contentFocusNode: contentFocusNode),
-                  _AttachMediaButton(
-                    contentController: contentController,
-                    contentFocusNode: contentFocusNode),
-                  _AttachFromCameraButton(
-                    contentController: contentController,
-                    contentFocusNode: contentFocusNode),
-                ]),
-                sendButton,
-              ]))),
+            child: IconButtonTheme(
+              data: iconButtonThemeData,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Row(children: [
+                    _AttachFileButton(
+                      contentController: contentController,
+                      contentFocusNode: contentFocusNode),
+                    _AttachMediaButton(
+                      contentController: contentController,
+                      contentFocusNode: contentFocusNode),
+                    _AttachFromCameraButton(
+                      contentController: contentController,
+                      contentFocusNode: contentFocusNode),
+                  ]),
+                  sendButton,
+                ])))),
       ]));
   }
 }

lib/widgets/theme.dart

@@ -122,6 +122,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: const Color(0xff222222),
       contextMenuItemBg: const Color(0xff6159e1),
       contextMenuItemText: const Color(0xff381da7),
+      editorButtonPressedBg: Colors.black.withValues(alpha: 0.06),
       foreground: const Color(0xff000000),
       icon: const Color(0xff6159e1),
       labelCounterUnread: const Color(0xff222222),
@@ -161,6 +162,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
       contextMenuItemBg: const Color(0xff7977fe),
       contextMenuItemText: const Color(0xff9398fd),
+      editorButtonPressedBg: Colors.white.withValues(alpha: 0.06),
       foreground: const Color(0xffffffff),
       icon: const Color(0xff7977fe),
       labelCounterUnread: const Color(0xffffffff).withValues(alpha: 0.7),
@@ -207,6 +209,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.contextMenuCancelText,
     required this.contextMenuItemBg,
     required this.contextMenuItemText,
+    required this.editorButtonPressedBg,
     required this.foreground,
     required this.icon,
     required this.labelCounterUnread,
@@ -254,6 +257,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color contextMenuCancelText;
   final Color contextMenuItemBg;
   final Color contextMenuItemText;
+  final Color editorButtonPressedBg;
   final Color foreground;
   final Color icon;
   final Color labelCounterUnread;
@@ -296,6 +300,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? contextMenuCancelText,
     Color? contextMenuItemBg,
     Color? contextMenuItemText,
+    Color? editorButtonPressedBg,
     Color? foreground,
     Color? icon,
     Color? labelCounterUnread,
@@ -333,6 +338,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: contextMenuCancelText ?? this.contextMenuCancelText,
       contextMenuItemBg: contextMenuItemBg ?? this.contextMenuItemBg,
       contextMenuItemText: contextMenuItemText ?? this.contextMenuItemBg,
+      editorButtonPressedBg: editorButtonPressedBg ?? this.editorButtonPressedBg,
       foreground: foreground ?? this.foreground,
       icon: icon ?? this.icon,
       labelCounterUnread: labelCounterUnread ?? this.labelCounterUnread,
@@ -377,6 +383,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: Color.lerp(contextMenuCancelText, other.contextMenuCancelText, t)!,
       contextMenuItemBg: Color.lerp(contextMenuItemBg, other.contextMenuItemBg, t)!,
       contextMenuItemText: Color.lerp(contextMenuItemText, other.contextMenuItemBg, t)!,
+      editorButtonPressedBg: Color.lerp(editorButtonPressedBg, other.editorButtonPressedBg, t)!,
       foreground: Color.lerp(foreground, other.foreground, t)!,
       icon: Color.lerp(icon, other.icon, t)!,
       labelCounterUnread: Color.lerp(labelCounterUnread, other.labelCounterUnread, t)!,