From bf6546725fb4f0821c2185c32a1dcdfd6ce7b4a1 Mon Sep 17 00:00:00 2001 From: AbronStudio Date: Sat, 9 Aug 2025 10:29:40 +0330 Subject: [PATCH] Refactor: Introduce SquareButton and SquareElevatedButton components for consistent button styling This commit adds two new composable functions, SquareButton and SquareElevatedButton, to standardize button styling across the application. The new components encapsulate the button shape and styling, promoting code reuse and cleaner UI implementation. - Created SquareButton for standard button functionality with customizable onClick and content. - Created SquareElevatedButton for elevated button functionality with similar customization options. - Replaced instances of Button and ElevatedButton in various screens with the new SquareButton and SquareElevatedButton components for consistency and improved maintainability. --- .../composables/generic/SquareButton.kt | 51 +++++++++++++++++++ .../screens/chat/drawer/ChannelSideDrawer.kt | 12 ++--- .../chooseplatform/ChoosePlatformScreen.kt | 13 ++--- .../screens/login/LoginGreetingScreen.kt | 25 +++------ .../chat/revolt/screens/login/LoginScreen.kt | 11 +--- .../screens/register/OnboardingScreen.kt | 10 +--- .../screens/register/RegisterDetailsScreen.kt | 11 +--- .../screens/register/RegisterVerifyScreen.kt | 17 ++----- 8 files changed, 73 insertions(+), 77 deletions(-) create mode 100644 app/src/main/java/chat/revolt/composables/generic/SquareButton.kt diff --git a/app/src/main/java/chat/revolt/composables/generic/SquareButton.kt b/app/src/main/java/chat/revolt/composables/generic/SquareButton.kt new file mode 100644 index 00000000..4c8d4a30 --- /dev/null +++ b/app/src/main/java/chat/revolt/composables/generic/SquareButton.kt @@ -0,0 +1,51 @@ +package chat.revolt.composables.generic + +import androidx.compose.foundation.shape.CornerSize +import androidx.compose.material3.Button +import androidx.compose.material3.ElevatedButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp + +@Composable +fun SquareButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, + enabled: Boolean = true, + content: @Composable () -> Unit +) { + Button( + onClick = onClick, + modifier = modifier, + enabled = enabled, + shape = MaterialTheme.shapes.small.copy( + topStart = CornerSize(8.dp), + topEnd = CornerSize(8.dp), + bottomStart = CornerSize(8.dp), + bottomEnd = CornerSize(8.dp) + ) + ) { + content() + } +} + +@Composable +fun SquareElevatedButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, + content: @Composable () -> Unit +) { + ElevatedButton( + onClick = onClick, + modifier = modifier, + shape = MaterialTheme.shapes.small.copy( + topStart = CornerSize(8.dp), + topEnd = CornerSize(8.dp), + bottomStart = CornerSize(8.dp), + bottomEnd = CornerSize(8.dp) + ) + ) { + content() + } +} \ No newline at end of file diff --git a/app/src/main/java/chat/revolt/composables/screens/chat/drawer/ChannelSideDrawer.kt b/app/src/main/java/chat/revolt/composables/screens/chat/drawer/ChannelSideDrawer.kt index 02b44f11..c948cb5e 100644 --- a/app/src/main/java/chat/revolt/composables/screens/chat/drawer/ChannelSideDrawer.kt +++ b/app/src/main/java/chat/revolt/composables/screens/chat/drawer/ChannelSideDrawer.kt @@ -36,7 +36,6 @@ import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CornerSize import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.Button import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi import androidx.compose.material3.FloatingActionButton @@ -70,8 +69,8 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow -import androidx.compose.ui.unit.dp import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import chat.revolt.R import chat.revolt.api.RevoltAPI @@ -90,6 +89,7 @@ import chat.revolt.api.settings.SyncedSettings import chat.revolt.composables.generic.GroupIcon import chat.revolt.composables.generic.IconPlaceholder import chat.revolt.composables.generic.RemoteImage +import chat.revolt.composables.generic.SquareButton import chat.revolt.composables.generic.UserAvatar import chat.revolt.composables.generic.presenceFromStatus import chat.revolt.composables.screens.chat.ChannelIcon @@ -738,16 +738,10 @@ private fun ColumnScope.DirectMessagesChannelListRenderer( textAlign = TextAlign.Center ) Spacer(Modifier.height(16.dp)) - Button( + SquareButton( onClick = { onDestinationChanged(ChatRouterDestination.Friends) }, - shape = MaterialTheme.shapes.small.copy( - topStart = CornerSize(8.dp), - topEnd = CornerSize(8.dp), - bottomStart = CornerSize(8.dp), - bottomEnd = CornerSize(8.dp) - ) ) { Text(text = stringResource(R.string.new_conversation)) } diff --git a/app/src/main/java/chat/revolt/screens/chooseplatform/ChoosePlatformScreen.kt b/app/src/main/java/chat/revolt/screens/chooseplatform/ChoosePlatformScreen.kt index 8bd08a39..79e57f43 100644 --- a/app/src/main/java/chat/revolt/screens/chooseplatform/ChoosePlatformScreen.kt +++ b/app/src/main/java/chat/revolt/screens/chooseplatform/ChoosePlatformScreen.kt @@ -13,9 +13,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawingPadding import androidx.compose.foundation.layout.size import androidx.compose.foundation.rememberScrollState -import androidx.compose.foundation.shape.CornerSize import androidx.compose.foundation.verticalScroll -import androidx.compose.material3.Button import androidx.compose.material3.Card import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme @@ -37,6 +35,7 @@ import androidx.navigation.NavController import chat.revolt.R import chat.revolt.api.ApplicationPlatform import chat.revolt.api.RevoltAPI +import chat.revolt.composables.generic.SquareButton @Composable fun ChoosePlatformScreen(navController: NavController) { @@ -191,7 +190,7 @@ fun ChoosePlatformScreen(navController: NavController) { .fillMaxWidth() .padding(vertical = 8.dp) ) - Button( + SquareButton( onClick = { if(apiUrlValue.value.isNotEmpty()){ when(apiUrlValue.value){ @@ -201,7 +200,7 @@ fun ChoosePlatformScreen(navController: NavController) { ApplicationPlatform.REVOLT.baseUrl -> RevoltAPI.setPlatform( ApplicationPlatform.REVOLT ) - else -> return@Button + else -> return@SquareButton } } navController.navigate("login/greeting") @@ -210,12 +209,6 @@ fun ChoosePlatformScreen(navController: NavController) { .padding(top = 32.dp, bottom = 16.dp) .fillMaxWidth() .testTag("confirm_platform_button"), - shape = MaterialTheme.shapes.small.copy( - topStart = CornerSize(8.dp), - topEnd = CornerSize(8.dp), - bottomStart = CornerSize(8.dp), - bottomEnd = CornerSize(8.dp) - ) ) { Text(text = stringResource(R.string.confirm)) } diff --git a/app/src/main/java/chat/revolt/screens/login/LoginGreetingScreen.kt b/app/src/main/java/chat/revolt/screens/login/LoginGreetingScreen.kt index 7b81e693..c538463a 100644 --- a/app/src/main/java/chat/revolt/screens/login/LoginGreetingScreen.kt +++ b/app/src/main/java/chat/revolt/screens/login/LoginGreetingScreen.kt @@ -14,9 +14,6 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawingPadding -import androidx.compose.foundation.shape.CornerSize -import androidx.compose.material3.Button -import androidx.compose.material3.ElevatedButton import androidx.compose.material3.LocalContentColor import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text @@ -36,12 +33,14 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp -import androidx.compose.ui.tooling.preview.Preview import androidx.navigation.NavController -import chat.revolt.R import androidx.navigation.compose.rememberNavController +import chat.revolt.R +import chat.revolt.composables.generic.SquareButton +import chat.revolt.composables.generic.SquareElevatedButton @OptIn(ExperimentalFoundationApi::class) @Composable @@ -129,34 +128,22 @@ fun LoginGreetingScreen(navController: NavController) { Spacer(modifier = Modifier.height(32.dp)) - Button( + SquareButton( onClick = { navController.navigate("login/login") }, modifier = Modifier .fillMaxWidth() .testTag("view_login_page_button"), - shape = MaterialTheme.shapes.small.copy( - topStart = CornerSize(8.dp), - topEnd = CornerSize(8.dp), - bottomStart = CornerSize(8.dp), - bottomEnd = CornerSize(8.dp) - ) ) { Text(text = stringResource(R.string.login)) } Spacer(modifier = Modifier.height(5.dp)) - ElevatedButton( + SquareElevatedButton( onClick = { navController.navigate("register/details") }, modifier = Modifier .fillMaxWidth() .testTag("view_signup_page_button"), - shape = MaterialTheme.shapes.small.copy( - topStart = CornerSize(8.dp), - topEnd = CornerSize(8.dp), - bottomStart = CornerSize(8.dp), - bottomEnd = CornerSize(8.dp) - ) ) { Text(text = stringResource(R.string.signup)) } diff --git a/app/src/main/java/chat/revolt/screens/login/LoginScreen.kt b/app/src/main/java/chat/revolt/screens/login/LoginScreen.kt index 1d7aedc9..180e4af1 100644 --- a/app/src/main/java/chat/revolt/screens/login/LoginScreen.kt +++ b/app/src/main/java/chat/revolt/screens/login/LoginScreen.kt @@ -13,10 +13,8 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.shape.CornerSize import androidx.compose.foundation.text.input.TextObfuscationMode import androidx.compose.foundation.text.input.rememberTextFieldState -import androidx.compose.material3.Button import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon @@ -58,6 +56,7 @@ import chat.revolt.api.routes.account.EmailPasswordAssessment import chat.revolt.api.routes.account.negotiateAuthentication import chat.revolt.api.routes.onboard.needsOnboarding import chat.revolt.composables.generic.FormTextField +import chat.revolt.composables.generic.SquareButton import chat.revolt.composables.generic.Weblink import chat.revolt.persistence.KVStorage import chat.revolt.ui.theme.FragmentMono @@ -337,19 +336,13 @@ fun LoginScreen(navController: NavController, viewModel: LoginViewModel = hiltVi ) Spacer(modifier = Modifier.height(32.dp)) - Button( + SquareButton( onClick = { viewModel.doLogin() }, modifier = Modifier .fillMaxWidth() .testTag("confirm_platform_button"), - shape = MaterialTheme.shapes.small.copy( - topStart = CornerSize(8.dp), - topEnd = CornerSize(8.dp), - bottomStart = CornerSize(8.dp), - bottomEnd = CornerSize(8.dp) - ) ) { Text(text = stringResource(R.string.login)) } diff --git a/app/src/main/java/chat/revolt/screens/register/OnboardingScreen.kt b/app/src/main/java/chat/revolt/screens/register/OnboardingScreen.kt index 719454b8..d21decf6 100644 --- a/app/src/main/java/chat/revolt/screens/register/OnboardingScreen.kt +++ b/app/src/main/java/chat/revolt/screens/register/OnboardingScreen.kt @@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.imeNestedScroll import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.safeDrawingPadding import androidx.compose.foundation.layout.size -import androidx.compose.material3.Button import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -35,6 +34,7 @@ import chat.revolt.R import chat.revolt.api.routes.onboard.OnboardingCompletionBody import chat.revolt.api.routes.onboard.completeOnboarding import chat.revolt.composables.generic.FormTextField +import chat.revolt.composables.generic.SquareButton import chat.revolt.persistence.KVStorage import kotlinx.coroutines.launch @@ -168,7 +168,7 @@ fun OnboardingScreen(navController: NavController, onOnboardingComplete: () -> U label = stringResource(R.string.onboarding_username) ) Spacer(modifier = Modifier.height(32.dp)) - Button( + SquareButton( modifier = Modifier.fillMaxWidth(), onClick = { coroutineScope.launch { @@ -176,12 +176,6 @@ fun OnboardingScreen(navController: NavController, onOnboardingComplete: () -> U } }, enabled = username.value.isNotBlank(), - shape = MaterialTheme.shapes.small.copy( - topStart = androidx.compose.foundation.shape.CornerSize(8.dp), - topEnd = androidx.compose.foundation.shape.CornerSize(8.dp), - bottomStart = androidx.compose.foundation.shape.CornerSize(8.dp), - bottomEnd = androidx.compose.foundation.shape.CornerSize(8.dp) - ) ) { Text(text = stringResource(R.string.complete_registration)) } diff --git a/app/src/main/java/chat/revolt/screens/register/RegisterDetailsScreen.kt b/app/src/main/java/chat/revolt/screens/register/RegisterDetailsScreen.kt index eb3e00dc..31483187 100644 --- a/app/src/main/java/chat/revolt/screens/register/RegisterDetailsScreen.kt +++ b/app/src/main/java/chat/revolt/screens/register/RegisterDetailsScreen.kt @@ -13,8 +13,6 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.shape.CornerSize -import androidx.compose.material3.Button import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon @@ -52,6 +50,7 @@ import chat.revolt.api.routes.account.RegistrationBody import chat.revolt.api.routes.account.register import chat.revolt.api.routes.misc.getRootRoute import chat.revolt.composables.generic.FormTextField +import chat.revolt.composables.generic.SquareButton import com.hcaptcha.sdk.HCaptcha import com.hcaptcha.sdk.HCaptchaConfig import com.hcaptcha.sdk.HCaptchaSize @@ -240,7 +239,7 @@ fun RegisterDetailsScreen( val context = LocalContext.current - Button( + SquareButton( onClick = { viewModel.initCaptcha(context) { viewModel.doRegistration(navController) @@ -249,12 +248,6 @@ fun RegisterDetailsScreen( modifier = Modifier .fillMaxWidth() .testTag("setup_continue_button"), - shape = MaterialTheme.shapes.small.copy( - topStart = CornerSize(8.dp), - topEnd = CornerSize(8.dp), - bottomStart = CornerSize(8.dp), - bottomEnd = CornerSize(8.dp) - ) ) { Text(text = stringResource(R.string.continue_)) } diff --git a/app/src/main/java/chat/revolt/screens/register/RegisterVerifyScreen.kt b/app/src/main/java/chat/revolt/screens/register/RegisterVerifyScreen.kt index ddc731d7..55f74d26 100644 --- a/app/src/main/java/chat/revolt/screens/register/RegisterVerifyScreen.kt +++ b/app/src/main/java/chat/revolt/screens/register/RegisterVerifyScreen.kt @@ -4,7 +4,6 @@ import android.content.Intent import androidx.activity.compose.rememberLauncherForActivityResult import androidx.activity.result.contract.ActivityResultContracts import androidx.compose.foundation.Image -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -13,9 +12,6 @@ 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.safeDrawingPadding -import androidx.compose.foundation.shape.CornerSize -import androidx.compose.material3.Button import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon @@ -31,12 +27,13 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp -import androidx.compose.ui.tooling.preview.Preview -import androidx.navigation.compose.rememberNavController import androidx.navigation.NavController +import androidx.navigation.compose.rememberNavController import chat.revolt.R +import chat.revolt.composables.generic.SquareButton @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -119,7 +116,7 @@ fun RegisterVerifyScreen(navController: NavController, email: String) { Spacer(modifier = Modifier.height(32.dp)) - Button( + SquareButton( modifier = Modifier .fillMaxWidth(), onClick = { @@ -127,12 +124,6 @@ fun RegisterVerifyScreen(navController: NavController, email: String) { intent.addCategory(Intent.CATEGORY_APP_EMAIL) intentLauncher.launch(intent) }, - shape = MaterialTheme.shapes.small.copy( - topStart = CornerSize(8.dp), - topEnd = CornerSize(8.dp), - bottomStart = CornerSize(8.dp), - bottomEnd = CornerSize(8.dp) - ) ) { Text(text = stringResource(R.string.open_mail_app)) }