diff --git a/lib/widgets/inbox.dart b/lib/widgets/inbox.dart index 115c7a981a6..61e218a202c 100644 --- a/lib/widgets/inbox.dart +++ b/lib/widgets/inbox.dart @@ -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 @@ -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 @@ -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, @@ -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; @@ -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)', @@ -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, @@ -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, @@ -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); @@ -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, @@ -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)); } } diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart index 9be214025c6..da83f92ff56 100644 --- a/lib/widgets/theme.dart +++ b/lib/widgets/theme.dart @@ -139,9 +139,11 @@ class DesignVariables extends ThemeExtension { 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(), loginOrDivider: const Color(0xffdedede), loginOrDividerText: const Color(0xff575757), + sectionCollapseIcon: const Color(0x7f1e2e48), star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(), unreadCountBadgeTextForChannel: Colors.black.withOpacity(0.9), ); @@ -158,9 +160,13 @@ class DesignVariables extends ThemeExtension { 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(), loginOrDivider: const Color(0xff424242), loginOrDividerText: const Color(0xffa8a8a8), + // 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), @@ -177,9 +183,11 @@ class DesignVariables extends ThemeExtension { required this.mainBackground, required this.title, required this.channelColorSwatches, + required this.atMentionMarker, required this.dmHeaderBg, required this.loginOrDivider, required this.loginOrDividerText, + required this.sectionCollapseIcon, required this.star, required this.unreadCountBadgeTextForChannel, }); @@ -208,9 +216,11 @@ class DesignVariables extends ThemeExtension { final ChannelColorSwatches channelColorSwatches; // Not named variables in Figma; taken from older Figma drafts, or elsewhere. + final Color atMentionMarker; final Color dmHeaderBg; final Color loginOrDivider; // TODO(#95) need proper dark-theme color (this is ad hoc) final Color loginOrDividerText; // TODO(#95) need proper dark-theme color (this is ad hoc) + final Color sectionCollapseIcon; final Color star; final Color unreadCountBadgeTextForChannel; @@ -226,9 +236,11 @@ class DesignVariables extends ThemeExtension { Color? mainBackground, Color? title, ChannelColorSwatches? channelColorSwatches, + Color? atMentionMarker, Color? dmHeaderBg, Color? loginOrDivider, Color? loginOrDividerText, + Color? sectionCollapseIcon, Color? star, Color? unreadCountBadgeTextForChannel, }) { @@ -243,9 +255,11 @@ class DesignVariables extends ThemeExtension { mainBackground: mainBackground ?? this.mainBackground, title: title ?? this.title, channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches, + atMentionMarker: atMentionMarker ?? this.atMentionMarker, dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg, loginOrDivider: loginOrDivider ?? this.loginOrDivider, loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText, + sectionCollapseIcon: sectionCollapseIcon ?? this.sectionCollapseIcon, star: star ?? this.star, unreadCountBadgeTextForChannel: unreadCountBadgeTextForChannel ?? this.unreadCountBadgeTextForChannel, ); @@ -267,9 +281,11 @@ class DesignVariables extends ThemeExtension { 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)!, loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, t)!, loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!, + sectionCollapseIcon: Color.lerp(sectionCollapseIcon, other.sectionCollapseIcon, t)!, star: Color.lerp(star, other.star, t)!, unreadCountBadgeTextForChannel: Color.lerp(unreadCountBadgeTextForChannel, other.unreadCountBadgeTextForChannel, t)!, );