From 0934cfd3aced18ced94744149acc03d8ede0b8a9 Mon Sep 17 00:00:00 2001 From: Farhan Arshad Date: Fri, 8 Mar 2024 19:24:04 +0500 Subject: [PATCH 1/5] 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 --- app/src/main/res/layout/fragment_main.xml | 5 +- .../logistration/LogistrationFragment.kt | 5 +- .../presentation/signin/compose/SignInView.kt | 16 ++-- .../presentation/signup/compose/SignUpView.kt | 6 +- .../openedx/auth/presentation/ui/AuthUI.kt | 23 +++-- .../auth/presentation/ui/CheckboxField.kt | 2 +- .../auth/presentation/ui/SocialAuthView.kt | 13 +-- auth/src/main/res/values-uk/strings.xml | 2 - auth/src/main/res/values/strings.xml | 4 +- .../org/openedx/core/config/ProgramConfig.kt | 2 +- .../dialog/appreview/AppReviewUI.kt | 3 +- .../global/app_upgrade/AppUpdateUI.kt | 4 +- .../settings/VideoQualityFragment.kt | 2 +- .../java/org/openedx/core/ui/ComposeCommon.kt | 95 +++++++++++++------ .../org/openedx/core/ui/theme/AppColors.kt | 6 ++ .../java/org/openedx/core/ui/theme/Theme.kt | 12 +++ .../java/org/openedx/core/ui/theme/Type.kt | 2 - .../org/openedx/core/ui/theme/Colors.kt | 16 +++- .../presentation/ChapterEndFragmentDialog.kt | 14 +-- .../course/presentation/ui/CourseUI.kt | 16 ++-- .../course/presentation/ui/CourseVideosUI.kt | 5 +- .../unit/NotSupportedUnitFragment.kt | 2 +- .../presentation/DashboardFragment.kt | 4 +- .../threads/DiscussionThreadsFragment.kt | 6 +- .../presentation/ui/DiscussionUI.kt | 3 +- .../presentation/edit/EditProfileFragment.kt | 32 ++++--- .../whatsnew/presentation/ui/WhatsNewUI.kt | 14 +-- 27 files changed, 201 insertions(+), 113 deletions(-) diff --git a/app/src/main/res/layout/fragment_main.xml b/app/src/main/res/layout/fragment_main.xml index eb6f37a6f..89cf2914a 100644 --- a/app/src/main/res/layout/fragment_main.xml +++ b/app/src/main/res/layout/fragment_main.xml @@ -14,11 +14,11 @@ app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> - - - \ No newline at end of file + 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 index 738364c34..ae3d2365e 100644 --- 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 index 77e290994..bca30a0eb 100644 --- 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 @@ -63,7 +64,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 @@ -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 ) } @@ -272,7 +274,7 @@ private fun AuthForm( if (state.showProgress) { CircularProgressIndicator(color = MaterialTheme.appColors.primary) } else { - OpenEdXButton( + OpenEdXSecondaryButton( modifier = buttonWidth.testTag("btn_sign_in"), text = stringResource(id = coreR.string.core_sign_in), onClick = { @@ -323,8 +325,10 @@ private fun PasswordTextField( onValueChanged(it.text.trim()) }, colors = TextFieldDefaults.outlinedTextFieldColors( - unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, - backgroundColor = MaterialTheme.appColors.textFieldBackground + textColor = MaterialTheme.appColors.textFieldText, + backgroundColor = MaterialTheme.appColors.textFieldBackground, + focusedBorderColor = MaterialTheme.appColors.textFieldBorder, + 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 index 2e2180d83..6db284340 100644 --- 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 @@ -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 ) @@ -434,7 +434,7 @@ internal fun SignUpView( CircularProgressIndicator(color = MaterialTheme.appColors.primary) } } else { - OpenEdXButton( + OpenEdXSecondaryButton( modifier = buttonWidth.testTag("btn_create_account"), text = stringResource(id = R.string.auth_create_account), onClick = { 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 index 4f98ea50c..ca98f8fb7 100644 --- 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( - unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, - backgroundColor = MaterialTheme.appColors.textFieldBackground + textColor = MaterialTheme.appColors.textFieldText, + backgroundColor = MaterialTheme.appColors.textFieldBackground, + focusedBorderColor = MaterialTheme.appColors.textFieldBorder, + cursorColor = MaterialTheme.appColors.textFieldText, ), shape = MaterialTheme.appShapes.textFieldShape, placeholder = { @@ -298,11 +302,11 @@ fun InputRegistrationField( } val isSingleLine = registrationField.type != RegistrationFieldType.TEXTAREA val helperTextColor = if (registrationField.errorInstructions.isEmpty()) { - MaterialTheme.appColors.textSecondary + MaterialTheme.appColors.primary } else if (isErrorShown) { MaterialTheme.appColors.error } else { - MaterialTheme.appColors.textSecondary + MaterialTheme.appColors.textFieldHint } val helperText = if (registrationField.errorInstructions.isEmpty()) { registrationField.instructions @@ -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 = { @@ -374,11 +381,11 @@ fun SelectableRegisterField( onClick: (String, List) -> Unit ) { val helperTextColor = if (registrationField.errorInstructions.isEmpty()) { - MaterialTheme.appColors.textSecondary + MaterialTheme.appColors.primary } 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/CheckboxField.kt b/auth/src/main/java/org/openedx/auth/presentation/ui/CheckboxField.kt index b134cb59a..5ff1b4b6e 100644 --- a/auth/src/main/java/org/openedx/auth/presentation/ui/CheckboxField.kt +++ b/auth/src/main/java/org/openedx/auth/presentation/ui/CheckboxField.kt @@ -31,7 +31,7 @@ internal fun CheckboxField( checked = checkedState, colors = CheckboxDefaults.colors( checkedColor = MaterialTheme.appColors.primary, - uncheckedColor = MaterialTheme.appColors.textFieldText + uncheckedColor = MaterialTheme.appColors.primary ), onCheckedChange = { checkedState = it 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 index 336c09f8f..b206868b4 100644 --- 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,9 +45,9 @@ internal fun SocialAuthView( .testTag("btn_google_auth") .padding(top = 24.dp) .fillMaxWidth(), - backgroundColor = MaterialTheme.appColors.background, - borderColor = MaterialTheme.appColors.primary, - textColor = Color.Unspecified, + backgroundColor = MaterialTheme.appColors.buttonSecondaryBackground, + borderColor = MaterialTheme.appColors.textFieldBorder, + textColor = Color.Black, onClick = { onEvent(AuthType.GOOGLE) } @@ -62,6 +62,7 @@ internal fun SocialAuthView( modifier = Modifier .testTag("txt_google_auth") .padding(start = 10.dp), + color = Color.Black, text = stringResource(id = stringRes) ) } @@ -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.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 +126,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/auth/src/main/res/values-uk/strings.xml b/auth/src/main/res/values-uk/strings.xml index c2c34abef..9c1a1aa69 100644 --- a/auth/src/main/res/values-uk/strings.xml +++ b/auth/src/main/res/values-uk/strings.xml @@ -5,7 +5,6 @@ Електронна пошта Неправильна E-mail адреса Пароль занадто короткий - Ласкаво просимо! Будь ласка, авторизуйтесь, щоб продовжити. Показати додаткові поля Приховати додаткові поля Створити акаунт @@ -15,6 +14,5 @@ Перевірте свою електронну пошту Ми надіслали інструкції щодо відновлення пароля на вашу електронну пошту %s Введіть пароль - Створити новий аккаунт. diff --git a/auth/src/main/res/values/strings.xml b/auth/src/main/res/values/strings.xml index 4f8ce12d8..49b3e0bbd 100644 --- a/auth/src/main/res/values/strings.xml +++ b/auth/src/main/res/values/strings.xml @@ -11,7 +11,7 @@ Email or Username Invalid email or username Password is too short - Welcome back! Please authorize to continue. + Welcome back! Sign in to access your courses. Show optional fields Hide optional fields Create account @@ -23,7 +23,7 @@ username@domain.com Enter email or username Enter password - Create new account. + Create an account to start learning today! Complete your registration Sign in with Google Sign in with Facebook diff --git a/core/src/main/java/org/openedx/core/config/ProgramConfig.kt b/core/src/main/java/org/openedx/core/config/ProgramConfig.kt index 55714dadc..c553f8997 100644 --- 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/dialog/appreview/AppReviewUI.kt b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/AppReviewUI.kt index e2d6a471f..7dcd18c22 100644 --- 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 @@ -180,7 +180,7 @@ fun FeedbackDialog( colors = TextFieldDefaults.outlinedTextFieldColors( backgroundColor = MaterialTheme.appColors.cardViewBackground, unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, - textColor = MaterialTheme.appColors.textFieldText + textColor = MaterialTheme.appColors.textFieldHint ), ) @@ -345,6 +345,7 @@ fun DefaultTextButton( ) { Text( text = text, + color = MaterialTheme.appColors.onSecondary, style = MaterialTheme.appTypography.labelLarge ) } 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 index f0502b49d..9a32b4123 100644 --- 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 index e26d882eb..f1c92f4c8 100644 --- 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 index 3b97742f1..939121c53 100644 --- a/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt +++ b/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt @@ -254,12 +254,11 @@ fun SearchBar( } }, colors = TextFieldDefaults.outlinedTextFieldColors( - textColor = MaterialTheme.appColors.textPrimary, - backgroundColor = if (isFocused) MaterialTheme.appColors.background else MaterialTheme.appColors.textFieldBackground, - focusedBorderColor = MaterialTheme.appColors.primary, - unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, - cursorColor = MaterialTheme.appColors.primary, - leadingIconColor = MaterialTheme.appColors.textPrimary + textColor = MaterialTheme.appColors.textFieldText, + backgroundColor = MaterialTheme.appColors.textFieldBackground, + focusedBorderColor = MaterialTheme.appColors.textFieldBorder, + cursorColor = MaterialTheme.appColors.textFieldText, + leadingIconColor = MaterialTheme.appColors.textFieldText ), placeholder = { Text( @@ -267,7 +266,7 @@ fun SearchBar( .testTag("txt_search_placeholder") .fillMaxWidth(), text = label, - color = MaterialTheme.appColors.textSecondary, + color = MaterialTheme.appColors.textFieldHint, style = MaterialTheme.appTypography.bodyMedium ) }, @@ -276,7 +275,7 @@ fun SearchBar( modifier = Modifier.padding(start = 16.dp), imageVector = Icons.Filled.Search, contentDescription = null, - tint = if (isFocused) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface + tint = if (isFocused) MaterialTheme.appColors.textFieldText else MaterialTheme.appColors.textFieldHint ) }, trailingIcon = { @@ -346,18 +345,18 @@ fun SearchBarStateless( } }, colors = TextFieldDefaults.outlinedTextFieldColors( - textColor = MaterialTheme.appColors.textPrimary, - backgroundColor = if (isFocused) MaterialTheme.appColors.background else MaterialTheme.appColors.textFieldBackground, - focusedBorderColor = MaterialTheme.appColors.primary, + textColor = MaterialTheme.appColors.textFieldText, + backgroundColor = MaterialTheme.appColors.textFieldBackground, + focusedBorderColor = MaterialTheme.appColors.textFieldBorder, unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, - cursorColor = MaterialTheme.appColors.primary, - leadingIconColor = MaterialTheme.appColors.textPrimary + cursorColor = MaterialTheme.appColors.textFieldText, + leadingIconColor = MaterialTheme.appColors.textFieldText ), placeholder = { Text( modifier = Modifier.fillMaxWidth(), text = label, - color = MaterialTheme.appColors.textSecondary, + color = MaterialTheme.appColors.textFieldText, style = MaterialTheme.appTypography.bodyMedium ) }, @@ -366,7 +365,7 @@ fun SearchBarStateless( modifier = Modifier.padding(start = 16.dp), imageVector = Icons.Filled.Search, contentDescription = null, - tint = if (isFocused) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface + tint = if (isFocused) MaterialTheme.appColors.textFieldText else MaterialTheme.appColors.textFieldHint ) }, trailingIcon = { @@ -434,7 +433,7 @@ fun HyperlinkText( append(fullText) addStyle( style = SpanStyle( - color = MaterialTheme.appColors.textPrimary, + color = MaterialTheme.appColors.textPrimaryLight, fontSize = fontSize ), start = 0, @@ -450,7 +449,7 @@ fun HyperlinkText( color = linkTextColor, fontSize = fontSize, fontWeight = linkTextFontWeight, - textDecoration = linkTextDecoration + textDecoration = linkTextDecoration, ), start = startIndex, end = endIndex @@ -635,7 +634,8 @@ fun SheetContent( .padding(10.dp), textAlign = TextAlign.Center, style = MaterialTheme.appTypography.titleMedium, - text = title + text = title, + color = MaterialTheme.appColors.onBackground ) SearchBarStateless( modifier = Modifier @@ -667,6 +667,7 @@ fun SheetContent( onItemClick(item) } .padding(vertical = 12.dp), + color = MaterialTheme.appColors.onBackground, text = item.name, style = MaterialTheme.appTypography.bodyLarge, textAlign = TextAlign.Center @@ -1043,14 +1044,34 @@ fun OfflineModeDialog( } } +@Composable +fun OpenEdXSecondaryButton( + modifier: Modifier = Modifier.fillMaxWidth(), + text: String = "", + onClick: () -> Unit, + enabled: Boolean = true, + content: (@Composable RowScope.() -> Unit)? = null +) { + OpenEdXButton( + modifier = modifier, + text = text, + onClick = onClick, + enabled = enabled, + textColor = MaterialTheme.appColors.onSecondary, + backgroundColor = MaterialTheme.appColors.secondary, + content = content + ) +} + @Composable fun OpenEdXButton( modifier: Modifier = Modifier.fillMaxWidth(), text: String = "", onClick: () -> Unit, enabled: Boolean = true, - backgroundColor: Color = MaterialTheme.appColors.buttonBackground, - content: (@Composable RowScope.() -> Unit)? = null, + textColor: Color = MaterialTheme.appColors.onSecondary, + backgroundColor: Color = MaterialTheme.appColors.secondary, + content: (@Composable RowScope.() -> Unit)? = null ) { Button( modifier = Modifier @@ -1068,7 +1089,7 @@ fun OpenEdXButton( Text( modifier = Modifier.testTag("txt_${text.tagId()}"), text = text, - color = MaterialTheme.appColors.buttonText, + color = textColor, style = MaterialTheme.appTypography.labelLarge ) } else { @@ -1077,6 +1098,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(), @@ -1084,6 +1125,7 @@ fun OpenEdXOutlinedButton( borderColor: Color, textColor: Color, text: String = "", + enabled: Boolean = true, onClick: () -> Unit, content: (@Composable RowScope.() -> Unit)? = null, ) { @@ -1093,6 +1135,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) @@ -1159,7 +1202,7 @@ fun ConnectionErrorView( textAlign = TextAlign.Center ) Spacer(Modifier.height(16.dp)) - OpenEdXButton( + OpenEdXSecondaryButton( modifier = Modifier .widthIn(Dp.Unspecified, 162.dp), text = stringResource(id = R.string.core_reload), @@ -1174,7 +1217,7 @@ fun AuthButtonsPanel( onSignInClick: () -> Unit, ) { Row { - OpenEdXButton( + OpenEdXSecondaryButton( modifier = Modifier .testTag("btn_register") .width(0.dp) @@ -1183,15 +1226,13 @@ fun AuthButtonsPanel( 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 index 4b7a0ba10..d1d64d6eb 100644 --- a/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt +++ b/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt @@ -8,6 +8,8 @@ data class AppColors( val textPrimary: Color, val textPrimaryVariant: Color, + val textPrimaryLight: Color, + val textHyperLink: Color, val textSecondary: Color, val textDark: Color, val textAccent: Color, @@ -31,6 +33,10 @@ data class AppColors( val bottomSheetToggle: Color, val warning: Color, val info: Color, + val info_variant: 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 index 1ffa3c73d..79f77b0c3 100644 --- a/core/src/main/java/org/openedx/core/ui/theme/Theme.kt +++ b/core/src/main/java/org/openedx/core/ui/theme/Theme.kt @@ -27,10 +27,12 @@ private val DarkColorPalette = AppColors( ), textPrimary = dark_text_primary, textPrimaryVariant = dark_text_primary_variant, + textPrimaryLight = dark_text_primary_light, textSecondary = dark_text_secondary, textDark = dark_text_dark, textAccent = dark_text_accent, textWarning = dark_text_warning, + textHyperLink = dark_text_hyper_link, textFieldBackground = dark_text_field_background, textFieldBackgroundVariant = dark_text_field_background_variant, @@ -51,6 +53,10 @@ private val DarkColorPalette = AppColors( warning = dark_warning, info = dark_info, + info_variant = dark_info_variant, + onWarning = dark_onWarning, + onInfo = dark_onInfo, + buttonBorder = dark_button_border, rateStars = dark_rate_stars, inactiveButtonBackground = dark_inactive_button_background, @@ -98,10 +104,12 @@ private val LightColorPalette = AppColors( ), textPrimary = light_text_primary, textPrimaryVariant = light_text_primary_variant, + textPrimaryLight = light_text_primary_light, textSecondary = light_text_secondary, textDark = light_text_dark, textAccent = light_text_accent, textWarning = light_text_warning, + textHyperLink = light_text_hyper_link, textFieldBackground = light_text_field_background, textFieldBackgroundVariant = light_text_field_background_variant, @@ -122,6 +130,10 @@ private val LightColorPalette = AppColors( warning = light_warning, info = light_info, + info_variant = light_info_variant, + 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 index edd2afcc7..0160196f9 100644 --- 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( diff --git a/core/src/openedx/org/openedx/core/ui/theme/Colors.kt b/core/src/openedx/org/openedx/core/ui/theme/Colors.kt index 1cc4c3495..14d908ea1 100644 --- a/core/src/openedx/org/openedx/core/ui/theme/Colors.kt +++ b/core/src/openedx/org/openedx/core/ui/theme/Colors.kt @@ -10,12 +10,16 @@ val light_background = Color.White val light_surface = Color(0xFFF7F7F8) val light_error = Color(0xFFFF3D71) val light_onPrimary = Color.White -val light_onSecondary = Color.Black +val light_onSecondary = Color.White val light_onBackground = Color.Black val light_onSurface = Color.Black val light_onError = Color.White +val light_onWarning = Color.White +val light_onInfo = Color.White +val light_info_variant = Color(0xFF3C68FF) val light_text_primary = Color(0xFF212121) val light_text_primary_variant = Color(0xFF3D4964) +val light_text_primary_light = light_text_primary val light_text_secondary = Color(0xFFB3B3B3) val light_text_dark = Color(0xFF19212F) val light_text_accent = Color(0xFF3C68FF) @@ -25,7 +29,9 @@ val light_text_field_background_variant = Color.White val light_text_field_border = Color(0xFF97A5BB) val light_text_field_text = Color(0xFF3D4964) val light_text_field_hint = Color(0xFF97A5BB) +val light_text_hyper_link = Color(0xFF3C68FF) val light_button_background = Color(0xFF3C68FF) +val light_button_border = Color(0xFF97A5BB) val light_button_secondary_background = Color(0xFF79889F) val light_button_text = Color.White val light_card_view_background = Color(0xFFF9FAFB) @@ -66,11 +72,12 @@ val dark_background = Color(0xFF19212F) val dark_surface = Color(0xFF273346) val dark_error = Color(0xFFFF3D71) val dark_onPrimary = Color.Black -val dark_onSecondary = Color.Black +val dark_onSecondary = Color.White val dark_onBackground = Color.White val dark_onSurface = Color.White val dark_onError = Color.Black val dark_text_primary = Color.White +val dark_text_primary_light = dark_text_primary val dark_text_primary_variant = Color(0xFF79889F) val dark_text_secondary = Color(0xFFB3B3B3) val dark_text_dark = Color.White @@ -81,7 +88,9 @@ val dark_text_field_background_variant = Color(0xFF273346) val dark_text_field_border = Color(0xFF4E5A70) val dark_text_field_text = Color.White val dark_text_field_hint = Color(0xFF79889F) +val dark_text_hyper_link = Color(0xFF5478F9) val dark_button_background = Color(0xFF5478F9) +val dark_button_border = Color(0xFF4E5A70) val dark_button_secondary_background = Color(0xFF79889F) val dark_button_text = Color.White val dark_card_view_background = Color(0xFF273346) @@ -90,7 +99,10 @@ val dark_divider = Color(0xFF4E5A70) val dark_certificate_foreground = Color(0xD92EB865) val dark_bottom_sheet_toggle = Color(0xFF4E5A70) val dark_warning = Color(0xFFFFC248) +val dark_onWarning = Color.White val dark_info = Color(0xFF0095FF) +val dark_info_variant = Color(0xFF5478F9) +val dark_onInfo = Color.White val dark_rate_stars = Color(0xFFFFC94D) val dark_inactive_button_background = Color(0xFFCCD4E0) val dark_inactive_button_text = Color(0xFF3D4964) diff --git a/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt b/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt index e84766780..6fb8c305d 100644 --- a/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt +++ b/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt @@ -197,7 +197,7 @@ private fun ChapterEndDialogScreen( Text( modifier = Modifier.fillMaxWidth(), text = stringResource(id = R.string.course_section_finished, sectionName), - color = MaterialTheme.appColors.textFieldText, + color = MaterialTheme.appColors.onBackground, style = MaterialTheme.appTypography.titleSmall, textAlign = TextAlign.Center ) @@ -209,7 +209,7 @@ private fun ChapterEndDialogScreen( TextIcon( text = stringResource(id = R.string.course_next_section), painter = painterResource(org.openedx.core.R.drawable.core_ic_forward), - color = MaterialTheme.appColors.buttonText, + color = MaterialTheme.appColors.onSecondary, textStyle = MaterialTheme.appTypography.labelLarge, iconModifier = Modifier.rotate(if (isVerticalNavigation) 90f else 0f) ) @@ -220,14 +220,14 @@ private fun ChapterEndDialogScreen( } OpenEdXOutlinedButton( borderColor = MaterialTheme.appColors.buttonBackground, - textColor = MaterialTheme.appColors.buttonBackground, + textColor = MaterialTheme.appColors.onBackground, text = stringResource(id = R.string.course_back_to_outline), onClick = onBackButtonClick, content = { AutoSizeText( text = stringResource(id = R.string.course_back_to_outline), style = MaterialTheme.appTypography.bodyMedium, - color = MaterialTheme.appColors.buttonBackground + color = MaterialTheme.appColors.onBackground ) } ) @@ -309,7 +309,7 @@ private fun ChapterEndDialogScreenLandscape( Text( modifier = Modifier.fillMaxWidth(), text = stringResource(id = R.string.course_section_finished, sectionName), - color = MaterialTheme.appColors.textFieldText, + color = MaterialTheme.appColors.onBackground, style = MaterialTheme.appTypography.titleSmall, textAlign = TextAlign.Center ) @@ -326,7 +326,7 @@ private fun ChapterEndDialogScreenLandscape( TextIcon( text = stringResource(id = R.string.course_next_section), painter = painterResource(org.openedx.core.R.drawable.core_ic_forward), - color = MaterialTheme.appColors.buttonText, + color = MaterialTheme.appColors.onSecondary, textStyle = MaterialTheme.appTypography.labelLarge ) }, @@ -343,7 +343,7 @@ private fun ChapterEndDialogScreenLandscape( AutoSizeText( text = stringResource(id = R.string.course_back_to_outline), style = MaterialTheme.appTypography.bodyMedium, - color = MaterialTheme.appColors.buttonBackground + color = MaterialTheme.appColors.onBackground ) } ) diff --git a/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt b/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt index 50d569308..f85bda090 100644 --- a/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt +++ b/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt @@ -230,7 +230,7 @@ fun OfflineQueueCard( Text( text = downloadModel.size.toLong().toFileSize(), style = MaterialTheme.appTypography.titleSmall, - color = MaterialTheme.appColors.textSecondary, + color = MaterialTheme.appColors.onBackground, overflow = TextOverflow.Ellipsis, maxLines = 1 ) @@ -263,7 +263,7 @@ fun OfflineQueueCard( Icon( imageVector = Icons.Filled.Close, contentDescription = stringResource(id = R.string.course_accessibility_stop_downloading_course_section), - tint = MaterialTheme.appColors.error + tint = MaterialTheme.appColors.onBackground ) } } @@ -339,7 +339,7 @@ fun NavigationUnitsButtons( colors = ButtonDefaults.outlinedButtonColors( backgroundColor = MaterialTheme.appColors.background ), - border = BorderStroke(1.dp, MaterialTheme.appColors.primary), + border = BorderStroke(1.dp, MaterialTheme.appColors.secondary), elevation = null, shape = MaterialTheme.appShapes.navigationButtonShape, onClick = onPrevClick, @@ -380,7 +380,7 @@ fun NavigationUnitsButtons( ) { Text( text = nextButtonText, - color = MaterialTheme.appColors.buttonText, + color = MaterialTheme.appColors.onSecondary, style = MaterialTheme.appTypography.labelLarge ) Spacer(Modifier.width(8.dp)) @@ -388,7 +388,7 @@ fun NavigationUnitsButtons( modifier = Modifier.rotate(if (isVerticalNavigation || !hasNextBlock) 0f else -90f), painter = nextButtonIcon, contentDescription = null, - tint = MaterialTheme.appColors.buttonText + tint = MaterialTheme.appColors.onSecondary ) } } @@ -516,7 +516,11 @@ fun VideoSubtitles( val scaffoldState = rememberScaffoldState() val subtitles = timedTextObject.captions.values.toList() Scaffold(scaffoldState = scaffoldState) { - Column(Modifier.padding(it)) { + Column( + modifier = Modifier + .padding(it) + .background(color = MaterialTheme.appColors.background) + ) { Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, diff --git a/course/src/main/java/org/openedx/course/presentation/ui/CourseVideosUI.kt b/course/src/main/java/org/openedx/course/presentation/ui/CourseVideosUI.kt index c69e26c0d..a240f1f65 100644 --- a/course/src/main/java/org/openedx/course/presentation/ui/CourseVideosUI.kt +++ b/course/src/main/java/org/openedx/course/presentation/ui/CourseVideosUI.kt @@ -606,7 +606,7 @@ private fun AllVideosDownloadItem( Spacer(modifier = Modifier.height(2.dp)) Text( text = downloadVideoSubTitle, - color = MaterialTheme.appColors.textSecondary, + color = MaterialTheme.appColors.onBackground, style = MaterialTheme.appTypography.labelMedium ) } @@ -630,6 +630,7 @@ private fun AllVideosDownloadItem( } }, colors = SwitchDefaults.colors( + uncheckedThumbColor = MaterialTheme.appColors.primary, checkedThumbColor = MaterialTheme.appColors.primary, checkedTrackColor = MaterialTheme.appColors.primary ) @@ -679,7 +680,7 @@ private fun AllVideosDownloadItem( Spacer(modifier = Modifier.height(2.dp)) Text( text = stringResource(id = videoSettings.videoDownloadQuality.titleResId), - color = MaterialTheme.appColors.textSecondary, + color = MaterialTheme.appColors.onBackground, style = MaterialTheme.appTypography.labelMedium ) } diff --git a/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt index bdf5dcd8b..f16d5906a 100644 --- a/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt +++ b/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt @@ -146,7 +146,7 @@ private fun NotSupportedUnitScreen( }) { Text( text = stringResource(id = courseR.string.course_open_in_browser), - color = MaterialTheme.appColors.buttonText, + color = MaterialTheme.appColors.onSecondary, style = MaterialTheme.appTypography.labelLarge ) } diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt index f6bc5c56a..06a50b1b4 100644 --- a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt +++ b/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt @@ -427,7 +427,7 @@ private fun CourseItem( Text( modifier = Modifier.testTag("txt_course_org"), text = enrolledCourse.course.org, - color = MaterialTheme.appColors.textFieldHint, + color = MaterialTheme.appColors.onBackground, style = MaterialTheme.appTypography.labelMedium ) Spacer(modifier = Modifier.height(4.dp)) @@ -463,7 +463,7 @@ private fun CourseItem( enrolledCourse.course.startType, enrolledCourse.course.startDisplay ), - color = MaterialTheme.appColors.textFieldHint, + color = MaterialTheme.appColors.onBackground, style = MaterialTheme.appTypography.labelMedium ) Box( diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt b/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt index 99bf4f26e..fd7dc21af 100644 --- a/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt +++ b/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt @@ -393,7 +393,7 @@ private fun DiscussionThreadsScreen( text = filterType.first, painter = painterResource(id = discussionR.drawable.discussion_ic_filter), textStyle = MaterialTheme.appTypography.labelMedium, - color = MaterialTheme.appColors.textAccent, + color = MaterialTheme.appColors.textPrimary, onClick = { currentSelectedList = FilterType.type expandedList = listOf( @@ -423,7 +423,7 @@ private fun DiscussionThreadsScreen( text = sortType.first, painter = painterResource(id = discussionR.drawable.discussion_ic_sort), textStyle = MaterialTheme.appTypography.labelMedium, - color = MaterialTheme.appColors.textAccent, + color = MaterialTheme.appColors.textPrimary, onClick = { currentSelectedList = SortType.type expandedList = listOf( @@ -475,7 +475,7 @@ private fun DiscussionThreadsScreen( Modifier .size(40.dp) .clip(CircleShape) - .background(MaterialTheme.appColors.primary) + .background(MaterialTheme.appColors.secondary) .clickable { onCreatePostClick() }, diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/ui/DiscussionUI.kt b/discussion/src/main/java/org/openedx/discussion/presentation/ui/DiscussionUI.kt index 7d2242850..cd87e0498 100644 --- a/discussion/src/main/java/org/openedx/discussion/presentation/ui/DiscussionUI.kt +++ b/discussion/src/main/java/org/openedx/discussion/presentation/ui/DiscussionUI.kt @@ -587,11 +587,10 @@ fun ThreadItem( thread.commentCount - 1 ), painter = painterResource(id = R.drawable.discussion_ic_responses), - color = MaterialTheme.appColors.textAccent, + color = MaterialTheme.appColors.textPrimary, textStyle = MaterialTheme.appTypography.labelLarge ) } - } diff --git a/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt b/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt index 907b3942a..d80198760 100644 --- a/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt +++ b/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt @@ -600,7 +600,7 @@ private fun EditProfileScreen( Text( modifier = Modifier.testTag("txt_edit_profile_type_label"), text = stringResource(if (uiState.isLimited) R.string.profile_limited_profile else R.string.profile_full_profile), - color = MaterialTheme.appColors.textSecondary, + color = MaterialTheme.appColors.onBackground, style = MaterialTheme.appTypography.titleSmall ) Spacer(modifier = Modifier.height(32.dp)) @@ -648,7 +648,7 @@ private fun EditProfileScreen( }, painter = painterResource(id = R.drawable.profile_ic_edit_image), contentDescription = null, - tint = Color.White + tint = MaterialTheme.appColors.onPrimary ) } Spacer(modifier = Modifier.height(20.dp)) @@ -949,10 +949,12 @@ private fun SelectableField( ) } else { TextFieldDefaults.outlinedTextFieldColors( + textColor = MaterialTheme.appColors.textFieldText, + backgroundColor = MaterialTheme.appColors.textFieldBackground, unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, + cursorColor = MaterialTheme.appColors.textFieldText, disabledBorderColor = MaterialTheme.appColors.textFieldBorder, - disabledTextColor = MaterialTheme.appColors.textPrimary, - backgroundColor = MaterialTheme.appColors.textFieldBackground, + disabledTextColor = MaterialTheme.appColors.textFieldHint, disabledPlaceholderColor = MaterialTheme.appColors.textFieldHint ) } @@ -963,7 +965,7 @@ private fun SelectableField( .fillMaxWidth(), text = name, style = MaterialTheme.appTypography.labelLarge, - color = MaterialTheme.appColors.textPrimary + color = MaterialTheme.appColors.onBackground ) Spacer(modifier = Modifier.height(8.dp)) OutlinedTextField( @@ -978,7 +980,7 @@ private fun SelectableField( Icon( imageVector = Icons.Filled.ExpandMore, contentDescription = null, - tint = MaterialTheme.appColors.textPrimaryVariant + tint = MaterialTheme.appColors.textFieldText ) }, modifier = Modifier @@ -991,7 +993,7 @@ private fun SelectableField( Text( modifier = Modifier.testTag("txt_placeholder_${name.tagId()}"), text = name, - color = MaterialTheme.appColors.textFieldHint, + color = MaterialTheme.appColors.textFieldText, style = MaterialTheme.appTypography.bodyMedium ) } @@ -1029,8 +1031,10 @@ private fun InputEditField( onValueChanged(it) }, 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 = { @@ -1116,14 +1120,14 @@ private fun LeaveProfile( OpenEdXButton( text = stringResource(id = R.string.profile_leave), onClick = onLeaveClick, - backgroundColor = MaterialTheme.appColors.warning, + backgroundColor = MaterialTheme.appColors.primary, content = { Text( modifier = Modifier .testTag("txt_leave") .fillMaxWidth(), text = stringResource(id = R.string.profile_leave), - color = MaterialTheme.appColors.textWarning, + color = MaterialTheme.appColors.buttonText, style = MaterialTheme.appTypography.labelLarge, textAlign = TextAlign.Center ) @@ -1131,7 +1135,7 @@ private fun LeaveProfile( ) Spacer(Modifier.height(24.dp)) OpenEdXOutlinedButton( - borderColor = MaterialTheme.appColors.textPrimary, + borderColor = MaterialTheme.appColors.textFieldBorder, textColor = MaterialTheme.appColors.textPrimary, text = stringResource(id = R.string.profile_keep_editing), onClick = onDismissRequest @@ -1208,20 +1212,20 @@ private fun LeaveProfileLandscape( ) { OpenEdXButton( text = stringResource(id = R.string.profile_leave), - backgroundColor = MaterialTheme.appColors.warning, + backgroundColor = MaterialTheme.appColors.primary, content = { AutoSizeText( modifier = Modifier.testTag("txt_leave_profile_dialog_leave"), text = stringResource(id = R.string.profile_leave), style = MaterialTheme.appTypography.bodyMedium, - color = MaterialTheme.appColors.textDark + color = MaterialTheme.appColors.buttonText ) }, onClick = onLeaveClick ) Spacer(Modifier.height(16.dp)) OpenEdXOutlinedButton( - borderColor = MaterialTheme.appColors.textPrimary, + borderColor = MaterialTheme.appColors.textFieldBorder, textColor = MaterialTheme.appColors.textPrimary, text = stringResource(id = R.string.profile_keep_editing), onClick = onDismissRequest, diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt b/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt index a76ff9a10..5aabed2e2 100644 --- a/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt +++ b/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt @@ -49,7 +49,7 @@ fun PageIndicator( numberOfPages: Int, modifier: Modifier = Modifier, selectedPage: Int = 0, - selectedColor: Color = MaterialTheme.appColors.info, + selectedColor: Color = MaterialTheme.appColors.primaryVariant, previousUnselectedColor: Color = MaterialTheme.appColors.cardViewBorder, nextUnselectedColor: Color = MaterialTheme.appColors.textFieldBorder, defaultRadius: Dp = 20.dp, @@ -176,7 +176,7 @@ fun PrevButton( colors = ButtonDefaults.outlinedButtonColors( backgroundColor = MaterialTheme.appColors.background ), - border = BorderStroke(1.dp, MaterialTheme.appColors.primary), + border = BorderStroke(1.dp, MaterialTheme.appColors.secondary), elevation = null, shape = MaterialTheme.appShapes.navigationButtonShape, onClick = onPrevClick, @@ -193,7 +193,7 @@ fun PrevButton( Spacer(Modifier.width(8.dp)) Text( text = stringResource(R.string.whats_new_navigation_previous), - color = MaterialTheme.appColors.primary, + color = MaterialTheme.appColors.onBackground, style = MaterialTheme.appTypography.labelLarge ) } @@ -231,14 +231,14 @@ fun NextFinishButton( Text( modifier = Modifier.testTag("txt_next"), text = stringResource(id = R.string.whats_new_navigation_next), - color = MaterialTheme.appColors.buttonText, + color = MaterialTheme.appColors.onSecondary, style = MaterialTheme.appTypography.labelLarge ) Spacer(Modifier.width(8.dp)) Icon( painter = painterResource(id = org.openedx.core.R.drawable.core_ic_forward), contentDescription = null, - tint = MaterialTheme.appColors.buttonText + tint = MaterialTheme.appColors.onSecondary ) } } else { @@ -249,14 +249,14 @@ fun NextFinishButton( Text( modifier = Modifier.testTag("txt_done"), text = stringResource(id = R.string.whats_new_navigation_done), - color = MaterialTheme.appColors.buttonText, + color = MaterialTheme.appColors.onSecondary, style = MaterialTheme.appTypography.labelLarge ) Spacer(Modifier.width(8.dp)) Icon( painter = painterResource(id = org.openedx.core.R.drawable.core_ic_check), contentDescription = null, - tint = MaterialTheme.appColors.buttonText + tint = MaterialTheme.appColors.onSecondary ) } } From c6b32c543783a0c56d2a231630343969fbdc3652 Mon Sep 17 00:00:00 2001 From: Farhan Arshad Date: Wed, 17 Apr 2024 13:51:40 +0500 Subject: [PATCH 2/5] fix: openedx theme breaking changes --- .../openedx/auth/presentation/ui/AuthUI.kt | 8 ++-- .../auth/presentation/ui/CheckboxField.kt | 2 +- .../auth/presentation/ui/SocialAuthView.kt | 16 +++---- .../dialog/appreview/AppReviewUI.kt | 7 ++- .../global/app_upgrade/AppUpdateUI.kt | 8 ++-- .../settings/VideoQualityFragment.kt | 2 +- .../java/org/openedx/core/ui/ComposeCommon.kt | 43 ++++++++++--------- .../org/openedx/core/ui/theme/AppColors.kt | 15 +++++-- .../java/org/openedx/core/ui/theme/Theme.kt | 34 ++++++++++----- .../org/openedx/core/ui/theme/Colors.kt | 39 ++++++++++++----- .../presentation/ChapterEndFragmentDialog.kt | 20 ++++----- .../outline/CourseOutlineScreen.kt | 4 +- .../course/presentation/ui/CourseUI.kt | 12 +++--- .../course/presentation/ui/CourseVideosUI.kt | 4 +- .../unit/NotSupportedUnitFragment.kt | 4 +- .../presentation/DashboardFragment.kt | 4 +- .../threads/DiscussionThreadsFragment.kt | 4 +- .../presentation/edit/EditProfileFragment.kt | 10 ++--- .../compose/ManageAccountView.kt | 2 +- .../profile/compose/ProfileView.kt | 2 +- .../whatsnew/presentation/ui/WhatsNewUI.kt | 16 +++---- 21 files changed, 147 insertions(+), 109 deletions(-) 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 index ca98f8fb7..d3d092567 100644 --- a/auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt +++ b/auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt @@ -302,11 +302,11 @@ fun InputRegistrationField( } val isSingleLine = registrationField.type != RegistrationFieldType.TEXTAREA val helperTextColor = if (registrationField.errorInstructions.isEmpty()) { - MaterialTheme.appColors.primary + MaterialTheme.appColors.textSecondary } else if (isErrorShown) { MaterialTheme.appColors.error } else { - MaterialTheme.appColors.textFieldHint + MaterialTheme.appColors.textSecondary } val helperText = if (registrationField.errorInstructions.isEmpty()) { registrationField.instructions @@ -381,11 +381,11 @@ fun SelectableRegisterField( onClick: (String, List) -> Unit ) { val helperTextColor = if (registrationField.errorInstructions.isEmpty()) { - MaterialTheme.appColors.primary + MaterialTheme.appColors.textSecondary } else if (isErrorShown) { MaterialTheme.appColors.error } else { - MaterialTheme.appColors.textFieldHint + MaterialTheme.appColors.textSecondary } val helperText = if (registrationField.errorInstructions.isEmpty()) { registrationField.instructions diff --git a/auth/src/main/java/org/openedx/auth/presentation/ui/CheckboxField.kt b/auth/src/main/java/org/openedx/auth/presentation/ui/CheckboxField.kt index 5ff1b4b6e..b134cb59a 100644 --- a/auth/src/main/java/org/openedx/auth/presentation/ui/CheckboxField.kt +++ b/auth/src/main/java/org/openedx/auth/presentation/ui/CheckboxField.kt @@ -31,7 +31,7 @@ internal fun CheckboxField( checked = checkedState, colors = CheckboxDefaults.colors( checkedColor = MaterialTheme.appColors.primary, - uncheckedColor = MaterialTheme.appColors.primary + uncheckedColor = MaterialTheme.appColors.textFieldText ), onCheckedChange = { checkedState = it 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 index b206868b4..028439290 100644 --- 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,9 +45,9 @@ internal fun SocialAuthView( .testTag("btn_google_auth") .padding(top = 24.dp) .fillMaxWidth(), - backgroundColor = MaterialTheme.appColors.buttonSecondaryBackground, - borderColor = MaterialTheme.appColors.textFieldBorder, - textColor = Color.Black, + backgroundColor = MaterialTheme.appColors.authGoogleButtonBackground, + borderColor = MaterialTheme.appColors.primary, + textColor = Color.Unspecified, onClick = { onEvent(AuthType.GOOGLE) } @@ -62,8 +62,8 @@ internal fun SocialAuthView( modifier = Modifier .testTag("txt_google_auth") .padding(start = 10.dp), - color = Color.Black, - text = stringResource(id = stringRes) + text = stringResource(id = stringRes), + color = MaterialTheme.appColors.primaryButtonBorderedText, ) } } @@ -88,13 +88,13 @@ internal fun SocialAuthView( Icon( painter = painterResource(id = R.drawable.ic_auth_facebook), contentDescription = null, - tint = MaterialTheme.appColors.onSecondary, + tint = MaterialTheme.appColors.primaryButtonText, ) Text( modifier = Modifier .testTag("txt_facebook_auth") .padding(start = 10.dp), - color = MaterialTheme.appColors.onSecondary, + color = MaterialTheme.appColors.primaryButtonText, text = stringResource(id = stringRes) ) } @@ -126,7 +126,7 @@ internal fun SocialAuthView( modifier = Modifier .testTag("txt_microsoft_auth") .padding(start = 10.dp), - color = MaterialTheme.appColors.onSecondary, + color = MaterialTheme.appColors.primaryButtonText, text = stringResource(id = stringRes) ) } 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 index 7dcd18c22..b924cd543 100644 --- 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 @@ -180,7 +180,7 @@ fun FeedbackDialog( colors = TextFieldDefaults.outlinedTextFieldColors( backgroundColor = MaterialTheme.appColors.cardViewBackground, unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, - textColor = MaterialTheme.appColors.textFieldHint + textColor = MaterialTheme.appColors.textFieldText ), ) @@ -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 @@ -345,7 +345,6 @@ fun DefaultTextButton( ) { Text( text = text, - color = MaterialTheme.appColors.onSecondary, style = MaterialTheme.appTypography.labelLarge ) } 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 index 9a32b4123..3f8dd6fa9 100644 --- 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.textPrimary, + color = MaterialTheme.appColors.textAccent, style = MaterialTheme.appTypography.labelLarge, text = text ) @@ -292,7 +292,7 @@ fun DefaultTextButton( .testTag("btn_primary") .height(42.dp), colors = ButtonDefaults.buttonColors( - backgroundColor = MaterialTheme.appColors.textPrimary + 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 = {} ) } -} \ No newline at end of file +} 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 index f1c92f4c8..e26d882eb 100644 --- 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.textPrimary, + color = MaterialTheme.appColors.textSecondary, 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 index 939121c53..f9c4a80d9 100644 --- a/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt +++ b/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt @@ -254,11 +254,12 @@ fun SearchBar( } }, colors = TextFieldDefaults.outlinedTextFieldColors( - textColor = MaterialTheme.appColors.textFieldText, - backgroundColor = MaterialTheme.appColors.textFieldBackground, - focusedBorderColor = MaterialTheme.appColors.textFieldBorder, - cursorColor = MaterialTheme.appColors.textFieldText, - leadingIconColor = MaterialTheme.appColors.textFieldText + textColor = MaterialTheme.appColors.textPrimary, + backgroundColor = if (isFocused) MaterialTheme.appColors.background else MaterialTheme.appColors.textFieldBackground, + focusedBorderColor = MaterialTheme.appColors.primary, + unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, + cursorColor = MaterialTheme.appColors.primary, + leadingIconColor = MaterialTheme.appColors.textPrimary ), placeholder = { Text( @@ -266,7 +267,7 @@ fun SearchBar( .testTag("txt_search_placeholder") .fillMaxWidth(), text = label, - color = MaterialTheme.appColors.textFieldHint, + color = MaterialTheme.appColors.textSecondary, style = MaterialTheme.appTypography.bodyMedium ) }, @@ -275,7 +276,7 @@ fun SearchBar( modifier = Modifier.padding(start = 16.dp), imageVector = Icons.Filled.Search, contentDescription = null, - tint = if (isFocused) MaterialTheme.appColors.textFieldText else MaterialTheme.appColors.textFieldHint + tint = if (isFocused) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface ) }, trailingIcon = { @@ -345,18 +346,18 @@ fun SearchBarStateless( } }, colors = TextFieldDefaults.outlinedTextFieldColors( - textColor = MaterialTheme.appColors.textFieldText, - backgroundColor = MaterialTheme.appColors.textFieldBackground, - focusedBorderColor = MaterialTheme.appColors.textFieldBorder, + textColor = MaterialTheme.appColors.textPrimary, + backgroundColor = if (isFocused) MaterialTheme.appColors.background else MaterialTheme.appColors.textFieldBackground, + focusedBorderColor = MaterialTheme.appColors.primary, unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, - cursorColor = MaterialTheme.appColors.textFieldText, - leadingIconColor = MaterialTheme.appColors.textFieldText + cursorColor = MaterialTheme.appColors.primary, + leadingIconColor = MaterialTheme.appColors.textPrimary ), placeholder = { Text( modifier = Modifier.fillMaxWidth(), text = label, - color = MaterialTheme.appColors.textFieldText, + color = MaterialTheme.appColors.textSecondary, style = MaterialTheme.appTypography.bodyMedium ) }, @@ -365,7 +366,7 @@ fun SearchBarStateless( modifier = Modifier.padding(start = 16.dp), imageVector = Icons.Filled.Search, contentDescription = null, - tint = if (isFocused) MaterialTheme.appColors.textFieldText else MaterialTheme.appColors.textFieldHint + tint = if (isFocused) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface ) }, trailingIcon = { @@ -1057,8 +1058,8 @@ fun OpenEdXSecondaryButton( text = text, onClick = onClick, enabled = enabled, - textColor = MaterialTheme.appColors.onSecondary, - backgroundColor = MaterialTheme.appColors.secondary, + textColor = MaterialTheme.appColors.primaryButtonText, + backgroundColor = MaterialTheme.appColors.secondaryButtonBackground, content = content ) } @@ -1069,8 +1070,8 @@ fun OpenEdXButton( text: String = "", onClick: () -> Unit, enabled: Boolean = true, - textColor: Color = MaterialTheme.appColors.onSecondary, - backgroundColor: Color = MaterialTheme.appColors.secondary, + textColor: Color = MaterialTheme.appColors.primaryButtonText, + backgroundColor: Color = MaterialTheme.appColors.primaryButtonBackground, content: (@Composable RowScope.() -> Unit)? = null ) { Button( @@ -1111,9 +1112,9 @@ fun OpenEdXSecondaryOutlinedButton( text = text, onClick = onClick, enabled = enabled, - textColor = MaterialTheme.appColors.secondary, - backgroundColor = MaterialTheme.appColors.onSecondary, - borderColor = MaterialTheme.appColors.buttonBorder, + textColor = MaterialTheme.appColors.secondaryButtonBorderedText, + backgroundColor = MaterialTheme.appColors.secondaryButtonBorderedBackground, + borderColor = MaterialTheme.appColors.secondaryButtonBorder, content = content ) } 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 index d1d64d6eb..15d526536 100644 --- a/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt +++ b/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt @@ -21,9 +21,16 @@ data class AppColors( val textFieldText: Color, val textFieldHint: Color, - val buttonBackground: Color, - val buttonSecondaryBackground: Color, - val buttonText: Color, + val primaryButtonBackground: Color, + val primaryButtonText: Color, + val primaryButtonBorder: Color, + val primaryButtonBorderedText: Color, + + val secondaryButtonBackground: Color, + val secondaryButtonText: Color, + val secondaryButtonBorder: Color, + val secondaryButtonBorderedBackground: Color, + val secondaryButtonBorderedText: Color, val cardViewBackground: Color, val cardViewBorder: Color, @@ -36,7 +43,6 @@ data class AppColors( val info_variant: Color, val onWarning: Color, val onInfo: Color, - val buttonBorder: Color, val rateStars: Color, val inactiveButtonBackground: Color, @@ -50,6 +56,7 @@ data class AppColors( val datesSectionBarNextWeek: Color, val datesSectionBarUpcoming: Color, + val authGoogleButtonBackground: Color, val authFacebookButtonBackground: Color, val authMicrosoftButtonBackground: 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 index 79f77b0c3..291192c1c 100644 --- a/core/src/main/java/org/openedx/core/ui/theme/Theme.kt +++ b/core/src/main/java/org/openedx/core/ui/theme/Theme.kt @@ -40,9 +40,16 @@ private val DarkColorPalette = AppColors( textFieldText = dark_text_field_text, textFieldHint = dark_text_field_hint, - buttonBackground = dark_button_background, - buttonSecondaryBackground = dark_button_secondary_background, - buttonText = dark_button_text, + primaryButtonBackground = dark_primary_button_background, + primaryButtonText = dark_primary_button_text, + primaryButtonBorder = dark_primary_button_border, + primaryButtonBorderedText = dark_primary_button_bordered_text, + + secondaryButtonBackground = dark_secondary_button_background, + secondaryButtonText = dark_secondary_button_text, + secondaryButtonBorder = dark_secondary_button_border, + secondaryButtonBorderedBackground = dark_secondary_button_bordered_background, + secondaryButtonBorderedText = dark_secondary_button_bordered_text, cardViewBackground = dark_card_view_background, cardViewBorder = dark_card_view_border, @@ -56,11 +63,10 @@ private val DarkColorPalette = AppColors( info_variant = dark_info_variant, onWarning = dark_onWarning, onInfo = dark_onInfo, - buttonBorder = dark_button_border, rateStars = dark_rate_stars, inactiveButtonBackground = dark_inactive_button_background, - inactiveButtonText = dark_button_text, + inactiveButtonText = dark_primary_button_text, accessGreen = dark_access_green, @@ -70,6 +76,7 @@ private val DarkColorPalette = AppColors( datesSectionBarNextWeek = dark_dates_section_bar_next_week, datesSectionBarUpcoming = dark_dates_section_bar_upcoming, + authGoogleButtonBackground = dark_auth_google_button_background, authFacebookButtonBackground = dark_auth_facebook_button_background, authMicrosoftButtonBackground = dark_auth_microsoft_button_background, @@ -117,9 +124,16 @@ private val LightColorPalette = AppColors( textFieldText = light_text_field_text, textFieldHint = light_text_field_hint, - buttonBackground = light_button_background, - buttonSecondaryBackground = light_button_secondary_background, - buttonText = light_button_text, + primaryButtonBackground = light_primary_button_background, + primaryButtonText = light_primary_button_text, + primaryButtonBorder = light_primary_button_border, + primaryButtonBorderedText = light_primary_button_bordered_text, + + secondaryButtonBackground = light_secondary_button_background, + secondaryButtonText = light_secondary_button_text, + secondaryButtonBorder = light_secondary_button_border, + secondaryButtonBorderedBackground = light_secondary_button_bordered_background, + secondaryButtonBorderedText = light_secondary_button_bordered_text, cardViewBackground = light_card_view_background, cardViewBorder = light_card_view_border, @@ -133,11 +147,10 @@ private val LightColorPalette = AppColors( info_variant = light_info_variant, onWarning = light_onWarning, onInfo = light_onInfo, - buttonBorder = light_button_border, rateStars = light_rate_stars, inactiveButtonBackground = light_inactive_button_background, - inactiveButtonText = light_button_text, + inactiveButtonText = light_primary_button_text, accessGreen = light_access_green, @@ -147,6 +160,7 @@ private val LightColorPalette = AppColors( datesSectionBarNextWeek = light_dates_section_bar_next_week, datesSectionBarUpcoming = light_dates_section_bar_upcoming, + authGoogleButtonBackground = light_auth_google_button_background, authFacebookButtonBackground = light_auth_facebook_button_background, authMicrosoftButtonBackground = light_auth_microsoft_button_background, diff --git a/core/src/openedx/org/openedx/core/ui/theme/Colors.kt b/core/src/openedx/org/openedx/core/ui/theme/Colors.kt index 14d908ea1..ff8dc9ac1 100644 --- a/core/src/openedx/org/openedx/core/ui/theme/Colors.kt +++ b/core/src/openedx/org/openedx/core/ui/theme/Colors.kt @@ -23,17 +23,24 @@ val light_text_primary_light = light_text_primary val light_text_secondary = Color(0xFFB3B3B3) val light_text_dark = Color(0xFF19212F) val light_text_accent = Color(0xFF3C68FF) -val light_text_warning= Color(0xFF19212F) +val light_text_warning = Color(0xFF19212F) val light_text_field_background = Color(0xFFF7F7F8) val light_text_field_background_variant = Color.White val light_text_field_border = Color(0xFF97A5BB) val light_text_field_text = Color(0xFF3D4964) val light_text_field_hint = Color(0xFF97A5BB) val light_text_hyper_link = Color(0xFF3C68FF) -val light_button_background = Color(0xFF3C68FF) -val light_button_border = Color(0xFF97A5BB) -val light_button_secondary_background = Color(0xFF79889F) -val light_button_text = Color.White + +val light_primary_button_background = Color(0xFF3C68FF) +val light_primary_button_border = Color(0xFF97A5BB) +val light_primary_button_text = Color.White +val light_primary_button_bordered_text = Color(0xFF3C68FF) +val light_secondary_button_background = Color(0xFF3C68FF) +val light_secondary_button_text = Color.White +val light_secondary_button_border = Color(0xFF97A5BB) +val light_secondary_button_bordered_background = Color.White +val light_secondary_button_bordered_text = Color(0xFF3C68FF) + val light_card_view_background = Color(0xFFF9FAFB) val light_card_view_border = Color(0xFFCCD4E0) val light_divider = Color(0xFFCCD4E0) @@ -50,6 +57,7 @@ val light_dates_section_bar_today = light_info val light_dates_section_bar_this_week = light_text_primary_variant val light_dates_section_bar_next_week = light_text_field_border val light_dates_section_bar_upcoming = Color(0xFFCCD4E0) +val light_auth_google_button_background = Color.White val light_auth_facebook_button_background = Color(0xFF0866FF) val light_auth_microsoft_button_background = Color(0xFA000000) val light_component_horizontal_progress_completed_and_selected = Color(0xFF30a171) @@ -78,21 +86,29 @@ val dark_onSurface = Color.White val dark_onError = Color.Black val dark_text_primary = Color.White val dark_text_primary_light = dark_text_primary -val dark_text_primary_variant = Color(0xFF79889F) +val dark_text_primary_variant = Color.White val dark_text_secondary = Color(0xFFB3B3B3) val dark_text_dark = Color.White val dark_text_accent = Color(0xFF879FF5) -val dark_text_warning= Color(0xFF19212F) +val dark_text_warning = Color(0xFF19212F) val dark_text_field_background = Color(0xFF273346) val dark_text_field_background_variant = Color(0xFF273346) val dark_text_field_border = Color(0xFF4E5A70) val dark_text_field_text = Color.White val dark_text_field_hint = Color(0xFF79889F) val dark_text_hyper_link = Color(0xFF5478F9) -val dark_button_background = Color(0xFF5478F9) -val dark_button_border = Color(0xFF4E5A70) -val dark_button_secondary_background = Color(0xFF79889F) -val dark_button_text = Color.White + +val dark_primary_button_background = Color(0xFF5478F9) +val dark_primary_button_text = Color.White +val dark_primary_button_border = Color(0xFF4E5A70) +val dark_primary_button_bordered_text = Color(0xFF5478F9) + +val dark_secondary_button_background = Color(0xFF5478F9) +val dark_secondary_button_text = Color.White +val dark_secondary_button_border = Color(0xFF4E5A70) +val dark_secondary_button_bordered_background = Color(0xFF19212F) +val dark_secondary_button_bordered_text = Color(0xFF5478F9) + val dark_card_view_background = Color(0xFF273346) val dark_card_view_border = Color(0xFF4E5A70) val dark_divider = Color(0xFF4E5A70) @@ -112,6 +128,7 @@ val dark_dates_section_bar_today = dark_info val dark_dates_section_bar_this_week = dark_text_primary_variant val dark_dates_section_bar_next_week = dark_text_field_border val dark_dates_section_bar_upcoming = Color(0xFFCCD4E0) +val dark_auth_google_button_background = Color(0xFF19212F) val dark_auth_facebook_button_background = Color(0xFF0866FF) val dark_auth_microsoft_button_background = Color(0xFA000000) val dark_component_horizontal_progress_completed_and_selected = Color(0xFF30a171) diff --git a/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt b/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt index 6fb8c305d..c416aa497 100644 --- a/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt +++ b/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt @@ -197,7 +197,7 @@ private fun ChapterEndDialogScreen( Text( modifier = Modifier.fillMaxWidth(), text = stringResource(id = R.string.course_section_finished, sectionName), - color = MaterialTheme.appColors.onBackground, + color = MaterialTheme.appColors.textFieldText, style = MaterialTheme.appTypography.titleSmall, textAlign = TextAlign.Center ) @@ -209,7 +209,7 @@ private fun ChapterEndDialogScreen( TextIcon( text = stringResource(id = R.string.course_next_section), painter = painterResource(org.openedx.core.R.drawable.core_ic_forward), - color = MaterialTheme.appColors.onSecondary, + color = MaterialTheme.appColors.primaryButtonText, textStyle = MaterialTheme.appTypography.labelLarge, iconModifier = Modifier.rotate(if (isVerticalNavigation) 90f else 0f) ) @@ -219,15 +219,15 @@ private fun ChapterEndDialogScreen( Spacer(Modifier.height(16.dp)) } OpenEdXOutlinedButton( - borderColor = MaterialTheme.appColors.buttonBackground, - textColor = MaterialTheme.appColors.onBackground, + borderColor = MaterialTheme.appColors.primaryButtonBackground, + textColor = MaterialTheme.appColors.primaryButtonBackground, text = stringResource(id = R.string.course_back_to_outline), onClick = onBackButtonClick, content = { AutoSizeText( text = stringResource(id = R.string.course_back_to_outline), style = MaterialTheme.appTypography.bodyMedium, - color = MaterialTheme.appColors.onBackground + color = MaterialTheme.appColors.primaryButtonBorderedText ) } ) @@ -309,7 +309,7 @@ private fun ChapterEndDialogScreenLandscape( Text( modifier = Modifier.fillMaxWidth(), text = stringResource(id = R.string.course_section_finished, sectionName), - color = MaterialTheme.appColors.onBackground, + color = MaterialTheme.appColors.textFieldText, style = MaterialTheme.appTypography.titleSmall, textAlign = TextAlign.Center ) @@ -326,7 +326,7 @@ private fun ChapterEndDialogScreenLandscape( TextIcon( text = stringResource(id = R.string.course_next_section), painter = painterResource(org.openedx.core.R.drawable.core_ic_forward), - color = MaterialTheme.appColors.onSecondary, + color = MaterialTheme.appColors.primaryButtonText, textStyle = MaterialTheme.appTypography.labelLarge ) }, @@ -335,15 +335,15 @@ private fun ChapterEndDialogScreenLandscape( Spacer(Modifier.height(16.dp)) } OpenEdXOutlinedButton( - borderColor = MaterialTheme.appColors.buttonBackground, - textColor = MaterialTheme.appColors.buttonBackground, + borderColor = MaterialTheme.appColors.primaryButtonBackground, + textColor = MaterialTheme.appColors.primaryButtonBackground, text = stringResource(id = R.string.course_back_to_outline), onClick = onBackButtonClick, content = { AutoSizeText( text = stringResource(id = R.string.course_back_to_outline), style = MaterialTheme.appTypography.bodyMedium, - color = MaterialTheme.appColors.onBackground + color = MaterialTheme.appColors.primaryButtonBorderedText ) } ) diff --git a/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineScreen.kt b/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineScreen.kt index 6b9f9626d..3bdc9e622 100644 --- a/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineScreen.kt +++ b/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineScreen.kt @@ -440,7 +440,7 @@ private fun ResumeCourse( TextIcon( text = stringResource(id = R.string.course_resume), painter = painterResource(id = CoreR.drawable.core_ic_forward), - color = MaterialTheme.appColors.buttonText, + color = MaterialTheme.appColors.primaryButtonText, textStyle = MaterialTheme.appTypography.labelLarge ) } @@ -499,7 +499,7 @@ private fun ResumeCourseTablet( TextIcon( text = stringResource(id = R.string.course_resume), painter = painterResource(id = CoreR.drawable.core_ic_forward), - color = MaterialTheme.appColors.buttonText, + color = MaterialTheme.appColors.primaryButtonText, textStyle = MaterialTheme.appTypography.labelLarge ) } diff --git a/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt b/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt index f85bda090..011003ede 100644 --- a/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt +++ b/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt @@ -230,7 +230,7 @@ fun OfflineQueueCard( Text( text = downloadModel.size.toLong().toFileSize(), style = MaterialTheme.appTypography.titleSmall, - color = MaterialTheme.appColors.onBackground, + color = MaterialTheme.appColors.textSecondary, overflow = TextOverflow.Ellipsis, maxLines = 1 ) @@ -263,7 +263,7 @@ fun OfflineQueueCard( Icon( imageVector = Icons.Filled.Close, contentDescription = stringResource(id = R.string.course_accessibility_stop_downloading_course_section), - tint = MaterialTheme.appColors.onBackground + tint = MaterialTheme.appColors.error ) } } @@ -339,7 +339,7 @@ fun NavigationUnitsButtons( colors = ButtonDefaults.outlinedButtonColors( backgroundColor = MaterialTheme.appColors.background ), - border = BorderStroke(1.dp, MaterialTheme.appColors.secondary), + border = BorderStroke(1.dp, MaterialTheme.appColors.primaryButtonBorder), elevation = null, shape = MaterialTheme.appShapes.navigationButtonShape, onClick = onPrevClick, @@ -368,7 +368,7 @@ fun NavigationUnitsButtons( modifier = Modifier .height(42.dp), colors = ButtonDefaults.buttonColors( - backgroundColor = MaterialTheme.appColors.buttonBackground + backgroundColor = MaterialTheme.appColors.primaryButtonBackground ), elevation = null, shape = MaterialTheme.appShapes.navigationButtonShape, @@ -380,7 +380,7 @@ fun NavigationUnitsButtons( ) { Text( text = nextButtonText, - color = MaterialTheme.appColors.onSecondary, + color = MaterialTheme.appColors.primaryButtonText, style = MaterialTheme.appTypography.labelLarge ) Spacer(Modifier.width(8.dp)) @@ -388,7 +388,7 @@ fun NavigationUnitsButtons( modifier = Modifier.rotate(if (isVerticalNavigation || !hasNextBlock) 0f else -90f), painter = nextButtonIcon, contentDescription = null, - tint = MaterialTheme.appColors.onSecondary + tint = MaterialTheme.appColors.primaryButtonText ) } } diff --git a/course/src/main/java/org/openedx/course/presentation/ui/CourseVideosUI.kt b/course/src/main/java/org/openedx/course/presentation/ui/CourseVideosUI.kt index a240f1f65..16fd90992 100644 --- a/course/src/main/java/org/openedx/course/presentation/ui/CourseVideosUI.kt +++ b/course/src/main/java/org/openedx/course/presentation/ui/CourseVideosUI.kt @@ -606,7 +606,7 @@ private fun AllVideosDownloadItem( Spacer(modifier = Modifier.height(2.dp)) Text( text = downloadVideoSubTitle, - color = MaterialTheme.appColors.onBackground, + color = MaterialTheme.appColors.textSecondary, style = MaterialTheme.appTypography.labelMedium ) } @@ -680,7 +680,7 @@ private fun AllVideosDownloadItem( Spacer(modifier = Modifier.height(2.dp)) Text( text = stringResource(id = videoSettings.videoDownloadQuality.titleResId), - color = MaterialTheme.appColors.onBackground, + color = MaterialTheme.appColors.textSecondary, style = MaterialTheme.appTypography.labelMedium ) } diff --git a/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt index f16d5906a..0aaae4a3c 100644 --- a/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt +++ b/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt @@ -139,14 +139,14 @@ private fun NotSupportedUnitScreen( .height(42.dp), shape = MaterialTheme.appShapes.buttonShape, colors = ButtonDefaults.buttonColors( - backgroundColor = MaterialTheme.appColors.buttonBackground + backgroundColor = MaterialTheme.appColors.primaryButtonBackground ), onClick = { uriHandler.openUri(uri) }) { Text( text = stringResource(id = courseR.string.course_open_in_browser), - color = MaterialTheme.appColors.onSecondary, + color = MaterialTheme.appColors.primaryButtonText, style = MaterialTheme.appTypography.labelLarge ) } diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt index 06a50b1b4..f6bc5c56a 100644 --- a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt +++ b/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt @@ -427,7 +427,7 @@ private fun CourseItem( Text( modifier = Modifier.testTag("txt_course_org"), text = enrolledCourse.course.org, - color = MaterialTheme.appColors.onBackground, + color = MaterialTheme.appColors.textFieldHint, style = MaterialTheme.appTypography.labelMedium ) Spacer(modifier = Modifier.height(4.dp)) @@ -463,7 +463,7 @@ private fun CourseItem( enrolledCourse.course.startType, enrolledCourse.course.startDisplay ), - color = MaterialTheme.appColors.onBackground, + color = MaterialTheme.appColors.textFieldHint, style = MaterialTheme.appTypography.labelMedium ) Box( diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt b/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt index fd7dc21af..34a08ebb2 100644 --- a/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt +++ b/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt @@ -475,7 +475,7 @@ private fun DiscussionThreadsScreen( Modifier .size(40.dp) .clip(CircleShape) - .background(MaterialTheme.appColors.secondary) + .background(MaterialTheme.appColors.secondaryButtonBackground) .clickable { onCreatePostClick() }, @@ -485,7 +485,7 @@ private fun DiscussionThreadsScreen( modifier = Modifier.size(16.dp), painter = painterResource(id = discussionR.drawable.discussion_ic_add_comment), contentDescription = stringResource(id = discussionR.string.discussion_add_comment), - tint = MaterialTheme.appColors.buttonText + tint = MaterialTheme.appColors.primaryButtonText ) } } diff --git a/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt b/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt index d80198760..5fc9e9a78 100644 --- a/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt +++ b/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt @@ -600,7 +600,7 @@ private fun EditProfileScreen( Text( modifier = Modifier.testTag("txt_edit_profile_type_label"), text = stringResource(if (uiState.isLimited) R.string.profile_limited_profile else R.string.profile_full_profile), - color = MaterialTheme.appColors.onBackground, + color = MaterialTheme.appColors.textSecondary, style = MaterialTheme.appTypography.titleSmall ) Spacer(modifier = Modifier.height(32.dp)) @@ -965,7 +965,7 @@ private fun SelectableField( .fillMaxWidth(), text = name, style = MaterialTheme.appTypography.labelLarge, - color = MaterialTheme.appColors.onBackground + color = MaterialTheme.appColors.textPrimary ) Spacer(modifier = Modifier.height(8.dp)) OutlinedTextField( @@ -980,7 +980,7 @@ private fun SelectableField( Icon( imageVector = Icons.Filled.ExpandMore, contentDescription = null, - tint = MaterialTheme.appColors.textFieldText + tint = MaterialTheme.appColors.textPrimaryVariant ) }, modifier = Modifier @@ -1127,7 +1127,7 @@ private fun LeaveProfile( .testTag("txt_leave") .fillMaxWidth(), text = stringResource(id = R.string.profile_leave), - color = MaterialTheme.appColors.buttonText, + color = MaterialTheme.appColors.primaryButtonText, style = MaterialTheme.appTypography.labelLarge, textAlign = TextAlign.Center ) @@ -1218,7 +1218,7 @@ private fun LeaveProfileLandscape( modifier = Modifier.testTag("txt_leave_profile_dialog_leave"), text = stringResource(id = R.string.profile_leave), style = MaterialTheme.appTypography.bodyMedium, - color = MaterialTheme.appColors.buttonText + color = MaterialTheme.appColors.primaryButtonText ) }, onClick = onLeaveClick diff --git a/profile/src/main/java/org/openedx/profile/presentation/manageaccount/compose/ManageAccountView.kt b/profile/src/main/java/org/openedx/profile/presentation/manageaccount/compose/ManageAccountView.kt index 42ff5afef..970ff2f91 100644 --- a/profile/src/main/java/org/openedx/profile/presentation/manageaccount/compose/ManageAccountView.kt +++ b/profile/src/main/java/org/openedx/profile/presentation/manageaccount/compose/ManageAccountView.kt @@ -174,7 +174,7 @@ internal fun ManageAccountView( onClick = { onAction(ManageAccountViewAction.EditAccountClick) }, - borderColor = MaterialTheme.appColors.buttonBackground, + borderColor = MaterialTheme.appColors.primaryButtonBackground, textColor = MaterialTheme.appColors.textAccent ) Spacer(modifier = Modifier.height(12.dp)) diff --git a/profile/src/main/java/org/openedx/profile/presentation/profile/compose/ProfileView.kt b/profile/src/main/java/org/openedx/profile/presentation/profile/compose/ProfileView.kt index bec24967f..411ac156d 100644 --- a/profile/src/main/java/org/openedx/profile/presentation/profile/compose/ProfileView.kt +++ b/profile/src/main/java/org/openedx/profile/presentation/profile/compose/ProfileView.kt @@ -149,7 +149,7 @@ internal fun ProfileView( onClick = { onAction(ProfileViewAction.EditAccountClick) }, - borderColor = MaterialTheme.appColors.buttonBackground, + borderColor = MaterialTheme.appColors.primaryButtonBackground, textColor = MaterialTheme.appColors.textAccent ) Spacer(modifier = Modifier.height(12.dp)) diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt b/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt index 5aabed2e2..7d97eee40 100644 --- a/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt +++ b/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt @@ -49,7 +49,7 @@ fun PageIndicator( numberOfPages: Int, modifier: Modifier = Modifier, selectedPage: Int = 0, - selectedColor: Color = MaterialTheme.appColors.primaryVariant, + selectedColor: Color = MaterialTheme.appColors.info, previousUnselectedColor: Color = MaterialTheme.appColors.cardViewBorder, nextUnselectedColor: Color = MaterialTheme.appColors.textFieldBorder, defaultRadius: Dp = 20.dp, @@ -176,7 +176,7 @@ fun PrevButton( colors = ButtonDefaults.outlinedButtonColors( backgroundColor = MaterialTheme.appColors.background ), - border = BorderStroke(1.dp, MaterialTheme.appColors.secondary), + border = BorderStroke(1.dp, MaterialTheme.appColors.primary), elevation = null, shape = MaterialTheme.appShapes.navigationButtonShape, onClick = onPrevClick, @@ -193,7 +193,7 @@ fun PrevButton( Spacer(Modifier.width(8.dp)) Text( text = stringResource(R.string.whats_new_navigation_previous), - color = MaterialTheme.appColors.onBackground, + color = MaterialTheme.appColors.primary, style = MaterialTheme.appTypography.labelLarge ) } @@ -210,7 +210,7 @@ fun NextFinishButton( .testTag("btn_next") .height(42.dp), colors = ButtonDefaults.buttonColors( - backgroundColor = MaterialTheme.appColors.buttonBackground + backgroundColor = MaterialTheme.appColors.primaryButtonBackground ), elevation = null, shape = MaterialTheme.appShapes.navigationButtonShape, @@ -231,14 +231,14 @@ fun NextFinishButton( Text( modifier = Modifier.testTag("txt_next"), text = stringResource(id = R.string.whats_new_navigation_next), - color = MaterialTheme.appColors.onSecondary, + color = MaterialTheme.appColors.primaryButtonText, style = MaterialTheme.appTypography.labelLarge ) Spacer(Modifier.width(8.dp)) Icon( painter = painterResource(id = org.openedx.core.R.drawable.core_ic_forward), contentDescription = null, - tint = MaterialTheme.appColors.onSecondary + tint = MaterialTheme.appColors.primaryButtonText ) } } else { @@ -249,14 +249,14 @@ fun NextFinishButton( Text( modifier = Modifier.testTag("txt_done"), text = stringResource(id = R.string.whats_new_navigation_done), - color = MaterialTheme.appColors.onSecondary, + color = MaterialTheme.appColors.primaryButtonText, style = MaterialTheme.appTypography.labelLarge ) Spacer(Modifier.width(8.dp)) Icon( painter = painterResource(id = org.openedx.core.R.drawable.core_ic_check), contentDescription = null, - tint = MaterialTheme.appColors.onSecondary + tint = MaterialTheme.appColors.primaryButtonText ) } } From 926facfacc35b146a548d42bf778472180713051 Mon Sep 17 00:00:00 2001 From: Farhan Arshad Date: Wed, 22 May 2024 18:50:54 +0500 Subject: [PATCH 3/5] fix: address PR comments --- .../presentation/signin/compose/SignInView.kt | 8 ++- .../presentation/signup/compose/SignUpView.kt | 6 +- .../openedx/auth/presentation/ui/AuthUI.kt | 2 +- .../java/org/openedx/core/ui/ComposeCommon.kt | 56 ++++--------------- 4 files changed, 22 insertions(+), 50 deletions(-) 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 index bca30a0eb..37309cadf 100644 --- 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 @@ -64,7 +64,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.OpenEdXSecondaryButton +import org.openedx.core.ui.OpenEdXButton import org.openedx.core.ui.WindowSize import org.openedx.core.ui.WindowType import org.openedx.core.ui.displayCutoutForLandscape @@ -274,9 +274,11 @@ private fun AuthForm( if (state.showProgress) { CircularProgressIndicator(color = MaterialTheme.appColors.primary) } else { - OpenEdXSecondaryButton( + 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)) } @@ -327,7 +329,7 @@ private fun PasswordTextField( colors = TextFieldDefaults.outlinedTextFieldColors( textColor = MaterialTheme.appColors.textFieldText, backgroundColor = MaterialTheme.appColors.textFieldBackground, - focusedBorderColor = MaterialTheme.appColors.textFieldBorder, + unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, cursorColor = MaterialTheme.appColors.textFieldText, ), shape = MaterialTheme.appShapes.textFieldShape, 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 index 6db284340..42fd894df 100644 --- 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.OpenEdXSecondaryButton +import org.openedx.core.ui.OpenEdXButton import org.openedx.core.ui.SheetContent import org.openedx.core.ui.WindowSize import org.openedx.core.ui.WindowType @@ -434,9 +434,11 @@ internal fun SignUpView( CircularProgressIndicator(color = MaterialTheme.appColors.primary) } } else { - OpenEdXSecondaryButton( + 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 index d3d092567..90fb91ee1 100644 --- a/auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt +++ b/auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt @@ -254,7 +254,7 @@ fun LoginTextField( colors = TextFieldDefaults.outlinedTextFieldColors( textColor = MaterialTheme.appColors.textFieldText, backgroundColor = MaterialTheme.appColors.textFieldBackground, - focusedBorderColor = MaterialTheme.appColors.textFieldBorder, + unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder, cursorColor = MaterialTheme.appColors.textFieldText, ), shape = MaterialTheme.appShapes.textFieldShape, diff --git a/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt b/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt index f9c4a80d9..212014177 100644 --- a/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt +++ b/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt @@ -1045,25 +1045,6 @@ fun OfflineModeDialog( } } -@Composable -fun OpenEdXSecondaryButton( - modifier: Modifier = Modifier.fillMaxWidth(), - text: String = "", - onClick: () -> Unit, - enabled: Boolean = true, - content: (@Composable RowScope.() -> Unit)? = null -) { - OpenEdXButton( - modifier = modifier, - text = text, - onClick = onClick, - enabled = enabled, - textColor = MaterialTheme.appColors.primaryButtonText, - backgroundColor = MaterialTheme.appColors.secondaryButtonBackground, - content = content - ) -} - @Composable fun OpenEdXButton( modifier: Modifier = Modifier.fillMaxWidth(), @@ -1099,26 +1080,6 @@ 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.secondaryButtonBorderedText, - backgroundColor = MaterialTheme.appColors.secondaryButtonBorderedBackground, - borderColor = MaterialTheme.appColors.secondaryButtonBorder, - content = content - ) -} - @Composable fun OpenEdXOutlinedButton( modifier: Modifier = Modifier.fillMaxWidth(), @@ -1203,11 +1164,13 @@ fun ConnectionErrorView( textAlign = TextAlign.Center ) Spacer(Modifier.height(16.dp)) - OpenEdXSecondaryButton( + OpenEdXButton( modifier = Modifier .widthIn(Dp.Unspecified, 162.dp), text = stringResource(id = R.string.core_reload), - onClick = onReloadClick + textColor = MaterialTheme.appColors.primaryButtonText, + backgroundColor = MaterialTheme.appColors.secondaryButtonBackground, + onClick = onReloadClick, ) } } @@ -1218,22 +1181,27 @@ fun AuthButtonsPanel( onSignInClick: () -> Unit, ) { Row { - OpenEdXSecondaryButton( + OpenEdXButton( modifier = Modifier .testTag("btn_register") .width(0.dp) .weight(1f), text = stringResource(id = R.string.core_register), + textColor = MaterialTheme.appColors.primaryButtonText, + backgroundColor = MaterialTheme.appColors.secondaryButtonBackground, onClick = { onRegisterClick() } ) - OpenEdXSecondaryOutlinedButton( + OpenEdXOutlinedButton( modifier = Modifier .testTag("btn_sign_in") .width(100.dp) .padding(start = 16.dp), text = stringResource(id = R.string.core_sign_in), - onClick = { onSignInClick() } + onClick = { onSignInClick() }, + textColor = MaterialTheme.appColors.secondaryButtonBorderedText, + backgroundColor = MaterialTheme.appColors.secondaryButtonBorderedBackground, + borderColor = MaterialTheme.appColors.secondaryButtonBorder, ) } } From 882dae0002d5d4cb8d49dae4597dd978cbd099ad Mon Sep 17 00:00:00 2001 From: Farhan Arshad Date: Thu, 23 May 2024 12:28:24 +0500 Subject: [PATCH 4/5] feat: add force dark mode for WebViews --- build.gradle | 2 ++ core/build.gradle | 2 ++ .../org/openedx/core/extension/ViewExt.kt | 25 +++++++++++++++++++ .../org/openedx/core/ui/WebContentScreen.kt | 2 ++ .../unit/html/HtmlUnitFragment.kt | 5 ++++ .../presentation/catalog/CatalogWebView.kt | 5 +++- .../detail/CourseDetailsFragment.kt | 4 +++ 7 files changed, 44 insertions(+), 1 deletion(-) diff --git a/build.gradle b/build.gradle index ef9ca662c..250f56863 100644 --- 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 index f1f091823..f69d633cb 100644 --- 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/extension/ViewExt.kt b/core/src/main/java/org/openedx/core/extension/ViewExt.kt index 9146a3159..ebd007d3d 100644 --- 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/ui/WebContentScreen.kt b/core/src/main/java/org/openedx/core/ui/WebContentScreen.kt index c9c7c4ba1..06aa70ea2 100644 --- a/core/src/main/java/org/openedx/core/ui/WebContentScreen.kt +++ b/core/src/main/java/org/openedx/core/ui/WebContentScreen.kt @@ -37,6 +37,7 @@ import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.viewinterop.AndroidView import androidx.compose.ui.zIndex +import org.openedx.core.extension.applyDarkModeIfEnabled import org.openedx.core.extension.isEmailValid import org.openedx.core.extension.replaceLinkTags import org.openedx.core.ui.theme.appColors @@ -195,6 +196,7 @@ private fun WebViewContent( contentUrl?.let { loadUrl(it) } + applyDarkModeIfEnabled(isDarkTheme) } }, update = { webView -> diff --git a/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitFragment.kt index 3a49e0e4b..392fa07fa 100644 --- a/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitFragment.kt +++ b/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitFragment.kt @@ -49,6 +49,7 @@ import androidx.core.os.bundleOf import androidx.fragment.app.Fragment import kotlinx.coroutines.launch import org.koin.androidx.viewmodel.ext.android.viewModel +import org.openedx.core.extension.applyDarkModeIfEnabled import org.openedx.core.extension.isEmailValid import org.openedx.core.extension.loadUrl import org.openedx.core.system.AppCookieManager @@ -212,6 +213,8 @@ private fun HTMLContentView( ) } + val isDarkTheme = isSystemInDarkTheme() + AndroidView( modifier = Modifier .then(screenWidth) @@ -287,11 +290,13 @@ private fun HTMLContentView( setSupportZoom(true) loadsImagesAutomatically = true domStorageEnabled = true + } isVerticalScrollBarEnabled = false isHorizontalScrollBarEnabled = false loadUrl(url, coroutineScope, cookieManager) + applyDarkModeIfEnabled(isDarkTheme) } }, update = { webView -> diff --git a/discovery/src/main/java/org/openedx/discovery/presentation/catalog/CatalogWebView.kt b/discovery/src/main/java/org/openedx/discovery/presentation/catalog/CatalogWebView.kt index 42531f8a0..373516b0a 100644 --- a/discovery/src/main/java/org/openedx/discovery/presentation/catalog/CatalogWebView.kt +++ b/discovery/src/main/java/org/openedx/discovery/presentation/catalog/CatalogWebView.kt @@ -3,9 +3,11 @@ package org.openedx.discovery.presentation.catalog import android.annotation.SuppressLint import android.webkit.WebResourceRequest import android.webkit.WebView +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.platform.LocalContext +import org.openedx.core.extension.applyDarkModeIfEnabled import org.openedx.discovery.presentation.catalog.WebViewLink.Authority as linkAuthority @SuppressLint("SetJavaScriptEnabled", "ComposableNaming") @@ -20,7 +22,7 @@ fun CatalogWebViewScreen( onUriClick: (String, linkAuthority) -> Unit, ): WebView { val context = LocalContext.current - + val isDarkTheme = isSystemInDarkTheme() return remember { WebView(context).apply { webViewClient = object : DefaultWebViewClient( @@ -93,6 +95,7 @@ fun CatalogWebViewScreen( isHorizontalScrollBarEnabled = false loadUrl(url) + applyDarkModeIfEnabled(isDarkTheme) } } } diff --git a/discovery/src/main/java/org/openedx/discovery/presentation/detail/CourseDetailsFragment.kt b/discovery/src/main/java/org/openedx/discovery/presentation/detail/CourseDetailsFragment.kt index 813994307..0060199da 100644 --- a/discovery/src/main/java/org/openedx/discovery/presentation/detail/CourseDetailsFragment.kt +++ b/discovery/src/main/java/org/openedx/discovery/presentation/detail/CourseDetailsFragment.kt @@ -14,6 +14,7 @@ import android.webkit.WebResourceRequest import android.webkit.WebView import android.webkit.WebViewClient import androidx.compose.foundation.background +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -80,6 +81,7 @@ import org.koin.androidx.viewmodel.ext.android.viewModel import org.koin.core.parameter.parametersOf import org.openedx.core.UIMessage import org.openedx.core.domain.model.Media +import org.openedx.core.extension.applyDarkModeIfEnabled import org.openedx.core.extension.isEmailValid import org.openedx.core.ui.AuthButtonsPanel import org.openedx.core.ui.HandleUIMessage @@ -625,6 +627,7 @@ private fun CourseDescription( onWebPageLoaded: () -> Unit ) { val context = LocalContext.current + val isDarkTheme = isSystemInDarkTheme() AndroidView(modifier = Modifier.then(modifier), factory = { WebView(context).apply { webViewClient = object : WebViewClient() { @@ -674,6 +677,7 @@ private fun CourseDescription( StandardCharsets.UTF_8.name(), null ) + applyDarkModeIfEnabled(isDarkTheme) } }) } From 79277228db5525d306a41bf78107dcbeaa5bcaf2 Mon Sep 17 00:00:00 2001 From: Farhan Arshad Date: Thu, 23 May 2024 13:59:00 +0500 Subject: [PATCH 5/5] fix: address PR comments --- .../org/openedx/core/ui/theme/AppColors.kt | 2 ++ .../org/openedx/core/ui/theme/Colors.kt | 19 +++++++++---------- 2 files changed, 11 insertions(+), 10 deletions(-) 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 index 15d526536..968fd9fe3 100644 --- a/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt +++ b/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt @@ -26,6 +26,8 @@ data class AppColors( val primaryButtonBorder: Color, val primaryButtonBorderedText: Color, + // The default secondary button styling is identical to the primary button styling. + // However, you can customize it if your brand utilizes two accent colors. val secondaryButtonBackground: Color, val secondaryButtonText: Color, val secondaryButtonBorder: Color, diff --git a/core/src/openedx/org/openedx/core/ui/theme/Colors.kt b/core/src/openedx/org/openedx/core/ui/theme/Colors.kt index ff8dc9ac1..0bb1114c8 100644 --- a/core/src/openedx/org/openedx/core/ui/theme/Colors.kt +++ b/core/src/openedx/org/openedx/core/ui/theme/Colors.kt @@ -35,11 +35,12 @@ val light_primary_button_background = Color(0xFF3C68FF) val light_primary_button_border = Color(0xFF97A5BB) val light_primary_button_text = Color.White val light_primary_button_bordered_text = Color(0xFF3C68FF) -val light_secondary_button_background = Color(0xFF3C68FF) -val light_secondary_button_text = Color.White -val light_secondary_button_border = Color(0xFF97A5BB) + +val light_secondary_button_background = light_primary_button_background +val light_secondary_button_text = light_primary_button_text +val light_secondary_button_border = light_primary_button_border val light_secondary_button_bordered_background = Color.White -val light_secondary_button_bordered_text = Color(0xFF3C68FF) +val light_secondary_button_bordered_text = light_primary_button_bordered_text val light_card_view_background = Color(0xFFF9FAFB) val light_card_view_border = Color(0xFFCCD4E0) @@ -50,7 +51,6 @@ val light_warning = Color(0xFFFFC94D) val light_info = Color(0xFF42AAFF) val light_rate_stars = Color(0xFFFFC94D) val light_inactive_button_background = Color(0xFFCCD4E0) -val light_inactive_button_text = Color(0xFF3D4964) val light_access_green = Color(0xFF23BCA0) val light_dates_section_bar_past_due = light_warning val light_dates_section_bar_today = light_info @@ -103,11 +103,11 @@ val dark_primary_button_text = Color.White val dark_primary_button_border = Color(0xFF4E5A70) val dark_primary_button_bordered_text = Color(0xFF5478F9) -val dark_secondary_button_background = Color(0xFF5478F9) -val dark_secondary_button_text = Color.White -val dark_secondary_button_border = Color(0xFF4E5A70) +val dark_secondary_button_background = dark_primary_button_background +val dark_secondary_button_text = dark_primary_button_text +val dark_secondary_button_border = dark_primary_button_border val dark_secondary_button_bordered_background = Color(0xFF19212F) -val dark_secondary_button_bordered_text = Color(0xFF5478F9) +val dark_secondary_button_bordered_text = dark_primary_button_bordered_text val dark_card_view_background = Color(0xFF273346) val dark_card_view_border = Color(0xFF4E5A70) @@ -121,7 +121,6 @@ val dark_info_variant = Color(0xFF5478F9) val dark_onInfo = Color.White val dark_rate_stars = Color(0xFFFFC94D) val dark_inactive_button_background = Color(0xFFCCD4E0) -val dark_inactive_button_text = Color(0xFF3D4964) val dark_access_green = Color(0xFF23BCA0) val dark_dates_section_bar_past_due = dark_warning val dark_dates_section_bar_today = dark_info