From 8972754db6a25532718be009c0331d8d3c685e59 Mon Sep 17 00:00:00 2001
From: Zixuan James Li <zixuan@zulip.com>
Date: Tue, 12 Nov 2024 10:59:01 -0500
Subject: [PATCH 1/8] color [nfc]: Add ColorExtension.withFadedAlpha

And use it everywhere we were using `.withValues(alpha:`
to fade a color variable, except for one place in
`lib/widgets/emoji_reaction.dart` where the variable is
semi-transparent in dark mode to begin with.
We'll do that as a non-NFC change in a later commit.

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
---
 lib/widgets/action_sheet.dart |  9 +++++----
 lib/widgets/color.dart        | 17 +++++++++++++++++
 test/widgets/color_test.dart  | 26 ++++++++++++++++++++++++--
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/lib/widgets/action_sheet.dart b/lib/widgets/action_sheet.dart
index 844f820c13..d90f5f0c5f 100644
--- a/lib/widgets/action_sheet.dart
+++ b/lib/widgets/action_sheet.dart
@@ -13,6 +13,7 @@ import '../model/internal_link.dart';
 import '../model/narrow.dart';
 import 'actions.dart';
 import 'clipboard.dart';
+import 'color.dart';
 import 'dialog.dart';
 import 'icons.dart';
 import 'inset_shadow.dart';
@@ -145,8 +146,8 @@ abstract class MessageActionSheetMenuItemButton extends StatelessWidget {
         foregroundColor: designVariables.contextMenuItemText,
         splashFactory: NoSplash.splashFactory,
       ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
-          designVariables.contextMenuItemBg.withValues(
-            alpha: states.contains(WidgetState.pressed) ? 0.20 : 0.12))),
+          designVariables.contextMenuItemBg.withFadedAlpha(
+            states.contains(WidgetState.pressed) ? 0.20 : 0.12))),
       onPressed: () => _handlePressed(context),
       child: Text(label(zulipLocalizations),
         style: const TextStyle(fontSize: 20, height: 24 / 20)
@@ -168,8 +169,8 @@ class MessageActionSheetCancelButton extends StatelessWidget {
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
         splashFactory: NoSplash.splashFactory,
       ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
-          designVariables.contextMenuCancelBg.withValues(
-            alpha: states.contains(WidgetState.pressed) ? 0.20 : 0.15))),
+          designVariables.contextMenuCancelBg.withFadedAlpha(
+            states.contains(WidgetState.pressed) ? 0.20 : 0.15))),
       onPressed: () {
         Navigator.pop(context);
       },
diff --git a/lib/widgets/color.dart b/lib/widgets/color.dart
index 59c75826ba..4aff79ee16 100644
--- a/lib/widgets/color.dart
+++ b/lib/widgets/color.dart
@@ -38,4 +38,21 @@ extension ColorExtension on Color {
            ((g * 255.0).round() & 0xff) << 8 |
            ((b * 255.0).round() & 0xff) << 0;
   }
+
+  /// Makes a copy of this color with [a] multiplied by `factor`.
+  ///
+  /// `factor` must be between 0 and 1, inclusive.
+  ///
+  /// To fade a color variable from [DesignVariables], [ContentTheme], etc.,
+  /// use this instead of calling [withValues] with `factor` passed as `alpha`,
+  /// which simply replaces the color's [a] instead of multiplying by it.
+  /// Using [withValues] gives the same result for an opaque color,
+  /// but a wrong result for a semi-transparent color,
+  /// and we want our color variables to be free to change
+  /// without breaking things.
+  Color withFadedAlpha(double factor) {
+    assert(factor >= 0);
+    assert(factor <= 1);
+    return withValues(alpha: a * factor);
+  }
 }
diff --git a/test/widgets/color_test.dart b/test/widgets/color_test.dart
index 22f24a78b5..f88e9d3645 100644
--- a/test/widgets/color_test.dart
+++ b/test/widgets/color_test.dart
@@ -1,6 +1,6 @@
-import 'dart:ui';
-
 import 'package:checks/checks.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_checks/flutter_checks.dart';
 import 'package:test/scaffolding.dart';
 import 'package:zulip/widgets/color.dart';
 
@@ -14,5 +14,27 @@ void main() {
         check(Color(testCase).argbInt).equals(testCase);
       }
     });
+
+    const color = Color.fromRGBO(100, 200, 100, 0.5);
+
+    test('withFadedAlpha smoke', () {
+      check(color.withFadedAlpha(0.5))
+        .isSameColorAs(color.withValues(alpha: 0.25));
+    });
+
+    test('withFadedAlpha opaque color', () {
+      const color = Colors.black;
+
+      check(color.withFadedAlpha(0.5))
+        .isSameColorAs(color.withValues(alpha: 0.5));
+    });
+
+    test('withFadedAlpha factor > 1 fails', () {
+      check(() => color.withFadedAlpha(1.1)).throws<AssertionError>();
+    });
+
+    test('withFadedAlpha factor < 0 fails', () {
+      check(() => color.withFadedAlpha(-0.1)).throws<AssertionError>();
+    });
   });
 }

From 026c0483202cecff6be77956fea8d6be67e18b64 Mon Sep 17 00:00:00 2001
From: Zixuan James Li <zixuan@zulip.com>
Date: Tue, 12 Nov 2024 11:25:19 -0500
Subject: [PATCH 2/8] emoji: Use withFadedAlpha for highlightColor

Because splashColor in dark mode is transparent, this changes the
appearance.

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
---
 lib/widgets/emoji_reaction.dart | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/widgets/emoji_reaction.dart b/lib/widgets/emoji_reaction.dart
index 3d87b7a8a0..d92a050b05 100644
--- a/lib/widgets/emoji_reaction.dart
+++ b/lib/widgets/emoji_reaction.dart
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import '../api/model/model.dart';
 import '../api/route/messages.dart';
 import '../model/emoji.dart';
+import 'color.dart';
 import 'content.dart';
 import 'store.dart';
 import 'text.dart';
@@ -166,7 +167,7 @@ class ReactionChip extends StatelessWidget {
     final labelColor =      selfVoted ? reactionTheme.textSelected   : reactionTheme.textUnselected;
     final backgroundColor = selfVoted ? reactionTheme.bgSelected     : reactionTheme.bgUnselected;
     final splashColor =     selfVoted ? reactionTheme.bgUnselected   : reactionTheme.bgSelected;
-    final highlightColor =  splashColor.withValues(alpha: 0.5);
+    final highlightColor =  splashColor.withFadedAlpha(0.5);
 
     final borderSide = BorderSide(
       color: borderColor,

From 56b7a1959824d02362c102b598b454377c67e1e9 Mon Sep 17 00:00:00 2001
From: Zixuan James Li <zixuan@zulip.com>
Date: Thu, 10 Oct 2024 17:58:39 -0700
Subject: [PATCH 3/8] theme: Update borderBar to follow change in Figma design

See also:
  https://github.com/zulip/zulip-flutter/pull/928#discussion_r1796191390

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
---
 lib/widgets/theme.dart | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
index 0fe1ac6cfd..123a8507d8 100644
--- a/lib/widgets/theme.dart
+++ b/lib/widgets/theme.dart
@@ -117,7 +117,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       bgContextMenu: const Color(0xfff2f2f2),
       bgCounterUnread: const Color(0xff666699).withValues(alpha: 0.15),
       bgTopBar: const Color(0xfff5f5f5),
-      borderBar: const Color(0x33000000),
+      borderBar: Colors.black.withValues(alpha: 0.2),
       contextMenuCancelText: const Color(0xff222222),
       contextMenuItemBg: const Color(0xff6159e1),
       contextMenuItemText: const Color(0xff381da7),
@@ -153,7 +153,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       bgContextMenu: const Color(0xff262626),
       bgCounterUnread: const Color(0xff666699).withValues(alpha: 0.37),
       bgTopBar: const Color(0xff242424),
-      borderBar: Colors.black.withValues(alpha: 0.41),
+      borderBar: Colors.black.withValues(alpha: 0.5),
       contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
       contextMenuItemBg: const Color(0xff7977fe),
       contextMenuItemText: const Color(0xff9398fd),

From 58debf538e2fc0e1d4b2e89c76db1cfd35b365c0 Mon Sep 17 00:00:00 2001
From: Zixuan James Li <zixuan@zulip.com>
Date: Wed, 23 Oct 2024 15:48:28 -0400
Subject: [PATCH 4/8] compose [nfc]: Refactor away shared iconTheme override

Because these buttons share the same superclass, we can de-duplicate
styling code without the theme override.  This helps de-nest the
layout code.

While more types of buttons that are not subclasses of
`_AttachUploadsButton` might be added, a theme is probably still
unnecessary given that we can lift a common button class that handles
the styling.

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
---
 lib/widgets/compose_box.dart | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
index 2060f420da..0ae69a1441 100644
--- a/lib/widgets/compose_box.dart
+++ b/lib/widgets/compose_box.dart
@@ -659,9 +659,10 @@ abstract class _AttachUploadsButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    ColorScheme colorScheme = Theme.of(context).colorScheme;
     final zulipLocalizations = ZulipLocalizations.of(context);
     return IconButton(
-      icon: Icon(icon),
+      icon: Icon(icon, color: colorScheme.onSurfaceVariant),
       tooltip: tooltip(zulipLocalizations),
       onPressed: () => _handlePress(context));
   }
@@ -1033,14 +1034,11 @@ class _ComposeBoxLayout extends StatelessWidget {
           const SizedBox(width: 8),
           sendButton,
         ]),
-        Theme(
-          data: themeData.copyWith(
-            iconTheme: themeData.iconTheme.copyWith(color: colorScheme.onSurfaceVariant)),
-          child: Row(children: [
-            _AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
-            _AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
-            _AttachFromCameraButton(contentController: contentController, contentFocusNode: contentFocusNode),
-          ])),
+        Row(children: [
+          _AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
+          _AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
+          _AttachFromCameraButton(contentController: contentController, contentFocusNode: contentFocusNode),
+        ]),
       ]));
   }
 }

From 88b2ff93d7eddc32b8c29f11f212e399f3e89010 Mon Sep 17 00:00:00 2001
From: Zixuan James Li <zixuan@zulip.com>
Date: Thu, 14 Nov 2024 21:09:14 -0500
Subject: [PATCH 5/8] compose [nfc]: Extract compose buttons as a list

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
---
 lib/widgets/compose_box.dart | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
index 0ae69a1441..eee9787a9d 100644
--- a/lib/widgets/compose_box.dart
+++ b/lib/widgets/compose_box.dart
@@ -1020,6 +1020,12 @@ class _ComposeBoxLayout extends StatelessWidget {
       ),
     );
 
+    final composeButtons = [
+      _AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
+      _AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
+      _AttachFromCameraButton(contentController: contentController, contentFocusNode: contentFocusNode),
+    ];
+
     return _ComposeBoxContainer(
       child: Column(children: [
         Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
@@ -1034,11 +1040,7 @@ class _ComposeBoxLayout extends StatelessWidget {
           const SizedBox(width: 8),
           sendButton,
         ]),
-        Row(children: [
-          _AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
-          _AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
-          _AttachFromCameraButton(contentController: contentController, contentFocusNode: contentFocusNode),
-        ]),
+        Row(children: composeButtons),
       ]));
   }
 }

From 59565288fb55871e421be01d017b8f58f23fe72b Mon Sep 17 00:00:00 2001
From: Zixuan James Li <zixuan@zulip.com>
Date: Wed, 4 Sep 2024 18:40:20 -0400
Subject: [PATCH 6/8] compose: Use new icons from the redesign

The icons are exported from the Figma design:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=544-22131&node-type=CANVAS&t=hNeqhPGojoFpTJnp-0

Due to the limitation of the icon font, image.svg and send.svg have
been adjusted with a tool that converts SVG strokes to fills:
  https://www.npmjs.com/package/oslllo-svg-fixer

See also:

  - https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Icon.20not.20rendering.20correctly/near/1936793

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
---
 assets/icons/ZulipIcons.ttf         | Bin 8016 -> 9220 bytes
 assets/icons/attach_file.svg        |   3 ++
 assets/icons/camera.svg             |   3 ++
 assets/icons/image.svg              |   1 +
 assets/icons/send.svg               |   1 +
 lib/widgets/compose_box.dart        |   9 ++---
 lib/widgets/icons.dart              |  52 +++++++++++++++++-----------
 test/widgets/compose_box_test.dart  |  15 ++++----
 test/widgets/message_list_test.dart |   2 +-
 9 files changed, 54 insertions(+), 32 deletions(-)
 create mode 100644 assets/icons/attach_file.svg
 create mode 100644 assets/icons/camera.svg
 create mode 100644 assets/icons/image.svg
 create mode 100644 assets/icons/send.svg

diff --git a/assets/icons/ZulipIcons.ttf b/assets/icons/ZulipIcons.ttf
index 0f902b96fcc70d61669e566977920ad9a1245d7a..be5225e5a1efddad5a89338b4d32fb8f94c4c369 100644
GIT binary patch
delta 2596
zcmZ`*U2I!t8GhgM>wm}gu}>T)C;p4w#Ic<mJ5JSxrh?K<P?EC#fmYf&Y0_j%(q_%t
zbgJZlxM-ybsaRrYLV_ZJG}a45Zgx?PR%<1M(5R+S?Fvm?0jdy@24ZOSc)sHk7#BPC
z^S$SLzxRFKpYMFfestiw&$ft($WL1&)7Ue|PJD6S*wk4f-b*CCI(w{YpL}%eG?DxO
zR_Eqdo0s06+&)aCd;}c1uySqjn{OTcCz1CKQR2qZLi7BUKR@^tY(E4VOHg<e#m4<z
zAiuP_vAM#ZcHo=G{L#wA`7bp8u=)G%f#4t%FRV5<FYyuXM*_W=r`MXR3-PxOf*@T-
zLX(#+Uf!tdpS(kqU4hMOx9;YGb*BPU@sC$NK6dNLIM>@2FSevS1u2cXenP*b_vs0J
z!gG9wf6Gt!Uy?=&`6x^K=qO33egGef24O!yIm*)z6=31VSfGB|gL#^Uu`)s>MDu;d
zKI8ah(LEiuX(~GYS!yu|qDY|xf{a640#OOeV=yd&MxhX?RK|K9dWkgZr2u)HRBEtF
z!>^1aRD`u?)CsMC(F>2FlhST5!Igxa1+N^UXcTH8$UZtu&(Uenic0!Hyjz8+BSUde
z4LSM}R&sDJk^!1sUBXGPTXhT}O6XXIOx$(ZL=Ov8r-P_H2(J=VoaD1$YyGd08uIB!
zB_%BOqrPrEd#H-=ij(uW(+wZ0w_qbWB3fxv4f6v0y1fa*w;w6wq3`yr$MF|Tq5~>6
zLD-A?$g>z~|8+K~4@qP}-PNVAT67X(WG*_hyX!@?Zx{_9b!-*MXm82WoNC{bztaAj
z>}mUyKwDFK+JBX;_LOpY`~!p&*Lw&q?nWVfcr-sigr8$BHdMm>Sz4y6bZsZq{!kgN
zrV(=#kuu0(*m>S^C}IRLvra>7WK=}<HFR{4#@l<<s=pUo+(#*JYwaDinF7b?o=j;t
zKLp>Aa@HEN2a1JSMcD7C*V{)Ge=8tTlQzVNs|Mg~J4iz|UEsLUoQqM&c^7*i&%4M#
zF1RQ`F1i?oyx>Bd=_MCKkjpJG06E}A7gb1{T?ZqOt1ilrYc8^o7hPD8mt2fNuDcK~
zm6u!$KwfrHgcJn}j2AGx>_Sw3#YF}3s*6F$Yc9sOf21e4wS$+B08S3=B)dTOX{WCX
z>;vs!Cj`Wf;0j?!f5;kN;y+4~G$%ch{;j;KysKulgmy*you1WyqkrVN?s?=r=Y8Ol
zd^5f~{zIShNq*kKq3x)*#(1^hlHZp9PKWR`WHp^bY*>=rnB<0?FvK)lk?NQpVB3-m
z$H3Ke4KyQRi`9BXl5Quf(axro$xO|hn6da~AeRhuHb>U3t{pFzNBD*{dtzoPld(FR
z(Q2)lH;m__{6Zj~40e7HOy&c8Ga8HKtMcnHundAi*z%1)G8Y6(xqKW%f+d}vnms-%
zScG}4DoB#K07wvzZ$!ty9i#S_e2-g-Q{Q9x+j#aT@pkzds%-3Mdys1=Cmu0EQZ9pf
zCL;9%(te)QwGz4jeWI4J8_*Uoud<vKWj5*sy)OE|hG+}(%K_uD5jeBbhj_@O@9D|i
zyOr;s2^d?^)5&C1`b8Au7VJ*tZ2Pcnzgw9-JzH@Gc|9CnkLAabovq}U;22A?b5~jq
zC!?J$;mH`o>z|VSjE(Qf>P)3F^DQxK_xf*YE!C;;P5Dh~;Do(GH|aJ}EW}~fbWw<z
z7-WkFIbkMh=8!$vn8s#Jb7QhGF)7!Jg(_FL%7tQ~m`kg$g`H^(aIwP00vN)a%fhCB
zIl2Ka;d+44!h{-PJ=9{;VlyFh!UkW=<Aw&WVxbPLDuTz2csHXE=Q2=EHtc)pNk1zr
zNvyJOD53a+vHcHuaDOc5R}uv;v=Za1vNsdgeEvxNY3Chj-Q!^$+Ds}I82s{p_x}A>
zI2`dvFvi8Is;K(t#QX2fb@nEPL#99E9WwJrQoYeo!k>?LhWh=HzKEws3k19-e^oas
z)2!&SqUgEd&h?+J+nU!WzoCs<vOg4?>ZH5L4Ea8jOyU1CjW1_?vWARK$-1QJzO;Gl
z*O^q07M5e${d+37RlQv2HzvwDauaFtNyUt$4rk3FZ#dj<PERL;300E5p_su)pRNV7
zL9cpOij@z}+94yTJEh%TAD5)<A4eADQ{4mmn!Ji1PZH;@P~<|0<GPVBgE*~m)3ErK
z^p~Dsu;-~6N<}#lmY#q5vz|CdQ?K*1o=)pLt?6dyVNb90^`la<=V8dyx0U$E9{k<u
z44m_@%{8v`MEi`DHvP?wjpqE)*~R6R1$pk`hBlA?Q7<*y-?64Ob$PXUVWEBB%Bafa
hg|+kTKUvT9&GRC!@B;oJt@0Iq5pS_;yw2jy`5$SDds_ei

delta 1422
zcmb7EU1(cn7=FIwBt31DIcK`&_vGg!r)irs?FL<MbYl!HB2!yb7=!gRNq=b4rfu3S
zFwDRqdLyd`VHYC1kfL5y1L9yvFGPk{x!A=9yV#|mAd0wM4E6a=K2W?fhvz)s_kPd&
zn{&?f+3pK%2mph)1}`RGnt$W$$-`5>0AdF4oPBk^bmGnKd<pPgrD~yEw;P{-9l8%_
z9}}VFT5IW*FTWoG`a{668!J`2viswAUs3yrm|mel*R%<)?-1FQdh^Of@z<Y>_mKO;
z+D7?#d;iR>eLz2;VX<ysX^2@7X8~dEQ|orUI`qw%6F}@!7IdnyvE6)d{=#D*!2n`&
z?~WOqbUR=dt+)K|?EO3?CLKd8wZ%gOV4#BQ_zZ{WiZL-Q8sbB7Aiia<I#QU1hn+`w
zMG-@soTN343?mNw%bsx04SMzQEDqDv8B}R_20>T|BjNg6$Z?m%7}^=iJn-{qfXQTv
z63uZ6i|B_Bd0Mg*%OHcagsD&eC-@L`QF<jA*2i|Tn87)`h7dh6^oUSj;Ax(h#mLVx
zPTI9wZ5}1*Y~m<gl@Z6dF1ijDo@3%(5Ltr8?xNhw$z(A}U65WDM%>a3M*C+vexAzm
za~S1BG`GZY)og(NVa~msV!vUI(_$bgkz$!hXCF}pEAmthbAmdVxHpL-RFvGEoLvaV
zc{ix-*@k&)QW;^SfZJ#9?=o3(jwKabC7(?3lXKU5S`0h7_Of$93lK-0x3%}Dy7ZL4
zAK0i|703g8lDdri3HP#m57(ElipyyII_%8&MoV$#k{J@rU2q?fB)iEoo8dM;!HP^)
zUE;W67<X>?N(}FJ_B1<2-)t^n6;f&X<cmghY$9T2N+VMDy8o(kOB-wlWJ#WL^3ES$
zH|FnwZvt!u`9>@%WXWZP9J!*9AXgPE@{&S<ysVHSuPCI+t8IBBlEj+AD7mJPC)X8<
z<aGsuyrB>!Hx$Omn+o#X-%^N>w-rosQ(-E@#g2mPepg|Hd|4qzZYhj+p7tFV3)~&y
z6LeE}geBe;zk3Ytf%iA<MQvYu>YMXD@n7@b>#OwL)&2UMe$YSrf3MCL{U?QUd+=Uo
zHTa&t^I)jr?R*q@qVo&$L1w}EBa_m+iyKX+Xr4~%HG6$|$6l^#{HU#I^_^xlxW&)m
lrLAhYy4q-NJ2%a__@XF_s@N4ZvBqyvODu`H*c7sL;BUSb#fty{

diff --git a/assets/icons/attach_file.svg b/assets/icons/attach_file.svg
new file mode 100644
index 0000000000..1976e8fb06
--- /dev/null
+++ b/assets/icons/attach_file.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.78 2.3877C14.9838 2.3877 14.2201 2.704 13.6571 3.26703L4.46711 12.457C3.5288 13.3953 3.00166 14.668 3.00166 15.9949C3.00166 17.3219 3.5288 18.5945 4.46711 19.5328C5.40541 20.4711 6.67803 20.9983 8.005 20.9983C9.33197 20.9983 10.6046 20.4711 11.5429 19.5328L20.7329 10.3428C21.1234 9.95229 21.7566 9.95229 22.1471 10.3428C22.5376 10.7333 22.5376 11.3665 22.1471 11.757L12.9571 20.947C11.6437 22.2604 9.8624 22.9983 8.005 22.9983C6.1476 22.9983 4.36627 22.2604 3.05289 20.947C1.73951 19.6336 1.00166 17.8523 1.00166 15.9949C1.00166 14.1375 1.73951 12.3562 3.05289 11.0428L12.2429 1.85281C13.181 0.914714 14.4533 0.387695 15.78 0.387695C17.1067 0.387695 18.379 0.914714 19.3171 1.85281C20.2552 2.79091 20.7822 4.06325 20.7822 5.38992C20.7822 6.71659 20.2552 7.98893 19.3171 8.92703L10.1171 18.117C9.55429 18.6798 8.79095 18.996 7.995 18.996C7.19905 18.996 6.43571 18.6798 5.87289 18.117C5.31008 17.5542 4.99389 16.7909 4.99389 15.9949C4.99389 15.199 5.31008 14.4356 5.87289 13.8728L14.3633 5.3924C14.7541 5.0021 15.3872 5.00247 15.7775 5.39323C16.1678 5.78398 16.1674 6.41715 15.7767 6.80744L7.28711 15.287C7.09962 15.4747 6.99389 15.7296 6.99389 15.9949C6.99389 16.2604 7.09936 16.5151 7.28711 16.7028C7.47485 16.8906 7.72949 16.996 7.995 16.996C8.26051 16.996 8.51515 16.8906 8.70289 16.7028L17.9029 7.51281C18.4657 6.94982 18.7822 6.18598 18.7822 5.38992C18.7822 4.59368 18.4659 3.83005 17.9029 3.26703C17.3399 2.704 16.5762 2.3877 15.78 2.3877Z" fill="black"/>
+</svg>
diff --git a/assets/icons/camera.svg b/assets/icons/camera.svg
new file mode 100644
index 0000000000..5e54c454de
--- /dev/null
+++ b/assets/icons/camera.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.73178 3.35982C8.92177 3.13182 9.20322 3 9.5 3H14.5C14.7968 3 15.0782 3.13182 15.2682 3.35982L17.4684 6H20C20.7957 6 21.5587 6.31607 22.1213 6.87868C22.6839 7.44129 23 8.20435 23 9V18C23 18.7957 22.6839 19.5587 22.1213 20.1213C21.5587 20.6839 20.7957 21 20 21H4C3.20435 21 2.44129 20.6839 1.87868 20.1213C1.31607 19.5587 1 18.7956 1 18V9C1 8.20435 1.31607 7.44129 1.87868 6.87868C2.44129 6.31607 3.20435 6 4 6H6.53162L8.73178 3.35982ZM9.96837 5L7.76822 7.64018C7.57823 7.86818 7.29678 8 7 8H4C3.73478 8 3.48043 8.10536 3.29289 8.29289C3.10536 8.48043 3 8.73478 3 9V18C3 18.2652 3.10536 18.5196 3.29289 18.7071C3.48043 18.8946 3.73478 19 4 19H20C20.2652 19 20.5196 18.8946 20.7071 18.7071C20.8946 18.5196 21 18.2652 21 18V9C21 8.73478 20.8946 8.48043 20.7071 8.29289C20.5196 8.10536 20.2652 8 20 8H17C16.7032 8 16.4218 7.86818 16.2318 7.64018L14.0316 5H9.96837ZM12 11C10.8954 11 10 11.8954 10 13C10 14.1046 10.8954 15 12 15C13.1046 15 14 14.1046 14 13C14 11.8954 13.1046 11 12 11ZM8 13C8 10.7909 9.79086 9 12 9C14.2091 9 16 10.7909 16 13C16 15.2091 14.2091 17 12 17C9.79086 17 8 15.2091 8 13Z" fill="black"/>
+</svg>
diff --git a/assets/icons/image.svg b/assets/icons/image.svg
new file mode 100644
index 0000000000..d63d12ac5a
--- /dev/null
+++ b/assets/icons/image.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.503 2.042 C 3.487 2.214,2.556 2.976,2.202 3.925 C 1.993 4.484,2.001 4.151,2.001 11.992 C 2.000 19.977,1.988 19.546,2.234 20.151 C 2.521 20.857,3.143 21.479,3.849 21.766 C 4.453 22.012,4.024 22.000,12.000 22.000 C 19.974 22.000,19.547 22.012,20.150 21.767 C 20.850 21.482,21.482 20.850,21.767 20.150 C 22.012 19.547,22.000 19.974,22.000 12.000 C 22.000 4.024,22.012 4.453,21.766 3.849 C 21.499 3.193,20.964 2.633,20.296 2.312 C 19.636 1.994,20.412 2.023,12.120 2.015 C 8.039 2.012,4.611 2.024,4.503 2.042 M19.340 4.066 C 19.455 4.105,19.603 4.201,19.701 4.299 C 20.016 4.614,20.000 4.371,20.000 8.716 L 20.000 12.577 19.230 11.816 C 18.361 10.956,18.248 10.862,17.854 10.664 C 16.895 10.183,15.746 10.247,14.840 10.831 C 14.704 10.919,12.902 12.689,10.099 15.487 L 5.579 20.000 5.217 20.000 C 4.758 20.000,4.521 19.923,4.299 19.701 C 3.975 19.377,4.000 20.023,4.000 12.000 C 4.000 3.975,3.975 4.623,4.300 4.298 C 4.616 3.982,3.975 4.007,11.983 4.003 C 18.550 4.000,19.162 4.006,19.340 4.066 M8.503 6.040 C 7.828 6.162,7.156 6.550,6.703 7.080 C 5.987 7.917,5.806 9.100,6.234 10.151 C 6.521 10.857,7.143 11.479,7.849 11.766 C 8.989 12.230,10.251 11.978,11.115 11.115 C 12.238 9.992,12.295 8.212,11.246 7.020 C 10.897 6.624,10.276 6.239,9.756 6.097 C 9.491 6.024,8.770 5.991,8.503 6.040 M9.340 8.066 C 9.709 8.192,10.000 8.604,10.000 9.000 C 10.000 9.527,9.527 10.000,9.000 10.000 C 8.758 10.000,8.479 9.881,8.299 9.701 C 7.907 9.309,7.908 8.690,8.300 8.298 C 8.577 8.020,8.957 7.936,9.340 8.066 M16.803 12.384 C 17.010 12.444,17.092 12.519,18.510 13.933 L 20.000 15.418 20.000 17.282 C 20.000 19.395,19.999 19.403,19.701 19.701 C 19.380 20.022,19.809 20.000,13.783 20.000 L 8.420 20.000 12.200 16.223 C 15.747 12.679,15.992 12.442,16.180 12.386 C 16.441 12.307,16.541 12.307,16.803 12.384 " stroke="none" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/send.svg b/assets/icons/send.svg
new file mode 100644
index 0000000000..4d87a3e446
--- /dev/null
+++ b/assets/icons/send.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3.4 20.4l17.45-7.48c.81-.35.81-1.49 0-1.84L3.4 3.6c-.66-.29-1.39.2-1.39.91L2 9.12c0 .5.37.93.87.99L17 12 2.87 13.88c-.5.07-.87.5-.87 1l.01 4.61c0 .71.73 1.2 1.39.91z"/></svg>
\ No newline at end of file
diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
index eee9787a9d..ae6c62e845 100644
--- a/lib/widgets/compose_box.dart
+++ b/lib/widgets/compose_box.dart
@@ -15,6 +15,7 @@ import '../model/narrow.dart';
 import '../model/store.dart';
 import 'autocomplete.dart';
 import 'dialog.dart';
+import 'icons.dart';
 import 'store.dart';
 import 'theme.dart';
 
@@ -726,7 +727,7 @@ class _AttachFileButton extends _AttachUploadsButton {
   const _AttachFileButton({required super.contentController, required super.contentFocusNode});
 
   @override
-  IconData get icon => Icons.attach_file;
+  IconData get icon => ZulipIcons.attach_file;
 
   @override
   String tooltip(ZulipLocalizations zulipLocalizations) =>
@@ -742,7 +743,7 @@ class _AttachMediaButton extends _AttachUploadsButton {
   const _AttachMediaButton({required super.contentController, required super.contentFocusNode});
 
   @override
-  IconData get icon => Icons.image;
+  IconData get icon => ZulipIcons.image;
 
   @override
   String tooltip(ZulipLocalizations zulipLocalizations) =>
@@ -759,7 +760,7 @@ class _AttachFromCameraButton extends _AttachUploadsButton {
   const _AttachFromCameraButton({required super.contentController, required super.contentFocusNode});
 
   @override
-  IconData get icon => Icons.camera_alt;
+  IconData get icon => ZulipIcons.camera;
 
   @override
   String tooltip(ZulipLocalizations zulipLocalizations) =>
@@ -959,7 +960,7 @@ class _SendButtonState extends State<_SendButton> {
           tapTargetSize: MaterialTapTargetSize.shrinkWrap,
         ),
         color: foregroundColor,
-        icon: const Icon(Icons.send),
+        icon: const Icon(ZulipIcons.send),
         onPressed: _send));
   }
 }
diff --git a/lib/widgets/icons.dart b/lib/widgets/icons.dart
index ebdb6a362c..03356448ef 100644
--- a/lib/widgets/icons.dart
+++ b/lib/widgets/icons.dart
@@ -33,65 +33,77 @@ abstract final class ZulipIcons {
   /// The Zulip custom icon "at_sign".
   static const IconData at_sign = IconData(0xf103, fontFamily: "Zulip Icons");
 
+  /// The Zulip custom icon "attach_file".
+  static const IconData attach_file = IconData(0xf104, fontFamily: "Zulip Icons");
+
   /// The Zulip custom icon "bot".
-  static const IconData bot = IconData(0xf104, fontFamily: "Zulip Icons");
+  static const IconData bot = IconData(0xf105, fontFamily: "Zulip Icons");
+
+  /// The Zulip custom icon "camera".
+  static const IconData camera = IconData(0xf106, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "chevron_right".
-  static const IconData chevron_right = IconData(0xf105, fontFamily: "Zulip Icons");
+  static const IconData chevron_right = IconData(0xf107, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "clock".
-  static const IconData clock = IconData(0xf106, fontFamily: "Zulip Icons");
+  static const IconData clock = IconData(0xf108, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "copy".
-  static const IconData copy = IconData(0xf107, fontFamily: "Zulip Icons");
+  static const IconData copy = IconData(0xf109, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "format_quote".
-  static const IconData format_quote = IconData(0xf108, fontFamily: "Zulip Icons");
+  static const IconData format_quote = IconData(0xf10a, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "globe".
-  static const IconData globe = IconData(0xf109, fontFamily: "Zulip Icons");
+  static const IconData globe = IconData(0xf10b, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "group_dm".
-  static const IconData group_dm = IconData(0xf10a, fontFamily: "Zulip Icons");
+  static const IconData group_dm = IconData(0xf10c, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "hash_sign".
-  static const IconData hash_sign = IconData(0xf10b, fontFamily: "Zulip Icons");
+  static const IconData hash_sign = IconData(0xf10d, fontFamily: "Zulip Icons");
+
+  /// The Zulip custom icon "image".
+  static const IconData image = IconData(0xf10e, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "language".
-  static const IconData language = IconData(0xf10c, fontFamily: "Zulip Icons");
+  static const IconData language = IconData(0xf10f, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "lock".
-  static const IconData lock = IconData(0xf10d, fontFamily: "Zulip Icons");
+  static const IconData lock = IconData(0xf110, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "mute".
-  static const IconData mute = IconData(0xf10e, fontFamily: "Zulip Icons");
+  static const IconData mute = IconData(0xf111, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "read_receipts".
-  static const IconData read_receipts = IconData(0xf10f, fontFamily: "Zulip Icons");
+  static const IconData read_receipts = IconData(0xf112, fontFamily: "Zulip Icons");
+
+  /// The Zulip custom icon "send".
+  static const IconData send = IconData(0xf113, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "share".
-  static const IconData share = IconData(0xf110, fontFamily: "Zulip Icons");
+  static const IconData share = IconData(0xf114, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "share_ios".
-  static const IconData share_ios = IconData(0xf111, fontFamily: "Zulip Icons");
+  static const IconData share_ios = IconData(0xf115, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "smile".
-  static const IconData smile = IconData(0xf112, fontFamily: "Zulip Icons");
+  static const IconData smile = IconData(0xf116, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "star".
-  static const IconData star = IconData(0xf113, fontFamily: "Zulip Icons");
+  static const IconData star = IconData(0xf117, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "star_filled".
-  static const IconData star_filled = IconData(0xf114, fontFamily: "Zulip Icons");
+  static const IconData star_filled = IconData(0xf118, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "topic".
-  static const IconData topic = IconData(0xf115, fontFamily: "Zulip Icons");
+  static const IconData topic = IconData(0xf119, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "unmute".
-  static const IconData unmute = IconData(0xf116, fontFamily: "Zulip Icons");
+  static const IconData unmute = IconData(0xf11a, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "user".
-  static const IconData user = IconData(0xf117, fontFamily: "Zulip Icons");
+  static const IconData user = IconData(0xf11b, fontFamily: "Zulip Icons");
 
   // END GENERATED ICON DATA
 }
diff --git a/test/widgets/compose_box_test.dart b/test/widgets/compose_box_test.dart
index 008b0f39c8..60e47b6e01 100644
--- a/test/widgets/compose_box_test.dart
+++ b/test/widgets/compose_box_test.dart
@@ -19,6 +19,7 @@ import 'package:zulip/model/typing_status.dart';
 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 '../api/fake_api.dart';
 import '../example_data.dart' as eg;
@@ -299,7 +300,7 @@ void main() {
 
       connection.prepare(json: {});
       connection.prepare(json: SendMessageResult(id: 123).toJson());
-      await tester.tap(find.byIcon(Icons.send));
+      await tester.tap(find.byIcon(ZulipIcons.send));
       await tester.pump(Duration.zero);
       final requests = connection.takeRequests();
       checkSetTypingStatusRequests([requests.first], [(TypingOp.stop, narrow)]);
@@ -453,7 +454,7 @@ void main() {
   group('uploads', () {
     void checkAppearsLoading(WidgetTester tester, bool expected) {
       final sendButtonElement = tester.element(find.ancestor(
-        of: find.byIcon(Icons.send),
+        of: find.byIcon(ZulipIcons.send),
         matching: find.byType(IconButton)));
       final sendButtonWidget = sendButtonElement.widget as IconButton;
       final colorScheme = Theme.of(sendButtonElement).colorScheme;
@@ -492,7 +493,7 @@ void main() {
         connection.prepare(delay: const Duration(seconds: 1), json:
           UploadFileResult(uri: '/user_uploads/1/4e/m2A3MSqFnWRLUf9SaPzQ0Up_/image.jpg').toJson());
 
-        await tester.tap(find.byIcon(Icons.image));
+        await tester.tap(find.byIcon(ZulipIcons.image));
         await tester.pump();
         final call = testBinding.takePickFilesCalls().single;
         check(call.allowMultiple).equals(true);
@@ -554,7 +555,7 @@ void main() {
         connection.prepare(delay: const Duration(seconds: 1), json:
           UploadFileResult(uri: '/user_uploads/1/4e/m2A3MSqFnWRLUf9SaPzQ0Up_/image.jpg').toJson());
 
-        await tester.tap(find.byIcon(Icons.camera_alt));
+        await tester.tap(find.byIcon(ZulipIcons.camera));
         await tester.pump();
         final call = testBinding.takePickImageCalls().single;
         check(call.source).equals(ImageSource.camera);
@@ -602,9 +603,9 @@ void main() {
     void checkComposeBoxParts({required bool areShown}) {
       final inputFieldCount = inputFieldFinder().evaluate().length;
       areShown ? check(inputFieldCount).isGreaterThan(0) : check(inputFieldCount).equals(0);
-      check(attachButtonFinder(Icons.attach_file).evaluate().length).equals(areShown ? 1 : 0);
-      check(attachButtonFinder(Icons.image).evaluate().length).equals(areShown ? 1 : 0);
-      check(attachButtonFinder(Icons.camera_alt).evaluate().length).equals(areShown ? 1 : 0);
+      check(attachButtonFinder(ZulipIcons.attach_file).evaluate().length).equals(areShown ? 1 : 0);
+      check(attachButtonFinder(ZulipIcons.image).evaluate().length).equals(areShown ? 1 : 0);
+      check(attachButtonFinder(ZulipIcons.camera).evaluate().length).equals(areShown ? 1 : 0);
     }
 
     void checkBannerWithLabel(String label, {required bool isShown}) {
diff --git a/test/widgets/message_list_test.dart b/test/widgets/message_list_test.dart
index 444f78c4c9..37ce921f43 100644
--- a/test/widgets/message_list_test.dart
+++ b/test/widgets/message_list_test.dart
@@ -653,7 +653,7 @@ void main() {
         ..controller.isNotNull().text.equals('Some text');
 
       connection.prepare(json: SendMessageResult(id: 1).toJson());
-      await tester.tap(find.byIcon(Icons.send));
+      await tester.tap(find.byIcon(ZulipIcons.send));
       await tester.pump();
       check(connection.lastRequest).isA<http.Request>()
         ..method.equals('POST')

From 3adb39557c51604d85741664026c85225fba52fa Mon Sep 17 00:00:00 2001
From: Zixuan James Li <zixuan@zulip.com>
Date: Wed, 9 Oct 2024 17:30:50 -0700
Subject: [PATCH 7/8] compose: Implement most of compose box redesign

- We drop `_sendButtonSize` and `_inputVerticalPadding` because we no
  longer need them for setting the button's minHeight, along with
  `ButtonStyle` for the send button that was added in #399, which is
  irrelevant to the new design.

- `ClipRect`'s size is determined by the `ConstrainedBox`.  This is
  mainly for showing the content through the `contentPadding` of the
  `TextField`, so that our `InsetShadowBox` can fade it smoothly there.
  The shadow is always there, but it is only visible when the
  `TextField` is long enough to be scrollable. Discussion here:
    https://github.com/zulip/zulip-flutter/pull/928#issuecomment-2335042432

- For `InputDecorationTheme` on `_ComposeBoxLayout`, we zero out
  `contentPadding` while keeping `isDense` as `true`, to explicitly
  remove paddings on the input widgets.

- The height of the compose buttons is 42px in the Figma design, but
  44px in the implementation.  We change that to match the minimum
  button size per the accessibility recommendation from Apple.
  Discussion here:
    https://github.com/zulip/zulip-flutter/pull/928#discussion_r1842988359

- Note that we use `withFadedAlpha` on `designVariables.textInput` because
  the color is already transparent in dark mode, and the helper allows us
  to multiply, instead of to override, the alpha channel of the color with
  a factor.  Discussion here:
    https://github.com/zulip/zulip-flutter/pull/928#discussion_r1815661095

- 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.

This is "most of" the redesign because the new button feedback is
supported later.

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

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
---
 lib/widgets/compose_box.dart       | 231 +++++++++++++++++------------
 lib/widgets/theme.dart             |  25 +++-
 test/widgets/compose_box_test.dart |  76 +++++++++-
 3 files changed, 228 insertions(+), 104 deletions(-)

diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
index ae6c62e845..00788cc877 100644
--- a/lib/widgets/compose_box.dart
+++ b/lib/widgets/compose_box.dart
@@ -14,13 +14,15 @@ import '../model/compose.dart';
 import '../model/narrow.dart';
 import '../model/store.dart';
 import 'autocomplete.dart';
+import 'color.dart';
 import 'dialog.dart';
 import 'icons.dart';
+import 'inset_shadow.dart';
 import 'store.dart';
+import 'text.dart';
 import 'theme.dart';
 
-const double _inputVerticalPadding = 8;
-const double _sendButtonSize = 36;
+const double _composeButtonSize = 44;
 
 /// A [TextEditingController] for use in the compose box.
 ///
@@ -364,34 +366,77 @@ class _ContentInputState extends State<_ContentInput> with WidgetsBindingObserve
     }
   }
 
+  static double maxHeight(BuildContext context) {
+    final clampingTextScaler = MediaQuery.textScalerOf(context)
+      .clamp(maxScaleFactor: 1.5);
+    final scaledLineHeight = clampingTextScaler.scale(_fontSize) * _lineHeightRatio;
+
+    // Reserve space to fully show the first 7th lines and just partially
+    // clip the 8th line, where the height matches the spec at
+    //   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3960-5147&node-type=text&m=dev
+    // > Maximum size of the compose box is suggested to be 178px. Which
+    // > has 7 fully visible lines of text
+    //
+    // The partial line hints that the content input is scrollable.
+    //
+    // Using the ambient TextScale means this works for different values of the
+    // system text-size setting. We clamp to a max scale factor to limit
+    // how tall the content input can get; that's to save room for the message
+    // list. The user can still scroll the input to see everything.
+    return _verticalPadding + 7.727 * scaledLineHeight;
+  }
+
+  static const _verticalPadding = 8.0;
+  static const _fontSize = 17.0;
+  static const _lineHeight = 22.0;
+  static const _lineHeightRatio = _lineHeight / _fontSize;
+
   @override
   Widget build(BuildContext context) {
-    ColorScheme colorScheme = Theme.of(context).colorScheme;
-
-    return InputDecorator(
-      decoration: const InputDecoration(),
-      child: ConstrainedBox(
-        constraints: const BoxConstraints(
-          minHeight: _sendButtonSize - 2 * _inputVerticalPadding,
-
-          // TODO constrain this adaptively (i.e. not hard-coded 200)
-          maxHeight: 200,
-        ),
-        child: ComposeAutocomplete(
-          narrow: widget.narrow,
-          controller: widget.controller,
-          focusNode: widget.focusNode,
-          fieldViewBuilder: (context) {
-            return TextField(
+    final designVariables = DesignVariables.of(context);
+
+    return ComposeAutocomplete(
+      narrow: widget.narrow,
+      controller: widget.controller,
+      focusNode: widget.focusNode,
+      fieldViewBuilder: (context) => ConstrainedBox(
+        constraints: BoxConstraints(maxHeight: maxHeight(context)),
+        // This [ClipRect] replaces the [TextField] clipping we disable below.
+        child: ClipRect(
+          child: InsetShadowBox(
+            top: _verticalPadding, bottom: _verticalPadding,
+            color: designVariables.composeBoxBg,
+            child: TextField(
               controller: widget.controller,
               focusNode: widget.focusNode,
-              style: TextStyle(color: colorScheme.onSurface),
-              decoration: InputDecoration.collapsed(hintText: widget.hintText),
+              // Let the content show through the `contentPadding` so that
+              // our [InsetShadowBox] can fade it smoothly there.
+              clipBehavior: Clip.none,
+              style: TextStyle(
+                fontSize: _fontSize,
+                height: _lineHeightRatio,
+                color: designVariables.textInput),
+              // From the spec at
+              //   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3960-5147&node-type=text&m=dev
+              // > Compose box has the height to fit 2 lines. This is [done] to
+              // > have a bigger hit area for the user to start the input. […]
+              minLines: 2,
               maxLines: null,
               textCapitalization: TextCapitalization.sentences,
-            );
-          }),
-        ));
+              decoration: InputDecoration(
+                // This padding ensures that the user can always scroll long
+                // content entirely out of the top or bottom shadow if desired.
+                // With this and the `minLines: 2` above, an empty content input
+                // gets 60px vertical distance (with no text-size scaling)
+                // between the top of the top shadow and the bottom of the
+                // bottom shadow. That's a bit more than the 54px given in the
+                // Figma, and we can revisit if needed, but it's tricky to get
+                // that 54px distance while also making the scrolling work like
+                // this and offering two lines of touchable area.
+                contentPadding: const EdgeInsets.symmetric(vertical: _verticalPadding),
+                hintText: widget.hintText,
+                hintStyle: TextStyle(
+                  color: designVariables.textInput.withFadedAlpha(0.5))))))));
   }
 }
 
@@ -474,20 +519,32 @@ class _TopicInput extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
-    ColorScheme colorScheme = Theme.of(context).colorScheme;
+    final designVariables = DesignVariables.of(context);
+    TextStyle topicTextStyle = TextStyle(
+      fontSize: 20,
+      height: 22 / 20,
+      color: designVariables.textInput.withFadedAlpha(0.9),
+    ).merge(weightVariableTextStyle(context, wght: 600));
 
     return TopicAutocomplete(
       streamId: streamId,
       controller: controller,
       focusNode: focusNode,
       contentFocusNode: contentFocusNode,
-      fieldViewBuilder: (context) => TextField(
-        controller: controller,
-        focusNode: focusNode,
-        textInputAction: TextInputAction.next,
-        style: TextStyle(color: colorScheme.onSurface),
-        decoration: InputDecoration(hintText: zulipLocalizations.composeBoxTopicHintText),
-      ));
+      fieldViewBuilder: (context) => Container(
+        padding: const EdgeInsets.only(top: 10, bottom: 9),
+        decoration: BoxDecoration(border: Border(bottom: BorderSide(
+          width: 1,
+          color: designVariables.foreground.withFadedAlpha(0.2)))),
+        child: TextField(
+          controller: controller,
+          focusNode: focusNode,
+          textInputAction: TextInputAction.next,
+          style: topicTextStyle,
+          decoration: InputDecoration(
+            hintText: zulipLocalizations.composeBoxTopicHintText,
+            hintStyle: topicTextStyle.copyWith(
+              color: designVariables.textInput.withFadedAlpha(0.5))))));
   }
 }
 
@@ -660,12 +717,14 @@ abstract class _AttachUploadsButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    ColorScheme colorScheme = Theme.of(context).colorScheme;
+    final designVariables = DesignVariables.of(context);
     final zulipLocalizations = ZulipLocalizations.of(context);
-    return IconButton(
-      icon: Icon(icon, color: colorScheme.onSurfaceVariant),
-      tooltip: tooltip(zulipLocalizations),
-      onPressed: () => _handlePress(context));
+    return SizedBox(
+      width: _composeButtonSize,
+      child: IconButton(
+        icon: Icon(icon, color: designVariables.foreground.withFadedAlpha(0.5)),
+        tooltip: tooltip(zulipLocalizations),
+        onPressed: () => _handlePress(context)));
   }
 }
 
@@ -929,38 +988,22 @@ 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;
+    final iconColor = _hasValidationErrors
+      ? designVariables.icon.withFadedAlpha(0.5)
+      : designVariables.icon;
 
-    // Copy FilledButton defaults (_FilledButtonDefaultsM3.foregroundColor)
-    final foregroundColor = disabled
-      ? colorScheme.onSurface.withValues(alpha: 0.38)
-      : colorScheme.onPrimary;
-
-    return Ink(
-      decoration: BoxDecoration(
-        borderRadius: const BorderRadius.all(Radius.circular(8.0)),
-        color: backgroundColor,
-      ),
+    return SizedBox(
+      width: _composeButtonSize,
       child: IconButton(
         tooltip: zulipLocalizations.composeBoxSendTooltip,
-        style: const ButtonStyle(
-          // Match the height of the content input.
-          minimumSize: WidgetStatePropertyAll(Size.square(_sendButtonSize)),
-          // With the default of [MaterialTapTargetSize.padded], not just the
-          // tap target but the visual button would get padded to 48px square.
-          // It would be nice if the tap target extended invisibly out from the
-          // button, to make a 48px square, but that's not the behavior we get.
-          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-        ),
-        color: foregroundColor,
-        icon: const Icon(ZulipIcons.send),
+        icon: Icon(ZulipIcons.send,
+          // We set [Icon.color] instead of [IconButton.color] because the
+          // latter implicitly uses colors derived from it to override the
+          // ambient [ButtonStyle.overlayColor].
+          color: iconColor),
         onPressed: _send));
   }
 }
@@ -972,18 +1015,17 @@ class _ComposeBoxContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    ColorScheme colorScheme = Theme.of(context).colorScheme;
+    final designVariables = DesignVariables.of(context);
 
     // TODO(design): Maybe put a max width on the compose box, like we do on
     //   the message list itself
-    return SizedBox(width: double.infinity,
+    return Container(width: double.infinity,
+      decoration: BoxDecoration(
+        border: Border(top: BorderSide(color: designVariables.borderBar))),
       child: Material(
-        color: colorScheme.surfaceContainerHighest,
-        child: SafeArea(
-          minimum: const EdgeInsets.fromLTRB(8, 0, 8, 8),
-          child: Padding(
-            padding: const EdgeInsets.only(top: 8.0),
-            child: child))));
+        color: designVariables.composeBoxBg,
+        child: SafeArea(minimum: const EdgeInsets.symmetric(horizontal: 8),
+          child: child)));
   }
 }
 
@@ -1004,22 +1046,14 @@ class _ComposeBoxLayout extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    ThemeData themeData = Theme.of(context);
-    ColorScheme colorScheme = themeData.colorScheme;
+    final themeData = Theme.of(context);
 
     final inputThemeData = themeData.copyWith(
-      inputDecorationTheme: InputDecorationTheme(
+      inputDecorationTheme: const InputDecorationTheme(
         // Both [contentPadding] and [isDense] combine to make the layout compact.
         isDense: true,
-        contentPadding: const EdgeInsets.symmetric(
-          horizontal: 12.0, vertical: _inputVerticalPadding),
-        border: const OutlineInputBorder(
-          borderRadius: BorderRadius.all(Radius.circular(4.0)),
-          borderSide: BorderSide.none),
-        filled: true,
-        fillColor: colorScheme.surface,
-      ),
-    );
+        contentPadding: EdgeInsets.zero,
+        border: InputBorder.none));
 
     final composeButtons = [
       _AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
@@ -1029,19 +1063,22 @@ class _ComposeBoxLayout extends StatelessWidget {
 
     return _ComposeBoxContainer(
       child: Column(children: [
-        Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
-          Expanded(
-            child: Theme(
-              data: inputThemeData,
-              child: Column(children: [
-                if (topicInput != null) topicInput!,
-                if (topicInput != null) const SizedBox(height: 8),
-                contentInput,
-              ]))),
-          const SizedBox(width: 8),
-          sendButton,
-        ]),
-        Row(children: composeButtons),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8),
+          child: Theme(
+            data: inputThemeData,
+            child: Column(children: [
+              if (topicInput != null) topicInput!,
+              contentInput,
+            ]))),
+        SizedBox(
+          height: _composeButtonSize,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Row(children: composeButtons),
+              sendButton,
+            ])),
       ]));
   }
 }
diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
index 123a8507d8..2e3348a403 100644
--- a/lib/widgets/theme.dart
+++ b/lib/widgets/theme.dart
@@ -118,14 +118,17 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       bgCounterUnread: const Color(0xff666699).withValues(alpha: 0.15),
       bgTopBar: const Color(0xfff5f5f5),
       borderBar: Colors.black.withValues(alpha: 0.2),
+      composeBoxBg: const Color(0xffffffff),
       contextMenuCancelText: const Color(0xff222222),
       contextMenuItemBg: const Color(0xff6159e1),
       contextMenuItemText: const Color(0xff381da7),
-      icon: const Color(0xff666699),
+      foreground: const Color(0xff000000),
+      icon: const Color(0xff6159e1),
       labelCounterUnread: const Color(0xff222222),
       labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
       labelMenuButton: const Color(0xff222222),
       mainBackground: const Color(0xfff0f0f0),
+      textInput: const Color(0xff000000),
       title: const Color(0xff1a1a1a),
       channelColorSwatches: ChannelColorSwatches.light,
       atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
@@ -154,14 +157,17 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       bgCounterUnread: const Color(0xff666699).withValues(alpha: 0.37),
       bgTopBar: const Color(0xff242424),
       borderBar: Colors.black.withValues(alpha: 0.5),
+      composeBoxBg: const Color(0xff0f0f0f),
       contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
       contextMenuItemBg: const Color(0xff7977fe),
       contextMenuItemText: const Color(0xff9398fd),
-      icon: const Color(0xff7070c2),
+      foreground: const Color(0xffffffff),
+      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),
       mainBackground: const Color(0xff1d1d1d),
+      textInput: const Color(0xffffffff).withValues(alpha: 0.9),
       title: const Color(0xffffffff),
       channelColorSwatches: ChannelColorSwatches.dark,
       contextMenuCancelBg: const Color(0xff797986), // the same as the light mode in Figma
@@ -197,14 +203,17 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.bgCounterUnread,
     required this.bgTopBar,
     required this.borderBar,
+    required this.composeBoxBg,
     required this.contextMenuCancelText,
     required this.contextMenuItemBg,
     required this.contextMenuItemText,
+    required this.foreground,
     required this.icon,
     required this.labelCounterUnread,
     required this.labelEdited,
     required this.labelMenuButton,
     required this.mainBackground,
+    required this.textInput,
     required this.title,
     required this.channelColorSwatches,
     required this.atMentionMarker,
@@ -241,14 +250,17 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color bgCounterUnread;
   final Color bgTopBar;
   final Color borderBar;
+  final Color composeBoxBg;
   final Color contextMenuCancelText;
   final Color contextMenuItemBg;
   final Color contextMenuItemText;
+  final Color foreground;
   final Color icon;
   final Color labelCounterUnread;
   final Color labelEdited;
   final Color labelMenuButton;
   final Color mainBackground;
+  final Color textInput;
   final Color title;
 
   // Not exactly from the Figma design, but from Vlad anyway.
@@ -280,14 +292,17 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? bgCounterUnread,
     Color? bgTopBar,
     Color? borderBar,
+    Color? composeBoxBg,
     Color? contextMenuCancelText,
     Color? contextMenuItemBg,
     Color? contextMenuItemText,
+    Color? foreground,
     Color? icon,
     Color? labelCounterUnread,
     Color? labelEdited,
     Color? labelMenuButton,
     Color? mainBackground,
+    Color? textInput,
     Color? title,
     ChannelColorSwatches? channelColorSwatches,
     Color? atMentionMarker,
@@ -314,14 +329,17 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       bgCounterUnread: bgCounterUnread ?? this.bgCounterUnread,
       bgTopBar: bgTopBar ?? this.bgTopBar,
       borderBar: borderBar ?? this.borderBar,
+      composeBoxBg: composeBoxBg ?? this.composeBoxBg,
       contextMenuCancelText: contextMenuCancelText ?? this.contextMenuCancelText,
       contextMenuItemBg: contextMenuItemBg ?? this.contextMenuItemBg,
       contextMenuItemText: contextMenuItemText ?? this.contextMenuItemBg,
+      foreground: foreground ?? this.foreground,
       icon: icon ?? this.icon,
       labelCounterUnread: labelCounterUnread ?? this.labelCounterUnread,
       labelEdited: labelEdited ?? this.labelEdited,
       labelMenuButton: labelMenuButton ?? this.labelMenuButton,
       mainBackground: mainBackground ?? this.mainBackground,
+      textInput: textInput ?? this.textInput,
       title: title ?? this.title,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
       atMentionMarker: atMentionMarker ?? this.atMentionMarker,
@@ -355,14 +373,17 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       bgCounterUnread: Color.lerp(bgCounterUnread, other.bgCounterUnread, t)!,
       bgTopBar: Color.lerp(bgTopBar, other.bgTopBar, t)!,
       borderBar: Color.lerp(borderBar, other.borderBar, t)!,
+      composeBoxBg: Color.lerp(composeBoxBg, other.composeBoxBg, t)!,
       contextMenuCancelText: Color.lerp(contextMenuCancelText, other.contextMenuCancelText, t)!,
       contextMenuItemBg: Color.lerp(contextMenuItemBg, other.contextMenuItemBg, t)!,
       contextMenuItemText: Color.lerp(contextMenuItemText, other.contextMenuItemBg, t)!,
+      foreground: Color.lerp(foreground, other.foreground, t)!,
       icon: Color.lerp(icon, other.icon, t)!,
       labelCounterUnread: Color.lerp(labelCounterUnread, other.labelCounterUnread, t)!,
       labelEdited: Color.lerp(labelEdited, other.labelEdited, t)!,
       labelMenuButton: Color.lerp(labelMenuButton, other.labelMenuButton, t)!,
       mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
+      textInput: Color.lerp(textInput, other.textInput, t)!,
       title: Color.lerp(title, other.title, t)!,
       channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
       atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
diff --git a/test/widgets/compose_box_test.dart b/test/widgets/compose_box_test.dart
index 60e47b6e01..a19356ef40 100644
--- a/test/widgets/compose_box_test.dart
+++ b/test/widgets/compose_box_test.dart
@@ -17,9 +17,11 @@ import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/model/typing_status.dart';
 import 'package:zulip/widgets/app.dart';
+import 'package:zulip/widgets/color.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;
@@ -457,11 +459,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.withFadedAlpha(0.5)
+        : designVariables.icon;
+      check(sendButtonWidget.icon)
+        .isA<Icon>().color.isNotNull().isSameColorAs(expectedIconColor);
     }
 
     group('attach from media library', () {
@@ -796,4 +799,67 @@ void main() {
       });
     });
   });
+
+  group('ComposeBox content input scaling', () {
+    const verticalPadding = 8;
+    final stream = eg.stream();
+    final narrow = TopicNarrow(stream.streamId, 'foo');
+
+    Future<void> checkContentInputMaxHeight(WidgetTester tester, {
+      required double maxHeight,
+      required int maxVisibleLines,
+    }) async {
+      TypingNotifier.debugEnable = false;
+      addTearDown(TypingNotifier.debugReset);
+
+      // Add one line at a time, until the content input reaches its max height.
+      int numLines;
+      double? height;
+      for (numLines = 2; numLines <= 1000; numLines++) {
+        final content = List.generate(numLines, (_) => 'foo').join('\n');
+        await tester.enterText(contentInputFinder, content);
+        await tester.pump();
+        final newHeight = tester.getRect(contentInputFinder).height;
+        if (newHeight == height) {
+          break;
+        }
+        height = newHeight;
+      }
+      check(height).isNotNull().isCloseTo(maxHeight, 0.5);
+      // The last line added did not stretch the content input,
+      // so only the lines before it are at least partially visible.
+      check(numLines - 1).equals(maxVisibleLines);
+    }
+
+    testWidgets('normal text scale factor', (tester) async {
+      await prepareComposeBox(tester, narrow: narrow, streams: [stream]);
+
+      await checkContentInputMaxHeight(tester,
+        maxHeight: verticalPadding + 170, maxVisibleLines: 8);
+    });
+
+    testWidgets('lower text scale factor', (tester) async {
+      tester.platformDispatcher.textScaleFactorTestValue = 0.8;
+      addTearDown(tester.platformDispatcher.clearTextScaleFactorTestValue);
+      await prepareComposeBox(tester, narrow: narrow, streams: [stream]);
+      await checkContentInputMaxHeight(tester,
+        maxHeight: verticalPadding + 170 * 0.8, maxVisibleLines: 8);
+    });
+
+    testWidgets('higher text scale factor', (tester) async {
+      tester.platformDispatcher.textScaleFactorTestValue = 1.5;
+      addTearDown(tester.platformDispatcher.clearTextScaleFactorTestValue);
+      await prepareComposeBox(tester, narrow: narrow, streams: [stream]);
+      await checkContentInputMaxHeight(tester,
+        maxHeight: verticalPadding + 170 * 1.5, maxVisibleLines: 8);
+    });
+
+    testWidgets('higher text scale factor exceeding threshold', (tester) async {
+      tester.platformDispatcher.textScaleFactorTestValue = 2;
+      addTearDown(tester.platformDispatcher.clearTextScaleFactorTestValue);
+      await prepareComposeBox(tester, narrow: narrow, streams: [stream]);
+      await checkContentInputMaxHeight(tester,
+        maxHeight: verticalPadding + 170 * 1.5, maxVisibleLines: 6);
+    });
+  });
 }

From 94cf40ebc61a1365702a1c18d76a797b5805b75c Mon Sep 17 00:00:00 2001
From: Zixuan James Li <zixuan@zulip.com>
Date: Fri, 11 Oct 2024 17:08:43 -0700
Subject: [PATCH 8/8] compose: 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.

Different from the style that all the compose buttons share, this
feedback also applies to the send button, and will apply to more buttons
in the app.  In the future we should migrate more buttons to use this
style, so it doesn't belong to a shared base class.

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

Fixes: #915

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
---
 lib/widgets/compose_box.dart | 30 +++++++++++++++++++++++-------
 lib/widgets/theme.dart       |  7 +++++++
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
index 00788cc877..b6f187921b 100644
--- a/lib/widgets/compose_box.dart
+++ b/lib/widgets/compose_box.dart
@@ -1002,7 +1002,8 @@ class _SendButtonState extends State<_SendButton> {
         icon: Icon(ZulipIcons.send,
           // We set [Icon.color] instead of [IconButton.color] because the
           // latter implicitly uses colors derived from it to override the
-          // ambient [ButtonStyle.overlayColor].
+          // ambient [ButtonStyle.overlayColor], where we set the color for
+          // the highlight state to match the Figma design.
           color: iconColor),
         onPressed: _send));
   }
@@ -1047,6 +1048,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 +1057,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)))));
+
     final composeButtons = [
       _AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
       _AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
@@ -1073,12 +1087,14 @@ class _ComposeBoxLayout extends StatelessWidget {
             ]))),
         SizedBox(
           height: _composeButtonSize,
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Row(children: composeButtons),
-              sendButton,
-            ])),
+          child: IconButtonTheme(
+            data: iconButtonThemeData,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Row(children: composeButtons),
+                sendButton,
+              ]))),
       ]));
   }
 }
diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
index 2e3348a403..f8335745d2 100644
--- a/lib/widgets/theme.dart
+++ b/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)!,