fix: bubble feedback improvements [WPB-21718]

app/src/main/kotlin/com/wire/android/ui/home/conversations/ConversationScreen.kt

@@ -47,6 +47,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.KeyboardArrowDown
 import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -125,6 +126,7 @@ import com.wire.android.ui.common.error.CoreFailureErrorDialog
 import com.wire.android.ui.common.progress.WireCircularProgressIndicator
 import com.wire.android.ui.common.snackbar.LocalSnackbarHostState
 import com.wire.android.ui.common.snackbar.SwipeableSnackbar
+import com.wire.android.ui.common.spacers.HorizontalSpace
 import com.wire.android.ui.common.visbility.rememberVisibilityState
 import com.wire.android.ui.destinations.ConversationScreenDestination
 import com.wire.android.ui.destinations.GroupConversationDetailsScreenDestination
@@ -940,6 +942,9 @@ private fun ConversationScreen(
                         },
                         isInteractionEnabled = messageComposerViewState.interactionAvailability == InteractionAvailability.ENABLED
                     )
+
+                    HorizontalDivider(color = colorsScheme().outline)
+
                     ConversationBanner(
                         bannerMessage = bannerMessage,
                         spannedTexts = listOf(
@@ -1319,7 +1324,8 @@ fun MessageList(
                                 MessageGroupDateTime(
                                     messageDateTime = serverDate,
                                     messageDateTimeGroup = previousGroup,
-                                    now = currentTime
+                                    now = currentTime,
+                                    isBubbleUiEnabled = isBubbleUiEnabled
                                 )
                             }
                         }
@@ -1358,7 +1364,8 @@ fun MessageList(
                             MessageGroupDateTime(
                                 messageDateTime = serverDate,
                                 messageDateTimeGroup = currentGroup,
-                                now = currentTime
+                                now = currentTime,
+                                isBubbleUiEnabled = isBubbleUiEnabled
                             )
                         }
                     }
@@ -1413,7 +1420,8 @@ fun MessageList(
 private fun MessageGroupDateTime(
     now: Long,
     messageDateTime: Date,
-    messageDateTimeGroup: MessageDateTimeGroup?
+    messageDateTimeGroup: MessageDateTimeGroup?,
+    isBubbleUiEnabled: Boolean
 ) {
     val context = LocalContext.current
 
@@ -1459,25 +1467,45 @@ private fun MessageGroupDateTime(
         null -> ""
     }
 
-    Row(
-        Modifier
-            .fillMaxWidth()
-            .padding(
-                top = dimensions().spacing4x,
-                bottom = dimensions().spacing8x
+    if (isBubbleUiEnabled) {
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .padding(dimensions().spacing16x),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            HorizontalDivider(modifier = Modifier.weight(1F), color = colorsScheme().outline)
+            HorizontalSpace.x4()
+            Text(
+                text = timeString.uppercase(Locale.getDefault()),
+                maxLines = 1,
+                color = colorsScheme().onBackground,
+                style = MaterialTheme.wireTypography.label02,
             )
-            .background(color = colorsScheme().divider)
-            .padding(
-                top = dimensions().spacing6x,
-                bottom = dimensions().spacing6x,
-                start = dimensions().spacing56x
+            HorizontalSpace.x4()
+            HorizontalDivider(modifier = Modifier.weight(1F), color = colorsScheme().outline)
+        }
+    } else {
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .padding(
+                    top = dimensions().spacing4x,
+                    bottom = dimensions().spacing8x
+                )
+                .background(color = colorsScheme().divider)
+                .padding(
+                    top = dimensions().spacing6x,
+                    bottom = dimensions().spacing6x,
+                    start = dimensions().spacing56x
+                )
+        ) {
+            Text(
+                text = timeString.uppercase(Locale.getDefault()),
+                color = colorsScheme().secondaryText,
+                style = MaterialTheme.wireTypography.title03,
             )
-    ) {
-        Text(
-            text = timeString.uppercase(Locale.getDefault()),
-            color = colorsScheme().secondaryText,
-            style = MaterialTheme.wireTypography.title03,
-        )
+        }
     }
 }
 

app/src/main/kotlin/com/wire/android/ui/home/conversations/messages/QuotedMessage.kt

@@ -57,12 +57,14 @@
 import com.wire.android.model.Clickable
 import com.wire.android.model.ImageAsset
 import com.wire.android.ui.common.StatusBox
+import com.wire.android.ui.common.applyIf
 import com.wire.android.ui.common.clickable
 import com.wire.android.ui.common.colorsScheme
 import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.common.typography
 import com.wire.android.ui.home.conversations.messages.item.MessageStyle
 import com.wire.android.ui.home.conversations.messages.item.highlighted
+import com.wire.android.ui.home.conversations.messages.item.isBubble
 import com.wire.android.ui.home.conversations.model.UIQuotedMessage
 import com.wire.android.ui.markdown.MarkdownInline
 import com.wire.android.ui.markdown.MessageColors
@@ -80,7 +82,8 @@
 data class QuotedMessageStyle(
     val quotedStyle: QuotedStyle,
     val messageStyle: MessageStyle,
-    val selfAccent: Accent
+    val selfAccent: Accent,
+    val senderAccent: Accent
 )
 
 /**
@@ -201,7 +204,7 @@
         modifier = modifier,
         messageData = quotedMessageData,
         clickable = null,
-        style = QuotedMessageStyle(QuotedStyle.PREVIEW, MessageStyle.NORMAL, Accent.Unknown)
+        style = QuotedMessageStyle(QuotedStyle.PREVIEW, MessageStyle.NORMAL, Accent.Unknown, quotedMessageData.senderAccent)
     ) {
         Box(
             modifier = Modifier
@@ -244,11 +247,6 @@
         MessageStyle.BUBBLE_OTHER -> colorsScheme().otherBubble.secondary
         MessageStyle.NORMAL -> MaterialTheme.wireColorScheme.surfaceVariant
     }
-    val quoteOutlineColor = when (style.messageStyle) {
-        MessageStyle.BUBBLE_SELF -> colorsScheme().selfBubble.secondary
-        MessageStyle.BUBBLE_OTHER -> colorsScheme().otherBubble.secondary
-        MessageStyle.NORMAL -> colorsScheme().outline
-    }
 
     Row(
         horizontalArrangement = Arrangement.spacedBy(dimensions().spacing4x),
@@ -257,11 +255,13 @@
                 color = background,
                 shape = quoteOutlineShape
             )
-            .border(
-                width = 1.dp,
-                color = quoteOutlineColor,
-                shape = quoteOutlineShape
-            )
+            .applyIf(!style.messageStyle.isBubble()) {
+                border(
+                    width = 1.dp,
+                    color = MaterialTheme.wireColorScheme.outline,
+                    shape = quoteOutlineShape
+                )
+            }
             .padding(dimensions().spacing4x)
             .fillMaxWidth()
             .height(IntrinsicSize.Min)
@@ -286,7 +286,7 @@
             QuotedMessageTopRow(
                 senderName,
                 displayReplyArrow = style.quotedStyle == QuotedStyle.COMPLETE,
-                messageStyle = style.messageStyle
+                quotedMessageStyle = style
             )
             Row(horizontalArrangement = Arrangement.spacedBy(dimensions().spacing4x)) {
                 Column(
@@ -319,12 +319,16 @@
 private fun QuotedMessageTopRow(
     senderName: String?,
     displayReplyArrow: Boolean,
-    messageStyle: MessageStyle
+    quotedMessageStyle: QuotedMessageStyle
 ) {
 
+    val messageStyle = quotedMessageStyle.messageStyle
+
+    val accentScheme = colorsScheme(quotedMessageStyle.senderAccent)
+
     val authorColor = when (messageStyle) {
-        MessageStyle.BUBBLE_SELF -> colorsScheme().selfBubble.primaryOnSecondary
-        MessageStyle.BUBBLE_OTHER -> colorsScheme().otherBubble.primaryOnSecondary
+        MessageStyle.BUBBLE_SELF -> accentScheme.selfBubble.primaryOnSecondary
+        MessageStyle.BUBBLE_OTHER -> accentScheme.primary
         MessageStyle.NORMAL -> colorsScheme().onSurfaceVariant
     }
 
@@ -521,7 +525,7 @@
                 QuotedMessageTopRow(
                     senderName = senderName.asString(),
                     displayReplyArrow = true,
-                    messageStyle = style.messageStyle
+                    quotedMessageStyle = style
                 )
                 MainContentText(stringResource(R.string.notification_shared_picture))
                 QuotedMessageOriginalDate(originalDateTimeText, style)

app/src/main/kotlin/com/wire/android/ui/home/conversations/messages/item/MessageAuthorRow.kt

@@ -30,6 +30,7 @@ import com.wire.android.ui.common.LegalHoldIndicator
 import com.wire.android.ui.common.UserBadge
 import com.wire.android.ui.common.applyIf
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.common.typography
 import com.wire.android.ui.home.conversations.model.MessageHeader
 import com.wire.android.ui.theme.Accent
 import com.wire.android.ui.theme.wireColorScheme
@@ -106,7 +107,7 @@ fun MessageSmallLabel(
 ) {
     Text(
         text = text,
-        style = MaterialTheme.typography.labelSmall.copy(color = messageStyle.textColor()),
+        style = typography().subline01.copy(color = messageStyle.textColor()),
         maxLines = 1,
         modifier = modifier.alpha(messageStyle.alpha())
     )