Implemented UI for workout history page

Author: melissavelasquezz

app/src/main/java/com/cornellappdev/uplift/ui/MainNavigationWrapper.kt

@@ -47,6 +47,7 @@ import com.cornellappdev.uplift.ui.screens.onboarding.ProfileCreationScreen
 import com.cornellappdev.uplift.ui.screens.onboarding.SignInPromptScreen
 import com.cornellappdev.uplift.ui.screens.profile.ProfileScreen
 import com.cornellappdev.uplift.ui.screens.profile.SettingsScreen
+import com.cornellappdev.uplift.ui.screens.profile.WorkoutHistoryScreen
 import com.cornellappdev.uplift.ui.screens.reminders.CapacityReminderScreen
 import com.cornellappdev.uplift.ui.screens.reminders.MainReminderScreen
 import com.cornellappdev.uplift.ui.screens.onboarding.WorkoutReminderOnboardingScreen
@@ -265,6 +266,11 @@ fun MainNavigationWrapper(
                 composable<UpliftRootRoute.Settings> {
                     SettingsScreen()
                 }
+                composable<UpliftRootRoute.WorkoutHistory> {
+                    WorkoutHistoryScreen(
+                        onBack = { navController.popBackStack() }
+                    )
+                }
                 composable<UpliftRootRoute.Sports> {}
                 composable<UpliftRootRoute.Favorites> {}
             }
@@ -363,4 +369,7 @@ sealed class UpliftRootRoute {
 
     @Serializable
     data object Settings : UpliftRootRoute()
+
+    @Serializable
+    data object WorkoutHistory : UpliftRootRoute()
 }

app/src/main/java/com/cornellappdev/uplift/ui/components/general/UpliftTabRow.kt

@@ -1,6 +1,12 @@
 package com.cornellappdev.uplift.ui.components.general
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.TabRowDefaults.Divider
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRow
 import androidx.compose.material3.TabRowDefaults.SecondaryIndicator
@@ -11,8 +17,10 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -24,7 +32,12 @@ import com.cornellappdev.uplift.util.PRIMARY_YELLOW
 import com.cornellappdev.uplift.util.montserratFamily
 
 @Composable
-fun UpliftTabRow(tabIndex: Int, tabs: List<String>, onTabChange: (Int) -> Unit = {}) {
+fun UpliftTabRow(
+    tabIndex: Int,
+    tabs: List<String>,
+    icons: List<Int>? = null,
+    onTabChange: (Int) -> Unit = {}
+) {
     TabRow(
         selectedTabIndex = tabIndex,
         containerColor = Color.White,
@@ -43,19 +56,35 @@ fun UpliftTabRow(tabIndex: Int, tabs: List<String>, onTabChange: (Int) -> Unit =
         }
     ) {
         tabs.forEachIndexed { index, title ->
+            val isSelected = tabIndex == index
+            val color = if (isSelected) PRIMARY_BLACK else GRAY04
             Tab(
-                text = {
-                    Text(
-                        text = title,
-                        color = if (tabIndex == index) PRIMARY_BLACK else GRAY04,
-                        fontFamily = montserratFamily,
-                        fontSize = 12.sp,
-                        fontWeight = FontWeight.Bold
-                    )
-                },
-                selected = tabIndex == index,
+                selected = isSelected,
                 onClick = { onTabChange(index) },
                 selectedContentColor = GRAY01,
+                text = {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.Center
+                    ) {
+                        if (icons != null && index < icons.size) {
+                            Icon(
+                                painter = painterResource(id = icons[index]),
+                                contentDescription = null,
+                                tint = color,
+                                modifier = Modifier.size(16.dp)
+                            )
+                            Spacer(modifier = Modifier.width(16.dp))
+                        }
+                        Text(
+                            text = title,
+                            color = color,
+                            fontFamily = montserratFamily,
+                            fontSize = 12.sp,
+                            fontWeight = FontWeight.Bold
+                        )
+                    }
+                }
             )
         }
     }
@@ -72,4 +101,4 @@ private fun UpliftTabRowPreview() {
             tabIndex = it
         }
     )
-}
+}

app/src/main/java/com/cornellappdev/uplift/ui/components/profile/workouts/HistorySection.kt

@@ -2,7 +2,6 @@ package com.cornellappdev.uplift.ui.components.profile.workouts
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -18,7 +17,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.focusModifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
@@ -28,9 +26,9 @@ import androidx.compose.ui.unit.sp
 import com.cornellappdev.uplift.R
 import com.cornellappdev.uplift.ui.components.profile.SectionTitleText
 import com.cornellappdev.uplift.util.GRAY01
+import com.cornellappdev.uplift.util.GRAY04
+import com.cornellappdev.uplift.util.PRIMARY_BLACK
 import com.cornellappdev.uplift.util.montserratFamily
-import com.cornellappdev.uplift.util.timeAgoString
-import java.util.Calendar
 
 data class HistoryItem(
     val gymName: String,
@@ -68,22 +66,22 @@ fun HistorySection(
 }
 
 @Composable
-private fun HistoryList(
+fun HistoryList(
     historyItems: List<HistoryItem>,
     modifier: Modifier = Modifier
 ) {
     Column(modifier = modifier) {
         historyItems.take(5).forEachIndexed { index, historyItem ->
             HistoryItemRow(historyItem = historyItem)
             if (index != historyItems.size - 1) {
-                HorizontalDivider(color = GRAY01)
+                HorizontalDivider(color = GRAY01, thickness = 1.dp)
             }
         }
     }
 }
 
 @Composable
-private fun HistoryItemRow(
+fun HistoryItemRow(
     historyItem: HistoryItem
 ) {
     val gymName = historyItem.gymName
@@ -94,23 +92,28 @@ private fun HistoryItemRow(
     Row(
         modifier = Modifier
             .fillMaxWidth()
+            .height(60.dp)
             .padding(vertical = 12.dp),
-        horizontalArrangement = Arrangement.SpaceBetween
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.Bottom
     ) {
-        Column(){
+        Column(
+            modifier = Modifier.weight(1f),
+            verticalArrangement = Arrangement.spacedBy(4.dp)
+        ){
             Text(
                 text = gymName,
                 fontFamily = montserratFamily,
-                fontSize = 14.sp,
+                fontSize = 12.sp,
                 fontWeight = FontWeight.Medium,
-                color = Color.Black
+                color = PRIMARY_BLACK
             )
             Text(
                 text = "$date · $time",
                 fontFamily = montserratFamily,
                 fontSize = 12.sp,
-                fontWeight = FontWeight.Light,
-                color = Color.Gray
+                fontWeight = FontWeight.Medium,
+                color = GRAY04
             )
         }
         Text(
@@ -124,7 +127,7 @@ private fun HistoryItemRow(
 }
 
 @Composable
-private fun EmptyHistorySection(){
+fun EmptyHistorySection(){
     Column(
         modifier = Modifier.fillMaxSize(),
         verticalArrangement = Arrangement.Center,
@@ -178,4 +181,4 @@ private fun HistorySectionPreview() {
         )
     }
 
-}
+}