From 726ccb6633d4c8797614bcb3e197fe677967d7a8 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Fri, 2 Aug 2024 15:08:41 -0700 Subject: [PATCH] subscription_list [nfc]: Place provisional dark-theme colors pending design Like we did in a recent commit for the "Direct messages" screen, and like we did for the "Inbox" screen in c6abaf923. --- lib/widgets/subscription_list.dart | 45 +++++++++++++----------------- lib/widgets/theme.dart | 16 +++++++++++ 2 files changed, 36 insertions(+), 25 deletions(-) diff --git a/lib/widgets/subscription_list.dart b/lib/widgets/subscription_list.dart index 162243b399..557f0a25e7 100644 --- a/lib/widgets/subscription_list.dart +++ b/lib/widgets/subscription_list.dart @@ -120,14 +120,15 @@ class _NoSubscriptionsItem extends StatelessWidget { @override Widget build(BuildContext context) { + final designVariables = DesignVariables.of(context); + return SliverToBoxAdapter( child: Padding( padding: const EdgeInsets.all(10), child: Text("No channels found", textAlign: TextAlign.center, style: TextStyle( - // TODO(#95) need dark-theme color - color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(), + color: designVariables.subscriptionListHeaderText, fontSize: 18, height: (20 / 18), )))); @@ -139,34 +140,34 @@ 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) { + final designVariables = DesignVariables.of(context); + + final line = Expanded(child: Divider( + color: designVariables.subscriptionListHeaderLine)); + return SliverToBoxAdapter( child: ColoredBox( - // TODO(#95) need dark-theme color - color: Colors.white, + // TODO(design) check if this is the right variable + color: designVariables.background, child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [ const SizedBox(width: 16), - _line, + line, const SizedBox(width: 8), Padding( padding: const EdgeInsets.symmetric(vertical: 7), 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(), + color: designVariables.subscriptionListHeaderText, fontSize: 14, letterSpacing: proportionalLetterSpacing(context, 0.04, baseFontSize: 14), height: (16 / 14), ))), const SizedBox(width: 8), - _line, + line, const SizedBox(width: 16), ]))); } @@ -207,12 +208,14 @@ class SubscriptionItem extends StatelessWidget { @override Widget build(BuildContext context) { + final designVariables = DesignVariables.of(context); + final swatch = colorSwatchFor(context, subscription); final hasUnreads = (unreadCount > 0); final opacity = subscription.isMuted ? 0.55 : 1.0; return Material( - // TODO(#95) need dark-theme color - color: Colors.white, + // TODO(design) check if this is the right variable + color: designVariables.background, child: InkWell( onTap: () { Navigator.push(context, @@ -237,19 +240,11 @@ class SubscriptionItem extends StatelessWidget { child: Opacity( opacity: opacity, child: Text( - style: const TextStyle( + style: TextStyle( fontSize: 18, height: (20 / 18), - // The old, soon-to-be-outdated Figma has #262626: - // https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=171-12359&t=OgFPAdLiXz9OEzCF-0 - // That might be accidental, though. The same page has - // #222222 for the topics. The "Inbox" page in that Figma - // has #222222 for the "Private messages" header, but yeah, - // #262626 for the channel headers. Hmm...on our "Inbox", - // looks like we just took #222222 for both those headers. - // Anyway, eager to have the updated Figma to work from. - // 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: hasUnreads ? 600 : null)), maxLines: 1, diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart index 18d9831502..c155ffafe8 100644 --- a/lib/widgets/theme.dart +++ b/lib/widgets/theme.dart @@ -150,6 +150,8 @@ class DesignVariables extends ThemeExtension { loginOrDividerText: const Color(0xff575757), 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(), + subscriptionListHeaderText: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(), unreadCountBadgeTextForChannel: Colors.black.withOpacity(0.9), ); @@ -181,6 +183,10 @@ class DesignVariables extends ThemeExtension { sectionCollapseIcon: const Color(0x7fb6c8e2), // TODO(#95) unchanged in dark theme? star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(), + // TODO(#95) need proper dark-theme color (this is ad hoc) + subscriptionListHeaderLine: const HSLColor.fromAHSL(0.4, 240, 0.1, 0.75).toColor(), + // TODO(#95) need proper dark-theme color (this is ad hoc) + subscriptionListHeaderText: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.75).toColor(), unreadCountBadgeTextForChannel: Colors.white.withOpacity(0.9), ); @@ -206,6 +212,8 @@ class DesignVariables extends ThemeExtension { required this.loginOrDividerText, required this.sectionCollapseIcon, required this.star, + required this.subscriptionListHeaderLine, + required this.subscriptionListHeaderText, required this.unreadCountBadgeTextForChannel, }); @@ -244,6 +252,8 @@ class DesignVariables extends ThemeExtension { final Color loginOrDividerText; // TODO(#95) need proper dark-theme color (this is ad hoc) final Color sectionCollapseIcon; final Color star; + final Color subscriptionListHeaderLine; + final Color subscriptionListHeaderText; final Color unreadCountBadgeTextForChannel; @override @@ -269,6 +279,8 @@ class DesignVariables extends ThemeExtension { Color? loginOrDividerText, Color? sectionCollapseIcon, Color? star, + Color? subscriptionListHeaderLine, + Color? subscriptionListHeaderText, Color? unreadCountBadgeTextForChannel, }) { return DesignVariables._( @@ -293,6 +305,8 @@ class DesignVariables extends ThemeExtension { loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText, sectionCollapseIcon: sectionCollapseIcon ?? this.sectionCollapseIcon, star: star ?? this.star, + subscriptionListHeaderLine: subscriptionListHeaderLine ?? this.subscriptionListHeaderLine, + subscriptionListHeaderText: subscriptionListHeaderText ?? this.subscriptionListHeaderText, unreadCountBadgeTextForChannel: unreadCountBadgeTextForChannel ?? this.unreadCountBadgeTextForChannel, ); } @@ -324,6 +338,8 @@ class DesignVariables extends ThemeExtension { loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!, sectionCollapseIcon: Color.lerp(sectionCollapseIcon, other.sectionCollapseIcon, t)!, star: Color.lerp(star, other.star, t)!, + subscriptionListHeaderLine: Color.lerp(subscriptionListHeaderLine, other.subscriptionListHeaderLine, t)!, + subscriptionListHeaderText: Color.lerp(subscriptionListHeaderText, other.subscriptionListHeaderText, t)!, unreadCountBadgeTextForChannel: Color.lerp(unreadCountBadgeTextForChannel, other.unreadCountBadgeTextForChannel, t)!, ); }