From abfaed8bb0d8b4af45fbacbc455ea0db567abed7 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Sun, 19 May 2024 17:51:08 -0700 Subject: [PATCH 1/4] subscription_list [nfc]: Factor out helper for dividing line --- lib/widgets/subscription_list.dart | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/widgets/subscription_list.dart b/lib/widgets/subscription_list.dart index df6d3d1e68..9db06b6d7e 100644 --- a/lib/widgets/subscription_list.dart +++ b/lib/widgets/subscription_list.dart @@ -130,6 +130,9 @@ class _SubscriptionListHeader extends StatelessWidget { final String label; + static final _line = Expanded(child: Divider( + color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())); + @override Widget build(BuildContext context) { return SliverToBoxAdapter( @@ -138,8 +141,7 @@ class _SubscriptionListHeader extends StatelessWidget { child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [ const SizedBox(width: 16), - Expanded(child: Divider( - color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())), + _line, const SizedBox(width: 8), Padding( padding: const EdgeInsets.symmetric(vertical: 7), @@ -152,8 +154,7 @@ class _SubscriptionListHeader extends StatelessWidget { height: (16 / 14), ))), const SizedBox(width: 8), - Expanded(child: Divider( - color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())), + _line, const SizedBox(width: 16), ]))); } From d67b1f24c470d35924e0e004acc072c799b890d7 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Sun, 19 May 2024 15:44:50 -0700 Subject: [PATCH 2/4] ui [nfc]: Comment with TODO(#95) where we need dark-theme colors In these places, I was unable to find a specific dark-theme color by consulting web or the Figma (as it is now). Related: #95 --- lib/widgets/inbox.dart | 11 +++++++++++ lib/widgets/login.dart | 1 + lib/widgets/recent_dm_conversations.dart | 4 ++++ lib/widgets/subscription_list.dart | 6 ++++++ lib/widgets/unread_count_badge.dart | 2 ++ 5 files changed, 24 insertions(+) diff --git a/lib/widgets/inbox.dart b/lib/widgets/inbox.dart index c2e0d776b0..e12d0c2b19 100644 --- a/lib/widgets/inbox.dart +++ b/lib/widgets/inbox.dart @@ -245,6 +245,7 @@ abstract class _HeaderItem extends StatelessWidget { @override Widget build(BuildContext context) { return Material( + // TODO(#95) need dark-theme color color: collapsed ? Colors.white : uncollapsedBackgroundColor, child: InkWell( // TODO use onRowTap to handle taps that are not on the collapse button. @@ -256,6 +257,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), collapsed ? ZulipIcons.arrow_right : ZulipIcons.arrow_down)), Icon(size: 18, color: collapsed ? collapsedIconColor : uncollapsedIconColor, @@ -267,6 +269,7 @@ abstract class _HeaderItem extends StatelessWidget { style: const TextStyle( fontSize: 17, height: (20 / 17), + // TODO(#95) need dark-theme color color: Color(0xFF222222), ).merge(weightVariableTextStyle(context, wght: 600)), maxLines: 1, @@ -292,8 +295,11 @@ class _AllDmsHeaderItem extends _HeaderItem { @override get title => 'Direct messages'; // TODO(i18n) @override get icon => ZulipIcons.user; + + // TODO(#95) need dark-theme colors @override get collapsedIconColor => const Color(0xFF222222); @override get uncollapsedIconColor => const Color(0xFF222222); + @override get uncollapsedBackgroundColor => const Color(0xFFF3F0E7); @override get unreadCountBadgeBackgroundColor => null; @@ -367,6 +373,7 @@ class _DmItem extends StatelessWidget { }; return Material( + // TODO(#95) need dark-theme color color: Colors.white, child: InkWell( onTap: () { @@ -382,6 +389,7 @@ class _DmItem extends StatelessWidget { style: const TextStyle( fontSize: 17, height: (20 / 17), + // TODO(#95) need dark-theme color color: Color(0xFF222222), ), maxLines: 2, @@ -486,6 +494,7 @@ class _TopicItem extends StatelessWidget { final subscription = store.subscriptions[streamId]!; return Material( + // TODO(#95) need dark-theme color color: Colors.white, child: InkWell( onTap: () { @@ -502,6 +511,7 @@ class _TopicItem extends StatelessWidget { style: const TextStyle( fontSize: 17, height: (20 / 17), + // TODO(#95) need dark-theme color color: Color(0xFF222222), ), maxLines: 2, @@ -519,6 +529,7 @@ 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 diff --git a/lib/widgets/login.dart b/lib/widgets/login.dart index 6aed1f44f5..3f018ff9d9 100644 --- a/lib/widgets/login.dart +++ b/lib/widgets/login.dart @@ -621,6 +621,7 @@ class _UsernamePasswordFormState extends State<_UsernamePasswordForm> { } // Loosely based on the corresponding element in the web app. +// TODO(#95) need dark-theme colors class OrDivider extends StatelessWidget { const OrDivider({super.key}); diff --git a/lib/widgets/recent_dm_conversations.dart b/lib/widgets/recent_dm_conversations.dart index 27bf2a7560..c5c63b6f01 100644 --- a/lib/widgets/recent_dm_conversations.dart +++ b/lib/widgets/recent_dm_conversations.dart @@ -109,12 +109,15 @@ class RecentDmConversationsItem extends StatelessWidget { // new Intl.ListFormat('ja').format(['Chris', 'Greg', 'Alya']) // // 'Chris、Greg、Alya' title = narrow.otherRecipientIds.map((id) => store.users[id]?.fullName ?? '(unknown user)').join(', '); + // TODO(#95) need dark-theme color avatar = ColoredBox(color: const Color(0x33808080), child: Center( + // TODO(#95) need dark-theme color child: Icon(ZulipIcons.group_dm, color: Colors.black.withOpacity(0.5)))); } return Material( + // TODO(#95) need dark-theme color color: Colors.white, child: InkWell( onTap: () { @@ -132,6 +135,7 @@ class RecentDmConversationsItem extends StatelessWidget { style: const TextStyle( fontSize: 17, height: (20 / 17), + // TODO(#95) need dark-theme color color: Color(0xFF222222), ), maxLines: 2, diff --git a/lib/widgets/subscription_list.dart b/lib/widgets/subscription_list.dart index 9db06b6d7e..81a529056b 100644 --- a/lib/widgets/subscription_list.dart +++ b/lib/widgets/subscription_list.dart @@ -118,6 +118,7 @@ class _NoSubscriptionsItem extends StatelessWidget { child: Text("No streams found", textAlign: TextAlign.center, style: TextStyle( + // TODO(#95) need dark-theme color color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(), fontSize: 18, height: (20 / 18), @@ -131,12 +132,14 @@ class _SubscriptionListHeader extends StatelessWidget { final String label; static final _line = Expanded(child: Divider( + // TODO(#95) need dark-theme color color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())); @override Widget build(BuildContext context) { return SliverToBoxAdapter( child: ColoredBox( + // TODO(#95) need dark-theme color color: Colors.white, child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [ @@ -148,6 +151,7 @@ class _SubscriptionListHeader extends StatelessWidget { child: Text(label, textAlign: TextAlign.center, style: TextStyle( + // TODO(#95) need dark-theme color color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(), fontSize: 14, letterSpacing: proportionalLetterSpacing(context, 0.04, baseFontSize: 14), @@ -198,6 +202,7 @@ class SubscriptionItem extends StatelessWidget { final swatch = subscription.colorSwatch(); final hasUnreads = (unreadCount > 0); return Material( + // TODO(#95) need dark-theme color color: Colors.white, child: InkWell( onTap: () { @@ -222,6 +227,7 @@ class SubscriptionItem extends StatelessWidget { style: const TextStyle( fontSize: 18, height: (20 / 18), + // TODO(#95) need dark-theme color color: Color(0xFF262626), ).merge(weightVariableTextStyle(context, wght: hasUnreads ? 600 : null)), diff --git a/lib/widgets/unread_count_badge.dart b/lib/widgets/unread_count_badge.dart index 412ab5541c..d800cc2f96 100644 --- a/lib/widgets/unread_count_badge.dart +++ b/lib/widgets/unread_count_badge.dart @@ -32,6 +32,7 @@ class UnreadCountBadge extends StatelessWidget { final effectiveBackgroundColor = switch (backgroundColor) { StreamColorSwatch(unreadCountBadgeBackground: var color) => color, Color() => backgroundColor, + // TODO(#95) need dark-theme color null => const Color.fromRGBO(102, 102, 153, 0.15), }; @@ -57,6 +58,7 @@ class UnreadCountBadge extends StatelessWidget { // - in dark mode use `Color.fromRGBO(255, 255, 255, 0.9)` // The web app doesn't (yet?) use stream-colored unread markers // so we can't take direction from there. + // TODO(#95) need dark-theme color color: Color(0xFF222222), ).merge(weightVariableTextStyle(context, wght: bold ? 600 : null)), From cf7851f3aec9a97d3ca0612afdbf443c9a082354 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Sun, 19 May 2024 19:10:37 -0700 Subject: [PATCH 3/4] code_block [nfc]: Add TODO(#95) to follow web in syntax highlighting Related: #95 --- lib/widgets/code_block.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/widgets/code_block.dart b/lib/widgets/code_block.dart index f650a21cc8..fe15eca8c3 100644 --- a/lib/widgets/code_block.dart +++ b/lib/widgets/code_block.dart @@ -5,6 +5,8 @@ import '../model/code_block.dart'; // Highlighted code block styles adapted from: // https://github.com/zulip/zulip/blob/213387249e7ba7772084411b22d8cef64b135dd0/web/styles/pygments.css +// TODO(#95) follow web for dark-theme colors + // .hll { background-color: hsl(60deg 100% 90%); } final _kCodeBlockStyleHll = TextStyle(backgroundColor: const HSLColor.fromAHSL(1, 60, 1, 0.90).toColor()); From b9e585e43ef8791788f1790361e2c31c2e665b68 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Sun, 19 May 2024 15:45:47 -0700 Subject: [PATCH 4/4] inbox: Express _AllDmsHeaderItem.uncollapsedBackgroundColor as HSL To align with web, which labels this color --color-background-private-message-header. (If there is a slight change to the color we use, it's within a rounding error.) --- lib/widgets/inbox.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/widgets/inbox.dart b/lib/widgets/inbox.dart index e12d0c2b19..cbc9d3b24f 100644 --- a/lib/widgets/inbox.dart +++ b/lib/widgets/inbox.dart @@ -300,7 +300,7 @@ class _AllDmsHeaderItem extends _HeaderItem { @override get collapsedIconColor => const Color(0xFF222222); @override get uncollapsedIconColor => const Color(0xFF222222); - @override get uncollapsedBackgroundColor => const Color(0xFFF3F0E7); + @override get uncollapsedBackgroundColor => const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(); @override get unreadCountBadgeBackgroundColor => null; @override get onCollapseButtonTap => () async {