Fix ScoreBox UI

app/src/main/java/com/cornellappdev/score/components/ScoreBox.kt

@@ -1,5 +1,6 @@
 package com.cornellappdev.score.components
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -8,6 +9,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Divider
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -20,6 +22,7 @@ import androidx.compose.ui.unit.dp
 import com.cornellappdev.score.model.GameData
 import com.cornellappdev.score.model.TeamScore
 import com.cornellappdev.score.theme.CrimsonPrimary
+import com.cornellappdev.score.theme.GrayMedium
 import com.cornellappdev.score.theme.GrayPrimary
 import com.cornellappdev.score.theme.Style.bodyNormal
 import com.cornellappdev.score.theme.Style.metricNormal
@@ -35,54 +38,54 @@ fun BoxScore(gameData: GameData) {
         gameData.teamScores.second.scoresByPeriod.size,
         4
     )
-
-    Column(
+    Surface(
         modifier = Modifier
-            .fillMaxWidth()
-            .background(Color.White, shape = RoundedCornerShape(8.dp))
+            .fillMaxWidth(),
+        shape = RoundedCornerShape(8.dp),
+        border = BorderStroke(width = 1.dp, color = CrimsonPrimary)
     ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .background(CrimsonPrimary)
-                .padding(vertical = 8.dp),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Text(
-                text = "",
-                modifier = Modifier.weight(1f),
-                color = Color.White,
-                textAlign = TextAlign.Center
-            )
-            repeat(maxPeriods) { period ->
+        Column {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(color = CrimsonPrimary)
+                    .padding(top = 6.dp, bottom = 4.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
                 Text(
-                    text = "${period + 1}",
+                    text = "",
                     modifier = Modifier.weight(1f),
                     color = Color.White,
+                    textAlign = TextAlign.Center
+                )
+                repeat(maxPeriods) { period ->
+                    Text(
+                        text = "${period + 1}",
+                        modifier = Modifier.weight(1f),
+                        color = Color.White,
+                        style = bodyNormal,
+                        textAlign = TextAlign.Center
+                    )
+                }
+                Text(
+                    text = "Total",
+                    modifier = Modifier.weight(1f),
                     style = bodyNormal,
+                    color = Color.White,
                     textAlign = TextAlign.Center
                 )
             }
-            Text(
-                text = "Total",
-                modifier = Modifier.weight(1f),
-                style = bodyNormal,
-                color = Color.White,
-                textAlign = TextAlign.Center
+            TeamScoreRow(
+                teamScore = gameData.teamScores.first,
+                totalTextColor = saturatedGreen,
             )
-        }
-
-        TeamScoreRow(
-            teamScore = gameData.teamScores.first,
-            totalTextColor = saturatedGreen,
-        )
-
-        Divider(color = CrimsonPrimary, thickness = 1.dp)
+            Divider(color = CrimsonPrimary, thickness = 1.dp)
 
-        TeamScoreRow(
-            teamScore = gameData.teamScores.second,
-            totalTextColor = Color.Black,
-        )
+            TeamScoreRow(
+                teamScore = gameData.teamScores.second,
+                totalTextColor = GrayMedium
+            )
+        }
     }
 }
 
@@ -138,12 +141,18 @@ fun TeamScoreRow(teamScore: TeamScore, totalTextColor: Color) {
 
 @Preview
 @Composable
-private fun PreviewBoxScore() = ScorePreview {
+private fun PreviewBoxScore() {
     BoxScore(gameData = gameData)
 }
 
 @Preview
 @Composable
-private fun PreviewBoxScoreEmpty() = ScorePreview {
+private fun PreviewBoxScoreEmpty() {
     BoxScore(gameData = emptyGameData())
 }
+
+@Preview
+@Composable
+private fun PreviewTeamScoreRow() = ScorePreview {
+    TeamScoreRow(gameData.teamScores.first, GrayMedium)
+}