Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: standardized button styling system in the app #410

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ import org.openedx.core.R
import org.openedx.core.presentation.global.appupgrade.AppUpgradeRequiredScreen
import org.openedx.core.ui.BackBtn
import org.openedx.core.ui.HandleUIMessage
import org.openedx.core.ui.OpenEdXButton
import org.openedx.core.ui.OpenEdXPrimaryButton
import org.openedx.core.ui.displayCutoutForLandscape
import org.openedx.core.ui.statusBarsInset
import org.openedx.core.ui.theme.OpenEdXTheme
Expand Down Expand Up @@ -186,7 +186,7 @@ private fun RestorePasswordScreen(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
painter = painterResource(id = org.openedx.core.R.drawable.core_top_header),
painter = painterResource(id = R.drawable.core_top_header),
contentScale = ContentScale.FillBounds,
contentDescription = null
)
Expand Down Expand Up @@ -297,7 +297,7 @@ private fun RestorePasswordScreen(
CircularProgressIndicator(color = MaterialTheme.appColors.primary)
}
} else {
OpenEdXButton(
OpenEdXPrimaryButton(
modifier = buttonWidth.testTag("btn_reset_password"),
text = stringResource(id = authR.string.auth_reset_password),
onClick = {
Expand Down Expand Up @@ -350,7 +350,7 @@ private fun RestorePasswordScreen(
color = MaterialTheme.appColors.textPrimary
)
Spacer(Modifier.height(48.dp))
OpenEdXButton(
OpenEdXPrimaryButton(
modifier = buttonWidth,
text = stringResource(id = R.string.core_sign_in),
onClick = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ import org.openedx.core.extension.TextConverter
import org.openedx.core.ui.BackBtn
import org.openedx.core.ui.HandleUIMessage
import org.openedx.core.ui.HyperlinkText
import org.openedx.core.ui.OpenEdXButton
import org.openedx.core.ui.OpenEdXPrimaryButton
import org.openedx.core.ui.displayCutoutForLandscape
import org.openedx.core.ui.noRippleClickable
import org.openedx.core.ui.theme.OpenEdXTheme
Expand Down Expand Up @@ -292,11 +292,9 @@ private fun AuthForm(
if (state.showProgress) {
CircularProgressIndicator(color = MaterialTheme.appColors.primary)
} else {
OpenEdXButton(
OpenEdXPrimaryButton(
modifier = buttonWidth.testTag("btn_sign_in"),
text = stringResource(id = coreR.string.core_sign_in),
textColor = MaterialTheme.appColors.primaryButtonText,
backgroundColor = MaterialTheme.appColors.secondaryButtonBackground,
onClick = {
keyboardController?.hide()
if (login.isNotEmpty() && password.isNotEmpty()) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ import org.openedx.core.domain.model.RegistrationField
import org.openedx.core.domain.model.RegistrationFieldType
import org.openedx.core.ui.BackBtn
import org.openedx.core.ui.HandleUIMessage
import org.openedx.core.ui.OpenEdXButton
import org.openedx.core.ui.OpenEdXPrimaryButton
import org.openedx.core.ui.SheetContent
import org.openedx.core.ui.displayCutoutForLandscape
import org.openedx.core.ui.isImeVisibleState
Expand Down Expand Up @@ -434,11 +434,9 @@ internal fun SignUpView(
CircularProgressIndicator(color = MaterialTheme.appColors.primary)
}
} else {
OpenEdXButton(
OpenEdXPrimaryButton(
modifier = buttonWidth.testTag("btn_create_account"),
text = stringResource(id = R.string.auth_create_account),
textColor = MaterialTheme.appColors.primaryButtonText,
backgroundColor = MaterialTheme.appColors.secondaryButtonBackground,
onClick = {
keyboardController?.hide()
showErrorMap.clear()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.openedx.auth.R
import org.openedx.auth.data.model.AuthType
import org.openedx.core.ui.OpenEdXButton
import org.openedx.core.ui.OpenEdXOutlinedButton
import org.openedx.core.ui.OpenEdXPrimaryButton
import org.openedx.core.ui.OpenEdXPrimaryOutlinedButton
import org.openedx.core.ui.theme.OpenEdXTheme
import org.openedx.core.ui.theme.appColors

Expand All @@ -40,13 +40,12 @@ internal fun SocialAuthView(
} else {
R.string.auth_continue_google
}
OpenEdXOutlinedButton(
OpenEdXPrimaryOutlinedButton(
modifier = Modifier
.testTag("btn_google_auth")
.padding(top = 24.dp)
.fillMaxWidth(),
backgroundColor = MaterialTheme.appColors.authGoogleButtonBackground,
borderColor = MaterialTheme.appColors.primary,
textColor = Color.Unspecified,
onClick = {
onEvent(AuthType.GOOGLE)
Expand Down Expand Up @@ -74,7 +73,7 @@ internal fun SocialAuthView(
} else {
R.string.auth_continue_facebook
}
OpenEdXButton(
OpenEdXPrimaryButton(
modifier = Modifier
.testTag("btn_facebook_auth")
.padding(top = 12.dp)
Expand Down Expand Up @@ -106,7 +105,7 @@ internal fun SocialAuthView(
} else {
R.string.auth_continue_microsoft
}
OpenEdXButton(
OpenEdXPrimaryButton(
modifier = Modifier
.testTag("btn_microsoft_auth")
.padding(top = 12.dp)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ import org.openedx.core.config.Config
import org.openedx.core.presentation.CoreAnalytics
import org.openedx.core.presentation.CoreAnalyticsEvent
import org.openedx.core.presentation.CoreAnalyticsKey
import org.openedx.core.presentation.global.appupgrade.DefaultTextButton
import org.openedx.core.presentation.global.appupgrade.TransparentTextButton
import org.openedx.core.ui.DefaultTextButton
import org.openedx.core.ui.TransparentTextButton
import org.openedx.core.ui.theme.OpenEdXTheme
import org.openedx.core.ui.theme.appColors
import org.openedx.core.ui.theme.appShapes
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import androidx.compose.ui.unit.dp
import androidx.core.os.bundleOf
import androidx.fragment.app.DialogFragment
import org.openedx.core.R
import org.openedx.core.presentation.global.appupgrade.DefaultTextButton
import org.openedx.core.ui.DefaultTextButton
import org.openedx.core.ui.theme.OpenEdXTheme
import org.openedx.core.ui.theme.appColors
import org.openedx.core.ui.theme.appShapes
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.OutlinedTextField
Expand Down Expand Up @@ -48,6 +46,8 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.openedx.core.R
import org.openedx.core.presentation.dialog.DefaultDialogBox
import org.openedx.core.ui.DefaultTextButton
import org.openedx.core.ui.TransparentTextButton
import org.openedx.core.ui.theme.OpenEdXTheme
import org.openedx.core.ui.theme.appColors
import org.openedx.core.ui.theme.appShapes
Expand Down Expand Up @@ -213,7 +213,10 @@ fun RateDialog(
verticalArrangement = Arrangement.spacedBy(20.dp)
) {
Text(
text = stringResource(R.string.core_rate_dialog_title, stringResource(R.string.app_name)),
text = stringResource(
R.string.core_rate_dialog_title,
stringResource(R.string.app_name)
),
color = MaterialTheme.appColors.textPrimary,
style = MaterialTheme.appTypography.titleMedium
)
Expand Down Expand Up @@ -245,69 +248,6 @@ fun RateDialog(
}
}

@Composable
fun TransparentTextButton(
text: String,
onClick: () -> Unit
) {
Button(
modifier = Modifier
.height(42.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Transparent
),
elevation = null,
shape = MaterialTheme.appShapes.navigationButtonShape,
onClick = onClick
) {
Text(
color = MaterialTheme.appColors.textAccent,
style = MaterialTheme.appTypography.labelLarge,
text = text
)
}
}

@Composable
fun DefaultTextButton(
isEnabled: Boolean = true,
text: String,
onClick: () -> Unit
) {
val textColor: Color
val backgroundColor: Color
if (isEnabled) {
textColor = MaterialTheme.appColors.primaryButtonText
backgroundColor = MaterialTheme.appColors.primaryButtonBackground
} else {
textColor = MaterialTheme.appColors.inactiveButtonText
backgroundColor = MaterialTheme.appColors.inactiveButtonBackground
}

Button(
modifier = Modifier
.height(42.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = backgroundColor,
contentColor = textColor
),
elevation = null,
shape = MaterialTheme.appShapes.navigationButtonShape,
enabled = isEnabled,
onClick = onClick
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
Text(
text = text,
style = MaterialTheme.appTypography.labelLarge
)
}
}
}

@Composable
fun RatingBar(
modifier: Modifier = Modifier,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,9 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
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.size
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Card
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
Expand All @@ -39,6 +36,8 @@ import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.openedx.core.R
import org.openedx.core.ui.DefaultTextButton
import org.openedx.core.ui.TransparentTextButton
import org.openedx.core.ui.noRippleClickable
import org.openedx.core.ui.statusBarsInset
import org.openedx.core.ui.theme.OpenEdXTheme
Expand Down Expand Up @@ -257,61 +256,6 @@ fun AppUpgradeDialogButtons(
}
}

@Composable
fun TransparentTextButton(
text: String,
onClick: () -> Unit
) {
Button(
modifier = Modifier
.testTag("btn_secondary")
.height(42.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Transparent
),
elevation = null,
shape = MaterialTheme.appShapes.navigationButtonShape,
onClick = onClick
) {
Text(
modifier = Modifier.testTag("txt_secondary"),
color = MaterialTheme.appColors.textAccent,
style = MaterialTheme.appTypography.labelLarge,
text = text
)
}
}

@Composable
fun DefaultTextButton(
text: String,
onClick: () -> Unit
) {
Button(
modifier = Modifier
.testTag("btn_primary")
.height(42.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = MaterialTheme.appColors.primaryButtonBackground
),
elevation = null,
shape = MaterialTheme.appShapes.navigationButtonShape,
onClick = onClick
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
Text(
modifier = Modifier.testTag("txt_primary"),
text = text,
color = MaterialTheme.appColors.primaryButtonText,
style = MaterialTheme.appTypography.labelLarge
)
}
}
}

@Composable
fun AppUpgradeRecommendedBox(
modifier: Modifier = Modifier,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import org.openedx.core.R
import org.openedx.core.presentation.global.appupgrade.TransparentTextButton
import org.openedx.core.ui.TransparentTextButton
import org.openedx.core.ui.theme.OpenEdXTheme
import org.openedx.core.ui.theme.appColors
import org.openedx.core.ui.theme.appShapes
Expand All @@ -44,7 +44,7 @@ fun CalendarSyncDialog(
when (syncDialogType) {
CalendarSyncDialogType.SYNC_DIALOG,
CalendarSyncDialogType.UN_SYNC_DIALOG,
-> {
-> {
CalendarAlertDialog(
dialogProperties = DialogProperties(
title = stringResource(syncDialogType.titleResId),
Expand Down
Loading
Loading