style: update color for the dates bullets and badges

openedx · Nov 2, 2023 · ab759db · ab759db
1 parent e750ce7
commit ab759db
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 34 deletions.
diff --git a/core/src/main/java/org/openedx/core/ui/theme/Color.kt b/core/src/main/java/org/openedx/core/ui/theme/Color.kt
@@ -31,11 +31,13 @@ data class AppColors(
     val warning: Color,
     val info: Color,
 
-    val datesBulletPastDue: Color,
-    val datesBulletToday: Color,
-    val datesBulletdefault: Color,
-    val datesBulletBorder: Color
-
+    val datesBadgeDefault: Color,
+    val datesBadgeTextDefault: Color,
+    val datesBadgePastDue: Color,
+    val datesBadgeToday: Color,
+    val datesBadgeTextToday: Color, // also used for locked date block
+    val datesBadgeDue: Color, // Also used for not release date block text and stoke
+    val datesBadgeTextDue: Color // Also used for locked date block color
 ) {
     val primary: Color get() = material.primary
     val primaryVariant: Color get() = material.primaryVariant

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
@@ -52,10 +52,13 @@ private val DarkColorPalette = AppColors(
     warning = Color(0xFFFFC248),
     info = Color(0xFF0095FF),
 
-    datesBulletPastDue = Color(0xFF6c6a69),
-    datesBulletToday = Color(0xFFFFC94D),
-    datesBulletdefault = Color(0xFF000000),
-    datesBulletBorder = Color(0xFFFFFFFF),
+    datesBadgeDefault = Color(0xFFF8F7F7),
+    datesBadgeTextDefault = Color(0xFFA2A2A2),
+    datesBadgePastDue = Color(0xFFEBE9E8),
+    datesBadgeToday = Color(0xFFFFE96B),
+    datesBadgeTextToday = Color(0xFFFFFFFF),
+    datesBadgeDue = Color(0xFFB7B7B7),
+    datesBadgeTextDue = Color(0xFF000000)
 )
 
 private val LightColorPalette = AppColors(
@@ -99,10 +102,13 @@ private val LightColorPalette = AppColors(
     warning = Color(0xFFFFC94D),
     info = Color(0xFF42AAFF),
 
-    datesBulletPastDue = Color(0xFFD7D3D1),
-    datesBulletToday = Color(0xFFFFC94D),
-    datesBulletdefault = Color(0xFF000000),
-    datesBulletBorder = Color(0xFF000000),
+    datesBadgeDefault = Color(0xFFF2F0EF),
+    datesBadgeTextDefault = Color(0xFF454545),
+    datesBadgePastDue = Color(0xFFD7D3D1),
+    datesBadgeToday = Color(0xFFD6B600),
+    datesBadgeTextToday = Color(0xFF000000),
+    datesBadgeDue = Color(0xFF707070),
+    datesBadgeTextDue = Color(0xFFFFFFFF)
 )
 
 val MaterialTheme.appColors: AppColors

diff --git a/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesFragment.kt b/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesFragment.kt
@@ -349,23 +349,23 @@ private fun DateBullet(
                 modifier = Modifier
                     .width(1.dp)
                     .height(6.dp)
-                    .background(color = MaterialTheme.appColors.datesBulletBorder)
+                    .background(color = MaterialTheme.appColors.datesBadgeTextToday)
                     .align(Alignment.CenterHorizontally)
             )
         } else {
             Spacer(modifier = Modifier.height(6.dp))
         }
-        var circleColor: Color = MaterialTheme.appColors.datesBulletdefault
+        var circleColor: Color = MaterialTheme.appColors.datesBadgeDefault
         var circleSize: Dp = 10.dp
         when (dateBlock.dateBlockBadge) {
 
             CourseDatesBadge.TODAY -> {
-                circleColor = MaterialTheme.appColors.datesBulletToday
+                circleColor = MaterialTheme.appColors.datesBadgeToday
                 circleSize = 14.dp
             }
 
             CourseDatesBadge.PAST_DUE -> {
-                circleColor = MaterialTheme.appColors.datesBulletPastDue
+                circleColor = MaterialTheme.appColors.datesBadgePastDue
             }
 
             CourseDatesBadge.BLANK,
@@ -380,9 +380,9 @@ private fun DateBullet(
                 }
                 circleColor =
                     if (isDatePassed && (dateBlock.dateBlockBadge == CourseDatesBadge.VERIFIED_ONLY).not()) {
-                        MaterialTheme.appColors.datesBulletPastDue
+                        MaterialTheme.appColors.datesBadgePastDue
                     } else {
-                        MaterialTheme.appColors.datesBulletdefault
+                        MaterialTheme.appColors.datesBadgeTextToday
                     }
             }
 
@@ -391,7 +391,7 @@ private fun DateBullet(
         Box(
             modifier = Modifier
                 .size(circleSize)
-                .border(1.dp, MaterialTheme.appColors.datesBulletBorder, CircleShape)
+                .border(1.dp, MaterialTheme.appColors.datesBadgeTextToday, CircleShape)
                 .clip(CircleShape)
                 .background(circleColor)
                 .align(Alignment.CenterHorizontally)
@@ -401,7 +401,7 @@ private fun DateBullet(
                 modifier = Modifier
                     .width(1.dp)
                     .fillMaxHeight()
-                    .background(color = MaterialTheme.appColors.datesBulletBorder)
+                    .background(color = MaterialTheme.appColors.datesBadgeTextToday)
                     .align(Alignment.CenterHorizontally)
             )
         }
@@ -447,35 +447,35 @@ private fun PlaceDateBadge(title: String, titleSize: TextUnit, blockBadge: Cours
     var badgeIcon: Painter? = null
     when (blockBadge) {
         CourseDatesBadge.TODAY -> {
-            badgeBackground = MaterialTheme.appColors.warning
-            textAppearance = MaterialTheme.appColors.textPrimary
+            badgeBackground = MaterialTheme.appColors.datesBadgeToday
+            textAppearance = MaterialTheme.appColors.datesBadgeTextToday
         }
 
         CourseDatesBadge.VERIFIED_ONLY -> {
-            badgeBackground = MaterialTheme.appColors.datesBulletdefault
-            textAppearance = MaterialTheme.appColors.textSecondary
+            badgeBackground = MaterialTheme.appColors.datesBadgeTextToday
+            textAppearance = MaterialTheme.appColors.datesBadgeTextDue
             badgeIcon = painterResource(R.drawable.ic_lock)
         }
 
         CourseDatesBadge.COMPLETED -> {
-            badgeBackground = MaterialTheme.appColors.textFieldBackground
-            textAppearance = MaterialTheme.appColors.textPrimaryVariant
+            badgeBackground = MaterialTheme.appColors.datesBadgeDefault
+            textAppearance = MaterialTheme.appColors.datesBadgeTextDefault
         }
 
         CourseDatesBadge.PAST_DUE -> {
-            badgeBackground = MaterialTheme.appColors.datesBulletPastDue
-            textAppearance = MaterialTheme.appColors.textPrimaryVariant
+            badgeBackground = MaterialTheme.appColors.datesBadgePastDue
+            textAppearance = MaterialTheme.appColors.datesBadgeTextDefault
         }
 
         CourseDatesBadge.DUE_NEXT -> {
-            badgeBackground = MaterialTheme.appColors.textPrimaryVariant
-            textAppearance = MaterialTheme.appColors.textFieldBackground
+            badgeBackground = MaterialTheme.appColors.datesBadgeDue
+            textAppearance = MaterialTheme.appColors.datesBadgeTextDue
         }
 
         CourseDatesBadge.NOT_YET_RELEASED -> {
             badgeBackground = Color.Transparent
-            textAppearance = MaterialTheme.appColors.textPrimaryVariant
-            badgeStrokeColor = MaterialTheme.appColors.textPrimaryVariant
+            textAppearance = MaterialTheme.appColors.datesBadgeDue
+            badgeStrokeColor = MaterialTheme.appColors.datesBadgeDue
         }
 
         else -> {}
@@ -526,7 +526,7 @@ private fun PlaceDateBadge(title: String, titleSize: TextUnit, blockBadge: Cours
                 placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
             )
         ) {
-            Icon(badgeIcon, "", tint = Color.White)
+            Icon(badgeIcon, "", tint = MaterialTheme.appColors.datesBadgeTextDue)
         }
     }
     Text(