feat: Update button style to new Elm Theme (#32)

feat: Update button style to Elm Theme - Define generic button style for the whole app - Remove the custom/random button initialization - Make dialog's buttons appearance close to native - Apply elm theme on Modals and Dialogs Alerts - Optimise Code - Update Button's prefixe fix: LEARNER-10084
edx · Oct 10, 2024 · ab076f2 · ab076f2
1 parent 0ad28cc
commit ab076f2
Show file tree

Hide file tree

Showing 32 changed files with 589 additions and 594 deletions.
diff --git a/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordFragment.kt b/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordFragment.kt
@@ -62,7 +62,7 @@ import org.openedx.core.UIMessage
 import org.openedx.core.presentation.global.app_upgrade.AppUpgradeRequiredScreen
 import org.openedx.core.ui.BackBtn
 import org.openedx.core.ui.HandleUIMessage
-import org.openedx.core.ui.OpenEdXButton
+import org.openedx.core.ui.OpenEdXBrandButton
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
 import org.openedx.core.ui.displayCutoutForLandscape
@@ -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
         )
@@ -297,8 +297,8 @@ private fun RestorePasswordScreen(
                                         CircularProgressIndicator(color = MaterialTheme.appColors.primary)
                                     }
                                 } else {
-                                    OpenEdXButton(
-                                        modifier = buttonWidth.testTag("btn_reset_password"),
+                                    OpenEdXBrandButton(
+                                        modifier = buttonWidth,
                                         text = stringResource(id = authR.string.auth_reset_password),
                                         onClick = {
                                             keyboardController?.hide()
@@ -350,7 +350,7 @@ private fun RestorePasswordScreen(
                                     color = MaterialTheme.appColors.textPrimary
                                 )
                                 Spacer(Modifier.height(48.dp))
-                                OpenEdXButton(
+                                OpenEdXBrandButton(
                                     modifier = buttonWidth,
                                     text = stringResource(id = R.string.core_sign_in),
                                     onClick = {

diff --git a/auth/src/main/java/org/openedx/auth/presentation/signin/compose/SignInView.kt b/auth/src/main/java/org/openedx/auth/presentation/signin/compose/SignInView.kt
@@ -67,7 +67,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.OpenEdXBrandButton
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
 import org.openedx.core.ui.displayCutoutForLandscape
@@ -292,11 +292,9 @@ private fun AuthForm(
         if (state.showProgress) {
             CircularProgressIndicator(color = MaterialTheme.appColors.primary)
         } else {
-            OpenEdXButton(
-                modifier = buttonWidth.testTag("btn_sign_in"),
+            OpenEdXBrandButton(
+                modifier = buttonWidth,
                 text = stringResource(id = coreR.string.core_sign_in),
-                textColor = MaterialTheme.appColors.primaryButtonText,
-                backgroundColor = MaterialTheme.appColors.primaryButtonBackground,
                 onClick = {
                     keyboardController?.hide()
                     if (login.isNotEmpty() && password.isNotEmpty()) {

diff --git a/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SignUpView.kt b/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SignUpView.kt
@@ -73,7 +73,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.OpenEdXBrandButton
 import org.openedx.core.ui.SheetContent
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
@@ -436,11 +436,9 @@ internal fun SignUpView(
                                         CircularProgressIndicator(color = MaterialTheme.appColors.primary)
                                     }
                                 } else {
-                                    OpenEdXButton(
-                                        modifier = buttonWidth.testTag("btn_create_account"),
+                                    OpenEdXBrandButton(
+                                        modifier = buttonWidth,
                                         text = stringResource(id = R.string.auth_create_account),
-                                        textColor = MaterialTheme.appColors.primaryButtonText,
-                                        backgroundColor = MaterialTheme.appColors.primaryButtonBackground,
                                         onClick = {
                                             keyboardController?.hide()
                                             showErrorMap.clear()
@@ -506,6 +504,10 @@ private fun RegistrationScreenTabletPreview() {
                 requiredFields = listOf(field, field),
                 optionalFields = listOf(field, field),
                 agreementFields = listOf(field),
+                isGoogleAuthEnabled = true,
+                isFacebookAuthEnabled = true,
+                isMicrosoftAuthEnabled = true,
+                isSocialAuthEnabled = true,
             ),
             uiMessage = null,
             onBackClick = {},

diff --git a/auth/src/main/java/org/openedx/auth/presentation/ui/SocialAuthView.kt b/auth/src/main/java/org/openedx/auth/presentation/ui/SocialAuthView.kt
@@ -1,9 +1,9 @@
 package org.openedx.auth.presentation.ui
 
 import android.content.res.Configuration
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
@@ -19,8 +19,7 @@ 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.OpenEdXBrandButton
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 
@@ -33,23 +32,20 @@ internal fun SocialAuthView(
     isSignIn: Boolean = false,
     onEvent: (AuthType) -> Unit,
 ) {
-    Column(modifier = modifier) {
+    Column(
+        modifier = modifier
+            .padding(top = 24.dp),
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
         if (isGoogleAuthEnabled) {
             val stringRes = if (isSignIn) {
                 R.string.auth_google
             } else {
                 R.string.auth_continue_google
             }
-            OpenEdXButton(
-                modifier = Modifier
-                    .testTag("btn_google_auth")
-                    .padding(top = 24.dp)
-                    .fillMaxWidth(),
+            OpenEdXBrandButton(
                 backgroundColor = MaterialTheme.appColors.authGoogleButtonBackground,
-                textColor = Color.Unspecified,
-                onClick = {
-                    onEvent(AuthType.GOOGLE)
-                }
+                onClick = { onEvent(AuthType.GOOGLE) }
             ) {
                 Row(verticalAlignment = Alignment.CenterVertically) {
                     Icon(
@@ -58,9 +54,7 @@ internal fun SocialAuthView(
                         tint = Color.Unspecified,
                     )
                     Text(
-                        modifier = Modifier
-                            .testTag("txt_google_auth")
-                            .padding(start = 10.dp),
+                        modifier = Modifier.padding(start = 10.dp),
                         text = stringResource(id = stringRes),
                         color = MaterialTheme.appColors.textPrimaryLight,
                     )
@@ -73,15 +67,9 @@ internal fun SocialAuthView(
             } else {
                 R.string.auth_continue_facebook
             }
-            OpenEdXButton(
-                modifier = Modifier
-                    .testTag("btn_facebook_auth")
-                    .padding(top = 12.dp)
-                    .fillMaxWidth(),
+            OpenEdXBrandButton(
                 backgroundColor = MaterialTheme.appColors.authFacebookButtonBackground,
-                onClick = {
-                    onEvent(AuthType.FACEBOOK)
-                }
+                onClick = { onEvent(AuthType.FACEBOOK) }
             ) {
                 Row(verticalAlignment = Alignment.CenterVertically) {
                     Icon(
@@ -105,15 +93,9 @@ internal fun SocialAuthView(
             } else {
                 R.string.auth_continue_microsoft
             }
-            OpenEdXButton(
-                modifier = Modifier
-                    .testTag("btn_microsoft_auth")
-                    .padding(top = 12.dp)
-                    .fillMaxWidth(),
+            OpenEdXBrandButton(
                 backgroundColor = MaterialTheme.appColors.authMicrosoftButtonBackground,
-                onClick = {
-                    onEvent(AuthType.MICROSOFT)
-                }
+                onClick = { onEvent(AuthType.MICROSOFT) }
             ) {
                 Row(verticalAlignment = Alignment.CenterVertically) {
                     Icon(

diff --git a/core/src/edx/org/openedx/core/ui/theme/LocalShapes.kt b/core/src/edx/org/openedx/core/ui/theme/LocalShapes.kt
@@ -13,7 +13,7 @@ internal val LocalShapes = staticCompositionLocalOf {
             medium = RoundedCornerShape(8.dp),
             large = RoundedCornerShape(0.dp)
         ),
-        buttonShape = RoundedCornerShape(CornerSize(8.dp)),
+        buttonShape = RoundedCornerShape(CornerSize(24.dp)),
         navigationButtonShape = RoundedCornerShape(8.dp),
         textFieldShape = RoundedCornerShape(CornerSize(8.dp)),
         screenBackgroundShape = RoundedCornerShape(topStart = 30.dp, topEnd = 30.dp, bottomStart = 0.dp, bottomEnd = 0.dp),

diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/IAPDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/IAPDialogFragment.kt
@@ -43,7 +43,7 @@ import org.openedx.core.presentation.iap.IAPUIState
 import org.openedx.core.presentation.iap.IAPViewModel
 import org.openedx.core.ui.HandleUIMessage
 import org.openedx.core.ui.IAPErrorDialog
-import org.openedx.core.ui.OpenEdXButton
+import org.openedx.core.ui.OpenEdXBrandButton
 import org.openedx.core.ui.UnlockingAccessView
 import org.openedx.core.ui.ValuePropUpgradeFeatures
 import org.openedx.core.ui.theme.OpenEdXTheme
@@ -108,7 +108,7 @@ class IAPDialogFragment : DialogFragment() {
                                     iapState is IAPUIState.ProductData &&
                                             iapViewModel.purchaseData.formattedPrice.isNullOrEmpty()
                                                 .not() -> {
-                                        OpenEdXButton(modifier = Modifier.fillMaxWidth(),
+                                        OpenEdXBrandButton(
                                             text = stringResource(
                                                 id = R.string.iap_upgrade_price,
                                                 iapViewModel.purchaseData.formattedPrice!!,

diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/alert/ActionDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/alert/ActionDialogFragment.kt
@@ -36,8 +36,7 @@ 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.app_upgrade.DefaultTextButton
-import org.openedx.core.presentation.global.app_upgrade.TransparentTextButton
+import org.openedx.core.ui.OpenEdXTertiaryButton
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appShapes
@@ -168,12 +167,12 @@ private fun ActionDialog(
                 style = MaterialTheme.appTypography.bodyMedium
             )
             Row {
-                TransparentTextButton(
+                OpenEdXTertiaryButton(
                     text = stringResource(R.string.core_cancel),
                     onClick = onPositiveClick
                 )
                 Spacer(modifier = Modifier.size(16.dp))
-                DefaultTextButton(
+                OpenEdXTertiaryButton(
                     text = stringResource(R.string.core_continue),
                     onClick = onNegativeClick
                 )

diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/alert/InfoDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/alert/InfoDialogFragment.kt
@@ -28,7 +28,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.app_upgrade.DefaultTextButton
+import org.openedx.core.ui.OpenEdXTertiaryButton
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appShapes
@@ -109,7 +109,7 @@ private fun InfoDialog(
                 textAlign = TextAlign.Center,
                 style = MaterialTheme.appTypography.bodyMedium
             )
-            DefaultTextButton(
+            OpenEdXTertiaryButton(
                 text = stringResource(R.string.core_ok),
                 onClick = onClick
             )