msglist: Apply text style and padding to stream/topic recipient headers

Fixes: zulip#372

Author: sirpengi

lib/widgets/message_list.dart

@@ -554,7 +554,13 @@ class StreamMessageRecipientHeader extends StatelessWidget {
       (ThemeData.estimateBrightnessForColor(swatch.barBackground) == Brightness.dark)
         ? Colors.white
         : Colors.black;
-    final textStyle = TextStyle(color: contrastingColor);
+    final textStyle = TextStyle(
+      color: contrastingColor,
+      fontFamily: 'Source Sans 3',
+      fontSize: 16,
+      letterSpacing: 0.02 * 16,
+      height: (18 / 16),
+    ).merge(weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900));
 
     final streamWidget = (showStream)
       ? GestureDetector(
@@ -564,12 +570,16 @@ class StreamMessageRecipientHeader extends StatelessWidget {
           child: Row(children: [
             const SizedBox(width: 16),
             // TODO globe/lock icons for web-public and private streams
-            Text(stream?.name ?? message.displayRecipient, // TODO(log) if missing
-              style: textStyle),
+            Padding(
+              padding: const EdgeInsets.symmetric(vertical: 11),
+              child: Text(stream?.name ?? message.displayRecipient, // TODO(log) if missing
+                style: textStyle,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis)),
             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),
+              padding: const EdgeInsets.symmetric(horizontal: 1, vertical: 12),
               child: Icon(size: 16,
                 color: contrastingColor.withAlpha(154), // 60%
                 ZulipIcons.chevron_right)),
@@ -582,24 +592,27 @@ class StreamMessageRecipientHeader extends StatelessWidget {
           narrow: TopicNarrow.ofMessage(message))),
       child: ColoredBox(
         color: swatch.barBackground,
-        child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
-          // TODO(#282): Long stream name will break layout; find a fix.
-          streamWidget,
-          Expanded(
-            child: Padding(
-              // Web has padding 9, 3, 3, 2 here; but 5px is the chevron.
-              padding: const EdgeInsets.fromLTRB(4, 3, 3, 2),
-              child: Text(topic,
-                // TODO: Give a way to see the whole topic (maybe a
-                //   long-press interaction?)
-                overflow: TextOverflow.ellipsis,
-                style: textStyle))),
-          // TODO topic links?
-          // Then web also has edit/resolve/mute buttons. Skip those for mobile.
-          RecipientHeaderDate(message: message,
-            color: contrastingColor.withAlpha(102)), // 40%
-          const SizedBox(width: 16),
-        ])));
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.baseline,
+          textBaseline: TextBaseline.alphabetic,
+          children: [
+            // TODO(#282): Long stream name will break layout; find a fix.
+            streamWidget,
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(vertical: 11),
+                child: Text(topic,
+                  // TODO: Give a way to see the whole topic (maybe a
+                  //   long-press interaction?)
+                  style: textStyle,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis))),
+            // TODO topic links?
+            // Then web also has edit/resolve/mute buttons. Skip those for mobile.
+            RecipientHeaderDate(message: message,
+              color: contrastingColor.withAlpha(102)), // 40%
+            const SizedBox(width: 16),
+          ])));
   }
 }