Fix lack of navbar shadow issue

- added shadow
- rounded corners

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

@@ -1,59 +1,72 @@
 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
 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) {
-        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
+                            }
+                        )
+                    }
+                )
+            }
         }
     }
 }

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