fix: invisible buttons after changes in WireButton size parameters

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
@@ -146,7 +147,7 @@ private fun DeviceItemContent(
                 leadingIcon = leadingIcon,
                 fillMaxWidth = false,
                 minSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
-                minClickableSize = MaterialTheme.wireDimensions.buttonSmallMinClickableSize,
+                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

@@ -43,7 +43,7 @@ import com.wire.android.util.permission.rememberCallingRecordAudioBluetoothReque
 fun JoinButton(
     buttonClick: () -> Unit,
     minSize: DpSize = MaterialTheme.wireDimensions.buttonMediumMinSize,
-    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonMediumMinClickableSize,
+    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
     horizontalPadding: Dp = MaterialTheme.wireDimensions.spacing8x,
 ) {
     val audioPermissionCheck = AudioBluetoothPermissionCheckFlow { buttonClick() }

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

@@ -32,7 +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(
@@ -50,9 +52,17 @@ fun AddContactButton(
         leadingIconAlignment = IconAlignment.Center,
         fillMaxWidth = false,
         minSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
-        minClickableSize = MaterialTheme.wireDimensions.buttonSmallMinClickableSize,
+        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/button/WireButton.kt

@@ -41,29 +41,29 @@ 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
 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
 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
 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
@@ -105,24 +105,25 @@ fun WireButton(
         disabledContentColor = colors.rippleColor(),
     )
     val onClickWithSyncObserver = rememberClickBlockAction(clickBlockParams, onClick)
-    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()) } },
+                .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,

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

@@ -134,7 +134,7 @@ fun PreviewWirePrimaryButtonSmallOnlyIcons() {
         leadingIconAlignment = IconAlignment.Center,
         fillMaxWidth = false,
         minSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
-        minClickableSize = MaterialTheme.wireDimensions.buttonSmallMinClickableSize,
+        minClickableSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
         shape = RoundedCornerShape(12.dp),
         contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp)
     )

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

@@ -48,7 +48,7 @@ fun WirePrimaryIconButton(
     @StringRes contentDescription: Int,
     shape: Shape = RoundedCornerShape(MaterialTheme.wireDimensions.buttonCornerSize),
     minSize: DpSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
-    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonSmallMinClickableSize,
+    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
     state: WireButtonState = WireButtonState.Default,
     colors: WireButtonColors = wirePrimaryButtonColors(),
     clickBlockParams: ClickBlockParams = ClickBlockParams(),

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

@@ -133,7 +133,7 @@ fun PreviewWireSecondaryButtonSmallOnlyIcons() {
         leadingIconAlignment = IconAlignment.Center,
         fillMaxWidth = false,
         minSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
-        minClickableSize = MaterialTheme.wireDimensions.buttonMediumMinClickableSize,
+        minClickableSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
         shape = RoundedCornerShape(12.dp),
         contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp)
     )

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

@@ -49,7 +49,7 @@ fun WireSecondaryIconButton(
     @StringRes contentDescription: Int,
     shape: Shape = RoundedCornerShape(MaterialTheme.wireDimensions.buttonCornerSize),
     minSize: DpSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
-    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonSmallMinClickableSize,
+    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
     iconSize: Dp = dimensions().wireIconButtonSize,
     state: WireButtonState = WireButtonState.Default,
     colors: WireButtonColors = wireSecondaryButtonColors(),

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

@@ -48,7 +48,7 @@ fun WireTertiaryIconButton(
     @StringRes contentDescription: Int,
     shape: Shape = RoundedCornerShape(MaterialTheme.wireDimensions.buttonCornerSize),
     minSize: DpSize = MaterialTheme.wireDimensions.buttonSmallMinSize,
-    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonSmallMinClickableSize,
+    minClickableSize: DpSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
     state: WireButtonState = WireButtonState.Default,
     colors: WireButtonColors = wireTertiaryButtonColors(),
     clickBlockParams: ClickBlockParams = ClickBlockParams(),

app/src/main/kotlin/com/wire/android/ui/debug/DebugDataOptions.kt

@@ -45,6 +45,7 @@ import com.wire.android.ui.common.button.WirePrimaryButton
 import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.home.conversationslist.common.FolderHeader
 import com.wire.android.ui.home.settings.SettingsItem
+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
@@ -289,7 +290,7 @@ private fun ManualMigrationOptions(
         },
         actions = {
             WirePrimaryButton(
-                minSize = MaterialTheme.wireDimensions.buttonMinSize,
+                minSize = MaterialTheme.wireDimensions.buttonMediumMinSize,
                 minClickableSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
                 onClick = onManualMigrationClicked,
                 text = stringResource(R.string.start_manual_migration),
@@ -319,7 +320,7 @@ private fun DevelopmentApiVersioningOptions(
         actions = {
             WirePrimaryButton(
                 minSize = MaterialTheme.wireDimensions.buttonMediumMinSize,
-                minClickableSize = MaterialTheme.wireDimensions.buttonMediumMinClickableSize,
+                minClickableSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
                 onClick = onForceLatestDevelopmentApiChange,
                 text = stringResource(R.string.debug_settings_force_api_versioning_update_button_text),
                 fillMaxWidth = false
@@ -380,7 +381,7 @@ private fun MLSOptions(
             actions = {
                 WirePrimaryButton(
                     minSize = MaterialTheme.wireDimensions.buttonMediumMinSize,
-                    minClickableSize = MaterialTheme.wireDimensions.buttonMediumMinClickableSize,
+                    minClickableSize = MaterialTheme.wireDimensions.buttonMinClickableSize,
                     onClick = restartSlowSyncForRecovery,
                     text = stringResource(R.string.restart_slowsync_for_recovery_button),
                     fillMaxWidth = false
@@ -425,7 +426,7 @@ private fun EnableEncryptedProteusStorageSwitch(
                 enabled = !isEnabled,
                 modifier = Modifier
                     .padding(end = dimensions().spacing8x)
-                    .size(dimensions().buttonSmallMinSize)
+                    .size(width = dimensions().buttonSmallMinSize.width, height = dimensions().buttonSmallMinSize.height)
             )
         }
     )
@@ -454,3 +455,13 @@ fun PreviewOtherDebugOptions() {
         onManualMigrationPressed = {}
     )
 }
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewDevelopmentApiVersioningOptions() {
+    WireTheme {
+        DevelopmentApiVersioningOptions(
+            onForceLatestDevelopmentApiChange = {}
+        )
+    }
+}

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

@@ -169,7 +169,7 @@ private fun ConversationScreenTopAppBarContent(
                         minSize = dimensions().buttonSmallMinSize,
                         minClickableSize = DpSize(
                             dimensions().buttonSmallMinSize.width,
-                            dimensions().buttonSmallMinClickableSize.height
+                            dimensions().buttonMinClickableSize.height
                         ),
                     )
                 }
@@ -237,7 +237,7 @@ private fun callControlButton(
             contentDescription = R.string.content_description_conversation_phone_icon,
             state = if (isCallingEnabled) WireButtonState.Default else WireButtonState.Disabled,
             minSize = dimensions().buttonSmallMinSize,
-            minClickableSize = DpSize(dimensions().buttonSmallMinSize.width, dimensions().buttonSmallMinClickableSize.height),
+            minClickableSize = DpSize(dimensions().buttonSmallMinSize.width, dimensions().buttonMinClickableSize.height),
         )
     }
 }