theme: Added labelTime variable in MessageListTheme

Added `labelTime` variable in `MessageListTheme` that replaces the `dateSeparatorText` and `messageTimestamp` variable according to the latest design. `labelTime`: zulip#1213 (comment)
Gaurav-Kushwaha-1225 · Jan 15, 2025 · ce64ca5 · ce64ca5
1 parent 1f0c262
commit ce64ca5
Showing 1 changed file with 9 additions and 16 deletions.
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -30,9 +30,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   MessageListTheme.light() :
     this._(
       dateSeparator: Colors.black,
-      dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor(),
+      labelTime: const HSLColor.fromAHSL(0.49, 0, 0, 0).toColor(),
       dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
-      messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.2).toColor(),
       recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
       senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(),
       senderName: const HSLColor.fromAHSL(1, 0, 0, 0.2).toColor(),
@@ -56,9 +55,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   MessageListTheme.dark() :
     this._(
       dateSeparator: Colors.white.withValues(alpha: 51),
-      dateSeparatorText: const HSLColor.fromAHSL(0.5, 0, 0, 1).toColor(),
+      labelTime: const HSLColor.fromAHSL(0.5, 0, 0, 1).toColor(),
       dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 0, 0, 0.14).toColor(),
-      messageTimestamp: const HSLColor.fromAHSL(0.5, 0, 0, 1).toColor(),
       recipientHeaderText: const HSLColor.fromAHSL(0.9, 0, 0, 1).toColor(),
       senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(),
       senderName: const HSLColor.fromAHSL(0.9, 0, 0, 1).toColor(),
@@ -80,9 +78,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
 
   MessageListTheme._({
     required this.dateSeparator,
-    required this.dateSeparatorText,
+    required this.labelTime,
     required this.dmRecipientHeaderBg,
-    required this.messageTimestamp,
     required this.recipientHeaderText,
     required this.senderBotIcon,
     required this.senderName,
@@ -104,9 +101,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   }
 
   final Color dateSeparator;
-  final Color dateSeparatorText;
+  final Color labelTime;
   final Color dmRecipientHeaderBg;
-  final Color messageTimestamp;
   final Color recipientHeaderText;
   final Color senderBotIcon;
   final Color senderName;
@@ -119,9 +115,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   @override
   MessageListTheme copyWith({
     Color? dateSeparator,
-    Color? dateSeparatorText,
+    Color? labelTime,
     Color? dmRecipientHeaderBg,
-    Color? messageTimestamp,
     Color? recipientHeaderText,
     Color? senderBotIcon,
     Color? senderName,
@@ -133,9 +128,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   }) {
     return MessageListTheme._(
       dateSeparator: dateSeparator ?? this.dateSeparator,
-      dateSeparatorText: dateSeparatorText ?? this.dateSeparatorText,
+      labelTime: labelTime ?? this.labelTime,
       dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
-      messageTimestamp: messageTimestamp ?? this.messageTimestamp,
       recipientHeaderText: recipientHeaderText ?? this.recipientHeaderText,
       senderBotIcon: senderBotIcon ?? this.senderBotIcon,
       senderName: senderName ?? this.senderName,
@@ -154,9 +148,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     }
     return MessageListTheme._(
       dateSeparator: Color.lerp(dateSeparator, other.dateSeparator, t)!,
-      dateSeparatorText: Color.lerp(dateSeparatorText, other.dateSeparatorText, t)!,
+      labelTime: Color.lerp(labelTime, other.labelTime, t)!,
       dmRecipientHeaderBg: Color.lerp(streamMessageBgDefault, other.dmRecipientHeaderBg, t)!,
-      messageTimestamp: Color.lerp(messageTimestamp, other.messageTimestamp, t)!,
       recipientHeaderText: Color.lerp(recipientHeaderText, other.recipientHeaderText, t)!,
       senderBotIcon: Color.lerp(senderBotIcon, other.senderBotIcon, t)!,
       senderName: Color.lerp(senderName, other.senderName, t)!,
@@ -1220,7 +1213,7 @@ class DateText extends StatelessWidget {
     final zulipLocalizations = ZulipLocalizations.of(context);
     return Text(
       style: TextStyle(
-        color: messageListTheme.dateSeparatorText,
+        color: messageListTheme.labelTime,
         fontSize: fontSize,
         height: height,
         // This is equivalent to css `all-small-caps`, see:
@@ -1327,7 +1320,7 @@ class MessageWithPossibleSender extends StatelessWidget {
           const SizedBox(width: 4),
           Text(time,
             style: TextStyle(
-              color: messageListTheme.messageTimestamp,
+              color: messageListTheme.labelTime,
               fontSize: 16,
               height: (18 / 16),
               fontFeatures: const [FontFeature.enable('c2sc'), FontFeature.enable('smcp')],