From 7659479035dc86401c4160b227243f4f4567ee4b Mon Sep 17 00:00:00 2001
From: lakshya1goel <lakshya1234goel@gmail.com>
Date: Sat, 1 Feb 2025 12:19:02 +0530
Subject: [PATCH] compose: Make compose-box border more prominent in dark mode

Updated the top border and added shadow effect to the top of
the compose box to make it more visible in dark mode.

For reference, see the Figma design:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5908-64038&t=alSmAmdRXFDwT4IT-1

Fixes: #1207
---
 lib/widgets/compose_box.dart       | 57 +++++++++++++++++++++++++++++-
 lib/widgets/theme.dart             |  5 ++-
 test/widgets/compose_box_test.dart |  9 +++++
 3 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
index 1233964afb..3058425bf1 100644
--- a/lib/widgets/compose_box.dart
+++ b/lib/widgets/compose_box.dart
@@ -22,6 +22,59 @@ import 'store.dart';
 import 'text.dart';
 import 'theme.dart';
 
+/// Compose-box styles that differ between light and dark theme.
+///
+/// These styles will animate on theme changes (with help from [lerp]).
+class ComposeBoxTheme extends ThemeExtension<ComposeBoxTheme> {
+  static final light = ComposeBoxTheme._(
+    boxShadow: null,
+  );
+
+  static final dark = ComposeBoxTheme._(
+    boxShadow: [BoxShadow(
+      color: DesignVariables.dark.bgTopBar,
+      offset: const Offset(0, -4),
+      blurRadius: 16,
+      spreadRadius: 0,
+    )],
+  );
+
+  ComposeBoxTheme._({
+    required this.boxShadow,
+  });
+
+  /// The [ComposeBoxTheme] from the context's active theme.
+  ///
+  /// The [ThemeData] must include [ComposeBoxTheme] in [ThemeData.extensions].
+  static ComposeBoxTheme of(BuildContext context) {
+    final theme = Theme.of(context);
+    final extension = theme.extension<ComposeBoxTheme>();
+    assert(extension != null);
+    return extension!;
+  }
+
+  final List<BoxShadow>? boxShadow;
+
+  @override
+  ComposeBoxTheme copyWith({
+    List<BoxShadow>? boxShadow,
+  }) {
+    return ComposeBoxTheme._(
+      boxShadow: boxShadow ?? this.boxShadow,
+    );
+  }
+
+  @override
+  ComposeBoxTheme lerp(ComposeBoxTheme other, double t) {
+    if (identical(this, other)) {
+      return this;
+    }
+    return ComposeBoxTheme._(
+      boxShadow: BoxShadow.lerpList(boxShadow, other.boxShadow, t)!,
+    );
+  }
+}
+
 const double _composeButtonSize = 44;
 
 /// A [TextEditingController] for use in the compose box.
@@ -1090,7 +1143,9 @@ class _ComposeBoxContainer extends StatelessWidget {
     //   the message list itself; if so, remember to update ComposeBox's dartdoc.
     return Container(width: double.infinity,
       decoration: BoxDecoration(
-        border: Border(top: BorderSide(color: designVariables.borderBar))),
+        border: Border(top: BorderSide(color: designVariables.borderBar)),
+        boxShadow: ComposeBoxTheme.of(context).boxShadow,
+      ),
       // TODO(#720) try a Stack for the overlaid linear progress indicator
       child: Material(
         color: designVariables.composeBoxBg,
diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
index 5358f73c42..ec8ad8aecc 100644
--- a/lib/widgets/theme.dart
+++ b/lib/widgets/theme.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import '../api/model/model.dart';
+import 'compose_box.dart';
 import 'content.dart';
 import 'emoji_reaction.dart';
 import 'message_list.dart';
@@ -32,6 +33,7 @@ ThemeData zulipThemeData(BuildContext context) {
         designVariables,
         EmojiReactionTheme.light,
         MessageListTheme.light,
+        ComposeBoxTheme.light,
       ];
     }
     case Brightness.dark: {
@@ -41,6 +43,7 @@ ThemeData zulipThemeData(BuildContext context) {
         designVariables,
         EmojiReactionTheme.dark,
         MessageListTheme.dark,
+        ComposeBoxTheme.dark,
       ];
     }
   }
@@ -175,7 +178,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     bgMenuButtonActive: Colors.black.withValues(alpha: 0.2),
     bgMenuButtonSelected: Colors.black.withValues(alpha: 0.25),
     bgTopBar: const Color(0xff242424),
-    borderBar: Colors.black.withValues(alpha: 0.5),
+    borderBar: const Color(0xffffffff).withValues(alpha: 0.1),
     borderMenuButtonSelected: Colors.white.withValues(alpha: 0.1),
     btnLabelAttLowIntDanger: const Color(0xffff8b7c),
     btnLabelAttMediumIntDanger: const Color(0xffff8b7c),
diff --git a/test/widgets/compose_box_test.dart b/test/widgets/compose_box_test.dart
index a5032f5705..f1eb9bb3ba 100644
--- a/test/widgets/compose_box_test.dart
+++ b/test/widgets/compose_box_test.dart
@@ -111,6 +111,15 @@ void main() {
     await tester.pump(Duration.zero);
   }
 
+  group('ComposeBoxTheme', () {
+    test('lerp light to dark, no crash', () {
+      final a = ComposeBoxTheme.light;
+      final b = ComposeBoxTheme.dark;
+
+      check(() => a.lerp(b, 0.5)).returnsNormally();
+    });
+  });
+
   group('ComposeContentController', () {
     group('insertPadded', () {
       // Like `parseMarkedText` in test/model/autocomplete_test.dart,