compose_box: Use new send button color, shape and icon

DesignVariables.icon's value has been updated to match the current
design. This would affect the appearance of the
ChooseAccountPageOverflowButton on the choose account page, which is
intentional.

Note that we set the color on `Icon` instead of `IconButton`, because
the color shouldn't apply to for example the background color of the
button when highlighted, etc.

See also:

  - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395
  - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350

Author: PIG208

lib/widgets/compose_box.dart

@@ -929,30 +929,18 @@ class _SendButtonState extends State<_SendButton> {
 
   @override
   Widget build(BuildContext context) {
-    final disabled = _hasValidationErrors;
-    final colorScheme = Theme.of(context).colorScheme;
+    final designVariables = DesignVariables.of(context);
     final zulipLocalizations = ZulipLocalizations.of(context);
 
-    // Copy FilledButton defaults (_FilledButtonDefaultsM3.backgroundColor)
-    final backgroundColor = disabled
-      ? colorScheme.onSurface.withValues(alpha: 0.12)
-      : colorScheme.primary;
-
-    // Copy FilledButton defaults (_FilledButtonDefaultsM3.foregroundColor)
-    final foregroundColor = disabled
-      ? colorScheme.onSurface.withValues(alpha: 0.38)
-      : colorScheme.onPrimary;
+    final iconColor = _hasValidationErrors
+      ? designVariables.icon.withValues(alpha: 0.5)
+      : designVariables.icon;
 
-    return Ink(
+    return SizedBox(
       width: _composeButtonWidth,
-      decoration: BoxDecoration(
-        borderRadius: const BorderRadius.all(Radius.circular(8.0)),
-        color: backgroundColor,
-      ),
       child: IconButton(
         tooltip: zulipLocalizations.composeBoxSendTooltip,
-        color: foregroundColor,
-        icon: const Icon(ZulipIcons.send),
+        icon: Icon(ZulipIcons.send, color: iconColor),
         onPressed: _send));
   }
 }

lib/widgets/theme.dart

@@ -123,7 +123,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuItemBg: const Color(0xff6159e1),
       contextMenuItemText: const Color(0xff381da7),
       foreground: const Color(0xff000000),
-      icon: const Color(0xff666699),
+      icon: const Color(0xff6159e1),
       labelCounterUnread: const Color(0xff222222),
       labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
       labelMenuButton: const Color(0xff222222),
@@ -161,7 +161,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuItemBg: const Color(0xff7977fe),
       contextMenuItemText: const Color(0xff9398fd),
       foreground: const Color(0xffffffff),
-      icon: const Color(0xff666699),
+      icon: const Color(0xff7977fe),
       labelCounterUnread: const Color(0xffffffff).withValues(alpha: 0.7),
       labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
       labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),

test/widgets/compose_box_test.dart

@@ -20,6 +20,7 @@ import 'package:zulip/widgets/app.dart';
 import 'package:zulip/widgets/compose_box.dart';
 import 'package:zulip/widgets/page.dart';
 import 'package:zulip/widgets/icons.dart';
+import 'package:zulip/widgets/theme.dart';
 
 import '../api/fake_api.dart';
 import '../example_data.dart' as eg;
@@ -436,11 +437,12 @@ void main() {
         of: find.byIcon(ZulipIcons.send),
         matching: find.byType(IconButton)));
       final sendButtonWidget = sendButtonElement.widget as IconButton;
-      final colorScheme = Theme.of(sendButtonElement).colorScheme;
-      final expectedForegroundColor = expected
-        ? colorScheme.onSurface.withValues(alpha: 0.38)
-        : colorScheme.onPrimary;
-      check(sendButtonWidget.color).isNotNull().isSameColorAs(expectedForegroundColor);
+      final designVariables = DesignVariables.of(sendButtonElement);
+      final expectedIconColor = expected
+        ? designVariables.icon.withValues(alpha: 0.5)
+        : designVariables.icon;
+      check(sendButtonWidget.icon)
+        .isA<Icon>().color.isNotNull().isSameColorAs(expectedIconColor);
     }
 
     group('attach from media library', () {