message list: Use channelTopicLabelSpan for app bar title.

Author: manthansubhash01

lib/widgets/message_list.dart

@@ -529,6 +529,7 @@ class MessageListAppBarTitle extends StatelessWidget {
     ZulipStream? stream,
   }) {
     final store = PerAccountStoreWidget.of(context);
+    final designVariables = DesignVariables.of(context);
     final zulipLocalizations = ZulipLocalizations.of(context);
 
     // A null [Icon.icon] makes a blank space.
@@ -547,10 +548,21 @@ class MessageListAppBarTitle extends StatelessWidget {
       //     https://github.com/zulip/zulip-flutter/pull/219#discussion_r1281024746
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        Icon(size: 16, color: iconColor, icon),
-        const SizedBox(width: 4),
-        Flexible(child: Text(
-          stream?.name ?? zulipLocalizations.unknownChannelName)),
+        if (stream != null)
+          Flexible(child: Text.rich(
+            channelTopicLabelSpan(
+              context: context,
+              channelId: stream.streamId,
+              fontSize: 16,
+              color: designVariables.unreadCountBadgeTextForChannel,
+            )))
+        else
+          Flexible(child: Text(
+            zulipLocalizations.unknownChannelName,
+            style: TextStyle(
+              fontStyle: FontStyle.italic,
+              color: designVariables.unreadCountBadgeTextForChannel,
+            ))),
       ]);
   }
 
@@ -1719,22 +1731,29 @@ class StreamMessageRecipientHeader extends StatelessWidget {
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            Padding(
-              // Figma specifies 5px horizontal spacing around an icon that's
-              // 18x18 and includes 1px padding.  The icon SVG is flush with
-              // the edges, so make it 16x16 with 6px horizontal padding.
-              // Bottom padding added here to shift icon up to
-              // match alignment with text visually.
-              padding: const EdgeInsets.only(left: 6, right: 6, bottom: 3),
-              child: Icon(size: 16, color: iconColor,
-                // A null [Icon.icon] makes a blank space.
-                stream != null ? iconDataForStream(stream) : null)),
-            Padding(
-              padding: const EdgeInsets.symmetric(vertical: 11),
-              child: Text(streamName,
-                style: recipientHeaderTextStyle(context),
-                overflow: TextOverflow.ellipsis),
-            ),
+            if (stream != null)
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 11),
+                child: Text.rich(
+                  channelTopicLabelSpan(
+                    context: context,
+                    channelId: streamId,
+                    fontSize: 16,
+                    color: designVariables.unreadCountBadgeTextForChannel,
+                  ),
+                  style: recipientHeaderTextStyle(context),
+                  overflow: TextOverflow.ellipsis),
+              )
+            else
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 11),
+                child: Text(streamName,
+                  style: recipientHeaderTextStyle(context).copyWith(
+                    fontStyle: FontStyle.italic,
+                    color: designVariables.unreadCountBadgeTextForChannel,
+                  ),
+                  overflow: TextOverflow.ellipsis),
+              ),
             Padding(
               // Figma has 5px horizontal padding around an 8px wide icon.
               // Icon is 16px wide here so horizontal padding is 1px.

test/widgets/message_list_test.dart

@@ -119,9 +119,9 @@ void main() {
   void checkAppBarChannelTopic(String channelName, String topic) {
     final appBarFinder = find.byType(MessageListAppBarTitle);
     check(appBarFinder).findsOne();
-    check(find.descendant(of: appBarFinder, matching: find.text(channelName)))
+    check(find.descendant(of: appBarFinder, matching: find.textContaining(channelName, findRichText: true)))
       .findsOne();
-    check(find.descendant(of: appBarFinder, matching: find.text(topic)))
+    check(find.descendant(of: appBarFinder, matching: find.textContaining(topic, findRichText: true)))
       .findsOne();
   }
 
@@ -268,7 +268,8 @@ void main() {
           matching: find.byIcon(expectedIcon)));
 
         check(Theme.brightnessOf(iconElement)).equals(Brightness.light);
-        check(iconElement.widget as Icon).color.equals(Color(0xff5972fc));
+        final swatch = ChannelColorSwatch.light(color);
+        check(iconElement.widget as Icon).color.equals(swatch.iconOnPlainBackground);
       });
     }
     testChannelIconInChannelRow(ZulipIcons.globe, isWebPublic: true, inviteOnly: false);
@@ -1292,7 +1293,7 @@ void main() {
         // Stream name shows up in [AppBar] so need to avoid matching that
         return find.descendant(
           of: find.byType(MessageList),
-          matching: find.text(text)).evaluate();
+          matching: find.textContaining(text, findRichText: true)).evaluate();
       }
 
       testWidgets('show stream name in CombinedFeedNarrow', (tester) async {
@@ -1407,7 +1408,7 @@ void main() {
           subscriptions: [subscription]);
         await tester.pump();
         check(tester.widget<Icon>(find.byIcon(ZulipIcons.globe)))
-          .color.isNotNull().isSameColorAs(swatch.iconOnBarBackground);
+          .color.isNotNull().isSameColorAs(swatch.iconOnPlainBackground);
       });
 
       testWidgets('normal streams show hash icon', (tester) async {
@@ -1477,7 +1478,7 @@ void main() {
             eg.streamMessage(stream: streamBefore),
           ]);
         await tester.pump();
-        tester.widget(find.text('new stream name'));
+        tester.widget(find.textContaining('new stream name', findRichText: true));
       });
 
       testWidgets('navigates to ChannelNarrow on tapping channel in CombinedFeedNarrow', (tester) async {
@@ -1500,7 +1501,7 @@ void main() {
           foundOldest: true, messages: [message]).toJson());
         await tester.tap(find.descendant(
           of: find.byType(StreamMessageRecipientHeader),
-          matching: find.text(channel.name)));
+          matching: find.textContaining(channel.name, findRichText: true)));
         await tester.pump();
         check(pushedRoutes).single.isA<WidgetRoute>().page.isA<MessageListPage>()
           .initNarrow.equals(ChannelNarrow(channel.streamId));