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

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

@@ -145,8 +145,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.buttonSmallMinClickableSize,
                 shape = RoundedCornerShape(size = MaterialTheme.wireDimensions.buttonSmallCornerSize),
                 contentPadding = PaddingValues(0.dp),
                 borderWidth = leadingIconBorder,

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
@@ -41,9 +42,9 @@ import com.wire.android.util.permission.rememberCallingRecordAudioBluetoothReque
 @Composable
 fun JoinButton(
     buttonClick: () -> 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.buttonMediumMinClickableSize,
+    horizontalPadding: Dp = MaterialTheme.wireDimensions.spacing8x,
 ) {
     val audioPermissionCheck = AudioBluetoothPermissionCheckFlow { buttonClick() }
 
@@ -54,10 +55,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/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,7 @@ 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.wireDimensions
 
 @Composable
 fun AddContactButton(
@@ -46,10 +48,9 @@ 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.buttonSmallMinClickableSize,
         shape = RoundedCornerShape(12.dp),
         contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp),
         modifier = modifier

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,9 +35,13 @@ 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.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -52,6 +56,7 @@ 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.max
 import com.wire.android.model.ClickBlockParams
 import com.wire.android.ui.common.Tint
 import com.wire.android.ui.common.progress.WireCircularProgressIndicator
@@ -60,6 +65,7 @@ import com.wire.android.ui.theme.wireDimensions
 import com.wire.android.ui.theme.wireTypography
 import java.lang.Integer.max
 
+@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,46 @@ 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
-        )
+    var currentSize by remember { mutableStateOf(minSize) }
+    val currentPadding by remember {
+        derivedStateOf {
+            PaddingValues(
+                horizontal = max(0.dp, (minClickableSize.width - currentSize.width) / 2),
+                vertical = max(0.dp, (minClickableSize.height - currentSize.height) / 2),
+            )
+        }
+    }
+    val density = LocalDensity.current
+    CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
+        Button(
+            onClick = onClickWithSyncObserver,
+            modifier = modifier
+                .let { if (fillMaxWidth) it.fillMaxWidth() else it.wrapContentWidth() }
+                .padding(currentPadding)
+                .sizeIn(minHeight = minSize.height, minWidth = minSize.width)
+                .onGloballyPositioned { with(density) { currentSize = DpSize(it.size.width.toDp(), it.size.height.toDp()) } },
+            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 +187,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,
         ) {

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

@@ -41,6 +41,7 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import com.wire.android.model.ClickBlockParams
 import com.wire.android.ui.common.Icon
@@ -60,8 +61,8 @@ fun WirePrimaryButton(
     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(),
@@ -83,8 +84,8 @@ fun WirePrimaryButton(
     textStyle = textStyle,
     state = state,
     clickBlockParams = clickBlockParams,
-    minHeight = minHeight,
-    minWidth = minWidth,
+    minSize = minSize,
+    minClickableSize = minClickableSize,
     fillMaxWidth = fillMaxWidth,
     shape = shape,
     colors = colors,
@@ -132,8 +133,8 @@ fun PreviewWirePrimaryButtonSmallOnlyIcons() {
         leadingIcon = Icons.Filled.Search.Icon(),
         leadingIconAlignment = IconAlignment.Center,
         fillMaxWidth = false,
-        minHeight = 32.dp,
-        minWidth = 40.dp,
+        minSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
+        minClickableSize = MaterialTheme.wireDimensions.buttonSmallMinClickableSize,
         shape = RoundedCornerShape(12.dp),
         contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp)
     )

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

@@ -34,7 +34,7 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.res.painterResource
 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 androidx.compose.ui.unit.dp
 import com.wire.android.R
 import com.wire.android.model.ClickBlockParams
@@ -47,8 +47,8 @@ fun WirePrimaryIconButton(
     @DrawableRes iconResource: Int,
     @StringRes contentDescription: Int,
     shape: Shape = RoundedCornerShape(MaterialTheme.wireDimensions.buttonCornerSize),
-    minHeight: Dp = dimensions().spacing32x,
-    minWidth: Dp = dimensions().spacing40x,
+    minSize: DpSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
+    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonSmallMinClickableSize,
     state: WireButtonState = WireButtonState.Default,
     colors: WireButtonColors = wirePrimaryButtonColors(),
     clickBlockParams: ClickBlockParams = ClickBlockParams(),
@@ -64,8 +64,8 @@ fun WirePrimaryIconButton(
             )
         },
         shape = shape,
-        minHeight = minHeight,
-        minWidth = minWidth,
+        minSize = minSize,
+        minClickableSize = minClickableSize,
         contentPadding = PaddingValues(horizontal = 0.dp, vertical = 0.dp),
         leadingIconAlignment = IconAlignment.Center,
         state = state,
@@ -84,5 +84,5 @@ fun PreviewWirePrimaryIconButton() {
 @Preview
 @Composable
 fun PreviewWirePrimaryIconButtonRound() {
-    WirePrimaryIconButton({}, R.drawable.ic_add, 0, CircleShape, 40.dp, 40.dp)
+    WirePrimaryIconButton({}, R.drawable.ic_add, 0, CircleShape, DpSize(40.dp, 40.dp), DpSize(48.dp, 48.dp))
 }

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

@@ -40,6 +40,7 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import com.wire.android.model.ClickBlockParams
 import com.wire.android.ui.common.Icon
@@ -59,8 +60,8 @@ fun WireSecondaryButton(
     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 = wireSecondaryButtonColors(),
     elevation: ButtonElevation? = null,
@@ -82,8 +83,8 @@ fun WireSecondaryButton(
     textStyle = textStyle,
     state = state,
     clickBlockParams = clickBlockParams,
-    minHeight = minHeight,
-    minWidth = minWidth,
+    minSize = minSize,
+    minClickableSize = minClickableSize,
     fillMaxWidth = fillMaxWidth,
     shape = shape,
     colors = colors,
@@ -131,8 +132,8 @@ fun PreviewWireSecondaryButtonSmallOnlyIcons() {
         leadingIcon = Icons.Filled.Search.Icon(),
         leadingIconAlignment = IconAlignment.Center,
         fillMaxWidth = false,
-        minHeight = 32.dp,
-        minWidth = 40.dp,
+        minSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
+        minClickableSize = MaterialTheme.wireDimensions.buttonMediumMinClickableSize,
         shape = RoundedCornerShape(12.dp),
         contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp)
     )