refactor: UI enhancements and various optimizations (#16)

- Remove Info Icon from Value Prop on Course Dashboard - Update string from View All Courses to View All My Courses - Increase the Space between Component Indicator - Move the Progress Bar below the Resume button - Update Color Scheme of Course Dashboard CTAs - New border color for text fields and cards - Add Color for Unchecked Switch - Reduce Course Cards Elevation - Prevent API call on re-filter selection - Handle redirection within Discovery WebViews - Close IAP Error Dialog after Action Taken - Webview Keeps Loading Due to 404 Errors on Internal Pages
edx · Jul 23, 2024 · 0a0b1cf · 0a0b1cf
1 parent 513d2f0
commit 0a0b1cf
Show file tree

Hide file tree

Showing 19 changed files with 88 additions and 61 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
@@ -380,7 +380,6 @@ fun InputRegistrationField(
             colors = TextFieldDefaults.outlinedTextFieldColors(
                 textColor = MaterialTheme.appColors.textFieldText,
                 backgroundColor = MaterialTheme.appColors.textFieldBackground,
-                focusedBorderColor = MaterialTheme.appColors.textFieldBorder,
                 unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder,
                 cursorColor = MaterialTheme.appColors.textFieldText,
             ),

diff --git a/core/src/edx/org/openedx/core/ui/theme/Colors.kt b/core/src/edx/org/openedx/core/ui/theme/Colors.kt
@@ -38,7 +38,7 @@ val light_text_accent = Color(0xFF03C7E8) // Accent A Isotope Blue
 
 val light_text_field_background = light_surface
 val light_text_field_background_variant = light_surface
-val light_text_field_border = light_onSurface
+val light_text_field_border = Color(0xFFE1DDDB) // Light 500
 val light_text_field_text = light_text_primary
 val light_text_field_hint = light_secondary_variant
 
@@ -122,9 +122,9 @@ val dark_text_warning = Color(0xFF002121) // primary 700
 val dark_text_accent = Color(0xFF03C7E8) // Accent A Isotope Blue
 val dark_text_field_background = dark_surface
 val dark_text_field_background_variant = dark_surface
-val dark_text_field_border = Color(0xFFD2DAD8) // Gray 500
+val dark_text_field_border = Color(0xFFD2DAD8) // Elm Dark 100
 val dark_text_field_text = dark_text_primary
-val dark_text_field_hint = Color(0xFFD2DAD8) // Gray 700
+val dark_text_field_hint = dark_text_field_border
 
 val dark_primary_button_background = Color(0xFFD74000)   // Primary 500 | Dark 500 | Elm
 val dark_primary_button_text = Color.White
@@ -138,7 +138,7 @@ val dark_secondary_button_bordered_background = Color.White
 val dark_secondary_button_bordered_text = Color(0xFFD23228) // Brand 500
 
 val dark_card_view_background = dark_surface
-val dark_card_view_border = Color(0xFF4E5A70)
+val dark_card_view_border = dark_text_field_border
 val dark_divider = dark_primary
 
 val dark_certificate_foreground = Color(0xD92EB865)

diff --git a/core/src/main/java/org/openedx/core/ui/UpgradeToAccessView.kt b/core/src/main/java/org/openedx/core/ui/UpgradeToAccessView.kt
@@ -45,21 +45,24 @@ fun UpgradeToAccessView(
     var primaryIcon = Icons.Filled.Lock
     var textColor = MaterialTheme.appColors.primaryButtonText
     var backgroundColor = MaterialTheme.appColors.primaryButtonBackground
-    var secondaryIcon: @Composable () -> Unit = {
-        Icon(
-            modifier = Modifier
-                .padding(start = 16.dp),
-            imageVector = Icons.Filled.Info,
-            contentDescription = null,
-            tint = textColor
-        )
-    }
+    var secondaryIcon: @Composable () -> Unit = { }
+
     when (type) {
         UpgradeToAccessViewType.DASHBOARD -> {
             shape = RoundedCornerShape(
                 bottomStart = 16.dp,
                 bottomEnd = 16.dp
             )
+            secondaryIcon = {
+                Icon(
+                    modifier = Modifier
+                        .padding(start = 16.dp)
+                        .size(16.dp),
+                    imageVector = Icons.Filled.Info,
+                    contentDescription = null,
+                    tint = textColor
+                )
+            }
         }
 
         UpgradeToAccessViewType.COURSE -> {

diff --git a/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesScreen.kt b/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesScreen.kt
@@ -366,7 +366,9 @@ fun CalendarSyncCard(
                 modifier = Modifier.size(48.dp),
                 colors = SwitchDefaults.colors(
                     checkedThumbColor = MaterialTheme.appColors.primary,
-                    checkedTrackColor = MaterialTheme.appColors.primary
+                    checkedTrackColor = MaterialTheme.appColors.primary,
+                    uncheckedThumbColor = MaterialTheme.appColors.cardViewBorder,
+                    uncheckedTrackColor = MaterialTheme.appColors.cardViewBorder,
                 )
             )
         }

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
@@ -61,7 +61,7 @@ import org.openedx.core.presentation.course.CourseViewMode
 import org.openedx.core.ui.CircularProgress
 import org.openedx.core.ui.HandleUIMessage
 import org.openedx.core.ui.NoContentScreen
-import org.openedx.core.ui.OpenEdXButton
+import org.openedx.core.ui.OpenEdXOutlinedButton
 import org.openedx.core.ui.TextIcon
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
@@ -278,23 +278,6 @@ private fun CourseOutlineUI(
                                         }
                                     }
 
-
-                                    val progress = uiState.courseStructure.progress
-                                    if (progress != null && progress.totalAssignmentsCount > 0) {
-                                        item {
-                                            CourseProgress(
-                                                modifier = Modifier
-                                                    .fillMaxWidth()
-                                                    .padding(
-                                                        top = 16.dp,
-                                                        start = 24.dp,
-                                                        end = 24.dp
-                                                    ),
-                                                progress = progress
-                                            )
-                                        }
-                                    }
-
                                     if (uiState.resumeComponent != null) {
                                         item {
                                             Box(listPadding) {
@@ -315,6 +298,22 @@ private fun CourseOutlineUI(
                                         }
                                     }
 
+                                    val progress = uiState.courseStructure.progress
+                                    if (progress != null && progress.totalAssignmentsCount > 0) {
+                                        item {
+                                            CourseProgress(
+                                                modifier = Modifier
+                                                    .fillMaxWidth()
+                                                    .padding(
+                                                        top = 16.dp,
+                                                        start = 24.dp,
+                                                        end = 24.dp
+                                                    ),
+                                                progress = progress
+                                            )
+                                        }
+                                    }
+
                                     item {
                                         Spacer(modifier = Modifier.height(12.dp))
                                     }
@@ -384,17 +383,19 @@ private fun ResumeCourse(
                 overflow = TextOverflow.Ellipsis
             )
         }
-        Spacer(Modifier.height(24.dp))
-        OpenEdXButton(
+        Spacer(Modifier.height(16.dp))
+        OpenEdXOutlinedButton(
             text = stringResource(id = R.string.course_resume),
+            textColor = MaterialTheme.appColors.primaryButtonBorderedText,
+            borderColor = MaterialTheme.appColors.primaryButtonBorder,
             onClick = {
                 onResumeClick(block.id)
             },
             content = {
                 TextIcon(
                     text = stringResource(id = R.string.course_resume),
                     painter = painterResource(id = CoreR.drawable.core_ic_forward),
-                    color = MaterialTheme.appColors.primaryButtonText,
+                    color = MaterialTheme.appColors.primaryButtonBorderedText,
                     textStyle = MaterialTheme.appTypography.labelLarge
                 )
             }
@@ -443,17 +444,19 @@ private fun ResumeCourseTablet(
                 )
             }
         }
-        OpenEdXButton(
+        OpenEdXOutlinedButton(
             modifier = Modifier.width(210.dp),
             text = stringResource(id = R.string.course_resume),
+            textColor = MaterialTheme.appColors.primaryButtonBorderedText,
+            borderColor = MaterialTheme.appColors.primaryButtonBorder,
             onClick = {
                 onResumeClick(block.id)
             },
             content = {
                 TextIcon(
                     text = stringResource(id = R.string.course_resume),
                     painter = painterResource(id = CoreR.drawable.core_ic_forward),
-                    color = MaterialTheme.appColors.primaryButtonText,
+                    color = MaterialTheme.appColors.primaryButtonBorderedText,
                     textStyle = MaterialTheme.appTypography.labelLarge
                 )
             }
@@ -476,7 +479,7 @@ private fun CourseProgress(
                 .height(10.dp)
                 .clip(CircleShape),
             progress = progress.value,
-            color = MaterialTheme.appColors.progressBarColor,
+            color = MaterialTheme.appColors.secondaryButtonBackground,
             backgroundColor = MaterialTheme.appColors.progressBarBackgroundColor
         )
         Text(

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
@@ -417,7 +417,7 @@ fun HorizontalPageIndicator(
     defaultColor: Color = Color.Gray,
 ) {
     Row(
-        horizontalArrangement = Arrangement.spacedBy(1.dp),
+        horizontalArrangement = Arrangement.spacedBy(3.dp),
         modifier = modifier
     ) {
         blocks.forEachIndexed { index, block ->
@@ -563,7 +563,7 @@ fun VideoSubtitles(
                             if (currentIndex == index) {
                                 MaterialTheme.appColors.textPrimary
                             } else {
-                                MaterialTheme.appColors.textFieldBorder
+                                MaterialTheme.appColors.textFieldHint
                             }
                         val fontWeight = if (currentIndex == index) {
                             FontWeight.SemiBold
@@ -1021,6 +1021,8 @@ fun CourseDatesBanner(
             OpenEdXButton(
                 text = stringResource(id = it),
                 onClick = resetDates,
+                textColor = MaterialTheme.appColors.secondaryButtonText,
+                backgroundColor = MaterialTheme.appColors.secondaryButtonBackground,
             )
         }
     }
@@ -1076,6 +1078,8 @@ fun CourseDatesBannerTablet(
                 modifier = Modifier.width(210.dp),
                 text = stringResource(id = it),
                 onClick = resetDates,
+                textColor = MaterialTheme.appColors.secondaryButtonText,
+                backgroundColor = MaterialTheme.appColors.secondaryButtonBackground,
             )
         }
     }
@@ -1324,7 +1328,7 @@ private fun CourseMessagePreview() {
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
-private fun CourseExpendableCardPreview(){
+private fun CourseExpendableCardPreview() {
     OpenEdXTheme {
         CourseExpandableChapterCard(
             block = mockChapterBlock,
@@ -1338,7 +1342,7 @@ private fun CourseExpendableCardPreview(){
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
-private fun CourseSubSectionItemPreview(){
+private fun CourseSubSectionItemPreview() {
     OpenEdXTheme {
         CourseSubSectionItem(
             block = mockChapterBlock,

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
@@ -530,9 +530,10 @@ private fun AllVideosDownloadItem(
                 }
             },
             colors = SwitchDefaults.colors(
-                uncheckedThumbColor = MaterialTheme.appColors.primary,
                 checkedThumbColor = MaterialTheme.appColors.primary,
-                checkedTrackColor = MaterialTheme.appColors.primary
+                checkedTrackColor = MaterialTheme.appColors.primary,
+                uncheckedThumbColor = MaterialTheme.appColors.cardViewBorder,
+                uncheckedTrackColor = MaterialTheme.appColors.cardViewBorder,
             )
         )
     }

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
@@ -128,7 +128,6 @@ class HtmlUnitFragment : Fragment() {
                                     windowSize = windowSize,
                                     url = blockUrl,
                                     cookieManager = viewModel.cookieManager,
-                                    apiHostURL = viewModel.apiHostURL,
                                     userAgent = viewModel.appUserAgent,
                                     isLoading = uiState is HtmlUnitUIState.Loading,
                                     injectJSList = injectJSList,
@@ -199,7 +198,6 @@ private fun HTMLContentView(
     windowSize: WindowSize,
     url: String,
     cookieManager: AppCookieManager,
-    apiHostURL: String,
     userAgent: String,
     isLoading: Boolean,
     injectJSList: List<String>,
@@ -277,7 +275,7 @@ private fun HTMLContentView(
                         request: WebResourceRequest,
                         errorResponse: WebResourceResponse,
                     ) {
-                        if (request.url.toString().startsWith(apiHostURL)) {
+                        if (request.url.toString() == view.url) {
                             when (errorResponse.statusCode) {
                                 403, 401, 404 -> {
                                     coroutineScope.launch {

diff --git a/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitViewModel.kt b/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitViewModel.kt
@@ -31,7 +31,6 @@ class HtmlUnitViewModel(
 
     val isOnline get() = networkConnection.isOnline()
     val isCourseUnitProgressEnabled get() = config.getCourseUIConfig().isCourseUnitProgressEnabled
-    val apiHostURL get() = config.getApiHostURL()
     val cookieManager get() = edxCookieManager
     val appUserAgent get() = appData.appUserAgent
 

diff --git a/dashboard/src/main/java/org/openedx/courses/presentation/AllEnrolledCoursesView.kt b/dashboard/src/main/java/org/openedx/courses/presentation/AllEnrolledCoursesView.kt
@@ -137,7 +137,7 @@ fun AllEnrolledCoursesView(
                 }
 
                 is AllEnrolledCoursesAction.FilterChange -> {
-                    viewModel.getCourses(action.courseStatusFilter)
+                    viewModel.changeFilter(action.courseStatusFilter)
                 }
             }
         }
@@ -411,7 +411,7 @@ fun CourseItem(
             },
         backgroundColor = MaterialTheme.appColors.cardViewBackground,
         shape = MaterialTheme.appShapes.courseImageShape,
-        elevation = 4.dp
+        elevation = 2.dp
     ) {
         Box {
             Column {

diff --git a/dashboard/src/main/java/org/openedx/courses/presentation/AllEnrolledCoursesViewModel.kt b/dashboard/src/main/java/org/openedx/courses/presentation/AllEnrolledCoursesViewModel.kt
@@ -52,7 +52,8 @@ class AllEnrolledCoursesViewModel(
     val uiMessage: SharedFlow<UIMessage>
         get() = _uiMessage.asSharedFlow()
 
-    private val currentFilter: MutableStateFlow<CourseStatusFilter> = MutableStateFlow(CourseStatusFilter.ALL)
+    private val currentFilter: MutableStateFlow<CourseStatusFilter> =
+        MutableStateFlow(CourseStatusFilter.ALL)
 
     private var job: Job? = null
 
@@ -67,6 +68,12 @@ class AllEnrolledCoursesViewModel(
         internalLoadingCourses(courseStatusFilter ?: currentFilter.value)
     }
 
+    fun changeFilter(courseStatusFilter: CourseStatusFilter?) {
+        if (courseStatusFilter != currentFilter.value) {
+            getCourses(courseStatusFilter)
+        }
+    }
+
     fun updateCourses() {
         viewModelScope.launch {
             try {

diff --git a/dashboard/src/main/java/org/openedx/courses/presentation/DashboardGalleryView.kt b/dashboard/src/main/java/org/openedx/courses/presentation/DashboardGalleryView.kt
@@ -442,7 +442,7 @@ private fun ViewAllItem(
             ),
         backgroundColor = MaterialTheme.appColors.cardViewBackground,
         shape = MaterialTheme.appShapes.courseImageShape,
-        elevation = 4.dp,
+        elevation = 2.dp,
     ) {
         Column(
             modifier = Modifier.fillMaxSize(),
@@ -481,7 +481,7 @@ private fun CourseListItem(
             },
         backgroundColor = MaterialTheme.appColors.cardViewBackground,
         shape = MaterialTheme.appShapes.courseImageShape,
-        elevation = 4.dp
+        elevation = 2.dp
     ) {
         Box {
             Column {
@@ -585,7 +585,7 @@ private fun PrimaryCourseCard(
             .padding(2.dp),
         backgroundColor = MaterialTheme.appColors.cardViewBackground,
         shape = MaterialTheme.appShapes.courseImageShape,
-        elevation = 4.dp
+        elevation = 2.dp
     ) {
         Column(
             modifier = Modifier

diff --git a/dashboard/src/main/java/org/openedx/courses/presentation/DashboardGalleryViewModel.kt b/dashboard/src/main/java/org/openedx/courses/presentation/DashboardGalleryViewModel.kt
@@ -214,12 +214,14 @@ class DashboardGalleryViewModel(
 
             IAPAction.ACTION_ERROR_CLOSE -> {
                 logIAPCancelEvent()
+                clearIAPState()
             }
 
             IAPAction.ACTION_GET_HELP -> {
                 iapException?.getFormattedErrorMessage()?.let {
                     showFeedbackScreen(it)
                 }
+                clearIAPState()
             }
 
             else -> {

diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardListViewModel.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardListViewModel.kt
@@ -217,12 +217,14 @@ class DashboardListViewModel(
 
             IAPAction.ACTION_ERROR_CLOSE -> {
                 logIAPCancelEvent()
+                clearIAPState()
             }
 
             IAPAction.ACTION_GET_HELP -> {
                 iapException?.getFormattedErrorMessage()?.let {
                     showFeedbackScreen(it)
                 }
+                clearIAPState()
             }
 
             else -> {

diff --git a/dashboard/src/main/res/values/strings.xml b/dashboard/src/main/res/values/strings.xml
@@ -7,7 +7,7 @@
     <string name="dashboard_course_date">Course %1$s</string>
     <string name="dashboard_start_course">Start Course</string>
     <string name="dashboard_resume_course">Resume Course</string>
-    <string name="dashboard_view_all_with_count">View All Courses (%1$d)</string>
+    <string name="dashboard_view_all_with_count">View All My Courses (%1$d)</string>
     <string name="dashboard_view_all">View All</string>
     <string name="dashboard_assignment_due" translatable="false">%1$s %2$s</string>
     <string name="dashboard_course_filter_all">All</string>