Merge pull request #510 from harsh-bhadauria/Fix-StatsScreenUI-harsh_…

…bhadauria MOBILE-210: Fixed stats chart label & heading colors not displaying correctly on Stats screen
metabrainz · Dec 27, 2024 · d1e5761 · d1e5761
2 parents 560a5d1 + e944092
commit d1e5761
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/app/src/main/java/org/listenbrainz/android/ui/components/YimGraph.kt b/app/src/main/java/org/listenbrainz/android/ui/components/YimGraph.kt
@@ -27,6 +27,7 @@ import com.patrykandpatrick.vico.core.cartesian.layer.ColumnCartesianLayer
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.isActive
 import kotlinx.coroutines.withContext
+import org.listenbrainz.android.ui.theme.ListenBrainzTheme
 
 @Composable
 fun YimGraph (yearListens : List<Pair<String , Int>>) {
@@ -49,8 +50,7 @@ fun YimGraph (yearListens : List<Pair<String , Int>>) {
         modifier = Modifier
             .padding(start = 11.dp, end = 11.dp)
             .height(250.dp)
-            .clip(RoundedCornerShape(10.dp))
-            .background(Color(0xFFe0e5de)),
+            .clip(RoundedCornerShape(10.dp)),
         chart = rememberCartesianChart(
             rememberColumnCartesianLayer(
                 ColumnCartesianLayer.ColumnProvider.series(
@@ -61,9 +61,16 @@ fun YimGraph (yearListens : List<Pair<String , Int>>) {
                 ),
                 spacing = 1.dp
             ),
-            startAxis = rememberStartAxis(),
+            startAxis = rememberStartAxis(
+                label = rememberTextComponent(
+                    color = Color.White,
+                    ellipsize = TextUtils.TruncateAt.MARQUEE,
+                    textSize = 11.sp
+                )
+            ),
             bottomAxis = rememberBottomAxis(
-                label = rememberTextComponent (
+                label = rememberTextComponent(
+                    color = Color.White,
                     ellipsize = TextUtils.TruncateAt.MARQUEE,
                     textSize = 11.sp
                 ),

diff --git a/app/src/main/java/org/listenbrainz/android/ui/screens/profile/stats/StatsRange.kt b/app/src/main/java/org/listenbrainz/android/ui/screens/profile/stats/StatsRange.kt
@@ -4,7 +4,7 @@ enum class StatsRange (val rangeString: String, val apiIdenfier: String){
     THIS_WEEK("This Week", "this_week"),
     THIS_MONTH("This Month", "this_month"),
     THIS_YEAR("This Year", "this_year"),
-    LAST_WEEK("Tast Week", "week"),
+    LAST_WEEK("Last Week", "week"),
     LAST_MONTH("Last Month", "month"),
     LAST_YEAR("Last Year", "year"),
     ALL_TIME("All Time", "all_time"),

diff --git a/app/src/main/java/org/listenbrainz/android/ui/screens/profile/stats/StatsScreen.kt b/app/src/main/java/org/listenbrainz/android/ui/screens/profile/stats/StatsScreen.kt
@@ -5,6 +5,7 @@ import android.text.TextUtils
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -52,14 +53,17 @@ import com.patrykandpatrick.vico.compose.cartesian.layer.rememberColumnCartesian
 import com.patrykandpatrick.vico.compose.cartesian.rememberCartesianChart
 import com.patrykandpatrick.vico.compose.common.component.rememberLineComponent
 import com.patrykandpatrick.vico.compose.common.component.rememberTextComponent
+import com.patrykandpatrick.vico.compose.common.of
 import com.patrykandpatrick.vico.core.cartesian.data.CartesianChartModelProducer
 import com.patrykandpatrick.vico.core.cartesian.data.columnSeries
 import com.patrykandpatrick.vico.core.cartesian.layer.ColumnCartesianLayer
+import com.patrykandpatrick.vico.core.common.Dimensions
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.isActive
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import org.listenbrainz.android.R
+import org.listenbrainz.android.model.Listen
 import org.listenbrainz.android.model.Metadata
 import org.listenbrainz.android.model.SocialUiState
 import org.listenbrainz.android.model.TrackMetadata
@@ -271,7 +275,7 @@ fun StatsScreen(
                 Column {
                     Text(
                         text = "Listening activity",
-                        color = Color.White,
+                        color = ListenBrainzTheme.colorScheme.text,
                         style = MaterialTheme.typography.bodyLarge.copy(fontSize = 22.sp),
                         modifier = Modifier.padding(start = 10.dp)
                     )
@@ -335,19 +339,26 @@ fun StatsScreen(
                                 .padding(start = 11.dp, end = 11.dp)
                                 .height(250.dp)
                                 .clip(RoundedCornerShape(10.dp))
-                                .background(Color(0xFFe0e5de))
                                 .testTag("listeningActivityChart"),
                             chart = rememberCartesianChart(
                                 rememberColumnCartesianLayer(
                                     columnProvider = columnProvider,
                                     spacing = 25.dp,
                                     mergeMode = { ColumnCartesianLayer.MergeMode.Grouped },
                                 ),
-                                startAxis = rememberStartAxis(),
+                                startAxis = rememberStartAxis(
+                                    label = rememberTextComponent(
+                                        color = ListenBrainzTheme.colorScheme.text,
+                                        textSize = 11.sp,
+                                        padding = Dimensions.of(ListenBrainzTheme.paddings.tinyPadding)
+                                    )
+                                ),
                                 bottomAxis = rememberBottomAxis(
                                     label = rememberTextComponent (
                                         ellipsize = TextUtils.TruncateAt.MARQUEE,
-                                        textSize = 11.sp
+                                        textSize = 11.sp,
+                                        color = ListenBrainzTheme.colorScheme.text,
+                                        padding = Dimensions.of(ListenBrainzTheme.paddings.tinyPadding)
                                     ),
                                     guideline = null,
                                     valueFormatter = { value, chartValues, verticalAxisPosition ->
@@ -371,7 +382,7 @@ fun StatsScreen(
            Column (modifier = Modifier
                .padding(start = 10.dp, top = 30.dp)
                ) {
-                    Text("Top ...", color = Color.White, style = MaterialTheme.typography.bodyLarge.copy(fontSize = 22.sp))
+                    Text("Top ...", color = ListenBrainzTheme.colorScheme.text, style = MaterialTheme.typography.bodyLarge.copy(fontSize = 22.sp))
                Box(modifier = Modifier.height(10.dp))
                     Row {
                         repeat(3) {