compose_box: Implement topic input redesign

The bottom underline implementation draws similarity to that of
`Spoiler`'s.  We could have used `UnderlineInputBorder` on
`InputDecoration`, but that also comes with other input state styles
that we do not need (e.g.: focused, disabled, etc.).

This also adds a new helper on `ColorExtension` following a similar
naming and documentation style as other method like `withValues`. The
motivation for this is to support a faded effect applies to colors
that are possibly already transparent (i.e. have a non-one alpha
channel value).

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.

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
  - zulip#928 (comment)

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

Author: PIG208

lib/widgets/color.dart

@@ -38,4 +38,13 @@ extension ColorExtension on Color {
            ((g * 255.0).round() & 0xff) << 8 |
            ((b * 255.0).round() & 0xff) << 0;
   }
+
+  /// Makes a copy of this color with the alpha channel multiplied by `factor`.
+  ///
+  /// `factor` must not be less than 0 or greater than 1.
+  Color withFadedAlpha(double factor) {
+    assert(factor >= 0);
+    assert(factor <= 1);
+    return withValues(alpha: a * factor);
+  }
 }

lib/widgets/compose_box.dart

@@ -14,9 +14,11 @@ 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 'store.dart';
+import 'text.dart';
 import 'theme.dart';
 
 const double _composeButtonWidth = 44;
@@ -472,20 +474,39 @@ 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) => Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Padding(
+            padding: const EdgeInsets.symmetric(vertical: 10),
+            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))))),
+          SizedBox(height: 0, width: double.infinity,
+            child: DecoratedBox(decoration: BoxDecoration(
+              border: Border(
+                bottom: BorderSide(
+                  width: 1,
+                  color: designVariables.foreground.withFadedAlpha(0.2)))))),
+        ]));
   }
 }
 

lib/widgets/theme.dart

@@ -129,6 +129,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       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(),
@@ -168,6 +169,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       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
@@ -214,6 +216,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.labelEdited,
     required this.labelMenuButton,
     required this.mainBackground,
+    required this.textInput,
     required this.title,
     required this.channelColorSwatches,
     required this.atMentionMarker,
@@ -261,6 +264,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   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.
@@ -303,6 +307,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? labelEdited,
     Color? labelMenuButton,
     Color? mainBackground,
+    Color? textInput,
     Color? title,
     ChannelColorSwatches? channelColorSwatches,
     Color? atMentionMarker,
@@ -340,6 +345,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       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,
@@ -384,6 +390,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       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)!,

test/widgets/color_test.dart

@@ -1,6 +1,7 @@
 import 'dart:ui';
 
 import 'package:checks/checks.dart';
+import 'package:flutter_checks/flutter_checks.dart';
 import 'package:test/scaffolding.dart';
 import 'package:zulip/widgets/color.dart';
 
@@ -14,5 +15,15 @@ void main() {
         check(Color(testCase).argbInt).equals(testCase);
       }
     });
+
+    test('withFadedAlpha smoke', () {
+      const color = Color.fromRGBO(100, 200, 100, 0.5);
+
+      check(color.withFadedAlpha(0.5))
+        .isSameColorAs(color.withValues(alpha: 0.25));
+
+      check(() => color.withFadedAlpha(1.1)).throws<AssertionError>();
+      check(() => color.withFadedAlpha(-0.1)).throws<AssertionError>();
+    });
   });
 }