feat: avatar border and message padding improvements [WPB-5059]

app/src/main/kotlin/com/wire/android/ui/common/UserProfileAvatar.kt

@@ -22,6 +22,7 @@ package com.wire.android.ui.common
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
@@ -68,7 +69,11 @@ fun UserProfileAvatar(
         contentAlignment = Alignment.Center,
         modifier = modifier
             .wrapContentSize()
-            .let { if (clickable != null) it.clip(CircleShape).clickable(clickable) else it }
+            .let {
+                if (clickable != null) it
+                    .clip(CircleShape)
+                    .clickable(clickable) else it
+            }
             .padding(padding)
     ) {
         val painter = painter(avatarData, showPlaceholderIfNoAsset, withCrossfadeAnimation)
@@ -79,6 +84,7 @@ fun UserProfileAvatar(
                 .padding(statusBorderSize)
                 .background(MaterialTheme.wireColorScheme.divider, CircleShape)
                 .size(size)
+                .border(width = dimensions().spacing1x, shape = CircleShape, color = MaterialTheme.wireColorScheme.outline)
                 .clip(CircleShape)
                 .testTag("User avatar"),
             contentScale = ContentScale.Crop

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

@@ -44,4 +44,23 @@ object AuthorHeaderHelper {
         }
         return showHeader
     }
+
+    internal fun shouldHaveSmallBottomPadding(index: Int, messages: List<UIMessage>, currentMessage: UIMessage): Boolean {
+        var shouldHaveSmallBottomPadding = false
+        if (index > 0) {
+            val previousIndex = index - 1
+            val previousUiMessage = messages[previousIndex]
+            if (currentMessage.header.userId == previousUiMessage.header.userId
+                && currentMessage is UIMessage.Regular
+                && previousUiMessage is UIMessage.Regular
+            ) {
+                val difference = DateTimeUtil.calculateMillisDifference(
+                    currentMessage.header.messageTime.utcISO,
+                    previousUiMessage.header.messageTime.utcISO
+                )
+                shouldHaveSmallBottomPadding = difference < AGGREGATION_TIME_WINDOW
+            }
+        }
+        return shouldHaveSmallBottomPadding
+    }
 }

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

@@ -845,7 +845,7 @@ fun MessageList(
                 reverseLayout = true,
                 // calculating bottom padding to have space for [UsersTypingIndicator]
                 contentPadding = PaddingValues(
-                    bottom = dimensions().typingIndicatorHeight - dimensions().messageItemVerticalPadding
+                    bottom = dimensions().typingIndicatorHeight - dimensions().messageItemBottomPadding
                 ),
                 modifier = Modifier
                     .fillMaxSize()
@@ -870,12 +870,23 @@ fun MessageList(
                         )
                     }
 
+                    val useSmallBottomPadding by remember {
+                        mutableStateOf(
+                            AuthorHeaderHelper.shouldHaveSmallBottomPadding(
+                                index,
+                                lazyPagingMessages.itemSnapshotList.items,
+                                message
+                            )
+                        )
+                    }
+
                     when (message) {
                         is UIMessage.Regular -> {
                             MessageItem(
                                 message = message,
                                 conversationDetailsData = conversationDetailsData,
                                 showAuthor = showAuthor,
+                                useSmallBottomPadding = useSmallBottomPadding,
                                 audioMessagesState = audioMessagesState,
                                 onAudioClick = onAudioItemClicked,
                                 onChangeAudioPosition = onChangeAudioPosition,

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

@@ -25,6 +25,7 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -36,6 +37,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -93,6 +95,7 @@ fun MessageItem(
     message: UIMessage.Regular,
     conversationDetailsData: ConversationDetailsData,
     showAuthor: Boolean = true,
+    useSmallBottomPadding: Boolean = false,
     audioMessagesState: Map<String, AudioState>,
     onLongClicked: (UIMessage.Regular) -> Unit,
     onAssetMessageClicked: (String) -> Unit,
@@ -147,21 +150,22 @@ fun MessageItem(
                     .fillMaxWidth()
                     .combinedClickable(
                         enabled = message.isAvailable,
+                        interactionSource = MutableInteractionSource(),
+                        indication = rememberRipple(bounded = true),
                         onClick = { onMessageClick(message.header.messageId) },
                         onLongClick = remember(message) { { onLongClicked(message) } }
                     )
                     .padding(
                         end = dimensions().messageItemHorizontalPadding,
-                        top = dimensions().messageItemVerticalPadding - fullAvatarOuterPadding,
-                        bottom = dimensions().messageItemVerticalPadding
+                        top = if (showAuthor) dimensions().spacing0x else dimensions().spacing4x,
+                        bottom = if (useSmallBottomPadding) dimensions().spacing2x else dimensions().messageItemBottomPadding
                     )
             ) {
                 val isProfileRedirectEnabled =
                     header.userId != null &&
                             !(header.isSenderDeleted || header.isSenderUnavailable)
 
                 Box(
-                    modifier = Modifier.width(dimensions().spacing56x),
                     contentAlignment = Alignment.TopStart
                 ) {
                     if (showAuthor) {
@@ -188,8 +192,8 @@ fun MessageItem(
                 }
                 Spacer(Modifier.width(dimensions().messageItemHorizontalPadding - fullAvatarOuterPadding))
                 Column {
-                    Spacer(modifier = Modifier.height(fullAvatarOuterPadding))
                     if (showAuthor) {
+                        Spacer(modifier = Modifier.height(dimensions().avatarClickablePadding))
                         MessageAuthorRow(messageHeader = message.header)
                     }
                     if (selfDeletionTimerState is SelfDeletionTimerHelper.SelfDeletionTimerState.Expirable) {
@@ -414,7 +418,6 @@ private fun MessageFooter(
         FlowRow(
             horizontalArrangement = Arrangement.spacedBy(dimensions().spacing4x, Alignment.Start),
             verticalArrangement = Arrangement.spacedBy(dimensions().spacing6x, Alignment.Top),
-            modifier = Modifier.padding(top = dimensions().spacing4x)
         ) {
             messageFooter.reactions.entries
                 .sortedBy { it.key }

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

@@ -106,21 +106,30 @@ fun SystemMessageItem(
             .padding(
                 end = dimensions().spacing16x,
                 top = fullAvatarOuterPadding,
-                bottom = dimensions().messageItemVerticalPadding
+                bottom = dimensions().messageItemBottomPadding
             )
             .fillMaxWidth()
     ) {
         Box(
             modifier = Modifier
-                .width(dimensions().spacing56x)
-                .padding(end = fullAvatarOuterPadding),
+                .width(
+                    dimensions().avatarDefaultSize
+                            + (dimensions().avatarStatusBorderSize * 2)
+                            + (dimensions().avatarClickablePadding * 2)
+                )
+                .padding(
+                    end = fullAvatarOuterPadding,
+                    // because for now only end call icon is large and have vertical empty space
+                    // we need to disable padding for it
+                    top = if (message.messageContent.isSmallIcon) fullAvatarOuterPadding else dimensions().spacing0x
+                ),
             contentAlignment = Alignment.TopEnd
         ) {
             if (message.messageContent.iconResId != null) {
                 Box(
                     modifier = Modifier.size(
                         width = dimensions().systemMessageIconLargeSize,
-                        height = dimensions().spacing20x
+                        height = dimensions().systemMessageIconLargeSize
                     ),
                     contentAlignment = Alignment.Center
                 ) {
@@ -140,7 +149,7 @@ fun SystemMessageItem(
                 }
             }
         }
-        Spacer(Modifier.padding(start = dimensions().messageItemHorizontalPadding - fullAvatarOuterPadding))
+        Spacer(Modifier.width(dimensions().messageItemHorizontalPadding - fullAvatarOuterPadding))
         Column(
             Modifier
                 .defaultMinSize(minHeight = dimensions().spacing20x)

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

@@ -355,13 +355,17 @@ sealed class UIMessageContent {
         }
 
         data class RenamedConversation(val author: UIText, val content: MessageContent.ConversationRenamed) :
-            SystemMessage(R.drawable.ic_edit, R.string.label_system_message_renamed_the_conversation, true, content.conversationName)
+            SystemMessage(
+                R.drawable.ic_edit, R.string.label_system_message_renamed_the_conversation,
+                false,
+                content.conversationName
+            )
 
         data class TeamMemberRemoved(val content: MessageContent.TeamMemberRemoved) :
             SystemMessage(R.drawable.ic_minus, R.string.label_system_message_team_member_left, true, content.userName)
 
         data class CryptoSessionReset(val author: UIText) :
-            SystemMessage(R.drawable.ic_info, R.string.label_system_message_session_reset, true)
+            SystemMessage(R.drawable.ic_info, R.string.label_system_message_session_reset)
 
         data class NewConversationReceiptMode(
             val receiptMode: UIText
@@ -407,8 +411,7 @@ sealed class UIMessageContent {
 
         class MLSWrongEpochWarning : SystemMessage(
             iconResId = R.drawable.ic_info,
-            stringResId = R.string.label_system_message_conversation_mls_wrong_epoch_error_handled,
-            isSmallIcon = true
+            stringResId = R.string.label_system_message_conversation_mls_wrong_epoch_error_handled
         )
 
         data class ConversationProtocolChanged(
@@ -424,14 +427,12 @@ sealed class UIMessageContent {
 
         object HistoryLost : SystemMessage(
             R.drawable.ic_info,
-            R.string.label_system_message_conversation_history_lost,
-            true
+            R.string.label_system_message_conversation_history_lost
         )
 
         object HistoryLostProtocolChanged : SystemMessage(
             R.drawable.ic_info,
-            R.string.label_system_message_conversation_history_lost_protocol_changed,
-            true
+            R.string.label_system_message_conversation_history_lost_protocol_changed
         )
 
         data class ConversationMessageCreated(

app/src/main/kotlin/com/wire/android/ui/theme/WireDimensions.kt

@@ -187,7 +187,7 @@ data class WireDimensions(
     val initiatingCallHangUpButtonSize: Dp,
     val ongoingCallLabelHeight: Dp,
     // Message item
-    val messageItemVerticalPadding: Dp,
+    val messageItemBottomPadding: Dp,
     val messageItemHorizontalPadding: Dp,
     // audio message
     val audioMessageHeight: Dp,
@@ -316,8 +316,8 @@ private val DefaultPhonePortraitWireDimensions: WireDimensions = WireDimensions(
     dividerThickness = 0.5.dp,
     defaultSearchLazyColumnHeight = 320.dp,
     messageComposerPaddingEnd = 82.dp,
-    systemMessageIconSize = 12.dp,
-    systemMessageIconLargeSize = 16.dp,
+    systemMessageIconSize = 16.dp,
+    systemMessageIconLargeSize = 18.dp,
     groupButtonHeight = 82.dp,
     defaultCallingControlsSize = 56.dp,
     defaultCallingHangUpButtonSize = 56.dp,
@@ -330,7 +330,7 @@ private val DefaultPhonePortraitWireDimensions: WireDimensions = WireDimensions(
     defaultIncomingCallSheetPeekHeight = 280.dp,
     callingIncomingUserAvatarSize = 128.dp,
     initiatingCallHangUpButtonSize = 72.dp,
-    messageItemVerticalPadding = 8.dp,
+    messageItemBottomPadding = 6.dp,
     messageItemHorizontalPadding = 12.dp,
     conversationOptionsItemMinHeight = 57.dp,
     ongoingCallLabelHeight = 28.dp,

app/src/main/res/drawable/ic_call_end.xml

@@ -19,11 +19,12 @@
   -->
 
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-        android:width="24dp"
-        android:height="24dp"
-        android:viewportWidth="24"
-        android:viewportHeight="24">
+        android:width="16dp"
+        android:height="16dp"
+        android:viewportWidth="16"
+        android:viewportHeight="16">
     <path
             android:fillColor="#fb0a06"
-            android:pathData="M12,9c-1.6,0 -3.15,0.25 -4.6,0.72v3.1c0,0.39 -0.23,0.74 -0.56,0.9 -0.98,0.49 -1.87,1.12 -2.66,1.85 -0.18,0.18 -0.43,0.28 -0.7,0.28 -0.28,0 -0.53,-0.11 -0.71,-0.29L0.29,13.08c-0.18,-0.17 -0.29,-0.42 -0.29,-0.7 0,-0.28 0.11,-0.53 0.29,-0.71C3.34,8.78 7.46,7 12,7s8.66,1.78 11.71,4.67c0.18,0.18 0.29,0.43 0.29,0.71 0,0.28 -0.11,0.53 -0.29,0.71l-2.48,2.48c-0.18,0.18 -0.43,0.29 -0.71,0.29 -0.27,0 -0.52,-0.11 -0.7,-0.28 -0.79,-0.74 -1.69,-1.36 -2.67,-1.85 -0.33,-0.16 -0.56,-0.5 -0.56,-0.9v-3.1C15.15,9.25 13.6,9 12,9z" />
+            android:fillType="evenOdd"
+            android:pathData="M0.634,10.736C-0.164,9.365 -0.228,7.81 0.551,7.077C1.757,5.962 4.859,4.999 7.993,5C11.135,5.001 14.241,5.966 15.45,7.083C16.225,7.8 16.167,9.359 15.363,10.737C15.281,10.876 15.231,10.946 15.2,10.976C15.159,11.015 15.123,11.013 14.878,10.92C14.385,10.742 13.827,10.546 12.863,10.21C12.302,10.016 11.925,9.883 11.653,9.785C11.327,9.666 11.331,9.67 11.333,9.39L11.326,8.368L11.322,7.677L10.61,7.507C9.839,7.322 8.945,7.202 8,7.202C7.059,7.201 6.172,7.322 5.384,7.51L4.669,7.68L4.669,9.38C4.669,9.459 4.668,9.496 4.663,9.536C4.654,9.604 4.641,9.636 4.624,9.651C4.594,9.68 4.531,9.711 4.334,9.783C4.015,9.895 3.565,10.056 3.122,10.216C2.17,10.547 1.613,10.742 1.136,10.914C0.788,11.043 0.822,11.055 0.634,10.736Z" />
 </vector>