Skip to content

Commit

Permalink
compose: Compose-box border is subtle in dark mode
Browse files Browse the repository at this point in the history
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
  • Loading branch information
lakshya1goel committed Dec 29, 2024
1 parent 3ff7096 commit 8f80b77
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 1 deletion.
16 changes: 15 additions & 1 deletion lib/widgets/compose_box.dart
Original file line number Diff line number Diff line change
Expand Up @@ -1051,7 +1051,21 @@ class _ComposeBoxContainer extends StatelessWidget {
// the message list itself
return Container(width: double.infinity,
decoration: BoxDecoration(
border: Border(top: BorderSide(color: designVariables.borderBar))),
border: Border(
top: BorderSide(
color: designVariables.composeBoxBorderBar,
width: 1.0,
),
),
boxShadow: [
BoxShadow(
color: designVariables.composeBoxShadow,
offset: const Offset(0, -4),
blurRadius: 16,
spreadRadius: 0,
),
],
),
// TODO(#720) try a Stack for the overlaid linear progress indicator
child: Material(
color: designVariables.composeBoxBg,
Expand Down
14 changes: 14 additions & 0 deletions lib/widgets/theme.dart
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
btnLabelAttLowIntDanger: const Color(0xffc0070a),
btnLabelAttMediumIntDanger: const Color(0xffac0508),
composeBoxBg: const Color(0xffffffff),
composeBoxBorderBar: Colors.black.withValues(alpha: 0.2),
composeBoxShadow: const Color(0xff242424),
contextMenuCancelText: const Color(0xff222222),
contextMenuItemBg: const Color(0xff6159e1),
contextMenuItemText: const Color(0xff381da7),
Expand Down Expand Up @@ -182,6 +184,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
btnLabelAttLowIntDanger: const Color(0xffff8b7c),
btnLabelAttMediumIntDanger: const Color(0xffff8b7c),
composeBoxBg: const Color(0xff0f0f0f),
composeBoxBorderBar: Colors.white.withValues(alpha: 0.1),
composeBoxShadow: const Color(0xff242424),
contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
contextMenuItemBg: const Color(0xff7977fe),
contextMenuItemText: const Color(0xff9398fd),
Expand Down Expand Up @@ -239,6 +243,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
required this.btnLabelAttLowIntDanger,
required this.btnLabelAttMediumIntDanger,
required this.composeBoxBg,
required this.composeBoxBorderBar,
required this.composeBoxShadow,
required this.contextMenuCancelText,
required this.contextMenuItemBg,
required this.contextMenuItemText,
Expand Down Expand Up @@ -297,6 +303,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
final Color btnLabelAttLowIntDanger;
final Color btnLabelAttMediumIntDanger;
final Color composeBoxBg;
final Color composeBoxBorderBar;
final Color composeBoxShadow;
final Color contextMenuCancelText;
final Color contextMenuItemBg;
final Color contextMenuItemText;
Expand Down Expand Up @@ -350,6 +358,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
Color? btnLabelAttLowIntDanger,
Color? btnLabelAttMediumIntDanger,
Color? composeBoxBg,
Color? composeBoxBorderBar,
Color? composeBoxShadow,
Color? contextMenuCancelText,
Color? contextMenuItemBg,
Color? contextMenuItemText,
Expand Down Expand Up @@ -398,6 +408,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
btnLabelAttLowIntDanger: btnLabelAttLowIntDanger ?? this.btnLabelAttLowIntDanger,
btnLabelAttMediumIntDanger: btnLabelAttMediumIntDanger ?? this.btnLabelAttMediumIntDanger,
composeBoxBg: composeBoxBg ?? this.composeBoxBg,
composeBoxBorderBar: composeBoxBorderBar ?? this.composeBoxBorderBar,
composeBoxShadow: composeBoxShadow ?? this.composeBoxShadow,
contextMenuCancelText: contextMenuCancelText ?? this.contextMenuCancelText,
contextMenuItemBg: contextMenuItemBg ?? this.contextMenuItemBg,
contextMenuItemText: contextMenuItemText ?? this.contextMenuItemBg,
Expand Down Expand Up @@ -453,6 +465,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
btnLabelAttLowIntDanger: Color.lerp(btnLabelAttLowIntDanger, other.btnLabelAttLowIntDanger, t)!,
btnLabelAttMediumIntDanger: Color.lerp(btnLabelAttMediumIntDanger, other.btnLabelAttMediumIntDanger, t)!,
composeBoxBg: Color.lerp(composeBoxBg, other.composeBoxBg, t)!,
composeBoxBorderBar: Color.lerp(composeBoxBorderBar, other.composeBoxBorderBar, t)!,
composeBoxShadow: Color.lerp(composeBoxShadow, other.composeBoxShadow, t)!,
contextMenuCancelText: Color.lerp(contextMenuCancelText, other.contextMenuCancelText, t)!,
contextMenuItemBg: Color.lerp(contextMenuItemBg, other.contextMenuItemBg, t)!,
contextMenuItemText: Color.lerp(contextMenuItemText, other.contextMenuItemBg, t)!,
Expand Down

0 comments on commit 8f80b77

Please sign in to comment.