chore: enhance app theme capability for prod edX theme/branding (#262)

chore: enhance app theme capability for prod edX theme/branding - Integrate Program config updates - theming/branding code improvements for light and dark modes - Force dark mode for the WebView (beta version) - No major change in the Open edX theme fixes: LEARNER-9783
openedx · May 23, 2024 · a712170 · a712170
1 parent f7d4d5f
commit a712170
Show file tree

Hide file tree

Showing 34 changed files with 246 additions and 104 deletions.
diff --git a/app/src/main/res/layout/fragment_main.xml b/app/src/main/res/layout/fragment_main.xml
@@ -14,17 +14,16 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-
     <com.google.android.material.bottomnavigation.BottomNavigationView
         android:id="@+id/bottom_nav_view"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:background="@color/background"
         app:labelVisibilityMode="labeled"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.5"
         app:layout_constraintStart_toStartOf="parent"
         app:menu="@menu/bottom_view_menu" />
 
-
-</androidx.constraintlayout.widget.ConstraintLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>
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
@@ -131,7 +132,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")
@@ -177,7 +177,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
@@ -49,6 +49,7 @@ import androidx.compose.ui.text.input.ImeAction
 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.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
@@ -195,7 +196,8 @@ internal fun LoginScreen(
                                 modifier = Modifier.testTag("txt_${state.agreement.name}"),
                                 fullText = linkedText.text,
                                 hyperLinks = linkedText.links,
-                                linkTextColor = MaterialTheme.appColors.primary,
+                                linkTextColor = MaterialTheme.appColors.textHyperLink,
+                                linkTextDecoration = TextDecoration.Underline,
                                 action = { link ->
                                     onEvent(AuthEvent.OpenLink(linkedText.links, link))
                                 },
@@ -264,7 +266,7 @@ private fun AuthForm(
                         onEvent(AuthEvent.ForgotPasswordClick)
                     },
                 text = stringResource(id = R.string.auth_forgot_password),
-                color = MaterialTheme.appColors.primary,
+                color = MaterialTheme.appColors.info_variant,
                 style = MaterialTheme.appTypography.labelLarge
             )
         }
@@ -275,6 +277,8 @@ private fun AuthForm(
             OpenEdXButton(
                 modifier = buttonWidth.testTag("btn_sign_in"),
                 text = stringResource(id = coreR.string.core_sign_in),
+                textColor = MaterialTheme.appColors.primaryButtonText,
+                backgroundColor = MaterialTheme.appColors.secondaryButtonBackground,
                 onClick = {
                     onEvent(AuthEvent.SignIn(login = login, password = password))
                 }
@@ -323,8 +327,10 @@ private fun PasswordTextField(
             onValueChanged(it.text.trim())
         },
         colors = TextFieldDefaults.outlinedTextFieldColors(
+            textColor = MaterialTheme.appColors.textFieldText,
+            backgroundColor = MaterialTheme.appColors.textFieldBackground,
             unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder,
-            backgroundColor = MaterialTheme.appColors.textFieldBackground
+            cursorColor = MaterialTheme.appColors.textFieldText,
         ),
         shape = MaterialTheme.appShapes.textFieldShape,
         placeholder = {

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
@@ -329,7 +329,7 @@ internal fun SignUpView(
                                             modifier = Modifier
                                                 .testTag("txt_sign_up_title")
                                                 .fillMaxWidth(),
-                                            text = stringResource(id = R.string.auth_sign_up),
+                                            text = stringResource(id = coreR.string.core_register),
                                             color = MaterialTheme.appColors.textPrimary,
                                             style = MaterialTheme.appTypography.displaySmall
                                         )
@@ -437,6 +437,8 @@ internal fun SignUpView(
                                     OpenEdXButton(
                                         modifier = buttonWidth.testTag("btn_create_account"),
                                         text = stringResource(id = R.string.auth_create_account),
+                                        textColor = MaterialTheme.appColors.primaryButtonText,
+                                        backgroundColor = MaterialTheme.appColors.secondaryButtonBackground,
                                         onClick = {
                                             showErrorMap.clear()
                                             onRegisterClick(AuthType.PASSWORD)

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
@@ -170,7 +171,8 @@ fun OptionalFields(
                     HyperlinkText(
                         fullText = linkedText.text,
                         hyperLinks = linkedText.links,
-                        linkTextColor = MaterialTheme.appColors.primary,
+                        linkTextColor = MaterialTheme.appColors.textHyperLink,
+                        linkTextDecoration = TextDecoration.Underline,
                         action = {
                             hyperLinkAction?.invoke(linkedText.links, it)
                         },
@@ -250,8 +252,10 @@ fun LoginTextField(
             onValueChanged(it.text.trim())
         },
         colors = TextFieldDefaults.outlinedTextFieldColors(
+            textColor = MaterialTheme.appColors.textFieldText,
+            backgroundColor = MaterialTheme.appColors.textFieldBackground,
             unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder,
-            backgroundColor = MaterialTheme.appColors.textFieldBackground
+            cursorColor = MaterialTheme.appColors.textFieldText,
         ),
         shape = MaterialTheme.appShapes.textFieldShape,
         placeholder = {
@@ -332,8 +336,11 @@ fun InputRegistrationField(
                 }
             },
             colors = TextFieldDefaults.outlinedTextFieldColors(
+                textColor = MaterialTheme.appColors.textFieldText,
+                backgroundColor = MaterialTheme.appColors.textFieldBackground,
+                focusedBorderColor = MaterialTheme.appColors.textFieldBorder,
                 unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder,
-                backgroundColor = MaterialTheme.appColors.textFieldBackground
+                cursorColor = MaterialTheme.appColors.textFieldText,
             ),
             shape = MaterialTheme.appShapes.textFieldShape,
             placeholder = {

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
@@ -45,7 +45,7 @@ internal fun SocialAuthView(
                     .testTag("btn_google_auth")
                     .padding(top = 24.dp)
                     .fillMaxWidth(),
-                backgroundColor = MaterialTheme.appColors.background,
+                backgroundColor = MaterialTheme.appColors.authGoogleButtonBackground,
                 borderColor = MaterialTheme.appColors.primary,
                 textColor = Color.Unspecified,
                 onClick = {
@@ -62,7 +62,8 @@ internal fun SocialAuthView(
                         modifier = Modifier
                             .testTag("txt_google_auth")
                             .padding(start = 10.dp),
-                        text = stringResource(id = stringRes)
+                        text = stringResource(id = stringRes),
+                        color = MaterialTheme.appColors.primaryButtonBorderedText,
                     )
                 }
             }
@@ -87,13 +88,13 @@ internal fun SocialAuthView(
                     Icon(
                         painter = painterResource(id = R.drawable.ic_auth_facebook),
                         contentDescription = null,
-                        tint = MaterialTheme.appColors.buttonText,
+                        tint = MaterialTheme.appColors.primaryButtonText,
                     )
                     Text(
                         modifier = Modifier
                             .testTag("txt_facebook_auth")
                             .padding(start = 10.dp),
-                        color = MaterialTheme.appColors.buttonText,
+                        color = MaterialTheme.appColors.primaryButtonText,
                         text = stringResource(id = stringRes)
                     )
                 }
@@ -125,7 +126,7 @@ internal fun SocialAuthView(
                         modifier = Modifier
                             .testTag("txt_microsoft_auth")
                             .padding(start = 10.dp),
-                        color = MaterialTheme.appColors.buttonText,
+                        color = MaterialTheme.appColors.primaryButtonText,
                         text = stringResource(id = stringRes)
                     )
                 }

diff --git a/auth/src/main/res/values-uk/strings.xml b/auth/src/main/res/values-uk/strings.xml
@@ -5,7 +5,6 @@
     <string name="auth_email">Електронна пошта</string>
     <string name="auth_invalid_email">Неправильна E-mail адреса</string>
     <string name="auth_invalid_password">Пароль занадто короткий</string>
-    <string name="auth_welcome_back">Ласкаво просимо! Будь ласка, авторизуйтесь, щоб продовжити.</string>
     <string name="auth_show_optional_fields">Показати додаткові поля</string>
     <string name="auth_hide_optional_fields">Приховати додаткові поля</string>
     <string name="auth_create_account">Створити акаунт</string>
@@ -15,6 +14,5 @@
     <string name="auth_check_your_email">Перевірте свою електронну пошту</string>
     <string name="auth_restore_password_success">Ми надіслали інструкції щодо відновлення пароля на вашу електронну пошту %s</string>
     <string name="auth_enter_password">Введіть пароль</string>
-    <string name="auth_create_new_account">Створити новий аккаунт.</string>
 
 </resources>
diff --git a/auth/src/main/res/values/strings.xml b/auth/src/main/res/values/strings.xml
@@ -11,7 +11,7 @@
     <string name="auth_email_username" tools:ignore="MissingTranslation">Email or Username</string>
     <string name="auth_invalid_email_username" tools:ignore="MissingTranslation">Invalid email or username</string>
     <string name="auth_invalid_password">Password is too short</string>
-    <string name="auth_welcome_back">Welcome back! Please authorize to continue.</string>
+    <string name="auth_welcome_back">Welcome back! Sign in to access your courses.</string>
     <string name="auth_show_optional_fields">Show optional fields</string>
     <string name="auth_hide_optional_fields">Hide optional fields</string>
     <string name="auth_create_account">Create account</string>
@@ -23,7 +23,7 @@
     <string name="auth_example_email" translatable="false">username@domain.com</string>
     <string name="auth_enter_email_username" tools:ignore="MissingTranslation">Enter email or username</string>
     <string name="auth_enter_password">Enter password</string>
-    <string name="auth_create_new_account">Create new account.</string>
+    <string name="auth_create_new_account">Create an account to start learning today!</string>
     <string name="auth_compete_registration" translatable="false">Complete your registration</string>
     <string name="auth_google" tools:ignore="ExtraTranslation">Sign in with Google</string>
     <string name="auth_facebook" tools:ignore="ExtraTranslation">Sign in with Facebook</string>

diff --git a/build.gradle b/build.gradle
@@ -56,6 +56,8 @@ ext {
 
     extented_spans_version = "1.3.0"
 
+    webkit_version = "1.11.0"
+
     configHelper = new ConfigHelper(projectDir, getCurrentFlavor())
 
     //testing

diff --git a/core/build.gradle b/core/build.gradle
@@ -154,6 +154,8 @@ dependencies {
     //Play In-App Review
     api "com.google.android.play:review-ktx:$in_app_review"
 
+    api "androidx.webkit:webkit:$webkit_version"
+
     testImplementation 'junit:junit:4.13.2'
     androidTestImplementation 'androidx.test.ext:junit:1.1.5'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'

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/extension/ViewExt.kt b/core/src/main/java/org/openedx/core/extension/ViewExt.kt
@@ -3,12 +3,15 @@ package org.openedx.core.extension
 import android.content.Context
 import android.content.res.Resources
 import android.graphics.Rect
+import android.os.Build
 import android.util.DisplayMetrics
 import android.view.View
 import android.view.ViewGroup
 import android.webkit.WebView
 import android.widget.Toast
 import androidx.fragment.app.DialogFragment
+import androidx.webkit.WebSettingsCompat
+import androidx.webkit.WebViewFeature
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 import org.openedx.core.system.AppCookieManager
@@ -61,3 +64,25 @@ fun WebView.loadUrl(url: String, scope: CoroutineScope, cookieManager: AppCookie
         loadUrl(url)
     }
 }
+
+fun WebView.applyDarkModeIfEnabled(isDarkTheme: Boolean) {
+    if (isDarkTheme && WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+            settings.setAlgorithmicDarkeningAllowed(true)
+        } else {
+            // Switch WebView to dark mode; uses default dark theme
+            if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
+                WebSettingsCompat.setForceDark(
+                    settings,
+                    WebSettingsCompat.FORCE_DARK_ON
+                )
+            }
+            if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) {
+                WebSettingsCompat.setForceDarkStrategy(
+                    settings,
+                    WebSettingsCompat.DARK_STRATEGY_PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING
+                )
+            }
+        }
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/appreview/AppReviewUI.kt b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/AppReviewUI.kt
@@ -320,8 +320,8 @@ fun DefaultTextButton(
     val textColor: Color
     val backgroundColor: Color
     if (isEnabled) {
-        textColor = MaterialTheme.appColors.buttonText
-        backgroundColor = MaterialTheme.appColors.buttonBackground
+        textColor = MaterialTheme.appColors.primaryButtonText
+        backgroundColor = MaterialTheme.appColors.primaryButtonBackground
     } else {
         textColor = MaterialTheme.appColors.inactiveButtonText
         backgroundColor = MaterialTheme.appColors.inactiveButtonBackground

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
@@ -292,7 +292,7 @@ fun DefaultTextButton(
             .testTag("btn_primary")
             .height(42.dp),
         colors = ButtonDefaults.buttonColors(
-            backgroundColor = MaterialTheme.appColors.buttonBackground
+            backgroundColor = MaterialTheme.appColors.primaryButtonBackground
         ),
         elevation = null,
         shape = MaterialTheme.appShapes.navigationButtonShape,
@@ -305,7 +305,7 @@ fun DefaultTextButton(
             Text(
                 modifier = Modifier.testTag("txt_primary"),
                 text = text,
-                color = MaterialTheme.appColors.buttonText,
+                color = MaterialTheme.appColors.primaryButtonText,
                 style = MaterialTheme.appTypography.labelLarge
             )
         }
@@ -401,4 +401,4 @@ private fun AppUpgradeRecommendDialogPreview() {
             onUpdateClick = {}
         )
     }
-}
+}