Update design of message dividers (#6176)

* Update design of message dividers

* Update padding and string resolution

Author: gpunto

stream-chat-android-compose/api/stream-chat-android-compose.api

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2014-2026 Stream.io Inc. All rights reserved.
+ *
+ * Licensed under the Stream License;
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    https://github.com/GetStream/stream-chat-android/blob/main/LICENSE
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.getstream.chat.android.compose.ui.messages.list
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import io.getstream.chat.android.compose.ui.theme.ChatTheme
+import io.getstream.chat.android.compose.ui.theme.StreamTokens
+
+@Composable
+internal fun MessageDivider(text: String, modifier: Modifier = Modifier) {
+    val colors = ChatTheme.colors
+
+    Box(modifier, contentAlignment = Alignment.Center) {
+        Text(
+            text = text,
+            style = ChatTheme.typography.metadataEmphasis,
+            color = colors.chatTextSystem,
+            modifier = Modifier
+                .background(colors.backgroundCoreSurfaceSubtle, CircleShape)
+                .padding(vertical = StreamTokens.spacing2xs, horizontal = StreamTokens.spacingSm),
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun MessageDividerPreview() {
+    ChatTheme {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(StreamTokens.spacingXs),
+        ) {
+            MessageDivider("Unread messages")
+            MessageDivider("Today")
+            MessageDivider("Tue, 25 Dec")
+        }
+    }
+}

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageDivider.kt

@@ -21,8 +21,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyItemScope
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -45,6 +43,7 @@ import androidx.compose.ui.unit.dp
 import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.state.mediagallerypreview.MediaGalleryPreviewResult
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
+import io.getstream.chat.android.compose.ui.theme.StreamTokens
 import io.getstream.chat.android.models.Message
 import io.getstream.chat.android.models.Option
 import io.getstream.chat.android.models.Poll
@@ -162,27 +161,15 @@ public fun LazyItemScope.MessageItem(
  */
 @Composable
 internal fun DefaultMessageDateSeparatorContent(dateSeparator: DateSeparatorItemState) {
-    Box(
+    MessageDivider(
+        text = ChatTheme.dateFormatter.formatRelativeDate(dateSeparator.date),
         modifier = Modifier
-            .semantics(mergeDescendants = true) {}
+            .semantics(mergeDescendants = true) {
+                testTag = "Stream_MessageDateSeparator"
+            }
+            .padding(vertical = StreamTokens.spacingXs)
             .fillMaxWidth(),
-        contentAlignment = Alignment.Center,
-    ) {
-        Surface(
-            modifier = Modifier
-                .padding(vertical = 8.dp),
-            color = ChatTheme.messageDateSeparatorTheme.backgroundColor,
-            shape = RoundedCornerShape(16.dp),
-        ) {
-            Text(
-                modifier = Modifier
-                    .padding(vertical = 2.dp, horizontal = 16.dp)
-                    .testTag("Stream_MessageDateSeparator"),
-                text = ChatTheme.dateFormatter.formatRelativeDate(dateSeparator.date),
-                style = ChatTheme.messageDateSeparatorTheme.textStyle,
-            )
-        }
-    }
+    )
 }
 
 /**
@@ -192,24 +179,15 @@ internal fun DefaultMessageDateSeparatorContent(dateSeparator: DateSeparatorItem
  */
 @Composable
 internal fun DefaultMessageUnreadSeparatorContent(unreadSeparatorItemState: UnreadSeparatorItemState) {
-    Box(
+    MessageDivider(
+        text = stringResource(R.string.stream_compose_message_list_unread_separator),
         modifier = Modifier
             .semantics(mergeDescendants = true) {
                 testTag = "Stream_UnreadMessagesBadge"
             }
-            .fillMaxWidth()
-            .padding(bottom = 8.dp)
-            .background(ChatTheme.messageUnreadSeparatorTheme.backgroundColor),
-        contentAlignment = Alignment.Center,
-    ) {
-        Text(
-            modifier = Modifier.padding(vertical = 2.dp, horizontal = 16.dp),
-            text = LocalContext.current.resources.getString(
-                R.string.stream_compose_message_list_unread_separator,
-            ),
-            style = ChatTheme.messageUnreadSeparatorTheme.textStyle,
-        )
-    }
+            .padding(vertical = StreamTokens.spacingXs)
+            .fillMaxWidth(),
+    )
 }
 
 /**

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageItem.kt

@@ -198,12 +198,6 @@ private val LocalReadCountEnabled = compositionLocalOf<Boolean> {
             "Make sure to wrap all usages of Stream components in a ChatTheme.",
     )
 }
-private val LocalMessageDateSeparatorTheme = compositionLocalOf<MessageDateSeparatorTheme> {
-    error("No MessageDateSeparatorTheme provided! Make sure to wrap all usages of Stream components in a ChatTheme.")
-}
-private val LocalMessageUnreadSeparatorTheme = compositionLocalOf<MessageUnreadSeparatorTheme> {
-    error("No MessageUnreadSeparatorTheme provided! Make sure to wrap all usages of Stream components in a ChatTheme.")
-}
 private val LocalMessageComposerTheme = compositionLocalOf<MessageComposerTheme> {
     error("No MessageComposerTheme provided! Make sure to wrap all usages of Stream components in a ChatTheme.")
 }
@@ -284,13 +278,10 @@ private val LocalChatConfig = compositionLocalOf<ChatConfig> {
  * @param messageAlignmentProvider [MessageAlignmentProvider] Used to provide message alignment for the given message.
  * @param messageOptionsTheme [MessageOptionsTheme] Theme for the message option list in the selected message menu.
  * For theming the reaction option list in the same menu, use [reactionOptionsTheme].
- * @param messageOptionsUserReactionAlignment Alignment of the user reaction inside the message options.
  * @param videoThumbnailsEnabled Dictates whether video thumbnails will be displayed inside video previews.
  * @param streamCdnImageResizing Sets the strategy for resizing images hosted on Stream's CDN. Disabled by default,
  * set [StreamCdnImageResizing.imageResizingEnabled] to true if you wish to enable resizing images. Note that resizing
  * applies only to images hosted on Stream's CDN which contain the original height (oh) and width (ow) query parameters.
- * @param messageDateSeparatorTheme Theme of the message date separator.
- * @param messageUnreadSeparatorTheme Theme of the message unread separator.
  * @param messageComposerTheme Theme of the message composer.
  * @param attachmentPickerTheme Theme of the attachment picker.
  * @param streamMediaRecorder Used for recording audio messages.
@@ -349,14 +340,6 @@ public fun ChatTheme(
     videoThumbnailsEnabled: Boolean = true,
     streamCdnImageResizing: StreamCdnImageResizing = StreamCdnImageResizing.defaultStreamCdnImageResizing(),
     readCountEnabled: Boolean = true,
-    messageDateSeparatorTheme: MessageDateSeparatorTheme = MessageDateSeparatorTheme.defaultTheme(
-        typography = typography,
-        colors = colors,
-    ),
-    messageUnreadSeparatorTheme: MessageUnreadSeparatorTheme = MessageUnreadSeparatorTheme.defaultTheme(
-        typography = typography,
-        colors = colors,
-    ),
     messageComposerTheme: MessageComposerTheme = MessageComposerTheme.defaultTheme(
         isInDarkMode = isInDarkMode,
         typography = typography,
@@ -404,8 +387,6 @@ public fun ChatTheme(
         LocalMessagePreviewFormatter provides messagePreviewFormatter,
         LocalMessageTextFormatter provides messageTextFormatter,
         LocalSearchResultNameFormatter provides searchResultNameFormatter,
-        LocalMessageDateSeparatorTheme provides messageDateSeparatorTheme,
-        LocalMessageUnreadSeparatorTheme provides messageUnreadSeparatorTheme,
         LocalMessageComposerTheme provides messageComposerTheme,
         LocalAttachmentPickerTheme provides attachmentPickerTheme,
         LocalStreamImageLoader provides imageLoaderFactory.imageLoader(LocalContext.current.applicationContext),
@@ -666,22 +647,6 @@ public object ChatTheme {
         @ReadOnlyComposable
         get() = LocalReadCountEnabled.current
 
-    /**
-     * Retrieves the current [MessageDateSeparatorTheme] at the call site's position in the hierarchy.
-     */
-    public val messageDateSeparatorTheme: MessageDateSeparatorTheme
-        @Composable
-        @ReadOnlyComposable
-        get() = LocalMessageDateSeparatorTheme.current
-
-    /**
-     * Retrieves the current [MessageUnreadSeparatorTheme] at the call site's position in the hierarchy.
-     */
-    public val messageUnreadSeparatorTheme: MessageUnreadSeparatorTheme
-        @Composable
-        @ReadOnlyComposable
-        get() = LocalMessageUnreadSeparatorTheme.current
-
     /**
      * Retrieves the current [MessageComposerTheme] at the call site's position in the hierarchy.
      */

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatTheme.kt

@@ -205,6 +205,7 @@ public data class StreamColors(
     public val chatTextOutgoing: Color = textPrimary,
     public val chatTextLink: Color = accentPrimary,
     public val chatTextMention: Color = chatTextLink,
+    public val chatTextSystem: Color = textSecondary,
     public val chatTextTimestamp: Color = textTertiary,
     public val chatWaveformBar: Color = borderCoreOpacity25,
     public val chatWaveformBarPlaying: Color = accentPrimary,