From 36084979630934e4446f4f8660b4401fae01cd3a Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Wed, 18 Sep 2024 19:05:08 -0700 Subject: [PATCH 1/4] login [nfc]: Use ButtonStyle.foregroundColor for buttons' text color This seems like the preferred way to use the API. --- lib/widgets/login.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/widgets/login.dart b/lib/widgets/login.dart index 4027b93af0..0d44b65af4 100644 --- a/lib/widgets/login.dart +++ b/lib/widgets/login.dart @@ -428,7 +428,8 @@ class _LoginPageState extends State { final icon = method.displayIcon; return OutlinedButton.icon( style: ButtonStyle( - backgroundColor: WidgetStatePropertyAll(colorScheme.secondaryContainer)), + backgroundColor: WidgetStatePropertyAll(colorScheme.secondaryContainer), + foregroundColor: WidgetStatePropertyAll(colorScheme.onSecondaryContainer)), icon: icon != null ? Image.network(icon, width: 24, height: 24) : null, @@ -436,7 +437,6 @@ class _LoginPageState extends State { ? () => _beginWebAuth(method) : null, label: Text( - style: TextStyle(color: colorScheme.onSecondaryContainer), zulipLocalizations.signInWithFoo(method.displayName))); }), ], From 1cde4a441ed143b8e47f1aae5600c662b3181518 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Wed, 18 Sep 2024 19:00:02 -0700 Subject: [PATCH 2/4] home: Make buttons higher contrast with page background in dark theme An improvement that Greg pointed out: https://chat.zulip.org/#narrow/stream/48-mobile/topic/dark.20theme/near/1936853 This makes them the same color as the third-party login buttons, in 7c9c894f. --- lib/widgets/app.dart | 115 +++++++++++++++++++++++-------------------- 1 file changed, 61 insertions(+), 54 deletions(-) diff --git a/lib/widgets/app.dart b/lib/widgets/app.dart index 38abaad4a7..d3a36ddb4c 100644 --- a/lib/widgets/app.dart +++ b/lib/widgets/app.dart @@ -243,6 +243,8 @@ class HomePage extends StatelessWidget { final store = PerAccountStoreWidget.of(context); final zulipLocalizations = ZulipLocalizations.of(context); + final colorScheme = ColorScheme.of(context); + InlineSpan bold(String text) => TextSpan( style: const TextStyle().merge(weightVariableTextStyle(context, wght: 700)), text: text); @@ -254,63 +256,68 @@ class HomePage extends StatelessWidget { return Scaffold( appBar: ZulipAppBar(title: const Text("Home")), - body: Center( - child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ - DefaultTextStyle.merge( - textAlign: TextAlign.center, - style: const TextStyle(fontSize: 18), - child: Column(children: [ - const Text('🚧 Under construction 🚧'), - const SizedBox(height: 12), - Text.rich(TextSpan( - text: 'Connected to: ', - children: [bold(store.realmUrl.toString())])), - Text.rich(TextSpan( - text: 'Zulip server version: ', - children: [bold(store.zulipVersion)])), - Text(zulipLocalizations.subscribedToNChannels(store.subscriptions.length)), - ])), - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - MessageListPage.buildRoute(context: context, - narrow: const CombinedFeedNarrow())), - child: Text(zulipLocalizations.combinedFeedPageTitle)), - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - MessageListPage.buildRoute(context: context, - narrow: const MentionsNarrow())), - child: Text(zulipLocalizations.mentionsPageTitle)), - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - MessageListPage.buildRoute(context: context, - narrow: const StarredMessagesNarrow())), - child: Text(zulipLocalizations.starredMessagesPageTitle)), - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - InboxPage.buildRoute(context: context)), - child: const Text("Inbox")), // TODO(i18n) - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - SubscriptionListPage.buildRoute(context: context)), - child: const Text("Subscribed channels")), - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - RecentDmConversationsPage.buildRoute(context: context)), - child: Text(zulipLocalizations.recentDmConversationsPageTitle)), - if (testStreamId != null) ...[ + body: ElevatedButtonTheme( + data: ElevatedButtonThemeData(style: ButtonStyle( + backgroundColor: WidgetStatePropertyAll(colorScheme.secondaryContainer), + foregroundColor: WidgetStatePropertyAll(colorScheme.onSecondaryContainer))), + child: Center( + child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ + DefaultTextStyle.merge( + textAlign: TextAlign.center, + style: const TextStyle(fontSize: 18), + child: Column(children: [ + const Text('🚧 Under construction 🚧'), + const SizedBox(height: 12), + Text.rich(TextSpan( + text: 'Connected to: ', + children: [bold(store.realmUrl.toString())])), + Text.rich(TextSpan( + text: 'Zulip server version: ', + children: [bold(store.zulipVersion)])), + Text(zulipLocalizations.subscribedToNChannels(store.subscriptions.length)), + ])), + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + MessageListPage.buildRoute(context: context, + narrow: const CombinedFeedNarrow())), + child: Text(zulipLocalizations.combinedFeedPageTitle)), + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + MessageListPage.buildRoute(context: context, + narrow: const MentionsNarrow())), + child: Text(zulipLocalizations.mentionsPageTitle)), const SizedBox(height: 16), ElevatedButton( onPressed: () => Navigator.push(context, MessageListPage.buildRoute(context: context, - narrow: ChannelNarrow(testStreamId!))), - child: const Text("#test here")), // scaffolding hack, see above - ], - ]))); + narrow: const StarredMessagesNarrow())), + child: Text(zulipLocalizations.starredMessagesPageTitle)), + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + InboxPage.buildRoute(context: context)), + child: const Text("Inbox")), // TODO(i18n) + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + SubscriptionListPage.buildRoute(context: context)), + child: const Text("Subscribed channels")), + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + RecentDmConversationsPage.buildRoute(context: context)), + child: Text(zulipLocalizations.recentDmConversationsPageTitle)), + if (testStreamId != null) ...[ + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + MessageListPage.buildRoute(context: context, + narrow: ChannelNarrow(testStreamId!))), + child: const Text("#test here")), // scaffolding hack, see above + ], + ])), + )); } } From b08ebc87b45abc50d45588921b8d6ff76a78b4d8 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Wed, 18 Sep 2024 19:07:17 -0700 Subject: [PATCH 3/4] content: Lighten dark-theme variant of textStyleError{,Code} Prompted by Greg's feedback that the dark-theme color was pretty dark: https://chat.zulip.org/#narrow/stream/48-mobile/topic/dark.20theme/near/1936853 --- lib/widgets/content.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart index 6d9ef651ac..302e631579 100644 --- a/lib/widgets/content.dart +++ b/lib/widgets/content.dart @@ -71,10 +71,10 @@ class ContentTheme extends ThemeExtension { color: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(), debugLabel: 'ContentTheme.textStylePlainParagraph'), codeBlockTextStyles: CodeBlockTextStyles.dark(context), - textStyleError: TextStyle(fontSize: kBaseFontSize, color: Colors.red.shade900) + textStyleError: const TextStyle(fontSize: kBaseFontSize, color: Colors.red) .merge(weightVariableTextStyle(context, wght: 700)), textStyleErrorCode: kMonospaceTextStyle - .merge(TextStyle(fontSize: kBaseFontSize, color: Colors.red.shade900)), + .merge(const TextStyle(fontSize: kBaseFontSize, color: Colors.red)), textStyleInlineCode: kMonospaceTextStyle.merge(TextStyle( backgroundColor: const HSLColor.fromAHSL(0.08, 0, 0, 1).toColor())), textStyleInlineMath: kMonospaceTextStyle.merge(TextStyle( From 3a70e61b7122b2be61677bea1ac3ab432d5d83de Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Wed, 18 Sep 2024 19:26:23 -0700 Subject: [PATCH 4/4] subscription_list: Place dark-theme color for MutedUnreadBadge, from web Thanks to Greg for the reminder that this needed attention: https://chat.zulip.org/#narrow/stream/48-mobile/topic/dark.20theme/near/1936853 This is pretty low-contrast in dark mode, but as with many of our UI elements, we'll adjust as necessary when we have a design from Vlad. --- lib/widgets/theme.dart | 7 +++++++ lib/widgets/unread_count_badge.dart | 3 ++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart index d7a6ddabf6..c39856b48b 100644 --- a/lib/widgets/theme.dart +++ b/lib/widgets/theme.dart @@ -126,6 +126,7 @@ class DesignVariables extends ThemeExtension { groupDmConversationIconBg: const Color(0x33808080), loginOrDivider: const Color(0xffdedede), loginOrDividerText: const Color(0xff575757), + mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.8).toColor(), sectionCollapseIcon: const Color(0x7f1e2e48), star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(), subscriptionListHeaderLine: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor(), @@ -158,6 +159,7 @@ class DesignVariables extends ThemeExtension { groupDmConversationIconBg: const Color(0x33cccccc), loginOrDivider: const Color(0xff424242), loginOrDividerText: const Color(0xffa8a8a8), + mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.3).toColor(), // TODO(design-dark) need proper dark-theme color (this is ad hoc) sectionCollapseIcon: const Color(0x7fb6c8e2), // TODO(design-dark) unchanged in dark theme? @@ -190,6 +192,7 @@ class DesignVariables extends ThemeExtension { required this.groupDmConversationIconBg, required this.loginOrDivider, required this.loginOrDividerText, + required this.mutedUnreadBadge, required this.sectionCollapseIcon, required this.star, required this.subscriptionListHeaderLine, @@ -231,6 +234,7 @@ class DesignVariables extends ThemeExtension { final Color groupDmConversationIconBg; final Color loginOrDivider; // TODO(design-dark) need proper dark-theme color (this is ad hoc) final Color loginOrDividerText; // TODO(design-dark) need proper dark-theme color (this is ad hoc) + final Color mutedUnreadBadge; final Color sectionCollapseIcon; final Color star; final Color subscriptionListHeaderLine; @@ -259,6 +263,7 @@ class DesignVariables extends ThemeExtension { Color? groupDmConversationIconBg, Color? loginOrDivider, Color? loginOrDividerText, + Color? mutedUnreadBadge, Color? sectionCollapseIcon, Color? star, Color? subscriptionListHeaderLine, @@ -286,6 +291,7 @@ class DesignVariables extends ThemeExtension { groupDmConversationIconBg: groupDmConversationIconBg ?? this.groupDmConversationIconBg, loginOrDivider: loginOrDivider ?? this.loginOrDivider, loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText, + mutedUnreadBadge: mutedUnreadBadge ?? this.mutedUnreadBadge, sectionCollapseIcon: sectionCollapseIcon ?? this.sectionCollapseIcon, star: star ?? this.star, subscriptionListHeaderLine: subscriptionListHeaderLine ?? this.subscriptionListHeaderLine, @@ -320,6 +326,7 @@ class DesignVariables extends ThemeExtension { groupDmConversationIconBg: Color.lerp(groupDmConversationIconBg, other.groupDmConversationIconBg, t)!, loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, t)!, loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!, + mutedUnreadBadge: Color.lerp(mutedUnreadBadge, other.mutedUnreadBadge, t)!, sectionCollapseIcon: Color.lerp(sectionCollapseIcon, other.sectionCollapseIcon, t)!, star: Color.lerp(star, other.star, t)!, subscriptionListHeaderLine: Color.lerp(subscriptionListHeaderLine, other.subscriptionListHeaderLine, t)!, diff --git a/lib/widgets/unread_count_badge.dart b/lib/widgets/unread_count_badge.dart index 5c09e156cd..7d2cdc1f27 100644 --- a/lib/widgets/unread_count_badge.dart +++ b/lib/widgets/unread_count_badge.dart @@ -63,12 +63,13 @@ class MutedUnreadBadge extends StatelessWidget { @override Widget build(BuildContext context) { + final designVariables = DesignVariables.of(context); return Container( width: 8, height: 8, margin: const EdgeInsetsDirectional.only(end: 3), decoration: BoxDecoration( - color: const HSLColor.fromAHSL(0.5, 0, 0, 0.8).toColor(), + color: designVariables.mutedUnreadBadge, shape: BoxShape.circle)); } }