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

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

Author: PIG208

lib/widgets/compose_box.dart

@@ -988,6 +988,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(
@@ -996,6 +997,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: [
         Padding(
@@ -1009,22 +1022,24 @@ class _ComposeBoxLayout extends StatelessWidget {
         Container(
           padding: const EdgeInsets.symmetric(horizontal: 8),
           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),
@@ -160,6 +161,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),
@@ -205,6 +207,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,
@@ -251,6 +254,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;
@@ -292,6 +296,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? contextMenuCancelText,
     Color? contextMenuItemBg,
     Color? contextMenuItemText,
+    Color? editorButtonPressedBg,
     Color? foreground,
     Color? icon,
     Color? labelCounterUnread,
@@ -328,6 +333,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,
@@ -371,6 +377,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)!,