refactor: Improve customAppColors usage according to usage

- refactor app design to efficiently handle customAppColor variables fix: LEARNER-10043
openedx · Jun 28, 2024 · 69e4c92 · 69e4c92
1 parent 7ff0ff4
commit 69e4c92
Show file tree

Hide file tree

Showing 28 changed files with 165 additions and 133 deletions.
diff --git a/auth/src/main/java/org/openedx/auth/presentation/logistration/LogistrationFragment.kt b/auth/src/main/java/org/openedx/auth/presentation/logistration/LogistrationFragment.kt
@@ -135,7 +135,8 @@ private fun LogistrationScreen(
                     style = MaterialTheme.appTypography.headlineSmall,
                     modifier = Modifier
                         .testTag("txt_screen_title")
-                        .padding(bottom = 40.dp)
+                        .padding(bottom = 40.dp),
+                    color = MaterialTheme.appColors.textPrimary,
                 )
                 val focusManager = LocalFocusManager.current
                 Column(Modifier.padding(bottom = 8.dp)) {
@@ -145,6 +146,7 @@ private fun LogistrationScreen(
                             .padding(bottom = 10.dp),
                         style = MaterialTheme.appTypography.titleMedium,
                         text = stringResource(id = R.string.pre_auth_search_title),
+                        color = MaterialTheme.appColors.textPrimary,
                     )
                     SearchBar(
                         modifier = Modifier
@@ -176,7 +178,7 @@ private fun LogistrationScreen(
                             onSearchClick("")
                         },
                     text = stringResource(id = R.string.pre_auth_explore_all_courses),
-                    color = MaterialTheme.appColors.primary,
+                    color = MaterialTheme.appColors.textHyperLink,
                     style = MaterialTheme.appTypography.labelLarge,
                     textDecoration = TextDecoration.Underline
                 )

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
@@ -256,19 +256,19 @@ private fun AuthForm(
                             onEvent(AuthEvent.RegisterClick)
                         },
                     text = stringResource(id = coreR.string.core_register),
-                    color = MaterialTheme.appColors.primary,
+                    color = MaterialTheme.appColors.textHyperLink,
                     style = MaterialTheme.appTypography.labelLarge
                 )
+                Spacer(modifier = Modifier.weight(1f))
             }
-            Spacer(modifier = Modifier.weight(1f))
             Text(
                 modifier = Modifier
                     .testTag("txt_forgot_password")
                     .noRippleClickable {
                         onEvent(AuthEvent.ForgotPasswordClick)
                     },
                 text = stringResource(id = R.string.auth_forgot_password),
-                color = MaterialTheme.appColors.info_variant,
+                color = MaterialTheme.appColors.textHyperLink,
                 style = MaterialTheme.appTypography.labelLarge
             )
         }
@@ -280,7 +280,7 @@ private fun AuthForm(
                 modifier = buttonWidth.testTag("btn_sign_in"),
                 text = stringResource(id = coreR.string.core_sign_in),
                 textColor = MaterialTheme.appColors.primaryButtonText,
-                backgroundColor = MaterialTheme.appColors.secondaryButtonBackground,
+                backgroundColor = MaterialTheme.appColors.primaryButtonBackground,
                 onClick = {
                     onEvent(AuthEvent.SignIn(login = login, password = password))
                 }

diff --git a/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SignUpView.kt b/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SignUpView.kt
@@ -440,7 +440,7 @@ internal fun SignUpView(
                                         modifier = buttonWidth.testTag("btn_create_account"),
                                         text = stringResource(id = R.string.auth_create_account),
                                         textColor = MaterialTheme.appColors.primaryButtonText,
-                                        backgroundColor = MaterialTheme.appColors.secondaryButtonBackground,
+                                        backgroundColor = MaterialTheme.appColors.primaryButtonBackground,
                                         onClick = {
                                             showErrorMap.clear()
                                             onRegisterClick(AuthType.PASSWORD)

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
@@ -40,13 +40,12 @@ internal fun SocialAuthView(
             } else {
                 R.string.auth_continue_google
             }
-            OpenEdXOutlinedButton(
+            OpenEdXButton(
                 modifier = Modifier
                     .testTag("btn_google_auth")
                     .padding(top = 24.dp)
                     .fillMaxWidth(),
                 backgroundColor = MaterialTheme.appColors.authGoogleButtonBackground,
-                borderColor = MaterialTheme.appColors.primary,
                 textColor = Color.Unspecified,
                 onClick = {
                     onEvent(AuthType.GOOGLE)
@@ -63,7 +62,7 @@ internal fun SocialAuthView(
                             .testTag("txt_google_auth")
                             .padding(start = 10.dp),
                         text = stringResource(id = stringRes),
-                        color = MaterialTheme.appColors.primaryButtonBorderedText,
+                        color = MaterialTheme.appColors.textPrimaryLight,
                     )
                 }
             }

diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/alert/ActionDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/alert/ActionDialogFragment.kt
@@ -11,8 +11,10 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
@@ -170,6 +172,7 @@ private fun ActionDialog(
                     text = stringResource(R.string.core_cancel),
                     onClick = onPositiveClick
                 )
+                Spacer(modifier = Modifier.size(16.dp))
                 DefaultTextButton(
                     text = stringResource(R.string.core_continue),
                     onClick = onNegativeClick
@@ -183,10 +186,12 @@ private fun ActionDialog(
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
 private fun ActionDialogPreview() {
-    ActionDialog(
-        title = "Leaving the app",
-        message = "You are now leaving the app and opening a browser.",
-        onPositiveClick = {},
-        onNegativeClick = {},
-    )
+    OpenEdXTheme {
+        ActionDialog(
+            title = "Leaving the app",
+            message = "You are now leaving the app and opening a browser.",
+            onPositiveClick = {},
+            onNegativeClick = {},
+        )
+    }
 }
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/alert/InfoDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/alert/InfoDialogFragment.kt
@@ -1,5 +1,6 @@
 package org.openedx.core.presentation.dialog.alert
 
+import android.content.res.Configuration
 import android.graphics.Color
 import android.graphics.drawable.ColorDrawable
 import android.os.Bundle
@@ -116,12 +117,15 @@ private fun InfoDialog(
     }
 }
 
-@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
 private fun SimpleDialogPreview() {
-    InfoDialog(
-        title = "Important Notice",
-        message = "This is an important announcement.",
-        onClick = {}
-    )
+    OpenEdXTheme {
+        InfoDialog(
+            title = "Important Notice",
+            message = "This is an important announcement.",
+            onClick = {}
+        )
+    }
 }
diff --git a/core/src/main/java/org/openedx/core/presentation/settings/video/VideoQualityFragment.kt b/core/src/main/java/org/openedx/core/presentation/settings/video/VideoQualityFragment.kt
@@ -4,6 +4,7 @@ import android.content.res.Configuration
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -73,7 +74,7 @@ class VideoQualityFragment : Fragment() {
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
-        savedInstanceState: Bundle?
+        savedInstanceState: Bundle?,
     ) = ComposeView(requireContext()).apply {
         setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
         setContent {
@@ -125,7 +126,7 @@ private fun VideoQualityScreen(
     title: String,
     selectedVideoQuality: VideoQuality,
     onQualityChanged: (VideoQuality) -> Unit,
-    onBackClick: () -> Unit
+    onBackClick: () -> Unit,
 ) {
     val scaffoldState = rememberScaffoldState()
     Scaffold(
@@ -136,6 +137,7 @@ private fun VideoQualityScreen(
                 testTagsAsResourceId = true
             },
         scaffoldState = scaffoldState,
+        backgroundColor = MaterialTheme.appColors.background
     ) { paddingValues ->
 
         val topBarWidth by remember(key1 = windowSize) {
@@ -160,7 +162,8 @@ private fun VideoQualityScreen(
         }
 
         Box(
-            modifier = Modifier.fillMaxSize(),
+            modifier = Modifier
+                .fillMaxSize(),
             contentAlignment = Alignment.TopCenter
         ) {
             Column(
@@ -205,7 +208,7 @@ private fun QualityOption(
     title: String,
     description: String,
     selected: Boolean,
-    onClick: () -> Unit
+    onClick: () -> Unit,
 ) {
     Row(
         Modifier

diff --git a/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt b/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt
@@ -1,5 +1,6 @@
 package org.openedx.core.ui
 
+import android.content.res.Configuration
 import android.os.Build.VERSION.SDK_INT
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ExperimentalFoundationApi
@@ -202,7 +203,7 @@ fun Toolbar(
             ) {
                 Icon(
                     imageVector = Icons.Default.ManageAccounts,
-                    tint = MaterialTheme.appColors.textAccent,
+                    tint = MaterialTheme.appColors.primary,
                     contentDescription = stringResource(id = R.string.core_accessibility_settings)
                 )
             }
@@ -257,7 +258,7 @@ fun SearchBar(
         },
         colors = TextFieldDefaults.outlinedTextFieldColors(
             textColor = MaterialTheme.appColors.textPrimary,
-            backgroundColor = if (isFocused) MaterialTheme.appColors.background else MaterialTheme.appColors.textFieldBackground,
+            backgroundColor = MaterialTheme.appColors.textFieldBackground,
             focusedBorderColor = MaterialTheme.appColors.primary,
             unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder,
             cursorColor = MaterialTheme.appColors.primary,
@@ -269,7 +270,7 @@ fun SearchBar(
                     .testTag("txt_search_placeholder")
                     .fillMaxWidth(),
                 text = label,
-                color = MaterialTheme.appColors.textSecondary,
+                color = MaterialTheme.appColors.textFieldHint,
                 style = MaterialTheme.appTypography.bodyMedium
             )
         },
@@ -278,7 +279,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.textPrimary else MaterialTheme.appColors.textFieldHint
             )
         },
         trailingIcon = {
@@ -1057,7 +1058,7 @@ fun OpenEdXButton(
     enabled: Boolean = true,
     textColor: Color = MaterialTheme.appColors.primaryButtonText,
     backgroundColor: Color = MaterialTheme.appColors.primaryButtonBackground,
-    content: (@Composable RowScope.() -> Unit)? = null
+    content: (@Composable RowScope.() -> Unit)? = null,
 ) {
     Button(
         modifier = Modifier
@@ -1192,7 +1193,7 @@ fun AuthButtonsPanel(
                 .weight(1f),
             text = stringResource(id = R.string.core_register),
             textColor = MaterialTheme.appColors.primaryButtonText,
-            backgroundColor = MaterialTheme.appColors.secondaryButtonBackground,
+            backgroundColor = MaterialTheme.appColors.primaryButtonBackground,
             onClick = { onRegisterClick() }
         )
 
@@ -1219,7 +1220,7 @@ fun RoundTabsBar(
     contentPadding: PaddingValues = PaddingValues(),
     withPager: Boolean = false,
     rowState: LazyListState = rememberLazyListState(),
-    onTabClicked: (Int) -> Unit = { }
+    onTabClicked: (Int) -> Unit = { },
 ) {
     // The pager state does not work without the pager and the tabs do not change.
     if (!withPager) {
@@ -1247,7 +1248,7 @@ fun RoundTabsBar(
 
             RoundTab(
                 modifier = Modifier
-                    .height(40.dp)
+                    .height(32.dp)
                     .clip(CircleShape)
                     .background(backgroundColor)
                     .then(border)
@@ -1270,7 +1271,7 @@ fun RoundTabsBar(
 private fun RoundTab(
     modifier: Modifier = Modifier,
     item: TabItem,
-    contentColor: Color
+    contentColor: Color,
 ) {
     Row(
         modifier = modifier,
@@ -1378,7 +1379,8 @@ val mockTab = object : TabItem {
 }
 
 @OptIn(ExperimentalFoundationApi::class)
-@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
 private fun RoundTabsBarPreview() {
     OpenEdXTheme {

diff --git a/core/src/main/res/values/themes.xml b/core/src/main/res/values/themes.xml
@@ -12,7 +12,7 @@
         <!-- Status bar color. -->
         <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
         <!-- Customize your theme here. -->
-        <item name="android:navigationBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@color/background</item>
     </style>
 
     <style name="Theme.OpenEdX.NoActionBar">

diff --git a/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt b/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt
@@ -219,8 +219,8 @@ private fun ChapterEndDialogScreen(
                 Spacer(Modifier.height(16.dp))
             }
             OpenEdXOutlinedButton(
-                borderColor = MaterialTheme.appColors.primaryButtonBackground,
-                textColor = MaterialTheme.appColors.primaryButtonBackground,
+                borderColor = MaterialTheme.appColors.primaryButtonBorder,
+                textColor = MaterialTheme.appColors.primaryButtonBorderedText,
                 text = stringResource(id = R.string.course_back_to_outline),
                 onClick = onBackButtonClick,
                 content = {
@@ -335,8 +335,8 @@ private fun ChapterEndDialogScreenLandscape(
                         Spacer(Modifier.height(16.dp))
                     }
                     OpenEdXOutlinedButton(
-                        borderColor = MaterialTheme.appColors.primaryButtonBackground,
-                        textColor = MaterialTheme.appColors.primaryButtonBackground,
+                        borderColor = MaterialTheme.appColors.primaryButtonBorder,
+                        textColor = MaterialTheme.appColors.primaryButtonBorderedText,
                         text = stringResource(id = R.string.course_back_to_outline),
                         onClick = onBackButtonClick,
                         content = {