chore: ReactionPill using WireSecondaryButton #WPB-12094 (#3648)

wireapp · Nov 28, 2024 · 4c0864c · 4c0864c
1 parent 8a60716
commit 4c0864c
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 30 deletions.
diff --git a/app/src/main/kotlin/com/wire/android/ui/home/conversations/messages/ReactionPill.kt b/app/src/main/kotlin/com/wire/android/ui/home/conversations/messages/ReactionPill.kt
@@ -18,31 +18,29 @@
 
 package com.wire.android.ui.home.conversations.messages
 
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.LocalMinimumInteractiveComponentSize
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.wire.android.ui.common.button.WireSecondaryButton
+import com.wire.android.ui.common.button.wireSecondaryButtonColors
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireTypography
 import com.wire.android.util.ui.PreviewMultipleThemes
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ReactionPill(
     emoji: String,
@@ -73,31 +71,41 @@ fun ReactionPill(
     CompositionLocalProvider(
         LocalMinimumInteractiveComponentSize provides Dp.Unspecified
     ) {
-        OutlinedButton(
+        WireSecondaryButton(
+            modifier = modifier,
             onClick = onTap,
-            border = BorderStroke(borderStrokeWidth, strokeColor),
             shape = RoundedCornerShape(borderRadius),
-            colors = ButtonDefaults.outlinedButtonColors(containerColor = backgroundColor),
-            contentPadding = PaddingValues(horizontal = dimensions().spacing8x, vertical = dimensions().spacing4x),
-            modifier = modifier.defaultMinSize(minWidth = minDimension, minHeight = minDimension)
-        ) {
-            Text(
-                emoji,
-                style = TextStyle(fontSize = reactionFontSize)
-            )
-            Spacer(modifier = Modifier.width(dimensions().spacing4x))
-            Text(
-                count.toString(),
-                style = MaterialTheme.wireTypography.label02,
-                color = textColor
-            )
-        }
+            contentPadding = PaddingValues(
+                horizontal = dimensions().spacing8x,
+                vertical = dimensions().spacing4x
+            ),
+            colors = wireSecondaryButtonColors().copy(
+                enabled = backgroundColor,
+                enabledOutline = strokeColor,
+            ),
+            fillMaxWidth = false,
+            minClickableSize = DpSize(minDimension, minDimension),
+            borderWidth = borderStrokeWidth,
+            minSize = DpSize(minDimension, minDimension),
+            leadingIcon = {
+                Text(
+                    emoji,
+                    style = TextStyle(fontSize = reactionFontSize)
+                )
+                Spacer(modifier = Modifier.width(dimensions().spacing4x))
+                Text(
+                    count.toString(),
+                    style = MaterialTheme.wireTypography.label02,
+                    color = textColor
+                )
+            },
+        )
     }
 }
 
 @PreviewMultipleThemes
 @Composable
-fun ReactionPillPreview() {
+fun ReactionPillPreview() = WireTheme {
     ReactionPill(
         emoji = "👍",
         count = 5,

diff --git a/...rc/main/kotlin/com/wire/android/ui/home/conversations/messages/item/RegularMessageItem.kt b/...rc/main/kotlin/com/wire/android/ui/home/conversations/messages/item/RegularMessageItem.kt
@@ -130,7 +130,10 @@ fun RegularMessageItem(
                         // the deletion responsibility belongs to the receiver, therefore we need to wait for the receiver
                         // timer to expire to permanently delete the message, in the meantime we show the EphemeralMessageExpiredLabel
                         if (isDeleted) {
-                            EphemeralMessageExpiredLabel(message.isMyMessage, conversationDetailsData)
+                            EphemeralMessageExpiredLabel(
+                                message.isMyMessage,
+                                conversationDetailsData
+                            )
                         }
                     } else {
                         MessageStatusLabel(messageStatus = message.header.messageStatus)
@@ -176,7 +179,10 @@ fun RegularMessageItem(
                             isInteractionAvailable = failureInteractionAvailable,
                             onRetryClick = remember(message) {
                                 {
-                                    clickActions.onFailedMessageRetryClicked(header.messageId, message.conversationId)
+                                    clickActions.onFailedMessageRetryClicked(
+                                        header.messageId,
+                                        message.conversationId
+                                    )
                                 }
                             },
                             onCancelClick = remember(message) {
@@ -191,7 +197,8 @@ fun RegularMessageItem(
         )
     }
     if (swipableMessageConfiguration is SwipableMessageConfiguration.SwipableToReply && isReplyable) {
-        val onSwipe = remember(message) { { swipableMessageConfiguration.onSwipedToReply(message) } }
+        val onSwipe =
+            remember(message) { { swipableMessageConfiguration.onSwipedToReply(message) } }
         SwipableToReplyBox(onSwipedToReply = onSwipe) {
             messageContent()
         }
@@ -235,7 +242,12 @@ fun MessageExpireLabel(messageContent: UIMessageContent?, timeLeft: String) {
         is UIMessageContent.AudioAssetMessage,
         is UIMessageContent.ImageMessage,
         is UIMessageContent.TextMessage -> {
-            StatusBox(statusText = stringResource(R.string.self_deleting_message_time_left, timeLeft))
+            StatusBox(
+                statusText = stringResource(
+                    R.string.self_deleting_message_time_left,
+                    timeLeft
+                )
+            )
         }
 
         is UIMessageContent.Deleted -> {
@@ -311,7 +323,7 @@ private fun MessageFooter(
                         isOwn = messageFooter.ownReactions.contains(reaction),
                         onTap = {
                             onReactionClicked(messageFooter.messageId, reaction)
-                        }
+                        },
                     )
                 }
         }
@@ -336,7 +348,10 @@ private fun Username(username: String, accent: Accent, modifier: Modifier = Modi
     Text(
         text = username,
         style = MaterialTheme.wireTypography.body02,
-        color = MaterialTheme.wireColorScheme.wireAccentColors.getOrDefault(accent, MaterialTheme.wireColorScheme.onBackground),
+        color = MaterialTheme.wireColorScheme.wireAccentColors.getOrDefault(
+            accent,
+            MaterialTheme.wireColorScheme.onBackground
+        ),
         modifier = modifier,
         maxLines = 1,
         overflow = TextOverflow.Ellipsis