msglist: Update chevron design in StreamMessageRecipientHeader

Switch from colored background with chevron shaped border
to inline chevron icon.

Author: sirpengi

lib/widgets/message_list.dart

@@ -552,13 +552,15 @@ class StreamMessageRecipientHeader extends StatelessWidget {
     final store = PerAccountStoreWidget.of(context);
 
     final topic = message.subject;
-
     final subscription = store.subscriptions[message.streamId];
     final streamColor = Color(subscription?.color ?? 0x00c2c2c2);
     final contrastingColor =
       ThemeData.estimateBrightnessForColor(streamColor) == Brightness.dark
         ? Colors.white
         : Colors.black;
+    final textStyle = TextStyle(
+      color: contrastingColor,
+    );
 
     final Widget streamWidget;
     if (!showStream) {
@@ -571,11 +573,18 @@ class StreamMessageRecipientHeader extends StatelessWidget {
         onTap: () => Navigator.push(context,
           MessageListPage.buildRoute(context: context,
             narrow: StreamNarrow(message.streamId))),
-        child: RecipientHeaderChevronContainer(
-          color: streamColor,
+        child: Row(children: [
+          const SizedBox(width: 16),
           // TODO globe/lock icons for web-public and private streams
-          child: Text(streamName,
-            style: TextStyle(color: contrastingColor))));
+          Text(streamName, style: textStyle),
+          Padding(
+            // Figma has 5px horizontal padding around an 8px wide icon.
+            // Icon is 16px wide here so horizontal padding is 1px.
+            padding: const EdgeInsets.symmetric(horizontal: 1),
+            child: Icon(size: 16,
+              color: contrastingColor.withOpacity(0.6),
+              ZulipIcons.chevron_right)),
+        ]));
     }
 
     return GestureDetector(
@@ -594,8 +603,8 @@ class StreamMessageRecipientHeader extends StatelessWidget {
               child: Text(topic,
                 // TODO: Give a way to see the whole topic (maybe a
                 //   long-press interaction?)
-                overflow: TextOverflow.ellipsis,
-                style: const TextStyle(fontWeight: FontWeight.w600)))),
+                style: textStyle,
+                overflow: TextOverflow.ellipsis))),
           // TODO topic links?
           // Then web also has edit/resolve/mute buttons. Skip those for mobile.
           RecipientHeaderDate(message: message,