From 1aabf486b62fb35644153923d4fed97ebfea52dd Mon Sep 17 00:00:00 2001 From: amjiao Date: Sat, 25 Oct 2025 16:38:23 -0400 Subject: [PATCH 1/2] Fix lack of navbar shadow issue - added shadow - rounded corners --- app/build.gradle.kts | 13 ++-- .../score/nav/ScoreNavigationBar.kt | 71 +++++++++++-------- .../score/nav/root/RootNavigation.kt | 33 +++++++-- 3 files changed, 76 insertions(+), 41 deletions(-) diff --git a/app/build.gradle.kts b/app/build.gradle.kts index d6c534f..b9c1217 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -48,7 +48,7 @@ android { } } composeOptions { - kotlinCompilerExtensionVersion = "1.5.3" + kotlinCompilerExtensionVersion = "1.7.0" } compileOptions { @@ -62,9 +62,9 @@ android { dependencies { // Jetpack Compose dependencies - implementation(platform("androidx.compose:compose-bom:2024.01.00")) - implementation("androidx.compose.ui:ui:1.4.0") - implementation("androidx.compose.ui:ui-tooling-preview") + implementation(platform("androidx.compose:compose-bom:2024.09.00")) + implementation("androidx.compose.material3:material3") + implementation("androidx.compose.ui:ui:1.9.4") implementation("androidx.compose.ui:ui-tooling-preview:1.4.3") implementation("androidx.activity:activity-compose") implementation("androidx.lifecycle:lifecycle-viewmodel-compose") @@ -100,8 +100,9 @@ apollo { service("service") { packageName.set("com.example.score") introspection { - endpointUrl.set("https://score.cornellappdev.com/graphql") + endpointUrl.set("https://score-dev.cornellappdev.com/graphql") schemaFile.set(file("src/main/graphql/schema.graphqls")) } } -} \ No newline at end of file +} + diff --git a/app/src/main/java/com/cornellappdev/score/nav/ScoreNavigationBar.kt b/app/src/main/java/com/cornellappdev/score/nav/ScoreNavigationBar.kt index 708cd3b..ac56ead 100644 --- a/app/src/main/java/com/cornellappdev/score/nav/ScoreNavigationBar.kt +++ b/app/src/main/java/com/cornellappdev/score/nav/ScoreNavigationBar.kt @@ -1,15 +1,19 @@ package com.cornellappdev.score.nav +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.material3.NavigationBar import androidx.compose.material3.NavigationBarItem import androidx.compose.material3.NavigationBarItemDefaults +import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import androidx.navigation.NavBackStackEntry import com.cornellappdev.score.nav.root.ScoreScreens import com.cornellappdev.score.nav.root.tabs @@ -17,7 +21,6 @@ import com.cornellappdev.score.nav.root.toScreen import com.cornellappdev.score.theme.CrimsonPrimary import com.cornellappdev.score.theme.GrayPrimary import com.cornellappdev.score.theme.Style.bodyMedium -import com.cornellappdev.score.theme.White @Composable fun ScoreNavigationBar( @@ -25,35 +28,45 @@ fun ScoreNavigationBar( navBackStackEntry: NavBackStackEntry?, modifier: Modifier = Modifier, ) { - NavigationBar(modifier = modifier, containerColor = White) { - tabs.map { item -> - val isSelected = item.screen == navBackStackEntry?.toScreen() + Surface( + modifier = Modifier + .fillMaxWidth(), + color = Color.White, + shape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp), + ) { + NavigationBar( + modifier = modifier, + containerColor = Color.Transparent + ) { + tabs.map { item -> + val isSelected = item.screen == navBackStackEntry?.toScreen() - NavigationBarItem( - selected = isSelected, - onClick = { navigateToScreen(item.screen) }, - colors = NavigationBarItemDefaults.colors().copy( - selectedIndicatorColor = Color.Transparent - ), - icon = { - Icon( - painter = painterResource(id = if (isSelected) item.selectedIcon else item.unselectedIcon), - contentDescription = null, - tint = Color.Unspecified - ) - }, - label = { - Text( - text = item.label, - style = bodyMedium, - color = if (isSelected) { - CrimsonPrimary - } else { - GrayPrimary - } - ) - } - ) + NavigationBarItem( + selected = isSelected, + onClick = { navigateToScreen(item.screen) }, + colors = NavigationBarItemDefaults.colors().copy( + selectedIndicatorColor = Color.Transparent + ), + icon = { + Icon( + painter = painterResource(id = if (isSelected) item.selectedIcon else item.unselectedIcon), + contentDescription = null, + tint = Color.Unspecified + ) + }, + label = { + Text( + text = item.label, + style = bodyMedium, + color = if (isSelected) { + CrimsonPrimary + } else { + GrayPrimary + } + ) + } + ) + } } } } diff --git a/app/src/main/java/com/cornellappdev/score/nav/root/RootNavigation.kt b/app/src/main/java/com/cornellappdev/score/nav/root/RootNavigation.kt index 362268f..787d3a8 100644 --- a/app/src/main/java/com/cornellappdev/score/nav/root/RootNavigation.kt +++ b/app/src/main/java/com/cornellappdev/score/nav/root/RootNavigation.kt @@ -6,12 +6,20 @@ import androidx.compose.animation.core.keyframes import androidx.compose.animation.core.rememberInfiniteTransition import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Scaffold +import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.LaunchedEffect import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.dropShadow +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.shadow.Shadow +import androidx.compose.ui.unit.DpOffset +import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.navigation.NavBackStackEntry import androidx.navigation.compose.currentBackStackEntryAsState @@ -20,13 +28,13 @@ import androidx.navigation.toRoute import com.cornellappdev.score.R import com.cornellappdev.score.nav.ScoreNavHost import com.cornellappdev.score.nav.ScoreNavigationBar -import com.cornellappdev.score.nav.root.ScoreScreens.GameDetailsPage import com.cornellappdev.score.theme.LocalInfiniteLoading import com.cornellappdev.score.theme.White import kotlinx.serialization.Serializable @Composable fun RootNavigation( + modifier: Modifier = Modifier, rootNavigationViewModel: RootNavigationViewModel = hiltViewModel(), ) { val navController = rememberNavController() @@ -55,19 +63,32 @@ fun RootNavigation( } } - Scaffold( - modifier = Modifier.fillMaxSize(), bottomBar = { - if (navBackStackEntry?.toScreen() is GameDetailsPage) { + modifier = modifier.fillMaxSize(), bottomBar = { + if (navBackStackEntry?.toScreen() is ScoreScreens.GameDetailsPage) { return@Scaffold } - ScoreNavigationBar({ navController.navigate(it) }, navBackStackEntry) + Surface( + modifier = Modifier + .fillMaxWidth() + .dropShadow( + shape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp), + shadow = Shadow( + radius = 6.dp, + color = Color.Black.copy(alpha = 0.07f), + offset = DpOffset(0.dp, (-5).dp) + ) + ), + color = Color.White, + shape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp) + ) { + ScoreNavigationBar({ navController.navigate(it) }, navBackStackEntry) + } }, containerColor = White ) { innerPadding -> Box(modifier = Modifier.padding(innerPadding)) { CompositionLocalProvider(LocalInfiniteLoading provides animatedValue) { - ScoreNavHost(navController) } } From 0f47c50a461b2daec51f5d04625b9ea8e5fbf6ef Mon Sep 17 00:00:00 2001 From: amjiao Date: Fri, 14 Nov 2025 23:31:01 -0500 Subject: [PATCH 2/2] Address nit --- .../score/nav/ScoreNavigationBar.kt | 71 ++++++++----------- 1 file changed, 30 insertions(+), 41 deletions(-) diff --git a/app/src/main/java/com/cornellappdev/score/nav/ScoreNavigationBar.kt b/app/src/main/java/com/cornellappdev/score/nav/ScoreNavigationBar.kt index ac56ead..91af73d 100644 --- a/app/src/main/java/com/cornellappdev/score/nav/ScoreNavigationBar.kt +++ b/app/src/main/java/com/cornellappdev/score/nav/ScoreNavigationBar.kt @@ -1,19 +1,15 @@ package com.cornellappdev.score.nav -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.material3.NavigationBar import androidx.compose.material3.NavigationBarItem import androidx.compose.material3.NavigationBarItemDefaults -import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import androidx.navigation.NavBackStackEntry import com.cornellappdev.score.nav.root.ScoreScreens import com.cornellappdev.score.nav.root.tabs @@ -28,45 +24,38 @@ fun ScoreNavigationBar( navBackStackEntry: NavBackStackEntry?, modifier: Modifier = Modifier, ) { - Surface( - modifier = Modifier - .fillMaxWidth(), - color = Color.White, - shape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp), + NavigationBar( + modifier = modifier, + containerColor = Color.Transparent ) { - NavigationBar( - modifier = modifier, - containerColor = Color.Transparent - ) { - tabs.map { item -> - val isSelected = item.screen == navBackStackEntry?.toScreen() + tabs.map { item -> + val isSelected = item.screen == navBackStackEntry?.toScreen() - NavigationBarItem( - selected = isSelected, - onClick = { navigateToScreen(item.screen) }, - colors = NavigationBarItemDefaults.colors().copy( - selectedIndicatorColor = Color.Transparent - ), - icon = { - Icon( - painter = painterResource(id = if (isSelected) item.selectedIcon else item.unselectedIcon), - contentDescription = null, - tint = Color.Unspecified - ) - }, - label = { - Text( - text = item.label, - style = bodyMedium, - color = if (isSelected) { - CrimsonPrimary - } else { - GrayPrimary - } - ) - } - ) - } + NavigationBarItem( + selected = isSelected, + onClick = { navigateToScreen(item.screen) }, + colors = NavigationBarItemDefaults.colors().copy( + selectedIndicatorColor = Color.Transparent + ), + icon = { + Icon( + painter = painterResource(id = if (isSelected) item.selectedIcon else item.unselectedIcon), + contentDescription = null, + tint = Color.Unspecified + ) + }, + label = { + Text( + text = item.label, + style = bodyMedium, + color = if (isSelected) { + CrimsonPrimary + } else { + GrayPrimary + } + ) + } + ) } } }