[i200] add MessageDateSeparatorTheme

CHANGELOG.md

@@ -71,6 +71,7 @@
 ### ⬆️ Improved
 
 ### ✅ Added
+- Added `MessageDateSeparatorTheme` to customize the date separator component. [#5014](https://github.com/GetStream/stream-chat-android/pull/5014)
 
 ### ⚠️ Changed
 

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

@@ -1497,6 +1497,7 @@ public final class io/getstream/chat/android/compose/ui/theme/ChatTheme {
 	public final fun getDateFormatter (Landroidx/compose/runtime/Composer;I)Lcom/getstream/sdk/chat/utils/DateFormatter;
 	public final fun getDimens (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/compose/ui/theme/StreamDimens;
 	public final fun getMessageAlignmentProvider (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/compose/ui/util/MessageAlignmentProvider;
+	public final fun getMessageDateSeparatorTheme (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme;
 	public final fun getMessageOptionsUserReactionAlignment (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/common/MessageOptionsUserReactionAlignment;
 	public final fun getMessagePreviewFormatter (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/compose/ui/util/MessagePreviewFormatter;
 	public final fun getOtherMessageTheme (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/compose/ui/theme/MessageTheme;
@@ -1508,7 +1509,18 @@ public final class io/getstream/chat/android/compose/ui/theme/ChatTheme {
 }
 
 public final class io/getstream/chat/android/compose/ui/theme/ChatThemeKt {
-	public static final fun ChatTheme (ZZLio/getstream/chat/android/compose/ui/theme/StreamColors;Lio/getstream/chat/android/compose/ui/theme/StreamDimens;Lio/getstream/chat/android/compose/ui/theme/StreamTypography;Lio/getstream/chat/android/compose/ui/theme/StreamShapes;Landroidx/compose/material/ripple/RippleTheme;Ljava/util/List;Ljava/util/List;Ljava/util/List;Lio/getstream/chat/android/compose/ui/util/ReactionIconFactory;Lcom/getstream/sdk/chat/utils/DateFormatter;Lio/getstream/chat/android/compose/ui/util/ChannelNameFormatter;Lio/getstream/chat/android/compose/ui/util/MessagePreviewFormatter;Lio/getstream/chat/android/compose/ui/util/StreamCoilImageLoaderFactory;Lio/getstream/chat/android/compose/ui/util/MessageAlignmentProvider;Lio/getstream/chat/android/common/MessageOptionsUserReactionAlignment;Ljava/util/List;Lio/getstream/chat/android/compose/ui/theme/MessageTheme;Lio/getstream/chat/android/compose/ui/theme/MessageTheme;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;IIII)V
+	public static final fun ChatTheme (ZZLio/getstream/chat/android/compose/ui/theme/StreamColors;Lio/getstream/chat/android/compose/ui/theme/StreamDimens;Lio/getstream/chat/android/compose/ui/theme/StreamTypography;Lio/getstream/chat/android/compose/ui/theme/StreamShapes;Landroidx/compose/material/ripple/RippleTheme;Ljava/util/List;Ljava/util/List;Ljava/util/List;Lio/getstream/chat/android/compose/ui/util/ReactionIconFactory;Lcom/getstream/sdk/chat/utils/DateFormatter;Lio/getstream/chat/android/compose/ui/util/ChannelNameFormatter;Lio/getstream/chat/android/compose/ui/util/MessagePreviewFormatter;Lio/getstream/chat/android/compose/ui/util/StreamCoilImageLoaderFactory;Lio/getstream/chat/android/compose/ui/util/MessageAlignmentProvider;Lio/getstream/chat/android/common/MessageOptionsUserReactionAlignment;Ljava/util/List;Lio/getstream/chat/android/compose/ui/theme/MessageTheme;Lio/getstream/chat/android/compose/ui/theme/MessageTheme;Lio/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;IIII)V
+}
+
+public final class io/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme {
+	public static final field Companion Lio/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme$Companion;
+	public synthetic fun <init> (Landroidx/compose/ui/text/TextStyle;JLkotlin/jvm/internal/DefaultConstructorMarker;)V
+	public final fun getBackgroundColor-0d7_KjU ()J
+	public final fun getTextStyle ()Landroidx/compose/ui/text/TextStyle;
+}
+
+public final class io/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme$Companion {
+	public final fun defaultTheme (Lio/getstream/chat/android/compose/ui/theme/StreamTypography;Lio/getstream/chat/android/compose/ui/theme/StreamColors;Landroidx/compose/runtime/Composer;II)Lio/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme;
 }
 
 public final class io/getstream/chat/android/compose/ui/theme/MessageTheme {
@@ -1538,8 +1550,8 @@ public final class io/getstream/chat/android/compose/ui/theme/MessageTheme$Compa
 
 public final class io/getstream/chat/android/compose/ui/theme/StreamColors {
 	public static final field Companion Lio/getstream/chat/android/compose/ui/theme/StreamColors$Companion;
-	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJILkotlin/jvm/internal/DefaultConstructorMarker;)V
-	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
+	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJILkotlin/jvm/internal/DefaultConstructorMarker;)V
+	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
 	public final fun component1-0d7_KjU ()J
 	public final fun component10-0d7_KjU ()J
 	public final fun component11-0d7_KjU ()J
@@ -1559,15 +1571,16 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamColors {
 	public final fun component24-0d7_KjU ()J
 	public final fun component25-0d7_KjU ()J
 	public final fun component26-0d7_KjU ()J
+	public final fun component27-0d7_KjU ()J
 	public final fun component3-0d7_KjU ()J
 	public final fun component4-0d7_KjU ()J
 	public final fun component5-0d7_KjU ()J
 	public final fun component6-0d7_KjU ()J
 	public final fun component7-0d7_KjU ()J
 	public final fun component8-0d7_KjU ()J
 	public final fun component9-0d7_KjU ()J
-	public final fun copy-CRp9MJE (JJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
-	public static synthetic fun copy-CRp9MJE$default (Lio/getstream/chat/android/compose/ui/theme/StreamColors;JJJJJJJJJJJJJJJJJJJJJJJJJJILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
+	public final fun copy-w9eWueE (JJJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
+	public static synthetic fun copy-w9eWueE$default (Lio/getstream/chat/android/compose/ui/theme/StreamColors;JJJJJJJJJJJJJJJJJJJJJJJJJJJILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
 	public fun equals (Ljava/lang/Object;)Z
 	public final fun getAppBackground-0d7_KjU ()J
 	public final fun getBarsBackground-0d7_KjU ()J
@@ -1592,6 +1605,7 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamColors {
 	public final fun getOwnMessagesBackground-0d7_KjU ()J
 	public final fun getPrimaryAccent-0d7_KjU ()J
 	public final fun getTextHighEmphasis-0d7_KjU ()J
+	public final fun getTextHighEmphasisInverse-0d7_KjU ()J
 	public final fun getTextLowEmphasis-0d7_KjU ()J
 	public final fun getThreadSeparatorGradientEnd-0d7_KjU ()J
 	public final fun getThreadSeparatorGradientStart-0d7_KjU ()J

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

@@ -106,9 +106,10 @@ internal fun DefaultMessageDateSeparatorContent(dateSeparator: DateSeparatorStat
         Surface(
             modifier = Modifier
                 .padding(vertical = 8.dp),
-            color = ChatTheme.colors.overlayDark,
-            shape = RoundedCornerShape(16.dp)
+            color = ChatTheme.messageDateSeparatorTheme.backgroundColor,
+            shape = RoundedCornerShape(16.dp),
         ) {
+
             Text(
                 modifier = Modifier.padding(vertical = 2.dp, horizontal = 16.dp),
                 text = DateUtils.getRelativeTimeSpanString(
@@ -117,8 +118,7 @@ internal fun DefaultMessageDateSeparatorContent(dateSeparator: DateSeparatorStat
                     DateUtils.DAY_IN_MILLIS,
                     DateUtils.FORMAT_ABBREV_RELATIVE
                 ).toString(),
-                color = ChatTheme.colors.barsBackground,
-                style = ChatTheme.typography.body
+                style = ChatTheme.messageDateSeparatorTheme.textStyle,
             )
         }
     }

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

@@ -98,6 +98,9 @@ private val LocalOwnMessageTheme = compositionLocalOf<MessageTheme> {
 private val LocalOtherMessageTheme = compositionLocalOf<MessageTheme> {
     error("No OtherMessageTheme provided! 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 LocalAutoTranslationEnabled = compositionLocalOf<Boolean> {
     error(
         "No AutoTranslationEnabled Boolean provided! " +
@@ -129,6 +132,7 @@ private val LocalAutoTranslationEnabled = compositionLocalOf<Boolean> {
  * @param attachmentsPickerTabFactories Attachments picker tab factories that we provide.
  * @param ownMessageTheme Theme of the current user messages.
  * @param otherMessageTheme Theme of the other users messages.
+ * @param messageDateSeparatorTheme Theme of the message date separator.
  * @param content The content shown within the theme wrapper.
  */
 @Composable
@@ -165,6 +169,10 @@ public fun ChatTheme(
         typography = typography,
         colors = colors,
     ),
+    messageDateSeparatorTheme: MessageDateSeparatorTheme = MessageDateSeparatorTheme.defaultTheme(
+        typography = typography,
+        colors = colors,
+    ),
     content: @Composable () -> Unit,
 ) {
     LaunchedEffect(Unit) {
@@ -186,6 +194,7 @@ public fun ChatTheme(
         LocalMessagePreviewFormatter provides messagePreviewFormatter,
         LocalOwnMessageTheme provides ownMessageTheme,
         LocalOtherMessageTheme provides otherMessageTheme,
+        LocalMessageDateSeparatorTheme provides messageDateSeparatorTheme,
         LocalStreamImageLoader provides imageLoaderFactory.imageLoader(LocalContext.current.applicationContext),
         LocalMessageAlignmentProvider provides messageAlignmentProvider,
         LocalMessageOptionsUserReactionAlignment provides messageOptionsUserReactionAlignment,
@@ -330,6 +339,14 @@ public object ChatTheme {
         @ReadOnlyComposable
         get() = LocalOtherMessageTheme.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 [autoTranslationEnabled] value at the call site's position in the hierarchy.
      */

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

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2014-2023 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.theme
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+
+/**
+ * Represents message date separator theming.
+ *
+ * @param textStyle The text style for the date separator.
+ * @param backgroundColor The background color for the date separator.
+ */
+@Immutable
+public class MessageDateSeparatorTheme(
+    public val textStyle: TextStyle,
+    public val backgroundColor: Color,
+) {
+
+    public companion object {
+
+        /**
+         * Builds the default message date separator theme.
+         *
+         * @return A [MessageDateSeparatorTheme] instance holding the default theming.
+         */
+        @Composable
+        public fun defaultTheme(
+            typography: StreamTypography = StreamTypography.defaultTypography(),
+            colors: StreamColors = when (isSystemInDarkTheme()) {
+                true -> StreamColors.defaultDarkColors()
+                else -> StreamColors.defaultColors()
+            },
+        ): MessageDateSeparatorTheme {
+            return MessageDateSeparatorTheme(
+                textStyle = typography.body.copy(
+                    color = colors.textHighEmphasisInverse,
+                ),
+                backgroundColor = colors.overlayDark,
+            )
+        }
+    }
+}

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

@@ -26,6 +26,8 @@ import io.getstream.chat.android.compose.R
  * Contains all the colors in our palette. Each color is used for various things an can be changed to
  * customize the app design style.
  * @param textHighEmphasis Used for main text and active icon status.
+ * @param textHighEmphasisInverse Used for contrasting backgrounds or elements against the main text and active icon
+ * status, providing better visibility and readability.
  * @param textLowEmphasis Used for secondary text, default icon state, deleted messages text and datestamp background.
  * @param disabled Used for disabled icons and empty states.
  * @param borders Used for borders, the background of self messages, selected items, pressed state, button dividers.
@@ -55,6 +57,7 @@ import io.getstream.chat.android.compose.R
 @Immutable
 public data class StreamColors(
     public val textHighEmphasis: Color,
+    public val textHighEmphasisInverse: Color,
     public val textLowEmphasis: Color,
     public val disabled: Color,
     public val borders: Color,
@@ -100,6 +103,7 @@ public data class StreamColors(
         @Composable
         public fun defaultColors(): StreamColors = StreamColors(
             textHighEmphasis = colorResource(R.color.stream_compose_text_high_emphasis),
+            textHighEmphasisInverse = colorResource(R.color.stream_compose_text_high_emphasis_inverse),
             textLowEmphasis = colorResource(R.color.stream_compose_text_low_emphasis),
             disabled = colorResource(R.color.stream_compose_disabled),
             borders = colorResource(R.color.stream_compose_borders),
@@ -131,6 +135,7 @@ public data class StreamColors(
         @Composable
         public fun defaultDarkColors(): StreamColors = StreamColors(
             textHighEmphasis = colorResource(R.color.stream_compose_text_high_emphasis_dark),
+            textHighEmphasisInverse = colorResource(R.color.stream_compose_text_high_emphasis_inverse_dark),
             textLowEmphasis = colorResource(R.color.stream_compose_text_low_emphasis_dark),
             disabled = colorResource(R.color.stream_compose_disabled_dark),
             borders = colorResource(R.color.stream_compose_borders_dark),

stream-chat-android-compose/src/main/res/values/colors.xml

@@ -17,6 +17,7 @@
 <resources>
     <!-- Default colors -->
     <color name="stream_compose_text_high_emphasis">#000000</color>
+    <color name="stream_compose_text_high_emphasis_inverse">#FFFFFF</color>
     <color name="stream_compose_text_low_emphasis">#72767E</color>
     <color name="stream_compose_disabled">#B4B7BB</color>
     <color name="stream_compose_borders">#DBDDE1</color>
@@ -33,6 +34,7 @@
 
     <!-- Default Dark colors -->
     <color name="stream_compose_text_high_emphasis_dark">#FFFFFF</color>
+    <color name="stream_compose_text_high_emphasis_inverse_dark">#000000</color>
     <color name="stream_compose_text_low_emphasis_dark">#72767E</color>
     <color name="stream_compose_disabled_dark">#4C525C</color>
     <color name="stream_compose_borders_dark">#272A30</color>