Nav bar shadow (#89)

* Fix lack of navbar shadow issue

- added shadow
- rounded corners

* Address nit

Author: amjiao

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"))
         }
     }
-}
+}
+

app/src/main/java/com/cornellappdev/score/nav/ScoreNavigationBar.kt

@@ -17,15 +17,17 @@ 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(
     navigateToScreen: (ScoreScreens) -> Unit,
     navBackStackEntry: NavBackStackEntry?,
     modifier: Modifier = Modifier,
 ) {
-    NavigationBar(modifier = modifier, containerColor = White) {
+    NavigationBar(
+        modifier = modifier,
+        containerColor = Color.Transparent
+    ) {
         tabs.map { item ->
             val isSelected = item.screen == navBackStackEntry?.toScreen()
 

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)
             }
         }