Change bubble background colors - also affects background of reactions.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineStateProvider.kt

@@ -112,7 +112,7 @@ internal fun aTimelineItemEvent(
         content = content,
         reactionsState = TimelineItemReactions(
             persistentListOf(
-                AggregatedReaction("👍", "1")
+                AggregatedReaction("👍", "1", isOnMyMessage = isMine)
             )
         ),
         sentTime = "12:34",

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessagesReactionButton.kt

@@ -35,23 +35,29 @@ import io.element.android.features.messages.impl.timeline.model.AggregatedReacti
 import io.element.android.features.messages.impl.timeline.model.AggregatedReactionProvider
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
 
 @Composable
 fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Modifier) {
+    val backgroundColor = if (reaction.isOnMyMessage) {
+        ElementTheme.colors.messageFromMeBackground
+    } else {
+        ElementTheme.colors.messageFromOtherBackground
+    }
     Surface(
         modifier = modifier,
-        color = MaterialTheme.colorScheme.surfaceVariant,
+        color = backgroundColor,
         border = BorderStroke(2.dp, MaterialTheme.colorScheme.background),
-        shape = RoundedCornerShape(corner = CornerSize(12.dp)),
+        shape = RoundedCornerShape(corner = CornerSize(14.dp)),
     ) {
         Row(
-            modifier = Modifier.padding(vertical = 5.dp, horizontal = 8.dp),
+            modifier = Modifier.padding(vertical = 6.dp, horizontal = 12.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
             // TODO `reaction.isHighlighted` is not used.
-            Text(text = reaction.key, fontSize = 12.sp)
+            Text(text = reaction.key, fontSize = 14.sp)
             Spacer(modifier = Modifier.width(4.dp))
             Text(text = reaction.count, color = MaterialTheme.colorScheme.secondary, fontSize = 12.sp)
         }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/factories/event/TimelineItemEventFactory.kt

@@ -89,7 +89,12 @@ class TimelineItemEventFactory @Inject constructor(
 
     private fun MatrixTimelineItem.Event.computeReactionsState(): TimelineItemReactions {
         val aggregatedReactions = event.reactions.map {
-            AggregatedReaction(key = it.key, count = it.count.toString(), isHighlighted = false)
+            AggregatedReaction(
+                key = it.key,
+                count = it.count.toString(),
+                isHighlighted = false,
+                isOnMyMessage = event.isOwn,
+            )
         }
         return TimelineItemReactions(aggregatedReactions.toImmutableList())
     }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/AggregatedReaction.kt

@@ -16,8 +16,9 @@
 
 package io.element.android.features.messages.impl.timeline.model
 
-data class AggregatedReaction(
+data class AggregatedReaction constructor(
     val key: String,
     val count: String,
+    val isOnMyMessage: Boolean,
     val isHighlighted: Boolean = false
 )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/AggregatedReactionProvider.kt

@@ -20,16 +20,24 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 
 open class AggregatedReactionProvider : PreviewParameterProvider<AggregatedReaction> {
     override val values: Sequence<AggregatedReaction>
-        get() = sequenceOf(
+        get() = sequenceOf(false, true).flatMap {
-            anAggregatedReaction(),
+            sequenceOf(
-            anAggregatedReaction().copy(count = "88"),
+                anAggregatedReaction(isOnMyMessage = it),
-            anAggregatedReaction().copy(isHighlighted = true),
+                anAggregatedReaction(isOnMyMessage = it, count = "88"),
-            anAggregatedReaction().copy(count = "88", isHighlighted = true),
+                anAggregatedReaction(isOnMyMessage = it, isHighlighted = true),
+                anAggregatedReaction(isOnMyMessage = it, count = "88", isHighlighted = true),
             )
+        }
 }
 
-fun anAggregatedReaction() = AggregatedReaction(
+fun anAggregatedReaction(
-    key = "👍",
+    key: String = "👍",
-    count = "1", // TODO Why is it a String?
+    count: String = "1", // TODO Why is it a String?
-    isHighlighted = false,
+    isOnMyMessage: Boolean = false,
+    isHighlighted: Boolean = false,
+) = AggregatedReaction(
+    key = key,
+    count = count,
+    isOnMyMessage = isOnMyMessage,
+    isHighlighted = isHighlighted,
 )