msglist: Update DmRecipientHeaders for style

sirpengi · Nov 28, 2023 · eadcf73 · eadcf73
1 parent 9932019
commit eadcf73
Showing 1 changed file with 26 additions and 38 deletions.
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -664,27 +664,38 @@ class DmRecipientHeader extends StatelessWidget {
     }
 
     return GestureDetector(
-      behavior: HitTestBehavior.translucent,
       onTap: () => Navigator.push(context,
         MessageListPage.buildRoute(context: context,
           narrow: DmNarrow.ofMessage(message, selfUserId: store.account.userId))),
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          color: Colors.white,
-          border: Border.all(color: _kDmRecipientHeaderColor)),
-        child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
-          RecipientHeaderChevronContainer(
-            color: _kDmRecipientHeaderColor,
-            child: Text(style: const TextStyle(color: Colors.white),
-              title)),
-          RecipientHeaderDate(message: message,
-            color: _kRecipientHeaderDateColor),
-        ])));
+      child: ColoredBox(
+        // TODO(#95): web uses different color in dark mode
+        // Color from `color-background-private-message-header`
+        //   in zulip:web/styles/zulip.css .
+        color: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 11),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.baseline,
+            textBaseline: TextBaseline.alphabetic,
+            children: [
+              const Padding(
+                padding: EdgeInsets.symmetric(horizontal: 6),
+                child: Icon(size: 18, ZulipIcons.user)),
+              Expanded(
+                child: Text(title,
+                  style: const TextStyle(
+                    fontFamily: 'Source Sans 3',
+                    fontSize: 16,
+                    letterSpacing: 0.02 * 16,
+                    height: (18 / 16),
+                  ).merge(weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)),
+                  overflow: TextOverflow.ellipsis)),
+              RecipientHeaderDate(message: message,
+                color: _kRecipientHeaderDateColor),
+            ]))));
   }
 }
 
-final _kDmRecipientHeaderColor = const HSLColor.fromAHSL(1, 0, 0, 0.27).toColor();
-
 class RecipientHeaderDate extends StatelessWidget {
   const RecipientHeaderDate({super.key, required this.message, required this.color});
 
@@ -714,29 +725,6 @@ final _kRecipientHeaderDateColor = const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toC
 
 final _kRecipientHeaderDateFormat = DateFormat('y-MM-dd', 'en_US'); // TODO(#278)
 
-/// A widget with the distinctive chevron-tailed shape in Zulip recipient headers.
-class RecipientHeaderChevronContainer extends StatelessWidget {
-  const RecipientHeaderChevronContainer(
-    {super.key, required this.color, required this.child});
-
-  final Color color;
-  final Widget child;
-
-  @override
-  Widget build(BuildContext context) {
-    const chevronLength = 5.0;
-    const recipientBorderShape = BeveledRectangleBorder(
-      borderRadius: BorderRadius.only(
-        topRight: Radius.elliptical(chevronLength, double.infinity),
-        bottomRight: Radius.elliptical(chevronLength, double.infinity)));
-    return Container(
-      decoration: ShapeDecoration(color: color, shape: recipientBorderShape),
-      padding: const EdgeInsets.only(right: chevronLength),
-      child: Padding(
-        padding: const EdgeInsets.fromLTRB(16, 4, 6, 3), child: child));
-  }
-}
-
 /// A Zulip message, showing the sender's name and avatar if specified.
 class MessageWithPossibleSender extends StatelessWidget {
   const MessageWithPossibleSender({super.key, required this.item});