chore: enhance app theme capability for prod edX theme/branding

- Integrate Program config updates - theming/branding code improvements for light and dark modes fixes: LEARNER-9783
openedx · Mar 15, 2024 · afefde2 · afefde2
1 parent 9df8df2
commit afefde2
Show file tree

Hide file tree

Showing 21 changed files with 115 additions and 60 deletions.
diff --git a/auth/src/main/java/org/openedx/auth/presentation/logistration/LogistrationFragment.kt b/auth/src/main/java/org/openedx/auth/presentation/logistration/LogistrationFragment.kt
@@ -33,6 +33,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTagsAsResourceId
 import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -143,7 +144,6 @@ private fun LogistrationScreen(
                 LogistrationLogoView()
                 Text(
                     text = stringResource(id = R.string.pre_auth_title),
-                    color = MaterialTheme.appColors.textPrimary,
                     style = MaterialTheme.appTypography.headlineSmall,
                     modifier = Modifier
                         .testTag("txt_screen_title")
@@ -189,7 +189,8 @@ private fun LogistrationScreen(
                         },
                     text = stringResource(id = R.string.pre_auth_explore_all_courses),
                     color = MaterialTheme.appColors.primary,
-                    style = MaterialTheme.appTypography.labelLarge
+                    style = MaterialTheme.appTypography.labelLarge,
+                    textDecoration = TextDecoration.Underline
                 )
 
                 Spacer(modifier = Modifier.weight(1f))

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
@@ -63,7 +63,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.OpenEdXSecondaryButton
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
 import org.openedx.core.ui.displayCutoutForLandscape
@@ -272,8 +272,8 @@ private fun AuthForm(
         if (state.showProgress) {
             CircularProgressIndicator(color = MaterialTheme.appColors.primary)
         } else {
-            OpenEdXButton(
-                width = buttonWidth.testTag("btn_sign_in"),
+            OpenEdXSecondaryButton(
+                modifier = buttonWidth.testTag("btn_sign_in"),
                 text = stringResource(id = coreR.string.core_sign_in),
                 onClick = {
                     onEvent(AuthEvent.SignIn(login = login, password = password))

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
@@ -72,7 +72,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.OpenEdXSecondaryButton
 import org.openedx.core.ui.SheetContent
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
@@ -434,8 +434,8 @@ internal fun SignUpView(
                                         CircularProgressIndicator(color = MaterialTheme.appColors.primary)
                                     }
                                 } else {
-                                    OpenEdXButton(
-                                        width = buttonWidth.testTag("btn_create_account"),
+                                    OpenEdXSecondaryButton(
+                                        modifier = buttonWidth.testTag("btn_create_account"),
                                         text = stringResource(id = R.string.auth_create_account),
                                         onClick = {
                                             showErrorMap.clear()

diff --git a/auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt b/auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt
@@ -44,6 +44,7 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.openedx.auth.R
@@ -171,6 +172,7 @@ fun OptionalFields(
                         fullText = linkedText.text,
                         hyperLinks = linkedText.links,
                         linkTextColor = MaterialTheme.appColors.primary,
+                        linkTextDecoration = TextDecoration.Underline,
                         action = {
                             hyperLinkAction?.invoke(linkedText.links, it)
                         },
@@ -298,11 +300,11 @@ fun InputRegistrationField(
     }
     val isSingleLine = registrationField.type != RegistrationFieldType.TEXTAREA
     val helperTextColor = if (registrationField.errorInstructions.isEmpty()) {
-        MaterialTheme.appColors.textSecondary
+        MaterialTheme.appColors.textFieldHint
     } else if (isErrorShown) {
         MaterialTheme.appColors.error
     } else {
-        MaterialTheme.appColors.textSecondary
+        MaterialTheme.appColors.textFieldHint
     }
     val helperText = if (registrationField.errorInstructions.isEmpty()) {
         registrationField.instructions
@@ -374,11 +376,11 @@ fun SelectableRegisterField(
     onClick: (String, List<RegistrationField.Option>) -> Unit
 ) {
     val helperTextColor = if (registrationField.errorInstructions.isEmpty()) {
-        MaterialTheme.appColors.textSecondary
+        MaterialTheme.appColors.textFieldHint
     } else if (isErrorShown) {
         MaterialTheme.appColors.error
     } else {
-        MaterialTheme.appColors.textSecondary
+        MaterialTheme.appColors.textFieldHint
     }
     val helperText = if (registrationField.errorInstructions.isEmpty()) {
         registrationField.instructions

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
@@ -46,7 +46,7 @@ internal fun SocialAuthView(
                     .padding(top = 24.dp)
                     .fillMaxWidth(),
                 backgroundColor = MaterialTheme.appColors.background,
-                borderColor = MaterialTheme.appColors.primary,
+                borderColor = MaterialTheme.appColors.textFieldBorder,
                 textColor = Color.Unspecified,
                 onClick = {
                     onEvent(AuthType.GOOGLE)
@@ -87,13 +87,13 @@ internal fun SocialAuthView(
                     Icon(
                         painter = painterResource(id = R.drawable.ic_auth_facebook),
                         contentDescription = null,
-                        tint = MaterialTheme.appColors.buttonText,
+                        tint = MaterialTheme.appColors.onSecondary,
                     )
                     Text(
                         modifier = Modifier
                             .testTag("txt_facebook_auth")
                             .padding(start = 10.dp),
-                        color = MaterialTheme.appColors.buttonText,
+                        color = MaterialTheme.appColors.onSecondary,
                         text = stringResource(id = stringRes)
                     )
                 }
@@ -125,7 +125,7 @@ internal fun SocialAuthView(
                         modifier = Modifier
                             .testTag("txt_microsoft_auth")
                             .padding(start = 10.dp),
-                        color = MaterialTheme.appColors.buttonText,
+                        color = MaterialTheme.appColors.onSecondary,
                         text = stringResource(id = stringRes)
                     )
                 }

diff --git a/core/src/main/java/org/openedx/core/config/ProgramConfig.kt b/core/src/main/java/org/openedx/core/config/ProgramConfig.kt
@@ -14,7 +14,7 @@ data class ProgramConfig(
 }
 
 data class ProgramWebViewConfig(
-    @SerializedName("PROGRAM_URL")
+    @SerializedName("BASE_URL")
     val programUrl: String = "",
     @SerializedName("PROGRAM_DETAIL_URL_TEMPLATE")
     val programDetailUrlTemplate: String = "",

diff --git a/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/AppUpdateUI.kt b/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/AppUpdateUI.kt
@@ -275,7 +275,7 @@ fun TransparentTextButton(
     ) {
         Text(
             modifier = Modifier.testTag("txt_secondary"),
-            color = MaterialTheme.appColors.textAccent,
+            color = MaterialTheme.appColors.textPrimary,
             style = MaterialTheme.appTypography.labelLarge,
             text = text
         )
@@ -292,7 +292,7 @@ fun DefaultTextButton(
             .testTag("btn_primary")
             .height(42.dp),
         colors = ButtonDefaults.buttonColors(
-            backgroundColor = MaterialTheme.appColors.buttonBackground
+            backgroundColor = MaterialTheme.appColors.textPrimary
         ),
         elevation = null,
         shape = MaterialTheme.appShapes.navigationButtonShape,

diff --git a/core/src/main/java/org/openedx/core/presentation/settings/VideoQualityFragment.kt b/core/src/main/java/org/openedx/core/presentation/settings/VideoQualityFragment.kt
@@ -233,7 +233,7 @@ private fun QualityOption(
                 Text(
                     modifier = Modifier.testTag("txt_video_quality_description_${title.tagId()}"),
                     text = description,
-                    color = MaterialTheme.appColors.textSecondary,
+                    color = MaterialTheme.appColors.textPrimary,
                     style = MaterialTheme.appTypography.labelMedium
                 )
             }

diff --git a/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt b/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt
@@ -235,7 +235,7 @@ fun SearchBar(
                     .testTag("txt_search_placeholder")
                     .fillMaxWidth(),
                 text = label,
-                color = MaterialTheme.appColors.textSecondary,
+                color = MaterialTheme.appColors.textFieldHint,
                 style = MaterialTheme.appTypography.bodyMedium
             )
         },
@@ -325,7 +325,7 @@ fun SearchBarStateless(
             Text(
                 modifier = Modifier.fillMaxWidth(),
                 text = label,
-                color = MaterialTheme.appColors.textSecondary,
+                color = MaterialTheme.appColors.textFieldText,
                 style = MaterialTheme.appTypography.bodyMedium
             )
         },
@@ -1076,12 +1076,32 @@ fun OfflineModeDialog(
     }
 }
 
+@Composable
+fun OpenEdXSecondaryButton(
+    modifier: Modifier = Modifier.fillMaxWidth(),
+    text: String = "",
+    onClick: () -> Unit,
+    enabled: Boolean = true,
+    content: (@Composable RowScope.() -> Unit)? = null
+) {
+    OpenEdXButton(
+        width = modifier,
+        text = text,
+        onClick = onClick,
+        enabled = enabled,
+        textColor = MaterialTheme.appColors.onSecondary,
+        backgroundColor = MaterialTheme.appColors.secondary,
+        content = content
+    )
+}
+
 @Composable
 fun OpenEdXButton(
     width: Modifier = Modifier.fillMaxWidth(),
     text: String = "",
     onClick: () -> Unit,
     enabled: Boolean = true,
+    textColor: Color = MaterialTheme.appColors.buttonText,
     backgroundColor: Color = MaterialTheme.appColors.buttonBackground,
     content: (@Composable RowScope.() -> Unit)? = null
 ) {
@@ -1101,7 +1121,7 @@ fun OpenEdXButton(
             Text(
                 modifier = Modifier.testTag("txt_${text.tagId()}"),
                 text = text,
-                color = MaterialTheme.appColors.buttonText,
+                color = textColor,
                 style = MaterialTheme.appTypography.labelLarge
             )
         } else {
@@ -1110,6 +1130,26 @@ fun OpenEdXButton(
     }
 }
 
+@Composable
+fun OpenEdXSecondaryOutlinedButton(
+    modifier: Modifier = Modifier.fillMaxWidth(),
+    text: String = "",
+    onClick: () -> Unit,
+    enabled: Boolean = true,
+    content: (@Composable RowScope.() -> Unit)? = null
+) {
+    OpenEdXOutlinedButton(
+        modifier = modifier,
+        text = text,
+        onClick = onClick,
+        enabled = enabled,
+        textColor = MaterialTheme.appColors.secondary,
+        backgroundColor = MaterialTheme.appColors.onSecondary,
+        borderColor = MaterialTheme.appColors.buttonBorder,
+        content = content
+    )
+}
+
 @Composable
 fun OpenEdXOutlinedButton(
     modifier: Modifier = Modifier.fillMaxWidth(),
@@ -1118,6 +1158,7 @@ fun OpenEdXOutlinedButton(
     textColor: Color,
     text: String = "",
     onClick: () -> Unit,
+    enabled: Boolean = true,
     content: (@Composable RowScope.() -> Unit)? = null
 ) {
     OutlinedButton(
@@ -1126,6 +1167,7 @@ fun OpenEdXOutlinedButton(
             .then(modifier)
             .height(42.dp),
         onClick = onClick,
+        enabled = enabled,
         border = BorderStroke(1.dp, borderColor),
         shape = MaterialTheme.appShapes.buttonShape,
         colors = ButtonDefaults.outlinedButtonColors(backgroundColor = backgroundColor)
@@ -1186,8 +1228,8 @@ fun ConnectionErrorView(
             textAlign = TextAlign.Center
         )
         Spacer(Modifier.height(16.dp))
-        OpenEdXButton(
-            width = Modifier
+        OpenEdXSecondaryButton(
+            modifier = Modifier
                 .widthIn(Dp.Unspecified, 162.dp),
             text = stringResource(id = R.string.core_reload),
             onClick = onReloadClick
@@ -1201,24 +1243,22 @@ fun AuthButtonsPanel(
     onSignInClick: () -> Unit
 ) {
     Row {
-        OpenEdXButton(
-            width = Modifier
+        OpenEdXSecondaryButton(
+            modifier = Modifier
                 .testTag("btn_register")
                 .width(0.dp)
                 .weight(1f),
             text = stringResource(id = R.string.core_register),
             onClick = { onRegisterClick() }
         )
 
-        OpenEdXOutlinedButton(
+        OpenEdXSecondaryOutlinedButton(
             modifier = Modifier
                 .testTag("btn_sign_in")
                 .width(100.dp)
                 .padding(start = 16.dp),
             text = stringResource(id = R.string.core_sign_in),
-            onClick = { onSignInClick() },
-            borderColor = MaterialTheme.appColors.textFieldBorder,
-            textColor = MaterialTheme.appColors.primary
+            onClick = { onSignInClick() }
         )
     }
 }

diff --git a/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt b/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt
@@ -30,6 +30,9 @@ data class AppColors(
     val bottomSheetToggle: Color,
     val warning: Color,
     val info: Color,
+    val onWarning: Color,
+    val onInfo: Color,
+    val buttonBorder: Color,
 
     val rateStars: Color,
     val inactiveButtonBackground: Color,

diff --git a/core/src/main/java/org/openedx/core/ui/theme/Theme.kt b/core/src/main/java/org/openedx/core/ui/theme/Theme.kt
@@ -50,6 +50,9 @@ private val DarkColorPalette = AppColors(
 
     warning = dark_warning,
     info = dark_info,
+    onWarning = dark_onWarning,
+    onInfo = dark_onInfo,
+    buttonBorder = dark_button_border,
 
     rateStars = dark_rate_stars,
     inactiveButtonBackground = dark_inactive_button_background,
@@ -112,6 +115,9 @@ private val LightColorPalette = AppColors(
 
     warning = light_warning,
     info = light_info,
+    onWarning = light_onWarning,
+    onInfo = light_onInfo,
+    buttonBorder = light_button_border,
 
     rateStars = light_rate_stars,
     inactiveButtonBackground = light_inactive_button_background,

diff --git a/core/src/main/java/org/openedx/core/ui/theme/Type.kt b/core/src/main/java/org/openedx/core/ui/theme/Type.kt
@@ -34,7 +34,6 @@ data class AppTypography(
 val fontFamily = FontFamily(
     Font(R.font.regular, FontWeight.Black, FontStyle.Normal),
     Font(R.font.bold, FontWeight.Bold, FontStyle.Normal),
-    Font(R.font.bold, FontWeight.Bold, FontStyle.Normal),
     Font(R.font.extra_light, FontWeight.Light, FontStyle.Normal),
     Font(R.font.light, FontWeight.Light, FontStyle.Normal),
     Font(R.font.medium, FontWeight.Medium, FontStyle.Normal),
@@ -43,7 +42,6 @@ val fontFamily = FontFamily(
     Font(R.font.thin, FontWeight.Thin, FontStyle.Normal),
 )
 
-
 internal val LocalTypography = staticCompositionLocalOf {
     AppTypography(
         displayLarge = TextStyle(