[Compound] Implement components (Button) (#1021)

* Create `CompoundButton`

* Some fixes

* Lint fixes

* Start replacing existing `Button` usages

* Replace button usages

* Remove previous Button composable

* Rename `CompoundButton` to `Button`

* Fix emphasized button being displayed as Text

* Fix cancel button in `WaitListView`

* Update screenshots

* Add shorthand functions for `OutlinedButton` and `TextButton`

* Add changelog

* Fix wrong size used for emphasized button in dialog

* Create a private `ButtonInternal` implementation with the shared logic.

- Make `ButtonStyle` private.
- Rename `title` to `text`.
- Rename `buttonStyle` and `buttonSize` to just `style` and `size`.

* Fix several warnings and lint issues.

* Update screenshots

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

features/analytics/impl/src/main/kotlin/io/element/android/features/analytics/impl/AnalyticsOptInView.kt

@@ -54,6 +54,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.text.buildAnnotatedStringWithStyledPart
 import io.element.android.libraries.designsystem.theme.components.Button
+import io.element.android.libraries.designsystem.theme.components.ButtonSize
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TextButton
@@ -188,17 +189,16 @@ private fun AnalyticsOptInFooter(
         modifier = modifier,
     ) {
         Button(
+            text = stringResource(id = CommonStrings.action_ok),
             onClick = onTermsAccepted,
             modifier = Modifier.fillMaxWidth(),
-        ) {
-            Text(text = stringResource(id = CommonStrings.action_ok))
-        }
+        )
         TextButton(
+            text = stringResource(id = CommonStrings.action_not_now),
+            buttonSize = ButtonSize.Medium,
             onClick = onTermsDeclined,
             modifier = Modifier.fillMaxWidth(),
-        ) {
-            Text(text = stringResource(id = CommonStrings.action_not_now))
-        }
+        )
     }
 }
 

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/addpeople/AddPeopleView.kt

@@ -28,7 +28,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
-import androidx.compose.ui.unit.dp
 import io.element.android.features.createroom.impl.R
 import io.element.android.features.createroom.impl.components.UserListView
 import io.element.android.features.createroom.impl.userlist.UserListEvents
@@ -36,7 +35,6 @@ import io.element.android.features.createroom.impl.userlist.UserListState
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.aliasButtonText
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -103,16 +101,11 @@ fun AddPeopleViewTopBar(
         },
         navigationIcon = { BackButton(onClick = onBackPressed) },
         actions = {
+            val textActionResId = if (hasSelectedUsers) CommonStrings.action_next else CommonStrings.action_skip
             TextButton(
-                modifier = Modifier.padding(horizontal = 8.dp),
+                text = stringResource(id = textActionResId),
                 onClick = onNextPressed,
-            ) {
-                val textActionResId = if (hasSelectedUsers) CommonStrings.action_next else CommonStrings.action_skip
-                Text(
-                    text = stringResource(id = textActionResId),
-                    style = ElementTheme.typography.aliasButtonText,
-                )
-            }
+            )
         }
     )
 }

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/configureroom/ConfigureRoomView.kt

@@ -57,7 +57,6 @@ import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.aliasButtonText
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -195,15 +194,10 @@ fun ConfigureRoomToolbar(
         navigationIcon = { BackButton(onClick = onBackPressed) },
         actions = {
             TextButton(
-                modifier = Modifier.padding(horizontal = 8.dp),
+                text = stringResource(CommonStrings.action_create),
                 enabled = isNextActionEnabled,
                 onClick = onNextPressed,
-            ) {
-                Text(
-                    text = stringResource(CommonStrings.action_create),
-                    style = ElementTheme.typography.aliasButtonText,
-                )
-            }
+            )
         }
     )
 }

features/ftue/impl/src/main/kotlin/io/element/android/features/ftue/impl/welcome/WelcomeView.kt

@@ -97,9 +97,11 @@ fun WelcomeView(
             }
         },
         footer = {
-            Button(modifier = Modifier.fillMaxWidth(), onClick = onContinueClicked) {
-                Text(text = stringResource(CommonStrings.action_continue))
-            }
+            Button(
+                text = stringResource(CommonStrings.action_continue),
+                modifier = Modifier.fillMaxWidth(),
+                onClick = onContinueClicked
+            )
             Spacer(modifier = Modifier.height(32.dp))
         }
     )

features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/InviteListView.kt

@@ -86,7 +86,6 @@ fun InviteListView(
             title = stringResource(titleResource),
             submitText = stringResource(CommonStrings.action_decline),
             cancelText = stringResource(CommonStrings.action_cancel),
-            emphasizeSubmitButton = true,
             onSubmitClicked = { state.eventSink(InviteListEvents.ConfirmDeclineInvite) },
             onDismiss = { state.eventSink(InviteListEvents.CancelDeclineInvite) }
         )

features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/components/InviteSummaryRow.kt

@@ -20,7 +20,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -49,8 +48,8 @@ import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAto
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.aliasButtonText
 import io.element.android.libraries.designsystem.theme.components.Button
+import io.element.android.libraries.designsystem.theme.components.ButtonSize
 import io.element.android.libraries.designsystem.theme.components.OutlinedButton
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
@@ -133,23 +132,19 @@ internal fun DefaultInviteSummaryRow(
             // CTAs
             Row(Modifier.padding(top = 12.dp)) {
                 OutlinedButton(
-                    content = { Text(stringResource(CommonStrings.action_decline), style = ElementTheme.typography.aliasButtonText) },
+                    text = stringResource(CommonStrings.action_decline),
                     onClick = onDeclineClicked,
-                    modifier = Modifier
-                        .weight(1f)
-                        .heightIn(max = 36.dp),
-                    contentPadding = PaddingValues(horizontal = 24.dp, vertical = 0.dp),
+                    modifier = Modifier.weight(1f),
+                    buttonSize = ButtonSize.Medium,
                 )
 
                 Spacer(modifier = Modifier.width(12.dp))
 
                 Button(
-                    content = { Text(stringResource(CommonStrings.action_accept), style = ElementTheme.typography.aliasButtonText) },
+                    text = stringResource(CommonStrings.action_accept),
                     onClick = onAcceptClicked,
-                    modifier = Modifier
-                        .weight(1f)
-                        .heightIn(max = 36.dp),
-                    contentPadding = PaddingValues(horizontal = 24.dp, vertical = 0.dp),
+                    modifier = Modifier.weight(1f),
+                    buttonSize = ButtonSize.Medium,
                 )
             }
         }

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/dialogs/SlidingSyncNotSupportedDialog.kt

@@ -35,7 +35,6 @@ internal fun SlidingSyncNotSupportedDialog(
         submitText = stringResource(CommonStrings.action_learn_more),
         onSubmitClicked = onLearnMoreClicked,
         onCancelClicked = onDismiss,
-        emphasizeSubmitButton = true,
         title = stringResource(CommonStrings.dialog_title_error),
         content = stringResource(R.string.screen_change_server_error_no_sliding_sync_message),
     )

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/confirmaccountprovider/ConfirmAccountProviderView.kt

@@ -36,11 +36,10 @@ import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
-import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.TextButton
 import io.element.android.libraries.matrix.api.auth.OidcDetails
 import io.element.android.libraries.testtags.TestTags
@@ -87,7 +86,7 @@ fun ConfirmAccountProviderView(
         },
         footer = {
             ButtonColumnMolecule {
-                ButtonWithProgress(
+                Button(
                     text = stringResource(id = R.string.screen_account_provider_continue),
                     showProgress = isLoading,
                     onClick = { eventSink.invoke(ConfirmAccountProviderEvents.Continue) },
@@ -97,14 +96,13 @@ fun ConfirmAccountProviderView(
                         .testTag(TestTags.loginContinue)
                 )
                 TextButton(
+                    text = stringResource(id = R.string.screen_account_provider_change),
                     onClick = onChange,
                     enabled = true,
                     modifier = Modifier
                         .fillMaxWidth()
                         .testTag(TestTags.loginChangeServer)
-                ) {
-                    Text(text = stringResource(id = R.string.screen_account_provider_change))
-                }
+                )
             }
         }
     ) {

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/loginpassword/LoginPasswordView.kt

@@ -60,11 +60,11 @@ import io.element.android.features.login.impl.error.loginError
 import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.components.button.BackButton
-import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.components.form.textFieldState
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
@@ -141,7 +141,7 @@ fun LoginPasswordView(
             // Flexible spacing to keep the submit button at the bottom
             Spacer(modifier = Modifier.weight(1f))
             // Submit
-            ButtonWithProgress(
+            Button(
                 text = stringResource(R.string.screen_login_submit),
                 showProgress = isLoading,
                 onClick = ::submit,

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/waitlistscreen/WaitListView.kt

@@ -29,7 +29,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.BiasAbsoluteAlignment
@@ -52,7 +51,6 @@ import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.aliasButtonText
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -141,18 +139,10 @@ private fun WaitListContent(
             .padding(horizontal = 16.dp, vertical = 16.dp)
     ) {
         if (state.loginAction !is Async.Success) {
-            TextButton(
-                onClick = onCancelClicked,
-                colors = ButtonDefaults.buttonColors(
-                    containerColor = Color.White,
-                    contentColor = Color.Black,
-                    disabledContainerColor = Color.White,
-                    disabledContentColor = Color.Black,
-                ),
-            ) {
-                Text(
+            ElementTheme(darkTheme = true) {
+                TextButton(
                     text = stringResource(CommonStrings.action_cancel),
-                    style = ElementTheme.typography.aliasButtonText,
+                    onClick = onCancelClicked,
                 )
             }
         }
@@ -208,22 +198,14 @@ private fun WaitListContent(
             }
         }
         if (state.loginAction is Async.Success) {
-            Button(
-                onClick = { state.eventSink.invoke(WaitListEvents.Continue) },
-                colors = ButtonDefaults.buttonColors(
-                    containerColor = Color.White,
-                    contentColor = Color.Black,
-                    disabledContainerColor = Color.White,
-                    disabledContentColor = Color.Black,
-                ),
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .align(Alignment.BottomCenter)
-                    .padding(bottom = 8.dp)
-            ) {
-                Text(
+            ElementTheme(darkTheme = true) {
+                Button(
                     text = stringResource(id = CommonStrings.action_continue),
-                    style = ElementTheme.typography.aliasButtonText,
+                    onClick = { state.eventSink.invoke(WaitListEvents.Continue) },
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .align(Alignment.BottomCenter)
+                        .padding(bottom = 8.dp),
                 )
             }
         }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt

@@ -220,7 +220,6 @@ private fun ReinviteDialog(state: MessagesState) {
             content = stringResource(id = R.string.screen_room_invite_again_alert_message),
             cancelText = stringResource(id = CommonStrings.action_cancel),
             submitText = stringResource(id = CommonStrings.action_invite),
-            emphasizeSubmitButton = true,
             onSubmitClicked = { state.eventSink(MessagesEvents.InviteDialogDismissed(InviteDialogAction.Invite)) },
             onDismiss = { state.eventSink(MessagesEvents.InviteDialogDismissed(InviteDialogAction.Cancel)) }
         )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewView.kt

@@ -39,7 +39,6 @@ import io.element.android.libraries.designsystem.components.ProgressDialogType
 import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.theme.components.Scaffold
-import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TextButton
 import io.element.android.libraries.ui.strings.CommonStrings
 
@@ -155,12 +154,8 @@ private fun AttachmentsPreviewBottomActions(
     ButtonRowMolecule(
         modifier = modifier,
     ) {
-        TextButton(onClick = onCancelClicked) {
-            Text(stringResource(id = CommonStrings.action_cancel))
-        }
-        TextButton(onClick = onSendClicked) {
-            Text(stringResource(id = CommonStrings.action_send))
-        }
+        TextButton(stringResource(id = CommonStrings.action_cancel), onClick = onCancelClicked)
+        TextButton(stringResource(id = CommonStrings.action_send), onClick = onSendClicked)
     }
 }
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/forward/ForwardMessagesView.kt

@@ -123,11 +123,10 @@ fun ForwardMessagesView(
                 },
                 actions = {
                     TextButton(
+                        text = stringResource(CommonStrings.action_send),
                         enabled = state.selectedRooms.isNotEmpty(),
                         onClick = { state.eventSink(ForwardMessagesEvents.ForwardEvent) }
-                    ) {
-                        Text(text = stringResource(CommonStrings.action_send))
-                    }
+                    )
                 }
             )
         }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/report/ReportMessageView.kt

@@ -44,11 +44,11 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.components.button.BackButton
-import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
+import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -150,7 +150,7 @@ fun ReportMessageView(
 
             Spacer(modifier = Modifier.height(24.dp))
 
-            ButtonWithProgress(
+            Button(
                 text = stringResource(CommonStrings.action_send),
                 enabled = state.reason.isNotBlank() && !isSending,
                 showProgress = isSending,

features/onboarding/impl/src/main/kotlin/io/element/android/features/onboarding/impl/OnBoardingView.kt

@@ -23,10 +23,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 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.icons.Icons
 import androidx.compose.material.icons.filled.QrCode
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment.Companion.CenterHorizontally
 import androidx.compose.ui.BiasAlignment
@@ -42,9 +40,8 @@ import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMo
 import io.element.android.libraries.designsystem.atomic.pages.OnBoardingPage
 import io.element.android.libraries.designsystem.preview.DayNightPreviews
 import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.theme.aliasButtonText
 import io.element.android.libraries.designsystem.theme.components.Button
-import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.IconSource
 import io.element.android.libraries.designsystem.theme.components.OutlinedButton
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.testtags.TestTags
@@ -144,46 +141,27 @@ private fun OnBoardingButtons(
         }
         if (state.canLoginWithQrCode) {
             Button(
+                text = stringResource(id = R.string.screen_onboarding_sign_in_with_qr_code),
+                leadingIcon = IconSource.Vector(Icons.Default.QrCode),
                 onClick = onSignInWithQrCode,
-                enabled = true,
-                modifier = Modifier
-                    .fillMaxWidth()
-            ) {
-                Icon(
-                    imageVector = Icons.Default.QrCode, contentDescription = null,
-                    tint = MaterialTheme.colorScheme.onPrimary
-                )
-                Spacer(Modifier.width(14.dp))
-                Text(
-                    text = stringResource(id = R.string.screen_onboarding_sign_in_with_qr_code),
-                    style = ElementTheme.typography.aliasButtonText,
-                )
-            }
+                modifier = Modifier.fillMaxWidth()
+            )
         }
         Button(
+            text = stringResource(id = signInButtonStringRes),
             onClick = onSignIn,
-            enabled = true,
             modifier = Modifier
                 .fillMaxWidth()
                 .testTag(TestTags.onBoardingSignIn)
-        ) {
-            Text(
-                text = stringResource(id = signInButtonStringRes),
-                style = ElementTheme.typography.aliasButtonText,
-            )
-        }
+        )
         if (state.canCreateAccount) {
             OutlinedButton(
+                text = stringResource(id = R.string.screen_onboarding_sign_up),
                 onClick = onCreateAccount,
                 enabled = true,
                 modifier = Modifier
                     .fillMaxWidth()
-            ) {
-                Text(
-                    text = stringResource(id = R.string.screen_onboarding_sign_up),
-                    style = ElementTheme.typography.aliasButtonText,
-                )
-            }
+            )
         }
         Spacer(modifier = Modifier.height(16.dp))
     }

features/rageshake/impl/src/main/kotlin/io/element/android/features/rageshake/impl/bugreport/BugReportView.kt

@@ -48,8 +48,8 @@ import io.element.android.libraries.designsystem.components.preferences.Preferen
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.debugPlaceholderBackground
-import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
+import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.utils.LogCompositions
@@ -149,14 +149,13 @@ fun BugReportView(
             // Submit
             PreferenceRow {
                 Button(
+                    text = stringResource(id = CommonStrings.action_send),
                     onClick = { eventSink(BugReportEvents.SendBugReport) },
                     enabled = state.submitEnabled,
                     modifier = Modifier
                         .fillMaxWidth()
                         .padding(top = 24.dp, bottom = 16.dp)
-                ) {
-                    Text(text = stringResource(id = CommonStrings.action_send))
-                }
+                )
             }
         }
 

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/edit/RoomDetailsEditView.kt

@@ -68,7 +68,6 @@ import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.aliasButtonText
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Scaffold
@@ -115,17 +114,13 @@ fun RoomDetailsEditView(
                 navigationIcon = { BackButton(onClick = onBackPressed) },
                 actions = {
                     TextButton(
+                        text = stringResource(CommonStrings.action_save),
                         enabled = state.saveButtonEnabled,
                         onClick = {
                             focusManager.clearFocus()
                             state.eventSink(RoomDetailsEditEvents.Save)
                         },
-                    ) {
-                        Text(
-                            text = stringResource(CommonStrings.action_save),
-                            style = ElementTheme.typography.aliasButtonText,
-                        )
-                    }
+                    )
                 }
             )
         },

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/invite/RoomInviteMembersView.kt

@@ -128,10 +128,8 @@ fun RoomInviteMembersTopBar(
         navigationIcon = { BackButton(onClick = onBackPressed) },
         actions = {
             TextButton(
+                text = stringResource(CommonStrings.action_send),
                 onClick = onSendPressed,
-                content = {
-                    Text(stringResource(CommonStrings.action_send))
-                },
                 enabled = canSend,
             )
         }

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/RoomMemberListView.kt

@@ -45,7 +45,6 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.aliasButtonText
 import io.element.android.libraries.designsystem.theme.aliasScreenTitle
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Scaffold
@@ -212,14 +211,9 @@ private fun RoomMemberListTopBar(
         actions = {
             if (canInvite) {
                 TextButton(
-                    modifier = Modifier.padding(horizontal = 8.dp),
+                    text = stringResource(CommonStrings.action_invite),
                     onClick = onInvitePressed,
-                ) {
-                    Text(
-                        text = stringResource(CommonStrings.action_invite),
-                        style = ElementTheme.typography.aliasButtonText,
-                    )
-                }
+                )
             }
         }
     )

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RequestVerificationHeader.kt

@@ -19,7 +19,6 @@ package io.element.android.features.roomlist.impl.components
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -37,7 +36,7 @@ import androidx.compose.ui.unit.dp
 import io.element.android.features.roomlist.impl.R
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.aliasButtonText
+import io.element.android.libraries.designsystem.theme.components.ButtonSize
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Surface
@@ -83,15 +82,11 @@ internal fun RequestVerificationHeader(
                 )
                 Spacer(modifier = Modifier.height(12.dp))
                 Button(
+                    text = stringResource(CommonStrings.action_continue),
+                    buttonSize = ButtonSize.Medium,
                     modifier = Modifier.fillMaxWidth(),
-                    contentPadding = PaddingValues(horizontal = 20.dp, vertical = 7.dp),
                     onClick = onVerifyClicked,
-                ) {
-                    Text(
-                        stringResource(CommonStrings.action_continue),
-                        style = ElementTheme.typography.aliasButtonText
-                    )
-                }
+                )
             }
         }
     }

features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/VerifySelfSessionView.kt

@@ -27,7 +27,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
@@ -44,15 +43,16 @@ import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
-import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.aliasButtonText
+import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.TextButton
 import io.element.android.libraries.matrix.api.verification.VerificationEmoji
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
+import kotlinx.coroutines.sync.Mutex
 import io.element.android.features.verifysession.impl.VerifySelfSessionState.VerificationStep as FlowStep
 
 @Composable
@@ -75,6 +75,7 @@ fun VerifySelfSessionView(
     val buttonsVisible by remember(verificationFlowStep) {
         derivedStateOf { verificationFlowStep != FlowStep.AwaitingOtherDeviceResponse && verificationFlowStep != FlowStep.Completed }
     }
+    Mutex()
     HeaderFooterPage(
         modifier = modifier,
         header = {
@@ -219,23 +220,21 @@ internal fun BottomMenu(screenState: VerifySelfSessionState, goBack: () -> Unit)
     ButtonColumnMolecule(
         modifier = Modifier.padding(bottom = 20.dp)
     ) {
-        ButtonWithProgress(
-            text = positiveButtonTitle?.let { stringResource(it) },
-            showProgress = isVerifying,
-            modifier = Modifier.fillMaxWidth(),
-            onClick = { positiveButtonEvent?.let { eventSink(it) } }
-        )
+        if (positiveButtonTitle != null) {
+            Button(
+                text = stringResource(positiveButtonTitle),
+                showProgress = isVerifying,
+                modifier = Modifier.fillMaxWidth(),
+                onClick = { positiveButtonEvent?.let { eventSink(it) } }
+            )
+        }
         if (negativeButtonTitle != null) {
             TextButton(
+                text = stringResource(negativeButtonTitle),
                 modifier = Modifier.fillMaxWidth(),
                 onClick = negativeButtonCallback,
                 enabled = negativeButtonEnabled,
-            ) {
-                Text(
-                    text = stringResource(negativeButtonTitle),
-                    style = ElementTheme.typography.aliasButtonText,
-                )
-            }
+            )
         }
     }
 }