inbox [nfc]: Introduce muted property to AtMentionMarker

Author: Khader-1

lib/widgets/inbox.dart

@@ -282,7 +282,7 @@ abstract class _HeaderItem extends StatelessWidget {
               overflow: TextOverflow.ellipsis,
               title))),
           const SizedBox(width: 12),
-          if (hasMention) const AtMentionMarker(),
+          if (hasMention) const AtMentionMarker(muted: false),
           Padding(padding: const EdgeInsetsDirectional.only(end: 16),
             child: UnreadCountBadge(
               backgroundColor: unreadCountBadgeBackgroundColor(context),
@@ -405,7 +405,7 @@ class _DmItem extends StatelessWidget {
                 overflow: TextOverflow.ellipsis,
                 title))),
             const SizedBox(width: 12),
-            if (hasMention) const AtMentionMarker(),
+            if (hasMention) const AtMentionMarker(muted: false),
             Padding(padding: const EdgeInsetsDirectional.only(end: 16),
               child: UnreadCountBadge(backgroundColor: null,
                 count: count)),
@@ -530,7 +530,7 @@ class _TopicItem extends StatelessWidget {
                 overflow: TextOverflow.ellipsis,
                 topic))),
             const SizedBox(width: 12),
-            if (hasMention) const AtMentionMarker(),
+            if (hasMention) const AtMentionMarker(muted: false),
             Padding(padding: const EdgeInsetsDirectional.only(end: 16),
               child: UnreadCountBadge(
                 backgroundColor: colorSwatchFor(context, subscription),

lib/widgets/theme.dart

@@ -116,7 +116,8 @@ 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(),
+      atMentionMarker: const HSLColor.fromAHSL(0.7, 0, 0, 0.2).toColor(),
+      mutedAtMentionMarker: const HSLColor.fromAHSL(0.35, 0, 0, 0.2).toColor(),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
       errorBannerBackground: const HSLColor.fromAHSL(1, 4, 0.33, 0.90).toColor(),
       errorBannerBorder: const HSLColor.fromAHSL(0.4, 3, 0.57, 0.33).toColor(),
@@ -145,7 +146,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: const Color(0xffffffff),
       channelColorSwatches: ChannelColorSwatches.dark,
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
-      atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
+      atMentionMarker: const HSLColor.fromAHSL(0.7, 0, 0, 1).toColor(),
+      mutedAtMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
       errorBannerBackground: const HSLColor.fromAHSL(1, 0, 0.61, 0.19).toColor(),
       errorBannerBorder: const HSLColor.fromAHSL(0.4, 3, 0.73, 0.74).toColor(),
@@ -179,6 +181,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.title,
     required this.channelColorSwatches,
     required this.atMentionMarker,
+    required this.mutedAtMentionMarker,
     required this.dmHeaderBg,
     required this.errorBannerBackground,
     required this.errorBannerBorder,
@@ -219,6 +222,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
   final Color atMentionMarker;
+  final Color mutedAtMentionMarker;
   final Color dmHeaderBg;
   final Color errorBannerBackground;
   final Color errorBannerBorder;
@@ -246,6 +250,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? title,
     ChannelColorSwatches? channelColorSwatches,
     Color? atMentionMarker,
+    Color? mutedAtMentionMarker,
     Color? dmHeaderBg,
     Color? errorBannerBackground,
     Color? errorBannerBorder,
@@ -272,6 +277,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: title ?? this.title,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
       atMentionMarker: atMentionMarker ?? this.atMentionMarker,
+      mutedAtMentionMarker: mutedAtMentionMarker ?? this.mutedAtMentionMarker,
       dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
       errorBannerBackground: errorBannerBackground ?? this.errorBannerBackground,
       errorBannerBorder: errorBannerBorder ?? this.errorBannerBorder,
@@ -305,6 +311,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: Color.lerp(title, other.title, t)!,
       channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
       atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
+      mutedAtMentionMarker: Color.lerp(mutedAtMentionMarker, other.mutedAtMentionMarker, t)!,
       dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,
       errorBannerBackground: Color.lerp(errorBannerBackground, other.errorBannerBackground, t)!,
       errorBannerBorder: Color.lerp(errorBannerBorder, other.errorBannerBorder, t)!,

lib/widgets/unread_count_badge.dart

@@ -75,7 +75,9 @@ class MutedUnreadBadge extends StatelessWidget {
 }
 
 class AtMentionMarker extends StatelessWidget {
-  const AtMentionMarker({super.key});
+  const AtMentionMarker({super.key, required this.muted});
+
+  final bool muted;
 
   @override
   Widget build(BuildContext context) {
@@ -84,6 +86,9 @@ class AtMentionMarker extends StatelessWidget {
     //   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: designVariables.atMentionMarker));
+      child: Icon(
+        ZulipIcons.at_sign,
+        size: 14,
+        color: muted ? designVariables.mutedAtMentionMarker : designVariables.atMentionMarker));
   }
 }