Skip to content

Commit 0764a86

Browse files
committed
compose: Compose-box border is subtle in dark mode
Updated the top border and added shadow effect to the top of the compose box to ensure it is subtle 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
1 parent 5e8d0a8 commit 0764a86

File tree

2 files changed

+64
-2
lines changed

2 files changed

+64
-2
lines changed

lib/widgets/compose_box.dart

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,63 @@ import 'store.dart';
2222
import 'text.dart';
2323
import 'theme.dart';
2424

25+
/// Compose-box styles that differ between light and dark theme.
26+
///
27+
/// These styles will animate on theme changes (with help from [lerp]).
28+
class ComposeBoxTheme extends ThemeExtension<ComposeBoxTheme> {
29+
factory ComposeBoxTheme.light(BuildContext context) {
30+
return ComposeBoxTheme._(
31+
boxShadow: null,
32+
);
33+
}
34+
35+
factory ComposeBoxTheme.dark(BuildContext context) {
36+
return ComposeBoxTheme._(
37+
boxShadow: [BoxShadow(
38+
color: DesignVariables.dark.bgTopBar,
39+
offset: const Offset(0, -4),
40+
blurRadius: 16,
41+
spreadRadius: 0,
42+
)],
43+
);
44+
}
45+
46+
ComposeBoxTheme._({
47+
required this.boxShadow,
48+
});
49+
50+
/// The [ComposeBoxTheme] from the context's active theme.
51+
///
52+
/// The [ThemeData] must include [ComposeBoxTheme] in [ThemeData.extensions].
53+
static ComposeBoxTheme of(BuildContext context) {
54+
final theme = Theme.of(context);
55+
final extension = theme.extension<ComposeBoxTheme>();
56+
assert(extension != null);
57+
return extension!;
58+
}
59+
60+
final List<BoxShadow>? boxShadow;
61+
62+
@override
63+
ComposeBoxTheme copyWith({
64+
List<BoxShadow>? boxShadow,
65+
}) {
66+
return ComposeBoxTheme._(
67+
boxShadow: boxShadow ?? this.boxShadow,
68+
);
69+
}
70+
71+
@override
72+
ComposeBoxTheme lerp(ComposeBoxTheme other, double t) {
73+
if (identical(this, other)) {
74+
return this;
75+
}
76+
return ComposeBoxTheme._(
77+
boxShadow: BoxShadow.lerpList(boxShadow, other.boxShadow, t)!,
78+
);
79+
}
80+
}
81+
2582
const double _composeButtonSize = 44;
2683

2784
/// A [TextEditingController] for use in the compose box.
@@ -1056,7 +1113,9 @@ class _ComposeBoxContainer extends StatelessWidget {
10561113
// the message list itself
10571114
return Container(width: double.infinity,
10581115
decoration: BoxDecoration(
1059-
border: Border(top: BorderSide(color: designVariables.borderBar))),
1116+
border: Border(top: BorderSide(color: designVariables.borderBar)),
1117+
boxShadow: ComposeBoxTheme.of(context).boxShadow,
1118+
),
10601119
// TODO(#720) try a Stack for the overlaid linear progress indicator
10611120
child: Material(
10621121
color: designVariables.composeBoxBg,

lib/widgets/theme.dart

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:flutter/material.dart';
22

33
import '../api/model/model.dart';
4+
import 'compose_box.dart';
45
import 'content.dart';
56
import 'emoji_reaction.dart';
67
import 'message_list.dart';
@@ -32,6 +33,7 @@ ThemeData zulipThemeData(BuildContext context) {
3233
designVariables,
3334
EmojiReactionTheme.light(),
3435
MessageListTheme.light(),
36+
ComposeBoxTheme.light(context),
3537
];
3638
}
3739
case Brightness.dark: {
@@ -41,6 +43,7 @@ ThemeData zulipThemeData(BuildContext context) {
4143
designVariables,
4244
EmojiReactionTheme.dark(),
4345
MessageListTheme.dark(),
46+
ComposeBoxTheme.dark(context),
4447
];
4548
}
4649
}
@@ -175,7 +178,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
175178
bgMenuButtonActive: Colors.black.withValues(alpha: 0.2),
176179
bgMenuButtonSelected: Colors.black.withValues(alpha: 0.25),
177180
bgTopBar: const Color(0xff242424),
178-
borderBar: Colors.black.withValues(alpha: 0.5),
181+
borderBar: const Color(0xffffffff).withValues(alpha: 0.1),
179182
borderMenuButtonSelected: Colors.white.withValues(alpha: 0.1),
180183
btnLabelAttLowIntDanger: const Color(0xffff8b7c),
181184
btnLabelAttMediumIntDanger: const Color(0xffff8b7c),

0 commit comments

Comments
 (0)