fix: conversation screen top bar spacing [WPB-971] (#2208)

Co-authored-by: Michał Saleniuk <30429749+saleniuk@users.noreply.github.com>
Co-authored-by: Michał Saleniuk <saleniuk@gmail.com>

app/src/main/kotlin/com/wire/android/ui/authentication/devices/DeviceItem.kt

@@ -51,7 +51,6 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.wire.android.BuildConfig
@@ -62,12 +61,14 @@ import com.wire.android.ui.common.button.WireSecondaryButton
 import com.wire.android.ui.common.button.getMinTouchMargins
 import com.wire.android.ui.common.button.wireSecondaryButtonColors
 import com.wire.android.ui.common.shimmerPlaceholder
+import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireDimensions
 import com.wire.android.ui.theme.wireTypography
 import com.wire.android.util.extension.formatAsFingerPrint
 import com.wire.android.util.extension.formatAsString
 import com.wire.android.util.formatMediumDateTime
+import com.wire.android.util.ui.PreviewMultipleThemes
 import com.wire.android.util.ui.UIText
 
 @Composable
@@ -145,8 +146,8 @@ private fun DeviceItemContent(
                 onClick = { onRemoveDeviceClick(device) },
                 leadingIcon = leadingIcon,
                 fillMaxWidth = false,
-                minHeight = MaterialTheme.wireDimensions.buttonSmallMinSize.height,
-                minWidth = MaterialTheme.wireDimensions.buttonSmallMinSize.width,
+                minSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
+                minClickableSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
                 shape = RoundedCornerShape(size = MaterialTheme.wireDimensions.buttonSmallCornerSize),
                 contentPadding = PaddingValues(0.dp),
                 borderWidth = leadingIconBorder,
@@ -260,7 +261,8 @@ fun VerifyLabel(isVerified: Boolean, modifier: Modifier = Modifier) {
         Text(
             text = stringResource(id = if (isVerified) R.string.label_client_verified else R.string.label_client_unverified),
             color = if (isVerified) MaterialTheme.wireColorScheme.primary else MaterialTheme.wireColorScheme.secondaryText,
-            style = MaterialTheme.wireTypography.label03.copy(textAlign = TextAlign.Center),
+            style = MaterialTheme.wireTypography.label03,
+            textAlign = TextAlign.Center,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis,
             modifier = Modifier
@@ -270,10 +272,10 @@ fun VerifyLabel(isVerified: Boolean, modifier: Modifier = Modifier) {
     }
 }
 
-@Preview(showBackground = true)
+@PreviewMultipleThemes
 @Composable
 fun PreviewDeviceItem() {
-    Box(modifier = Modifier.fillMaxWidth()) {
+    WireTheme {
         DeviceItem(
             device = Device(name = UIText.DynamicString("name")),
             placeholder = false,

app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/JoinButton.kt

@@ -29,6 +29,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpSize
 import com.wire.android.R
 import com.wire.android.appLogger
 import com.wire.android.ui.common.button.WireButtonState
@@ -42,9 +43,9 @@ import com.wire.android.util.permission.rememberCallingRecordAudioBluetoothReque
 fun JoinButton(
     buttonClick: () -> Unit,
     onPermanentPermissionDecline: () -> Unit,
-    modifier: Modifier = Modifier,
-    minHeight: Dp = MaterialTheme.wireDimensions.buttonMediumMinSize.height,
-    minWidth: Dp = MaterialTheme.wireDimensions.buttonMediumMinSize.width
+    minSize: DpSize = MaterialTheme.wireDimensions.buttonMediumMinSize,
+    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
+    horizontalPadding: Dp = MaterialTheme.wireDimensions.spacing8x,
 ) {
     val audioBTPermissionCheck = AudioBluetoothPermissionCheckFlow(
         onJoinCall = buttonClick,
@@ -58,10 +59,10 @@ fun JoinButton(
         text = stringResource(R.string.calling_button_label_join_call),
         textStyle = MaterialTheme.wireTypography.button03,
         state = WireButtonState.Positive,
-        minHeight = minHeight,
-        minWidth = minWidth,
-        modifier = modifier.padding(
-            horizontal = dimensions().spacing8x
+        minSize = minSize,
+        minClickableSize = minClickableSize,
+        modifier = Modifier.padding(
+            horizontal = horizontalPadding
         ),
         contentPadding = PaddingValues(
             horizontal = dimensions().spacing8x,

app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/StartCallButton.kt

@@ -24,12 +24,14 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import com.wire.android.R
 import com.wire.android.appLogger
 import com.wire.android.model.ClickBlockParams
 import com.wire.android.ui.common.button.WireButtonState
 import com.wire.android.ui.common.button.WireSecondaryButton
+import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.theme.wireDimensions
 import com.wire.android.util.permission.rememberCallingRecordAudioBluetoothRequestFlow
 import com.wire.android.util.ui.PreviewMultipleThemes
@@ -55,8 +57,8 @@ fun StartCallButton(
         },
         state = if (isCallingEnabled) WireButtonState.Default else WireButtonState.Disabled,
         fillMaxWidth = false,
-        minHeight = MaterialTheme.wireDimensions.spacing32x,
-        minWidth = MaterialTheme.wireDimensions.spacing40x,
+        minSize = dimensions().buttonSmallMinSize,
+        minClickableSize = DpSize(dimensions().buttonSmallMinSize.width, dimensions().buttonMinClickableSize.height),
         clickBlockParams = ClickBlockParams(blockWhenSyncing = true, blockWhenConnecting = true),
         shape = RoundedCornerShape(size = MaterialTheme.wireDimensions.corner12x),
         contentPadding = PaddingValues(0.dp)

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

@@ -23,6 +23,7 @@ package com.wire.android.ui.common
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
@@ -31,6 +32,9 @@ import androidx.compose.ui.unit.dp
 import com.wire.android.R
 import com.wire.android.ui.common.button.IconAlignment
 import com.wire.android.ui.common.button.WireSecondaryButton
+import com.wire.android.ui.theme.WireTheme
+import com.wire.android.ui.theme.wireDimensions
+import com.wire.android.util.ui.PreviewMultipleThemes
 
 @Composable
 fun AddContactButton(
@@ -46,12 +50,19 @@ fun AddContactButton(
             )
         },
         leadingIconAlignment = IconAlignment.Center,
-        //TODO: remove this after the merge into the develop as they are not needed anymore
         fillMaxWidth = false,
-        minHeight = 32.dp,
-        minWidth = 40.dp,
+        minSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
+        minClickableSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
         shape = RoundedCornerShape(12.dp),
         contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp),
         modifier = modifier
     )
 }
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewAddContactButton() {
+    WireTheme {
+        AddContactButton(onIconClicked = {})
+    }
+}

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

@@ -23,6 +23,7 @@ package com.wire.android.ui.common
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
@@ -54,7 +55,9 @@ import com.wire.kalium.logic.data.user.UserAvailabilityStatus
 @Composable
 fun UserProfileAvatar(
     avatarData: UserAvatarData = UserAvatarData(),
-    size: Dp = MaterialTheme.wireDimensions.userAvatarDefaultSize,
+    size: Dp = MaterialTheme.wireDimensions.avatarDefaultSize,
+    padding: Dp = MaterialTheme.wireDimensions.avatarClickablePadding,
+    statusBorderSize: PaddingValues = PaddingValues(all = dimensions().avatarStatusBorderSize),
     modifier: Modifier = Modifier,
     clickable: Clickable? = null,
     showPlaceholderIfNoAsset: Boolean = true,
@@ -64,16 +67,15 @@ fun UserProfileAvatar(
         contentAlignment = Alignment.Center,
         modifier = modifier
             .wrapContentSize()
-            .clip(CircleShape)
-            .clickable(clickable)
-            .padding(MaterialTheme.wireDimensions.userAvatarClickablePadding)
+            .let { if (clickable != null) it.clip(CircleShape).clickable(clickable) else it }
+            .padding(padding)
     ) {
         val painter = painter(avatarData, showPlaceholderIfNoAsset, withCrossfadeAnimation)
         Image(
             painter = painter,
             contentDescription = stringResource(R.string.content_description_user_avatar),
             modifier = Modifier
-                .padding(dimensions().userAvatarStatusBorderSize)
+                .padding(statusBorderSize)
                 .background(MaterialTheme.wireColorScheme.divider, CircleShape)
                 .size(size)
                 .clip(CircleShape)

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

@@ -48,7 +48,7 @@ private fun AvailableDot(modifier: Modifier) {
         modifier = modifier
             .size(dimensions().userAvatarStatusSize)
             .background(MaterialTheme.wireColorScheme.background, CircleShape)
-            .padding(dimensions().userAvatarStatusBorderSize)
+            .padding(dimensions().avatarStatusBorderSize)
             .background(MaterialTheme.wireColorScheme.positive, CircleShape)
     )
 }
@@ -59,7 +59,7 @@ private fun BusyDot(modifier: Modifier) {
         modifier = modifier
             .size(dimensions().userAvatarStatusSize)
             .background(MaterialTheme.wireColorScheme.background, CircleShape)
-            .padding(dimensions().userAvatarStatusBorderSize)
+            .padding(dimensions().avatarStatusBorderSize)
             .background(MaterialTheme.wireColorScheme.warning, CircleShape)
             .padding(
                 top = dimensions().userAvatarBusyVerticalPadding,
@@ -77,9 +77,9 @@ private fun AwayDot(modifier: Modifier) {
         modifier = modifier
             .size(dimensions().userAvatarStatusSize)
             .background(MaterialTheme.wireColorScheme.background, CircleShape)
-            .padding(dimensions().userAvatarStatusBorderSize)
+            .padding(dimensions().avatarStatusBorderSize)
             .background(MaterialTheme.wireColorScheme.error, CircleShape)
-            .padding(dimensions().userAvatarStatusBorderSize)
+            .padding(dimensions().avatarStatusBorderSize)
             .background(MaterialTheme.wireColorScheme.background, CircleShape)
     )
 }

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

@@ -35,16 +35,20 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ButtonElevation
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.LocalMinimumInteractiveComponentEnforcement
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.layout.layout
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalViewConfiguration
@@ -59,7 +63,9 @@ import com.wire.android.ui.common.rememberClickBlockAction
 import com.wire.android.ui.theme.wireDimensions
 import com.wire.android.ui.theme.wireTypography
 import java.lang.Integer.max
+import kotlin.math.roundToInt
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun WireButton(
     onClick: () -> Unit,
@@ -73,8 +79,8 @@ fun WireButton(
     textStyle: TextStyle = if (fillMaxWidth) MaterialTheme.wireTypography.button02 else MaterialTheme.wireTypography.button03,
     state: WireButtonState = WireButtonState.Default,
     clickBlockParams: ClickBlockParams = ClickBlockParams(),
-    minHeight: Dp = MaterialTheme.wireDimensions.buttonMinSize.height,
-    minWidth: Dp = MaterialTheme.wireDimensions.buttonMinSize.width,
+    minSize: DpSize = MaterialTheme.wireDimensions.buttonMinSize,
+    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
     shape: Shape = RoundedCornerShape(MaterialTheme.wireDimensions.buttonCornerSize),
     colors: WireButtonColors = wirePrimaryButtonColors(),
     elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
@@ -99,32 +105,47 @@ fun WireButton(
         disabledContentColor = colors.rippleColor(),
     )
     val onClickWithSyncObserver = rememberClickBlockAction(clickBlockParams, onClick)
-    Button(
-        onClick = onClickWithSyncObserver,
-        modifier = modifier
-            .let { if (fillMaxWidth) it.fillMaxWidth() else it.wrapContentWidth() }
-            .sizeIn(minHeight = minHeight, minWidth = minWidth),
-        enabled = state != WireButtonState.Disabled,
-        interactionSource = interactionSource,
-        elevation = elevation,
-        shape = shape,
-        border = border,
-        colors = baseColors,
-        contentPadding = contentPadding
-    ) {
-        InnerButtonBox(
-            fillMaxWidth = fillMaxWidth,
-            loading = loading,
-            leadingIcon = leadingIcon,
-            leadingIconAlignment = leadingIconAlignment,
-            trailingIcon = trailingIcon,
-            trailingIconAlignment = trailingIconAlignment,
-            text = text,
-            textStyle = textStyle,
-            state = state,
-            colors = colors,
-            interactionSource = interactionSource
-        )
+    CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
+        Button(
+            onClick = onClickWithSyncObserver,
+            modifier = modifier
+                .let { if (fillMaxWidth) it.fillMaxWidth() else it.wrapContentWidth() }
+                .sizeIn(minHeight = minSize.height, minWidth = minSize.width)
+                .layout { measurable, constraints ->
+                    val placeable = measurable.measure(constraints)
+
+                    // Be at least as big as the minimum dimension in both dimensions
+                    val width = maxOf(placeable.width, minClickableSize.width.roundToPx())
+                    val height = maxOf(placeable.height, minClickableSize.height.roundToPx())
+
+                    layout(width, height) {
+                        val centerX = ((width - placeable.width) / 2f).roundToInt()
+                        val centerY = ((height - placeable.height) / 2f).roundToInt()
+                        placeable.place(centerX, centerY)
+                    }
+                },
+            enabled = state != WireButtonState.Disabled,
+            interactionSource = interactionSource,
+            elevation = elevation,
+            shape = shape,
+            border = border,
+            colors = baseColors,
+            contentPadding = contentPadding
+        ) {
+            InnerButtonBox(
+                fillMaxWidth = fillMaxWidth,
+                loading = loading,
+                leadingIcon = leadingIcon,
+                leadingIconAlignment = leadingIconAlignment,
+                trailingIcon = trailingIcon,
+                trailingIconAlignment = trailingIconAlignment,
+                text = text,
+                textStyle = textStyle,
+                state = state,
+                colors = colors,
+                interactionSource = interactionSource
+            )
+        }
     }
 }
 
@@ -167,9 +188,12 @@ private fun InnerButtonBox(
         ) { if (leadingIconAlignment == IconAlignment.Border) leadingItem() }
 
         Row(
-            modifier = Modifier.padding(horizontal = borderItemsMaxWidth).let {
-                if (fillMaxWidth) it.fillMaxWidth() else it.wrapContentWidth()
-            },
+            modifier = Modifier
+                .padding(horizontal = borderItemsMaxWidth)
+                .let {
+                    if (fillMaxWidth) it.fillMaxWidth()
+                    else it.wrapContentWidth()
+                },
             horizontalArrangement = Arrangement.Center,
             verticalAlignment = Alignment.CenterVertically,
         ) {