Fix: Event Date selector to match theme

droidconKE · Oct 30, 2023 · a479d5e · a479d5e
1 parent 0b24fae
commit a479d5e
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 90 deletions.
diff --git a/chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt b/chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt
@@ -23,6 +23,7 @@ import com.droidconke.chai.atoms.ChaiBlue
 import com.droidconke.chai.atoms.ChaiGrey
 import com.droidconke.chai.atoms.ChaiGrey90
 import com.droidconke.chai.atoms.ChaiLightGrey
+import com.droidconke.chai.atoms.ChaiRed
 import com.droidconke.chai.atoms.ChaiSmokeyGrey
 import com.droidconke.chai.atoms.ChaiTeal90
 import com.droidconke.chai.atoms.ChaiWhite
@@ -36,7 +37,11 @@ data class ChaiColors(
     val activeBottomNavIconColor: Color = Color.Unspecified,
     val inactiveBottomNavIconColor: Color = Color.Unspecified,
     val titleTextColorPrimary: Color = Color.Unspecified,
-    val linkTextColorPrimary: Color = Color.Unspecified
+    val linkTextColorPrimary: Color = Color.Unspecified,
+    val eventDaySelectorActiveSurfaceColor: Color = Color.Unspecified,
+    val eventDaySelectorInactiveSurfaceColor: Color = Color.Unspecified,
+    val eventDaySelectorInactiveTextColor: Color = Color.Unspecified,
+    val eventDaySelectorActiveTextColor: Color = Color.Unspecified
 )
 
 val LocalChaiColorsPalette = staticCompositionLocalOf { ChaiColors() }
@@ -49,7 +54,11 @@ val ChaiLightColorPalette = ChaiColors(
     activeBottomNavIconColor = ChaiBlue,
     inactiveBottomNavIconColor = ChaiGrey90,
     titleTextColorPrimary = ChaiBlue,
-    linkTextColorPrimary = ChaiBlue
+    linkTextColorPrimary = ChaiBlue,
+    eventDaySelectorActiveSurfaceColor = ChaiRed,
+    eventDaySelectorInactiveSurfaceColor = ChaiTeal90,
+    eventDaySelectorActiveTextColor = ChaiWhite,
+    eventDaySelectorInactiveTextColor = ChaiGrey90
 )
 
 val ChaiDarkColorPalette = ChaiColors(
@@ -60,5 +69,9 @@ val ChaiDarkColorPalette = ChaiColors(
     activeBottomNavIconColor = ChaiTeal90,
     inactiveBottomNavIconColor = ChaiWhite,
     titleTextColorPrimary = ChaiWhite,
-    linkTextColorPrimary = ChaiLightGrey
+    linkTextColorPrimary = ChaiLightGrey,
+    eventDaySelectorActiveSurfaceColor = ChaiRed,
+    eventDaySelectorInactiveSurfaceColor = ChaiTeal90,
+    eventDaySelectorActiveTextColor = ChaiWhite,
+    eventDaySelectorInactiveTextColor = ChaiWhite
 )
diff --git a/...ntation/src/main/java/com/android254/presentation/sessions/components/EventDaySelector.kt b/...ntation/src/main/java/com/android254/presentation/sessions/components/EventDaySelector.kt
@@ -24,14 +24,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.android254.presentation.models.EventDate
 
-/*
-val droidconEventDays = listOf(
-    EventDate(LocalDate(2023, 11, 16), 1),
-    EventDate(LocalDate(2023, 11, 17), 2),
-    EventDate(LocalDate(2023, 11, 18), 3)
-)
-*/
-
 fun ordinal(i: Int): String {
     val suffixes = arrayOf("th", "st", "nd", "rd", "th", "th", "th", "th", "th", "th")
     return when (i % 100) {

diff --git a/...n/src/main/java/com/android254/presentation/sessions/components/EventDaySelectorButton.kt b/...n/src/main/java/com/android254/presentation/sessions/components/EventDaySelectorButton.kt
@@ -15,95 +15,81 @@
  */
 package com.android254.presentation.sessions.components
 
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.ButtonColors
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.ButtonElevation
-import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.ProvideTextStyle
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.android254.presentation.common.theme.Montserrat
+import com.android254.presentation.utils.ChaiLightAndDarkComposePreview
+import com.droidconke.chai.ChaiDCKE22Theme
+import com.droidconke.chai.chaiColorsPalette
 
 @Composable
 fun EventDaySelectorButton(
     title: String,
     subtitle: String,
     selected: Boolean,
     onClick: () -> Unit,
-    modifier: Modifier = Modifier,
-    enabled: Boolean = true,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
-    shape: Shape = RoundedCornerShape(5.dp),
-    border: BorderStroke? = null,
-    colors: ButtonColors = ButtonDefaults.buttonColors(
-        containerColor = if (selected) {
-            MaterialTheme.colorScheme.tertiary
-        } else {
-            MaterialTheme.colorScheme.secondaryContainer
-        },
-        contentColor = if (selected) {
-            MaterialTheme.colorScheme.onTertiary
-        } else {
-            MaterialTheme.colorScheme.onSecondaryContainer
-        }
-    )
 ) {
-    val containerColor = Color.Black
-    val contentColor = Color.Red
-    val shadowElevation = 0.dp
-    val tonalElevation = 0.dp
-
-    Surface(
-        onClick = onClick,
-        modifier = modifier.size(48.dp),
-        shape = shape,
-        color = containerColor,
-        contentColor = contentColor,
-        tonalElevation = tonalElevation,
-        shadowElevation = shadowElevation,
-        border = border,
-        interactionSource = interactionSource,
-        enabled = enabled
+    Column(
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.Start,
+        modifier = Modifier
+            .size(51.dp)
+            .clickable { onClick() }
+            .background(
+                color = if (selected) MaterialTheme.chaiColorsPalette.eventDaySelectorActiveSurfaceColor else (MaterialTheme.chaiColorsPalette.eventDaySelectorInactiveSurfaceColor).copy(alpha = 0.11f),
+                shape = RoundedCornerShape(5.dp),
+            )
+            .padding(start = 5.dp)
     ) {
-        CompositionLocalProvider(LocalContentColor provides contentColor) {
-            ProvideTextStyle(value = MaterialTheme.typography.labelLarge) {
-                Column(
-                    verticalArrangement = Arrangement.Center,
-                    horizontalAlignment = Alignment.CenterHorizontally
-                ) {
-                    Text(
-                        text = title,
-                        style = TextStyle(
-                            fontSize = 18.sp,
-                            fontWeight = FontWeight.Bold
-                        )
-                    )
-                    Text(
-                        text = subtitle,
-                        style = TextStyle(
-                            fontSize = 11.sp
-                        )
-                    )
-                }
-            }
+        Text(
+            text = title,
+            fontSize = 18.sp,
+            fontWeight = FontWeight.Bold,
+            fontFamily = Montserrat,
+            color = if (selected) MaterialTheme.chaiColorsPalette.eventDaySelectorActiveTextColor else MaterialTheme.chaiColorsPalette.eventDaySelectorInactiveTextColor
+        )
+        Text(
+            text = subtitle,
+            fontSize = 11.sp,
+            fontFamily = Montserrat,
+            fontWeight = FontWeight.Normal,
+            color = if (selected) MaterialTheme.chaiColorsPalette.eventDaySelectorActiveTextColor else MaterialTheme.chaiColorsPalette.eventDaySelectorInactiveTextColor
+        )
+    }
+}
+
+
+@ChaiLightAndDarkComposePreview
+@Composable
+private fun EventDaySelectorButtonPreview() {
+    ChaiDCKE22Theme {
+        Row {
+            EventDaySelectorButton(
+                title = "10th",
+                subtitle = "Day 1",
+                selected = true,
+                onClick = {}
+            )
+            EventDaySelectorButton(
+                title = "10th",
+                subtitle = "Day 1",
+                selected = false,
+                onClick = {}
+            )
         }
     }
 }
diff --git a/presentation/src/main/java/com/android254/presentation/sessions/view/SessionsScreen.kt b/presentation/src/main/java/com/android254/presentation/sessions/view/SessionsScreen.kt
@@ -15,7 +15,6 @@
  */
 package com.android254.presentation.sessions.view
 
-import android.content.res.Configuration
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -36,7 +35,6 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -49,6 +47,7 @@ import com.android254.presentation.sessions.components.EventDaySelector
 import com.android254.presentation.sessions.components.SessionsFilterPanel
 import com.android254.presentation.sessions.components.SessionsStateComponent
 import com.android254.presentation.sessions.models.SessionsUiState
+import com.android254.presentation.utils.ChaiLightAndDarkComposePreview
 import kotlinx.coroutines.launch
 
 @Composable
@@ -197,14 +196,7 @@ fun SessionsScreen(
     }
 }
 
-@Preview(
-    name = "Light",
-    uiMode = Configuration.UI_MODE_NIGHT_NO
-)
-@Preview(
-    name = "Dark",
-    uiMode = Configuration.UI_MODE_NIGHT_YES
-)
+@ChaiLightAndDarkComposePreview
 @Composable
 fun SessionsScreenPreview() {
     DroidconKE2023Theme {

diff --git a/...ntation/src/main/java/com/android254/presentation/utils/ChaiLightAndDarkComposePreview.kt b/...ntation/src/main/java/com/android254/presentation/utils/ChaiLightAndDarkComposePreview.kt
@@ -24,6 +24,7 @@ import androidx.compose.ui.tooling.preview.Preview
 )
 @Preview(
     name = "Dark",
-    uiMode = Configuration.UI_MODE_NIGHT_YES
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+
 )
 annotation class ChaiLightAndDarkComposePreview