Skip to content

Commit

Permalink
inbox [nfc]: Place provisional dark-theme color variants, pending design
Browse files Browse the repository at this point in the history 
This completes a workable dark-theme implementation for the inbox
screen. It's likely that some colors will be tweaked to follow
designs that haven't been made yet.

As noted in TODOs in each color that's placed here:

- Some of the UI elements are colored with actual design variables
  from the new Figma that's marked ready for dev. But that Figma
  doesn't yet have those same UI elements, so it's unclear if it's
  the right choice of variable.

- Some dark-theme colors were made up by me just now.

NFC because all the light-theme colors are the same, and we don't
support dark theme yet.
  • Loading branch information
@chrisbobbe
chrisbobbe committed Aug 1, 2024
1 parent 08b6980 commit aee29f1
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 24 deletions.
49 changes: 25 additions & 24 deletions lib/widgets/inbox.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,9 +245,11 @@ abstract class _HeaderItem extends StatelessWidget {

@override
Widget build(BuildContext context) {
final designVariables = DesignVariables.of(context);
return Material(
// TODO(#95) need dark-theme color
color: collapsed ? Colors.white : uncollapsedBackgroundColor(context),
color: collapsed
? designVariables.background // TODO(design) check if this is the right variable
: uncollapsedBackgroundColor(context),
child: InkWell(
// TODO use onRowTap to handle taps that are not on the collapse button.
// Probably we should give the collapse button a 44px or 48px square
Expand All @@ -258,8 +260,7 @@ abstract class _HeaderItem extends StatelessWidget {
onTap: onCollapseButtonTap,
child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
Padding(padding: const EdgeInsets.all(10),
// TODO(#95) need dark-theme color
child: Icon(size: 20, color: const Color(0x7F1D2E48),
child: Icon(size: 20, color: designVariables.sectionCollapseIcon,
collapsed ? ZulipIcons.arrow_right : ZulipIcons.arrow_down)),
Icon(size: 18,
color: collapsed
Expand All @@ -270,11 +271,11 @@ abstract class _HeaderItem extends StatelessWidget {
Expanded(child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Text(
style: const TextStyle(
style: TextStyle(
fontSize: 17,
height: (20 / 17),
// TODO(#95) need dark-theme color
color: Color(0xFF222222),
// TODO(design) check if this is the right variable
color: designVariables.labelMenuButton,
).merge(weightVariableTextStyle(context, wght: 600)),
maxLines: 1,
overflow: TextOverflow.ellipsis,
Expand Down Expand Up @@ -302,9 +303,9 @@ class _AllDmsHeaderItem extends _HeaderItem {
@override String get title => 'Direct messages'; // TODO(i18n)
@override IconData get icon => ZulipIcons.user;

// TODO(#95) need dark-theme colors
@override Color collapsedIconColor(context) => const Color(0xFF222222);
@override Color uncollapsedIconColor(context) => const Color(0xFF222222);
// TODO(design) check if this is the right variable for these
@override Color collapsedIconColor(context) => DesignVariables.of(context).labelMenuButton;
@override Color uncollapsedIconColor(context) => DesignVariables.of(context).labelMenuButton;

@override Color uncollapsedBackgroundColor(context) => DesignVariables.of(context).dmHeaderBg;
@override Color? unreadCountBadgeBackgroundColor(context) => null;
Expand Down Expand Up @@ -368,6 +369,8 @@ class _DmItem extends StatelessWidget {
final store = PerAccountStoreWidget.of(context);
final selfUser = store.users[store.selfUserId]!;

final designVariables = DesignVariables.of(context);

final title = switch (narrow.otherRecipientIds) { // TODO dedupe with [RecentDmConversationsItem]
[] => selfUser.fullName,
[var otherUserId] => store.users[otherUserId]?.fullName ?? '(unknown user)',
Expand All @@ -379,8 +382,7 @@ class _DmItem extends StatelessWidget {
};

return Material(
// TODO(#95) need dark-theme color
color: Colors.white,
color: designVariables.background, // TODO(design) check if this is the right variable
child: InkWell(
onTap: () {
Navigator.push(context,
Expand All @@ -392,11 +394,11 @@ class _DmItem extends StatelessWidget {
Expanded(child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Text(
style: const TextStyle(
style: TextStyle(
fontSize: 17,
height: (20 / 17),
// TODO(#95) need dark-theme color
color: Color(0xFF222222),
// TODO(design) check if this is the right variable
color: designVariables.labelMenuButton,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
Expand Down Expand Up @@ -501,9 +503,10 @@ class _TopicItem extends StatelessWidget {
final store = PerAccountStoreWidget.of(context);
final subscription = store.subscriptions[streamId]!;

final designVariables = DesignVariables.of(context);

return Material(
// TODO(#95) need dark-theme color
color: Colors.white,
color: designVariables.background, // TODO(design) check if this is the right variable
child: InkWell(
onTap: () {
final narrow = TopicNarrow(streamId, topic);
Expand All @@ -516,11 +519,11 @@ class _TopicItem extends StatelessWidget {
Expanded(child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Text(
style: const TextStyle(
style: TextStyle(
fontSize: 17,
height: (20 / 17),
// TODO(#95) need dark-theme color
color: Color(0xFF222222),
// TODO(design) check if this is the right variable
color: designVariables.labelMenuButton,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
Expand All @@ -538,15 +541,13 @@ class _TopicItem extends StatelessWidget {
class _AtMentionMarker extends StatelessWidget {
const _AtMentionMarker();

// TODO(#95) need dark-theme color
static final markerColor = const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor();

@override
Widget build(BuildContext context) {
final designVariables = DesignVariables.of(context);
// Design for at-mention marker based on Figma screen:
// https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=224-16386&mode=design&t=JsNndFQ8fKFH0SjS-0
return Padding(
padding: const EdgeInsetsDirectional.only(end: 4),
child: Icon(ZulipIcons.at_sign, size: 14, color: markerColor));
child: Icon(ZulipIcons.at_sign, size: 14, color: designVariables.atMentionMarker));
}
}
16 changes: 16 additions & 0 deletions lib/widgets/theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
mainBackground: const Color(0xfff0f0f0),
title: const Color(0xff1a1a1a),
channelColorSwatches: ChannelColorSwatches.light,
atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
sectionCollapseIcon: const Color(0x7f1e2e48),
star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
unreadCountBadgeTextForChannel: Colors.black.withOpacity(0.9),
);
Expand All @@ -156,7 +158,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
mainBackground: const Color(0xff1d1d1d),
title: const Color(0xffffffff),
channelColorSwatches: ChannelColorSwatches.dark,
// TODO(#95) need proper dark-theme color (this is ad hoc)
atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
// TODO(#95) need proper dark-theme color (this is ad hoc)
sectionCollapseIcon: const Color(0x7fb6c8e2),
// TODO(#95) unchanged in dark theme?
star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
unreadCountBadgeTextForChannel: Colors.white.withOpacity(0.9),
Expand All @@ -173,7 +179,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
required this.mainBackground,
required this.title,
required this.channelColorSwatches,
required this.atMentionMarker,
required this.dmHeaderBg,
required this.sectionCollapseIcon,
required this.star,
required this.unreadCountBadgeTextForChannel,
});
Expand Down Expand Up @@ -202,7 +210,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
final ChannelColorSwatches channelColorSwatches;

// Not named variables in Figma; taken from older Figma drafts, or elsewhere.
final Color atMentionMarker;
final Color dmHeaderBg;
final Color sectionCollapseIcon;
final Color star;
final Color unreadCountBadgeTextForChannel;

Expand All @@ -218,7 +228,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
Color? mainBackground,
Color? title,
ChannelColorSwatches? channelColorSwatches,
Color? atMentionMarker,
Color? dmHeaderBg,
Color? sectionCollapseIcon,
Color? star,
Color? unreadCountBadgeTextForChannel,
}) {
Expand All @@ -233,7 +245,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
mainBackground: mainBackground ?? this.mainBackground,
title: title ?? this.title,
channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
atMentionMarker: atMentionMarker ?? this.atMentionMarker,
dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
sectionCollapseIcon: sectionCollapseIcon ?? this.sectionCollapseIcon,
star: star ?? this.star,
unreadCountBadgeTextForChannel: unreadCountBadgeTextForChannel ?? this.unreadCountBadgeTextForChannel,
);
Expand All @@ -255,7 +269,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
title: Color.lerp(title, other.title, t)!,
channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,
sectionCollapseIcon: Color.lerp(sectionCollapseIcon, other.sectionCollapseIcon, t)!,
star: Color.lerp(star, other.star, t)!,
unreadCountBadgeTextForChannel: Color.lerp(unreadCountBadgeTextForChannel, other.unreadCountBadgeTextForChannel, t)!,
);
Expand Down

0 comments on commit aee29f1

Please sign in to comment.