recent activity feed

updated, now showing real data

apps/mobile/src/app/(tabs)/attendance.tsx

@@ -7,46 +7,28 @@ import {
   ScrollView,
   Alert,
 } from "react-native";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useAuth } from "@clerk/clerk-expo";
-import { LinearGradient } from "expo-linear-gradient";
 import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "../../contexts/ThemeContext";
+import { MinimalCard } from "../../components/MinimalCard";
+import { SectionHeader } from "../../components/SectionHeader";
+import { MinimalButton } from "../../components/MinimalButton";
+import { Badge } from "../../components/Badge";
+import { IconContainer } from "../../components/IconContainer";
 import { attendanceApi, Attendance } from "../../api/attendance";
 import { AttendanceCalendar } from "../../components/AttendanceCalendar";
 import { useStatistics } from "../../contexts/StatisticsContext";
-import { theme } from "../../styles/theme";
-import { Animated } from "react-native";
 import { getErrorMessage } from "../../utils/error-helpers";
 import log from "../../utils/logger";
 
 export default function AttendanceScreen() {
   const { getToken, userId } = useAuth();
+  const { colors, typography } = useTheme();
   const { clearCache: clearStatisticsCache } = useStatistics();
   const [loading, setLoading] = useState(true);
   const [activeCheckIn, setActiveCheckIn] = useState<Attendance | null>(null);
   const [history, setHistory] = useState<Attendance[]>([]);
-  const pulseAnim = useRef(new Animated.Value(1)).current;
-
-  useEffect(() => {
-    if (activeCheckIn) {
-      const pulse = Animated.loop(
-        Animated.sequence([
-          Animated.timing(pulseAnim, {
-            toValue: 1.05,
-            duration: 1000,
-            useNativeDriver: true,
-          }),
-          Animated.timing(pulseAnim, {
-            toValue: 1,
-            duration: 1000,
-            useNativeDriver: true,
-          }),
-        ]),
-      );
-      pulse.start();
-      return () => pulse.stop();
-    }
-  }, [activeCheckIn]);
 
   const fetchAttendance = async () => {
     try {
@@ -82,10 +64,7 @@ export default function AttendanceScreen() {
       if (!token) return;
 
       await attendanceApi.checkIn("gym", token);
-
-      // Clear statistics cache to force refresh on home screen
       clearStatisticsCache();
-
       fetchAttendance();
       Alert.alert("Success", "Checked in successfully!");
     } catch (error: unknown) {
@@ -100,10 +79,7 @@ export default function AttendanceScreen() {
       if (!token) return;
 
       await attendanceApi.checkOut(token);
-
-      // Clear statistics cache to force refresh on home screen
       clearStatisticsCache();
-
       fetchAttendance();
       Alert.alert("Success", "Checked out successfully!");
     } catch (error: unknown) {
@@ -114,143 +90,202 @@ export default function AttendanceScreen() {
 
   if (loading && !history.length) {
     return (
-      <View style={styles.centered}>
+      <View style={[styles.centered, { backgroundColor: colors.background }]}>
-        <ActivityIndicator size="large" color={theme.colors.primary} />
+        <ActivityIndicator size="large" color={colors.primary} />
       </View>
     );
   }
 
   return (
-    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+    <ScrollView
-      <LinearGradient
+      style={[styles.container, { backgroundColor: colors.background }]}
-        colors={theme.gradients.primary}
+      contentContainerStyle={styles.content}
-        start={{ x: 0, y: 0 }}
+    >
-        end={{ x: 1, y: 1 }}
+      {/* Header */}
-        style={styles.header}
+      <View style={styles.header}>
-      >
+        <Text style={[typography.h1, { color: colors.textPrimary }]}>
-        <Text style={styles.title}>Attendance</Text>
+          📍 Attendance
-        <Text style={styles.subtitle}>Track your gym visits</Text>
+        </Text>
-      </LinearGradient>
+        <Text
+          style={[
+            typography.body,
+            { color: colors.textSecondary, marginTop: 4 },
+          ]}
+        >
+          {activeCheckIn
+            ? "You're crushing it today! 💪"
+            : history.length === 0
+              ? "Ready to start your fitness journey? 🚀"
+              : "Track your gym visits and build streaks! 🔥"}
+        </Text>
+      </View>
 
-      <View style={styles.actionContainer}>
+      {/* Check In/Out Section */}
+      <View style={styles.section}>
         {activeCheckIn ? (
-          <LinearGradient
+          <MinimalCard variant="bordered" style={styles.activeCard}>
-            colors={["rgba(16, 185, 129, 0.15)", "rgba(5, 150, 105, 0.1)"]}
+            <View style={styles.activeHeader}>
-            style={[styles.activeCard, theme.shadows.medium]}
+              <View style={styles.activeHeaderLeft}>
-          >
+                <IconContainer
-            <View style={styles.activeCardContent}>
+                  variant="colored"
-              <View style={styles.activeIconContainer}>
+                  backgroundColor={`${colors.success}20`}
-                <LinearGradient
+                  size="lg"
-                  colors={theme.gradients.success}
-                  style={styles.activeIcon}
                 >
-                  <Ionicons name="checkmark-circle" size={32} color="#fff" />
+                  <Ionicons
-                </LinearGradient>
+                    name="checkmark-circle"
-              </View>
+                    size={28}
-              <View style={styles.activeTextContainer}>
+                    color={colors.success}
-                <Text style={styles.activeText}>Currently Checked In</Text>
+                  />
-                <Text style={styles.timeText}>
+                </IconContainer>
-                  Since{" "}
+                <View style={{ marginLeft: 12 }}>
-                  {new Date(activeCheckIn.checkInTime).toLocaleTimeString([], {
+                  <Text style={[typography.h3, { color: colors.textPrimary }]}>
-                    hour: "2-digit",
+                    ✅ Currently Checked In
-                    minute: "2-digit",
+                  </Text>
-                  })}
+                  <Text
-                </Text>
+                    style={[
+                      typography.caption,
+                      { color: colors.textTertiary, marginTop: 2 },
+                    ]}
+                  >
+                    Since{" "}
+                    {new Date(activeCheckIn.checkInTime).toLocaleTimeString(
+                      [],
+                      {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      },
+                    )}
+                  </Text>
+                </View>
               </View>
             </View>
-            <TouchableOpacity onPress={handleCheckOut} activeOpacity={0.8}>
+            <MinimalButton
-              <LinearGradient
+              title="Check Out"
-                colors={theme.gradients.danger}
+              onPress={handleCheckOut}
-                start={{ x: 0, y: 0 }}
+              variant="danger"
-                end={{ x: 1, y: 0 }}
+              size="lg"
-                style={[styles.checkOutButton, theme.shadows.medium]}
+              style={{ marginTop: 16 }}
-              >
+            />
-                <Ionicons
+          </MinimalCard>
-                  name="log-out-outline"
-                  size={20}
-                  color="#fff"
-                  style={{ marginRight: 8 }}
-                />
-                <Text style={styles.buttonText}>Check Out</Text>
-              </LinearGradient>
-            </TouchableOpacity>
-          </LinearGradient>
         ) : (
-          <Animated.View style={{ transform: [{ scale: pulseAnim }] }}>
+          <MinimalButton
-            <TouchableOpacity onPress={handleCheckIn} activeOpacity={0.8}>
+            title="💪 Check In"
-              <LinearGradient
+            onPress={handleCheckIn}
-                colors={theme.gradients.primary}
+            variant="primary"
-                start={{ x: 0, y: 0 }}
+            size="lg"
-                end={{ x: 1, y: 0 }}
+          />
-                style={[styles.checkInButton, theme.shadows.glow]}
-              >
-                <Ionicons
-                  name="log-in-outline"
-                  size={24}
-                  color="#fff"
-                  style={{ marginRight: 8 }}
-                />
-                <Text style={styles.checkInButtonText}>Check In</Text>
-              </LinearGradient>
-            </TouchableOpacity>
-          </Animated.View>
         )}
       </View>
 
       {/* Attendance Calendar */}
-      {history.length > 0 && <AttendanceCalendar attendanceRecords={history} />}
+      <View style={styles.section}>
+        <SectionHeader title="📅 Calendar" />
+        <MinimalCard variant="default" style={{ borderRadius: 20 }}>
+          <AttendanceCalendar attendanceRecords={history} />
+        </MinimalCard>
+      </View>
 
-      <Text style={styles.sectionTitle}>Recent History</Text>
+      {/* Recent History */}
-      {history.map((item) => (
+      <View style={styles.section}>
-        <LinearGradient
+        <SectionHeader title="📊 Recent History" />
-          key={item.id}
+        {history.length === 0 ? (
-          colors={["rgba(255, 255, 255, 1)", "rgba(249, 250, 251, 1)"] as const}
+          <MinimalCard variant="default" style={{ borderRadius: 20 }}>
-          style={[styles.historyItem, theme.shadows.medium]}
+            <View style={styles.emptyState}>
-        >
+              <Text style={{ fontSize: 64 }}>📍</Text>
-          <View style={styles.historyLeft}>
+              <Text
-            <View style={styles.historyIconContainer}>
+                style={[
-              <LinearGradient
+                  typography.bodyEmphasis,
-                colors={
+                  { color: colors.textPrimary, marginTop: 16 },
-                  item.checkOutTime
+                ]}
-                    ? theme.gradients.success
-                    : theme.gradients.primary
-                }
-                style={styles.historyIcon}
               >
-                <Ionicons
+                No attendance history yet
-                  name={item.checkOutTime ? "checkmark" : "time-outline"}
-                  size={16}
-                  color="#fff"
-                />
-              </LinearGradient>
-            </View>
-            <View>
-              <Text style={styles.dateText}>
-                {new Date(item.checkInTime).toLocaleDateString()}
               </Text>
-              <Text style={styles.typeText}>{item.type.toUpperCase()}</Text>
+              <Text
-            </View>
+                style={[
-          </View>
+                  typography.body,
-          <View style={styles.timeContainer}>
+                  {
-            <Text style={styles.historyTime}>
+                    color: colors.textSecondary,
-              In:{" "}
+                    marginTop: 8,
-              {new Date(item.checkInTime).toLocaleTimeString([], {
+                    textAlign: "center",
-                hour: "2-digit",
+                  },
-                minute: "2-digit",
+                ]}
-              })}
+              >
-            </Text>
+                Check in to start building your streak! 🔥
-            {item.checkOutTime && (
-              <Text style={styles.historyTime}>
-                Out:{" "}
-                {new Date(item.checkOutTime).toLocaleTimeString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })}
               </Text>
-            )}
+            </View>
+          </MinimalCard>
+        ) : (
+          <View style={styles.historyList}>
+            {history.slice(0, 10).map((record, index) => {
+              const checkIn = new Date(record.checkInTime);
+              const checkOut = record.checkOutTime
+                ? new Date(record.checkOutTime)
+                : null;
+              const duration = checkOut
+                ? Math.round((checkOut.getTime() - checkIn.getTime()) / 60000)
+                : null;
+
+              return (
+                <MinimalCard
+                  key={index}
+                  variant="bordered"
+                  style={{ borderRadius: 16 }}
+                >
+                  <View style={styles.historyItem}>
+                    <View style={styles.historyLeft}>
+                      <IconContainer
+                        variant="colored"
+                        backgroundColor={
+                          checkOut ? `${colors.success}20` : `${colors.info}20`
+                        }
+                      >
+                        <Ionicons
+                          name={checkOut ? "checkmark-done" : "time"}
+                          size={20}
+                          color={checkOut ? colors.success : colors.info}
+                        />
+                      </IconContainer>
+                      <View style={{ marginLeft: 12, flex: 1 }}>
+                        <Text
+                          style={[typography.h3, { color: colors.textPrimary }]}
+                        >
+                          {checkIn.toLocaleDateString()}
+                        </Text>
+                        <Text
+                          style={[
+                            typography.caption,
+                            { color: colors.textTertiary, marginTop: 2 },
+                          ]}
+                        >
+                          {checkIn.toLocaleTimeString([], {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })}
+                          {checkOut &&
+                            ` - ${checkOut.toLocaleTimeString([], {
+                              hour: "2-digit",
+                              minute: "2-digit",
+                            })}`}
+                        </Text>
+                      </View>
+                    </View>
+                    {duration && (
+                      <Badge
+                        label={`${duration}m`}
+                        variant="neutral"
+                        size="sm"
+                      />
+                    )}
+                  </View>
+                </MinimalCard>
+              );
+            })}
           </View>
-        </LinearGradient>
+        )}
-      ))}
+      </View>
+
+      {/* Bottom Spacer */}
+      <View style={{ height: 100 }} />
     </ScrollView>
   );
 }
@@ -258,147 +293,54 @@ export default function AttendanceScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.background,
-  },
-  content: {
-    paddingBottom: 20,
   },
   centered: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
   },
+  content: {
+    paddingBottom: 20,
+  },
   header: {
+    paddingHorizontal: 24,
     paddingTop: 60,
     paddingBottom: 24,
+  },
+  section: {
     paddingHorizontal: 24,
     marginBottom: 24,
-    borderBottomLeftRadius: theme.borderRadius.xl,
-    borderBottomRightRadius: theme.borderRadius.xl,
-  },
-  title: {
-    fontSize: theme.typography.fontSize["3xl"],
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.white,
-    marginBottom: 4,
-  },
-  subtitle: {
-    fontSize: theme.typography.fontSize.base,
-    color: "rgba(255, 255, 255, 0.9)",
-  },
-  actionContainer: {
-    marginBottom: 32,
-    paddingHorizontal: 20,
-  },
-  checkInButton: {
-    paddingVertical: 20,
-    paddingHorizontal: 24,
-    borderRadius: theme.borderRadius.xl,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  checkInButtonText: {
-    color: theme.colors.white,
-    fontSize: theme.typography.fontSize.xl,
-    fontWeight: theme.typography.fontWeight.semibold,
-  },
-  checkOutButton: {
-    paddingVertical: 14,
-    paddingHorizontal: 20,
-    borderRadius: theme.borderRadius.lg,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: 16,
-  },
-  buttonText: {
-    color: theme.colors.white,
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.semibold,
   },
   activeCard: {
     padding: 20,
-    borderRadius: theme.borderRadius.xl,
+    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: "rgba(16, 185, 129, 0.2)",
   },
-  activeCardContent: {
+  activeHeader: {
     flexDirection: "row",
+    justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 16,
   },
-  activeIconContainer: {
+  activeHeaderLeft: {
-    marginRight: 16,
+    flexDirection: "row",
-  },
-  activeIcon: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    justifyContent: "center",
     alignItems: "center",
-  },
-  activeTextContainer: {
     flex: 1,
   },
-  activeText: {
+  emptyState: {
-    fontSize: theme.typography.fontSize.lg,
+    alignItems: "center",
-    fontWeight: theme.typography.fontWeight.semibold,
+    paddingVertical: 40,
-    color: theme.colors.gray900,
+    paddingHorizontal: 20,
-    marginBottom: 4,
-  },
-  timeText: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray600,
   },
-  sectionTitle: {
+  historyList: {
-    fontSize: theme.typography.fontSize.xl,
+    gap: 12,
-    fontWeight: theme.typography.fontWeight.semibold,
-    marginBottom: 16,
-    paddingHorizontal: 20,
-    color: theme.colors.gray900,
   },
   historyItem: {
-    padding: 16,
-    borderRadius: theme.borderRadius.xl,
-    marginBottom: 12,
-    marginHorizontal: 20,
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    borderWidth: 1,
-    borderColor: "rgba(59, 130, 246, 0.1)",
   },
   historyLeft: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
+    flex: 1,
-  },
-  historyIconContainer: {
-    marginRight: 4,
-  },
-  historyIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  dateText: {
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray900,
-  },
-  typeText: {
-    fontSize: theme.typography.fontSize.xs,
-    color: theme.colors.gray600,
-    marginTop: 2,
-  },
-  timeContainer: {
-    alignItems: "flex-end",
-  },
-  historyTime: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray700,
   },
 });

apps/mobile/src/app/(tabs)/goals.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef } from "react";
+import React, { useState, useCallback } from "react";
 import {
   View,
   Text,
@@ -6,27 +6,31 @@ import {
   ScrollView,
   RefreshControl,
   TouchableOpacity,
-  Animated,
   Alert,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { LinearGradient } from "expo-linear-gradient";
+import { useUser } from "@clerk/clerk-expo";
-import { theme } from "../../styles/theme";
+import { useFocusEffect } from "expo-router";
+import * as SecureStore from "expo-secure-store";
+import { useTheme } from "../../contexts/ThemeContext";
+import { MinimalCard } from "../../components/MinimalCard";
+import { SectionHeader } from "../../components/SectionHeader";
+import { MinimalButton } from "../../components/MinimalButton";
+import { Badge } from "../../components/Badge";
+import { ProgressBar } from "../../components/ProgressBar";
 import { GoalProgressCard } from "../../components/GoalProgressCard";
 import { GoalCreationModal } from "../../components/GoalCreationModal";
 import { WeeklyProgressChart } from "../../components/WeeklyProgressChart";
 import { GoalTypeBreakdownChart } from "../../components/GoalTypeBreakdownChart";
-import { useUser } from "@clerk/clerk-expo";
 import type { FitnessGoal, CreateGoalData } from "../../services/fitnessGoals";
 import { useStatistics } from "../../contexts/StatisticsContext";
 import { useFitnessGoals } from "../../contexts/FitnessGoalsContext";
 import { useRecommendations } from "../../contexts/RecommendationsContext";
-import { useFocusEffect } from "expo-router";
-import * as SecureStore from "expo-secure-store";
 import log from "../../utils/logger";
 
 export default function GoalsScreen() {
   const { user } = useUser();
+  const { colors, typography } = useTheme();
   const {
     statistics,
     refetchStatistics,
@@ -45,10 +49,8 @@ export default function GoalsScreen() {
   const [refreshing, setRefreshing] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [showAnalytics, setShowAnalytics] = useState(false);
-  const fabScale = useRef(new Animated.Value(1)).current;
 
   const loadData = useCallback(async () => {
-    // Load goals and statistics (both cached)
     await refetchGoals();
     await refetchStatistics();
   }, [refetchGoals, refetchStatistics]);
@@ -64,7 +66,6 @@ export default function GoalsScreen() {
           style: "destructive",
           onPress: async () => {
             try {
-              // Clear all possible Clerk token keys
               const keysToDelete = [
                 "__clerk_client_jwt",
                 "__clerk_db_jwt",
@@ -82,7 +83,6 @@ export default function GoalsScreen() {
                 }
               }
 
-              // Clear all caches
               clearStatsCache();
               clearGoalsCache();
               clearRecommendationsCache();
@@ -128,183 +128,242 @@ export default function GoalsScreen() {
 
   const activeGoals = goals?.filter((g) => g.status === "active") || [];
   const completedGoals = goals?.filter((g) => g.status === "completed") || [];
+  const avgProgress =
+    activeGoals.length > 0
+      ? Math.round(
+          activeGoals.reduce((sum, g) => sum + (g.progress || 0), 0) /
+            activeGoals.length,
+        )
+      : 0;
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
       <ScrollView
         contentContainerStyle={styles.scrollContent}
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
             onRefresh={onRefresh}
-            tintColor={theme.colors.primary}
+            tintColor={colors.primary}
           />
         }
       >
-        <LinearGradient colors={theme.gradients.primary} style={styles.header}>
+        {/* Header */}
-          <View style={styles.headerContent}>
+        <View style={styles.header}>
-            <View>
+          <View>
-              <Text style={styles.headerTitle}>Fitness Goals</Text>
+            <Text style={[typography.h1, { color: colors.textPrimary }]}>
-              <Text style={styles.headerSubtitle}>
+              🎯 Fitness Goals
-                Track your fitness journey progress
+            </Text>
-              </Text>
+            <Text
-            </View>
+              style={[
-            <TouchableOpacity
+                typography.body,
-              onPress={clearClerkCache}
+                { color: colors.textSecondary, marginTop: 4 },
-              style={styles.debugButton}
+              ]}
             >
-              <Ionicons name="refresh-circle-outline" size={24} color="#fff" />
+              {activeGoals.length === 0
-            </TouchableOpacity>
+                ? "Ready to crush some goals? 💪"
+                : activeGoals.length === 1
+                  ? "You're on a mission! Keep it up! 🚀"
+                  : `${activeGoals.length} goals in progress. Legend! ⭐`}
+            </Text>
           </View>
-        </LinearGradient>
+          <TouchableOpacity
+            onPress={clearClerkCache}
+            style={styles.debugButton}
+          >
+            <Ionicons
+              name="refresh-circle-outline"
+              size={24}
+              color={colors.textTertiary}
+            />
+          </TouchableOpacity>
+        </View>
 
         {/* Stats Summary */}
         {goals && goals.length > 0 && (
-          <View style={styles.statsContainer}>
+          <View style={styles.section}>
-            <View style={styles.statCard}>
+            <View style={styles.statsRow}>
-              <Text style={styles.statValue}>{activeGoals.length}</Text>
+              <MinimalCard variant="bordered" style={styles.statCard}>
-              <Text style={styles.statLabel}>Active</Text>
+                <Text style={[typography.stat, { color: colors.primary }]}>
-            </View>
+                  {activeGoals.length}
-            <View style={styles.statCard}>
+                </Text>
-              <Text style={styles.statValue}>{completedGoals.length}</Text>
+                <Text
-              <Text style={styles.statLabel}>Completed</Text>
+                  style={[
-            </View>
+                    typography.caption,
-            <View style={styles.statCard}>
+                    { color: colors.textTertiary, marginTop: 4 },
-              <Text style={styles.statValue}>
+                  ]}
-                {activeGoals.length > 0
+                >
-                  ? Math.round(
+                  🎯 Active
-                      activeGoals.reduce(
+                </Text>
-                        (sum, g) => sum + (g.progress || 0),
+              </MinimalCard>
-                        0,
+
-                      ) / activeGoals.length,
+              <MinimalCard variant="bordered" style={styles.statCard}>
-                    )
+                <Text style={[typography.stat, { color: colors.success }]}>
-                  : 0}
+                  {completedGoals.length}
-                %
+                </Text>
-              </Text>
+                <Text
-              <Text style={styles.statLabel}>Avg Progress</Text>
+                  style={[
+                    typography.caption,
+                    { color: colors.textTertiary, marginTop: 4 },
+                  ]}
+                >
+                  {completedGoals.length >= 5 ? "🏆" : "✅"} Completed
+                </Text>
+              </MinimalCard>
+
+              <MinimalCard variant="bordered" style={styles.statCard}>
+                <Text style={[typography.stat, { color: colors.textPrimary }]}>
+                  {avgProgress}%
+                </Text>
+                <Text
+                  style={[
+                    typography.caption,
+                    { color: colors.textTertiary, marginTop: 4 },
+                  ]}
+                >
+                  {avgProgress >= 75 ? "🔥" : "📊"} Progress
+                </Text>
+              </MinimalCard>
             </View>
           </View>
         )}
 
         {/* Analytics Section */}
         {statistics && (
-          <View style={styles.analyticsSection}>
+          <View style={styles.section}>
-            <TouchableOpacity
+            <MinimalCard variant="default">
-              style={styles.analyticsHeader}
+              <TouchableOpacity
-              onPress={() => setShowAnalytics(!showAnalytics)}
+                style={styles.analyticsHeader}
-            >
+                onPress={() => setShowAnalytics(!showAnalytics)}
-              <View style={styles.analyticsHeaderLeft}>
+                activeOpacity={0.7}
+              >
+                <View style={styles.analyticsHeaderLeft}>
+                  <Ionicons
+                    name="bar-chart-outline"
+                    size={20}
+                    color={colors.primary}
+                  />
+                  <Text
+                    style={[
+                      typography.h3,
+                      { color: colors.textPrimary, marginLeft: 8 },
+                    ]}
+                  >
+                    📈 Progress Analytics
+                  </Text>
+                </View>
                 <Ionicons
-                  name="bar-chart-outline"
+                  name={showAnalytics ? "chevron-up" : "chevron-down"}
                   size={20}
-                  color={theme.colors.primary}
+                  color={colors.textTertiary}
                 />
-                <Text style={styles.analyticsTitle}>Progress Analytics</Text>
+              </TouchableOpacity>
-              </View>
-              <Ionicons
-                name={showAnalytics ? "chevron-up" : "chevron-down"}
-                size={20}
-                color={theme.colors.gray400}
-              />
-            </TouchableOpacity>
 
-            {showAnalytics && (
+              {showAnalytics && (
-              <View style={styles.analyticsContent}>
+                <View
-                {statistics.weeklyTrend.length > 0 && (
+                  style={[
-                  <WeeklyProgressChart
+                    styles.analyticsContent,
-                    weeklyData={statistics.weeklyTrend}
+                    { borderTopColor: colors.border },
-                    title="8-Week Trend"
+                  ]}
-                  />
+                >
-                )}
+                  {statistics.weeklyTrend.length > 0 && (
-                {statistics.goals.goalsByType.length > 0 && (
+                    <WeeklyProgressChart
-                  <GoalTypeBreakdownChart
+                      weeklyData={statistics.weeklyTrend}
-                    data={statistics.goals.goalsByType}
+                      title="8-Week Trend"
-                    title="Goals by Type"
+                    />
-                  />
+                  )}
-                )}
+                  {statistics.goals.goalsByType.length > 0 && (
-              </View>
+                    <GoalTypeBreakdownChart
-            )}
+                      data={statistics.goals.goalsByType}
+                      title="Goals by Type"
+                    />
+                  )}
+                </View>
+              )}
+            </MinimalCard>
           </View>
         )}
 
         {/* Active Goals */}
         <View style={styles.section}>
-          <Text style={styles.sectionTitle}>
+          <SectionHeader
-            Active Goals ({activeGoals.length})
+            title={`🚀 Active Goals (${activeGoals.length})`}
-          </Text>
+            actionLabel="Add New"
+            onActionPress={() => setIsModalVisible(true)}
+          />
           {activeGoals.length === 0 ? (
-            <View style={styles.emptyState}>
+            <MinimalCard variant="default">
-              <Ionicons name="flag-outline" size={48} color="#d1d5db" />
+              <View style={styles.emptyState}>
-              <Text style={styles.emptyText}>No active goals yet</Text>
+                <Text style={{ fontSize: 64 }}>🎯</Text>
-              <Text style={styles.emptySubtext}>
+                <Text
-                Tap the + button to create your first goal
+                  style={[
-              </Text>
+                    typography.bodyEmphasis,
-            </View>
+                    { color: colors.textSecondary, marginTop: 12 },
+                  ]}
+                >
+                  No active goals yet
+                </Text>
+                <Text
+                  style={[
+                    typography.caption,
+                    { color: colors.textTertiary, marginTop: 4 },
+                  ]}
+                >
+                  Tap "Add New" to set your first goal! 💪
+                </Text>
+              </View>
+            </MinimalCard>
           ) : (
-            activeGoals.map((goal) => (
+            <View style={styles.goalsList}>
-              <GoalProgressCard
+              {activeGoals.map((goal) => (
-                key={goal.id}
+                <GoalProgressCard
-                goal={goal}
+                  key={goal.id}
-                onComplete={() => handleCompleteGoal(goal)}
+                  goal={goal}
-                onDelete={() => handleDeleteGoal(goal.id)}
+                  onComplete={() => handleCompleteGoal(goal)}
-              />
+                  onDelete={() => handleDeleteGoal(goal.id)}
-            ))
+                />
+              ))}
+            </View>
           )}
         </View>
 
         {/* Completed Goals */}
         {completedGoals.length > 0 && (
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>
+            <SectionHeader
-              Completed Goals ({completedGoals.length})
+              title={`✨ Completed Goals (${completedGoals.length})`}
-            </Text>
+            />
-            {completedGoals.map((goal) => (
+            <View style={styles.goalsList}>
-              <GoalProgressCard
+              {completedGoals.map((goal) => (
-                key={goal.id}
+                <GoalProgressCard
-                goal={goal}
+                  key={goal.id}
-                onDelete={() => handleDeleteGoal(goal.id)}
+                  goal={goal}
-              />
+                  onDelete={() => handleDeleteGoal(goal.id)}
-            ))}
+                />
+              ))}
+            </View>
           </View>
         )}
 
         <View style={styles.footer} />
       </ScrollView>
 
-      {/* Floating Action Button */}
+      {/* Floating Action Button - Minimal Style */}
-      <Animated.View
+      <View style={styles.fabContainer}>
-        style={[styles.fabContainer, { transform: [{ scale: fabScale }] }]}
-      >
         <TouchableOpacity
           onPress={() => setIsModalVisible(true)}
-          onPressIn={() => {
+          activeOpacity={0.8}
-            Animated.spring(fabScale, {
+          style={[
-              toValue: 0.9,
+            styles.fab,
-              friction: 8,
+            {
-              tension: 100,
+              backgroundColor: colors.primary,
-              useNativeDriver: true,
+              shadowColor: colors.primary,
-            }).start();
+            },
-          }}
+          ]}
-          onPressOut={() => {
-            Animated.spring(fabScale, {
-              toValue: 1,
-              friction: 8,
-              tension: 100,
-              useNativeDriver: true,
-            }).start();
-          }}
-          activeOpacity={0.9}
         >
-          <LinearGradient
+          <Ionicons name="add" size={28} color={colors.white} />
-            colors={theme.gradients.primary}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 1 }}
-            style={styles.fab}
-          >
-            <Ionicons name="add" size={28} color="#fff" />
-          </LinearGradient>
         </TouchableOpacity>
-      </Animated.View>
+      </View>
 
       {/* Create Goal Modal */}
       <GoalCreationModal
@@ -319,129 +378,73 @@ export default function GoalsScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.background,
   },
   scrollContent: {
     paddingBottom: 20,
   },
   header: {
-    padding: 24,
-    paddingTop: 60,
-    paddingBottom: 24,
-    marginBottom: 10,
-    borderBottomLeftRadius: theme.borderRadius.xl,
-    borderBottomRightRadius: theme.borderRadius.xl,
-  },
-  headerContent: {
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center",
+    alignItems: "flex-start",
+    paddingHorizontal: 24,
+    paddingTop: 60,
+    paddingBottom: 24,
   },
   debugButton: {
     padding: 8,
   },
-  headerTitle: {
+  section: {
-    fontSize: theme.typography.fontSize["3xl"],
+    paddingHorizontal: 24,
-    fontWeight: theme.typography.fontWeight.bold,
+    marginBottom: 24,
-    color: theme.colors.white,
   },
-  headerSubtitle: {
+  statsRow: {
-    fontSize: theme.typography.fontSize.base,
-    color: "rgba(255, 255, 255, 0.9)",
-    marginTop: 4,
-  },
-  statsContainer: {
     flexDirection: "row",
-    padding: 16,
     gap: 12,
   },
   statCard: {
     flex: 1,
-    backgroundColor: theme.colors.white,
-    padding: 16,
-    borderRadius: theme.borderRadius.xl,
     alignItems: "center",
-    ...theme.shadows.medium,
+    paddingVertical: 20,
-    borderWidth: 1,
+    borderRadius: 20,
-    borderColor: "rgba(59, 130, 246, 0.1)",
-  },
-  statValue: {
-    fontSize: theme.typography.fontSize["2xl"],
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.primary,
-    marginBottom: 4,
-  },
-  statLabel: {
-    fontSize: 12,
-    color: "#6b7280",
-    fontWeight: "500",
-  },
-  analyticsSection: {
-    padding: 16,
-    paddingTop: 0,
   },
   analyticsHeader: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    backgroundColor: theme.colors.white,
-    padding: 16,
-    borderRadius: theme.borderRadius.xl,
-    marginBottom: 12,
-    ...theme.shadows.subtle,
   },
   analyticsHeaderLeft: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-  },
-  analyticsTitle: {
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray700,
   },
   analyticsContent: {
-    paddingTop: 4,
+    paddingTop: 16,
+    marginTop: 16,
+    borderTopWidth: 1,
   },
-  section: {
+  goalsList: {
-    padding: 20,
+    gap: 12,
-    paddingTop: 10,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: "600",
-    color: "#374151",
-    marginBottom: 12,
   },
   emptyState: {
     alignItems: "center",
     paddingVertical: 40,
   },
-  emptyText: {
-    fontSize: 16,
-    fontWeight: "500",
-    color: "#6b7280",
-    marginTop: 12,
-  },
-  emptySubtext: {
-    fontSize: 14,
-    color: "#9ca3af",
-    marginTop: 4,
-  },
   footer: {
     height: 100,
   },
   fabContainer: {
     position: "absolute",
-    right: 20,
+    right: 24,
-    bottom: 110, // Adjusted for tab bar height
+    bottom: 90,
   },
   fab: {
-    width: 64,
+    width: 56,
-    height: 64,
+    height: 56,
-    borderRadius: 32,
+    borderRadius: 28,
     justifyContent: "center",
     alignItems: "center",
-    ...theme.shadows.glow,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 4,
   },
 });

apps/mobile/src/app/(tabs)/index.tsx

@@ -5,30 +5,46 @@ import {
   ScrollView,
   RefreshControl,
   Image,
+  Animated,
+  TouchableOpacity,
 } from "react-native";
 import { useUser } from "@clerk/clerk-expo";
-import { LinearGradient } from "expo-linear-gradient";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
-import { useState, useCallback, useEffect } from "react";
 import { useFocusEffect } from "@react-navigation/native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { theme } from "../../styles/theme";
+import { Ionicons } from "@expo/vector-icons";
-import { ActivityWidget } from "../../components/ActivityWidget";
+import { useTheme } from "../../contexts/ThemeContext";
-import { QuickActionGrid } from "../../components/QuickActionGrid";
+import { useStatistics } from "../../contexts/StatisticsContext";
+import { useFitnessGoals } from "../../contexts/FitnessGoalsContext";
+import { MinimalCard } from "../../components/MinimalCard";
+import { SectionHeader } from "../../components/SectionHeader";
+import { IconContainer } from "../../components/IconContainer";
+import { ProgressBar } from "../../components/ProgressBar";
 import { TrackMealModal } from "../../components/TrackMealModal";
 import { AddWaterModal } from "../../components/AddWaterModal";
-import { HydrationWidget } from "../../components/HydrationWidget";
-import { NutritionWidget } from "../../components/NutritionWidget";
-import { WeeklyProgressWidget } from "../../components/WeeklyProgressWidget";
 import { ScanFoodModal } from "../../components/ScanFoodModal";
-import { useStatistics } from "../../contexts/StatisticsContext";
+import {
-import { Ionicons } from "@expo/vector-icons";
+  checkInsToActivities,
+  completedGoalsToActivities,
+  newGoalsToActivities,
+  combineActivities,
+  getRecentActivities,
+  formatActivityTime,
+  formatDuration,
+  getActivityIcon,
+  getActivityEmoji,
+  ActivityType,
+} from "../../utils/activityFeed";
 
 const CALORIE_GOAL = 2000; // kcal
 const WATER_GOAL = 2000; // ml
 
 export default function HomeScreen() {
   const { user } = useUser();
-  const { refetchStatistics, forceRefresh } = useStatistics();
+  const { colors, typography } = useTheme();
+  const { refetchStatistics, forceRefresh, statistics, loading } =
+    useStatistics();
+  const { goals } = useFitnessGoals();
   const [refreshing, setRefreshing] = useState(false);
   const [trackMealModalVisible, setTrackMealModalVisible] = useState(false);
   const [addWaterModalVisible, setAddWaterModalVisible] = useState(false);
@@ -36,6 +52,11 @@ export default function HomeScreen() {
   const [calories, setCalories] = useState(0);
   const [waterIntake, setWaterIntake] = useState(0);
 
+  // Animation values
+  const streakPulse = useRef(new Animated.Value(1)).current;
+  const caloriesBounce = useRef(new Animated.Value(1)).current;
+  const waterBounce = useRef(new Animated.Value(1)).current;
+
   // Refetch statistics when screen comes into focus
   useFocusEffect(
     useCallback(() => {
@@ -45,16 +66,52 @@ export default function HomeScreen() {
 
   const onRefresh = useCallback(async () => {
     setRefreshing(true);
-    // Force refetch statistics bypassing cache
     await forceRefresh();
     setRefreshing(false);
   }, [forceRefresh]);
 
   const getGreeting = () => {
     const hour = new Date().getHours();
-    if (hour < 12) return "Good Morning";
+    const greetings = {
-    if (hour < 18) return "Good Afternoon";
+      morning: [
-    return "Good Evening";
+        "Rise and Shine",
+        "Good Morning",
+        "Morning Champion",
+        "Ready to Crush It",
+      ],
+      afternoon: [
+        "Keep It Going",
+        "Good Afternoon",
+        "Stay Strong",
+        "You're Doing Great",
+      ],
+      evening: [
+        "Evening Warrior",
+        "Good Evening",
+        "Almost There",
+        "Finish Strong",
+      ],
+    };
+
+    const randomGreeting = (arr: string[]) =>
+      arr[Math.floor(Math.random() * arr.length)];
+
+    if (hour < 12) return randomGreeting(greetings.morning);
+    if (hour < 18) return randomGreeting(greetings.afternoon);
+    return randomGreeting(greetings.evening);
+  };
+
+  const getMotivationalEmoji = () => {
+    const emojis = ["💪", "🔥", "⚡", "🎯", "🚀", "✨"];
+    return emojis[Math.floor(Math.random() * emojis.length)];
+  };
+
+  const getStreakBadge = (streak: number) => {
+    if (streak >= 30) return "🏆";
+    if (streak >= 14) return "🔥";
+    if (streak >= 7) return "⭐";
+    if (streak >= 3) return "🌟";
+    return "💫";
   };
 
   const handleSaveMeal = (meal: {
@@ -64,11 +121,39 @@ export default function HomeScreen() {
   }) => {
     setCalories((prev) => prev + meal.calories);
     setTrackMealModalVisible(false);
+
+    // Bounce animation
+    Animated.sequence([
+      Animated.timing(caloriesBounce, {
+        toValue: 1.2,
+        duration: 150,
+        useNativeDriver: true,
+      }),
+      Animated.timing(caloriesBounce, {
+        toValue: 1,
+        duration: 150,
+        useNativeDriver: true,
+      }),
+    ]).start();
   };
 
   const handleAddWater = (amount: number) => {
     setWaterIntake((prev) => prev + amount);
     setAddWaterModalVisible(false);
+
+    // Bounce animation
+    Animated.sequence([
+      Animated.timing(waterBounce, {
+        toValue: 1.2,
+        duration: 150,
+        useNativeDriver: true,
+      }),
+      Animated.timing(waterBounce, {
+        toValue: 1,
+        duration: 150,
+        useNativeDriver: true,
+      }),
+    ]).start();
   };
 
   const handleResetCalories = () => {
@@ -131,6 +216,32 @@ export default function HomeScreen() {
     persistWater();
   }, [waterIntake]);
 
+  const checkInsThisWeek = statistics?.attendance.checkInsThisWeek || 0;
+  const currentStreak = statistics?.attendance.currentStreak || 0;
+
+  // Combine activities from multiple sources
+  const recentActivities = useMemo(() => {
+    if (!statistics || !goals) return [];
+
+    const checkInActivities = checkInsToActivities(statistics.attendance).slice(
+      0,
+      2,
+    ); // Only last 2 check-ins
+    const completedGoalActivities = completedGoalsToActivities(goals).slice(
+      0,
+      2,
+    ); // Only last 2 completed goals
+    const newGoalActivities = newGoalsToActivities(goals, 7); // Last 7 days
+
+    const allActivities = combineActivities(
+      checkInActivities,
+      completedGoalActivities,
+      newGoalActivities,
+    );
+
+    return getRecentActivities(allActivities, 5); // Show top 5
+  }, [statistics, goals]);
+
   // Check for midnight reset
   useEffect(() => {
     const checkAndResetIfNeeded = async () => {
@@ -168,57 +279,520 @@ export default function HomeScreen() {
     return () => clearTimeout(midnightTimer);
   }, []);
 
+  // Streak pulse animation
+  useEffect(() => {
+    const pulse = Animated.loop(
+      Animated.sequence([
+        Animated.timing(streakPulse, {
+          toValue: 1.1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(streakPulse, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+
+    if (currentStreak >= 3) {
+      pulse.start();
+    }
+
+    return () => pulse.stop();
+  }, [currentStreak]);
+
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
       <ScrollView
         contentContainerStyle={styles.scrollContent}
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
             onRefresh={onRefresh}
-            tintColor={theme.colors.primary}
+            tintColor={colors.primary}
           />
         }
       >
         {/* Header Section */}
         <View style={styles.header}>
-          <View>
+          <View style={styles.greetingContainer}>
-            <Text style={styles.greeting}>{getGreeting()},</Text>
+            <Text
-            <Text style={styles.name}>{user?.firstName || "Athlete"}</Text>
+              style={[
-          </View>
+                typography.body,
-          <View style={styles.avatarContainer}>
+                { color: colors.textSecondary, marginBottom: 4 },
-            {user?.imageUrl ? (
+              ]}
-              <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
+            >
-            ) : (
+              {getGreeting()} {getMotivationalEmoji()}
-              <View style={styles.placeholderAvatar}>
+            </Text>
-                <Ionicons name="person" size={24} color="#fff" />
+            <Text
+              style={[typography.h1, { color: colors.textPrimary }]}
+              numberOfLines={1}
+            >
+              {user?.firstName || "Athlete"}
+            </Text>
+            {currentStreak >= 3 && (
+              <View style={styles.streakBadge}>
+                <Text style={styles.streakBadgeText}>
+                  {getStreakBadge(currentStreak)} {currentStreak} Day Streak!
+                </Text>
               </View>
             )}
           </View>
+          <TouchableOpacity activeOpacity={0.8}>
+            {user?.imageUrl ? (
+              <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
+            ) : (
+              <View
+                style={[
+                  styles.placeholderAvatar,
+                  { backgroundColor: colors.primary },
+                ]}
+              >
+                <Ionicons name="person" size={24} color={colors.white} />
+              </View>
+            )}
+          </TouchableOpacity>
         </View>
 
-        {/* Activity Widget */}
+        {/* Daily Stats Card - More Playful */}
-        <ActivityWidget calories={calories} />
+        <View style={styles.section}>
+          <MinimalCard variant="elevated" style={styles.statsCard}>
+            <View style={styles.statsRow}>
+              <View style={styles.statItem}>
+                <IconContainer
+                  variant="colored"
+                  backgroundColor={colors.info}
+                  size="lg"
+                >
+                  <Ionicons
+                    name="checkmark-circle"
+                    size={28}
+                    color={colors.white}
+                  />
+                </IconContainer>
+                <Text
+                  style={[
+                    typography.stat,
+                    { color: colors.textPrimary, marginTop: 12 },
+                  ]}
+                >
+                  {checkInsThisWeek}
+                </Text>
+                <Text
+                  style={[
+                    typography.caption,
+                    { color: colors.textTertiary, textAlign: "center" },
+                  ]}
+                >
+                  Check-ins{"\n"}This Week
+                </Text>
+              </View>
 
-        {/* Quick Action Grid */}
+              <View
-        <QuickActionGrid
+                style={[
-          onTrackMealPress={() => setTrackMealModalVisible(true)}
+                  styles.divider,
-          onAddWaterPress={() => setAddWaterModalVisible(true)}
+                  { backgroundColor: colors.borderLight },
-          onScanFoodPress={() => setScanFoodModalVisible(true)}
+                ]}
-          onLogWorkoutPress={() => {
+              />
-            // TODO: Implement workout logging
-            console.log("Log workout tapped");
-          }}
-        />
 
-        {/* Nutrition Widget */}
+              <Animated.View
-        <NutritionWidget current={calories} goal={CALORIE_GOAL} />
+                style={[
+                  styles.statItem,
+                  { transform: [{ scale: caloriesBounce }] },
+                ]}
+              >
+                <IconContainer
+                  variant="colored"
+                  backgroundColor={colors.danger}
+                  size="lg"
+                >
+                  <Ionicons name="flame" size={28} color={colors.white} />
+                </IconContainer>
+                <Text
+                  style={[
+                    typography.stat,
+                    { color: colors.textPrimary, marginTop: 12 },
+                  ]}
+                >
+                  {calories}
+                </Text>
+                <Text
+                  style={[
+                    typography.caption,
+                    { color: colors.textTertiary, textAlign: "center" },
+                  ]}
+                >
+                  Calories{"\n"}Tracked
+                </Text>
+              </Animated.View>
 
-        {/* Hydration Widget */}
+              <View
-        <HydrationWidget current={waterIntake} goal={WATER_GOAL} />
+                style={[
+                  styles.divider,
+                  { backgroundColor: colors.borderLight },
+                ]}
+              />
 
-        {/* Weekly Progress Widget */}
+              <Animated.View
-        <WeeklyProgressWidget />
+                style={[
+                  styles.statItem,
+                  { transform: [{ scale: streakPulse }] },
+                ]}
+              >
+                <IconContainer
+                  variant="colored"
+                  backgroundColor={colors.warning}
+                  size="lg"
+                >
+                  <Text style={styles.emojiIcon}>
+                    {getStreakBadge(currentStreak)}
+                  </Text>
+                </IconContainer>
+                <Text
+                  style={[
+                    typography.stat,
+                    { color: colors.textPrimary, marginTop: 12 },
+                  ]}
+                >
+                  {currentStreak}
+                </Text>
+                <Text
+                  style={[
+                    typography.caption,
+                    { color: colors.textTertiary, textAlign: "center" },
+                  ]}
+                >
+                  Day{"\n"}Streak
+                </Text>
+              </Animated.View>
+            </View>
+          </MinimalCard>
+        </View>
+
+        {/* Quick Actions - More Playful */}
+        <View style={styles.section}>
+          <SectionHeader
+            title="Quick Actions"
+            subtitle="What's your next move?"
+          />
+          <View style={styles.actionGrid}>
+            <TouchableOpacity
+              onPress={() => console.log("Log workout tapped")}
+              activeOpacity={0.7}
+              style={[
+                styles.actionCard,
+                {
+                  backgroundColor: `${colors.primary}15`,
+                  borderColor: `${colors.primary}30`,
+                  borderWidth: 2,
+                },
+              ]}
+            >
+              <IconContainer
+                variant="colored"
+                backgroundColor={colors.primary}
+                size="lg"
+              >
+                <Ionicons name="barbell" size={28} color={colors.white} />
+              </IconContainer>
+              <Text
+                style={[
+                  typography.h3,
+                  { color: colors.textPrimary, marginTop: 12 },
+                ]}
+              >
+                💪 Workout
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={() => setTrackMealModalVisible(true)}
+              activeOpacity={0.7}
+              style={[
+                styles.actionCard,
+                {
+                  backgroundColor: `${colors.success}15`,
+                  borderColor: `${colors.success}30`,
+                  borderWidth: 2,
+                },
+              ]}
+            >
+              <IconContainer
+                variant="colored"
+                backgroundColor={colors.success}
+                size="lg"
+              >
+                <Ionicons name="restaurant" size={28} color={colors.white} />
+              </IconContainer>
+              <Text
+                style={[
+                  typography.h3,
+                  { color: colors.textPrimary, marginTop: 12 },
+                ]}
+              >
+                🍽️ Track Meal
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={() => setAddWaterModalVisible(true)}
+              activeOpacity={0.7}
+              style={[
+                styles.actionCard,
+                {
+                  backgroundColor: `${colors.info}15`,
+                  borderColor: `${colors.info}30`,
+                  borderWidth: 2,
+                },
+              ]}
+            >
+              <Animated.View style={{ transform: [{ scale: waterBounce }] }}>
+                <IconContainer
+                  variant="colored"
+                  backgroundColor={colors.info}
+                  size="lg"
+                >
+                  <Ionicons name="water" size={28} color={colors.white} />
+                </IconContainer>
+              </Animated.View>
+              <Text
+                style={[
+                  typography.h3,
+                  { color: colors.textPrimary, marginTop: 12 },
+                ]}
+              >
+                💧 Add Water
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={() => setScanFoodModalVisible(true)}
+              activeOpacity={0.7}
+              style={[
+                styles.actionCard,
+                {
+                  backgroundColor: `${colors.accent}15`,
+                  borderColor: `${colors.accent}30`,
+                  borderWidth: 2,
+                },
+              ]}
+            >
+              <IconContainer
+                variant="colored"
+                backgroundColor={colors.accent}
+                size="lg"
+              >
+                <Ionicons name="scan" size={28} color={colors.white} />
+              </IconContainer>
+              <Text
+                style={[
+                  typography.h3,
+                  { color: colors.textPrimary, marginTop: 12 },
+                ]}
+              >
+                📱 Scan Food
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {/* Nutrition Progress - More Playful */}
+        <View style={styles.section}>
+          <SectionHeader
+            title="Today's Nutrition"
+            subtitle={
+              calories >= CALORIE_GOAL
+                ? "Goal smashed! 🎉"
+                : calories >= CALORIE_GOAL * 0.75
+                  ? "Almost there! Keep going 💪"
+                  : "Let's fuel that body! 🔥"
+            }
+          />
+          <MinimalCard
+            variant="bordered"
+            style={{
+              backgroundColor: `${colors.danger}08`,
+              borderRadius: 12,
+            }}
+          >
+            <View style={styles.progressHeader}>
+              <View style={styles.progressLabelRow}>
+                <Text style={styles.emojiIcon}>🔥</Text>
+                <Text
+                  style={[
+                    typography.h3,
+                    { color: colors.textPrimary, marginLeft: 8 },
+                  ]}
+                >
+                  Calories
+                </Text>
+              </View>
+              <Text
+                style={[
+                  typography.bodyEmphasis,
+                  { color: colors.danger, fontWeight: "700" },
+                ]}
+              >
+                {calories} / {CALORIE_GOAL}
+              </Text>
+            </View>
+            <ProgressBar
+              progress={Math.min(calories / CALORIE_GOAL, 1)}
+              color={colors.danger}
+              style={{ marginTop: 12 }}
+            />
+          </MinimalCard>
+        </View>
+
+        {/* Hydration Progress - More Playful */}
+        <View style={styles.section}>
+          <MinimalCard
+            variant="bordered"
+            style={{
+              backgroundColor: `${colors.info}08`,
+              borderRadius: 12,
+            }}
+          >
+            <View style={styles.progressHeader}>
+              <View style={styles.progressLabelRow}>
+                <Text style={styles.emojiIcon}>💧</Text>
+                <View style={{ marginLeft: 8 }}>
+                  <Text style={[typography.h3, { color: colors.textPrimary }]}>
+                    Hydration
+                  </Text>
+                  <Text
+                    style={[
+                      typography.caption,
+                      { color: colors.textTertiary, marginTop: 2 },
+                    ]}
+                  >
+                    {waterIntake >= WATER_GOAL
+                      ? "Perfectly hydrated! 🌊"
+                      : "Stay hydrated, champ! 💪"}
+                  </Text>
+                </View>
+              </View>
+              <Text
+                style={[
+                  typography.bodyEmphasis,
+                  { color: colors.info, fontWeight: "700" },
+                ]}
+              >
+                {waterIntake} / {WATER_GOAL} ml
+              </Text>
+            </View>
+            <ProgressBar
+              progress={Math.min(waterIntake / WATER_GOAL, 1)}
+              color={colors.info}
+              style={{ marginTop: 12 }}
+            />
+          </MinimalCard>
+        </View>
+
+        {/* Recent Activity */}
+        <View style={styles.section}>
+          <SectionHeader
+            title="📊 Recent Activity"
+            subtitle={
+              recentActivities.length === 0
+                ? "Your activity will appear here"
+                : `${recentActivities.length} recent activities`
+            }
+          />
+
+          {recentActivities.length === 0 ? (
+            <MinimalCard variant="default" style={{ borderRadius: 20 }}>
+              <View style={styles.emptyActivity}>
+                <Text style={{ fontSize: 64 }}>🏃</Text>
+                <Text
+                  style={[
+                    typography.bodyEmphasis,
+                    { color: colors.textPrimary, marginTop: 16 },
+                  ]}
+                >
+                  No Recent Activity
+                </Text>
+                <Text
+                  style={[
+                    typography.body,
+                    {
+                      color: colors.textSecondary,
+                      marginTop: 8,
+                      textAlign: "center",
+                    },
+                  ]}
+                >
+                  Check in at the gym or complete a goal to get started! 💪
+                </Text>
+              </View>
+            </MinimalCard>
+          ) : (
+            <View style={styles.activityList}>
+              {recentActivities.map((activity) => {
+                const iconName = getActivityIcon(activity.type);
+                const emoji = getActivityEmoji(activity.type);
+                const timeStr = formatActivityTime(activity.timestamp);
+                const durationStr = formatDuration(activity.duration);
+
+                // Determine color based on activity type
+                let iconColor = colors.primary;
+                if (activity.type === ActivityType.GOAL_COMPLETED) {
+                  iconColor = colors.success;
+                } else if (activity.type === ActivityType.GOAL_CREATED) {
+                  iconColor = colors.accent;
+                } else if (activity.type === ActivityType.GYM_CHECKIN) {
+                  iconColor = colors.primary;
+                }
+
+                return (
+                  <MinimalCard
+                    key={activity.id}
+                    variant="bordered"
+                    style={styles.activityItem}
+                  >
+                    <IconContainer
+                      variant="colored"
+                      backgroundColor={`${iconColor}20`}
+                    >
+                      <Ionicons
+                        name={iconName as any}
+                        size={20}
+                        color={iconColor}
+                      />
+                    </IconContainer>
+                    <View style={styles.activityInfo}>
+                      <Text
+                        style={[typography.h3, { color: colors.textPrimary }]}
+                      >
+                        {emoji} {activity.title}
+                      </Text>
+                      <Text
+                        style={[
+                          typography.caption,
+                          { color: colors.textTertiary, marginTop: 2 },
+                        ]}
+                      >
+                        {timeStr}
+                      </Text>
+                    </View>
+                    {durationStr && (
+                      <Text
+                        style={[
+                          typography.bodyEmphasis,
+                          { color: colors.textSecondary },
+                        ]}
+                      >
+                        {durationStr}
+                      </Text>
+                    )}
+                  </MinimalCard>
+                );
+              })}
+            </View>
+          )}
+        </View>
 
         <TrackMealModal
           visible={trackMealModalVisible}
@@ -240,54 +814,6 @@ export default function HomeScreen() {
           onAddFood={handleAddScannedFood}
         />
 
-        {/* Recent Activity Section */}
-        <View style={styles.section}>
-          <View style={styles.sectionHeader}>
-            <Text style={styles.sectionTitle}>Recent Activity</Text>
-            <Text style={styles.seeAll}>See All</Text>
-          </View>
-
-          <View style={styles.activityCard}>
-            <LinearGradient
-              colors={["rgba(255, 255, 255, 0.8)", "rgba(255, 255, 255, 0.5)"]}
-              style={[styles.recentItem, theme.shadows.subtle]}
-            >
-              <View style={styles.recentIconContainer}>
-                <LinearGradient
-                  colors={theme.gradients.primary}
-                  style={styles.recentIcon}
-                >
-                  <Ionicons name="barbell" size={20} color="#fff" />
-                </LinearGradient>
-              </View>
-              <View style={styles.recentInfo}>
-                <Text style={styles.recentTitle}>Upper Body Power</Text>
-                <Text style={styles.recentSubtitle}>Today, 10:00 AM</Text>
-              </View>
-              <Text style={styles.recentValue}>45m</Text>
-            </LinearGradient>
-
-            <LinearGradient
-              colors={["rgba(255, 255, 255, 0.8)", "rgba(255, 255, 255, 0.5)"]}
-              style={[styles.recentItem, theme.shadows.subtle]}
-            >
-              <View style={styles.recentIconContainer}>
-                <LinearGradient
-                  colors={theme.gradients.success}
-                  style={styles.recentIcon}
-                >
-                  <Ionicons name="bicycle" size={20} color="#fff" />
-                </LinearGradient>
-              </View>
-              <View style={styles.recentInfo}>
-                <Text style={styles.recentTitle}>Morning Cardio</Text>
-                <Text style={styles.recentSubtitle}>Yesterday, 7:30 AM</Text>
-              </View>
-              <Text style={styles.recentValue}>30m</Text>
-            </LinearGradient>
-          </View>
-        </View>
-
         {/* Bottom Spacer for Tab Bar */}
         <View style={{ height: 100 }} />
       </ScrollView>
@@ -298,7 +824,6 @@ export default function HomeScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.background,
   },
   scrollContent: {
     paddingTop: 60,
@@ -306,104 +831,102 @@ const styles = StyleSheet.create({
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center",
+    alignItems: "flex-start",
     paddingHorizontal: 24,
-    marginBottom: 32,
+    marginBottom: 24,
   },
-  greeting: {
+  greetingContainer: {
-    fontSize: 16,
+    flex: 1,
-    color: theme.colors.gray600,
+    marginRight: 16,
-    fontWeight: "500",
-    marginBottom: 4,
   },
-  name: {
+  streakBadge: {
-    fontSize: 32,
+    marginTop: 8,
-    fontWeight: "800",
+    paddingHorizontal: 12,
-    color: theme.colors.gray900,
+    paddingVertical: 6,
-    letterSpacing: -0.5,
+    backgroundColor: "rgba(136, 192, 208, 0.15)",
+    borderRadius: 999,
+    alignSelf: "flex-start",
   },
-  avatarContainer: {
+  streakBadgeText: {
-    shadowColor: "#000",
+    fontSize: 13,
-    shadowOffset: { width: 0, height: 4 },
+    fontWeight: "600",
-    shadowOpacity: 0.1,
+    color: "#88C0D0",
-    shadowRadius: 12,
-    elevation: 5,
   },
   avatar: {
     width: 56,
     height: 56,
-    borderRadius: 20,
+    borderRadius: 28,
-    borderWidth: 2,
+    borderWidth: 3,
-    borderColor: "#fff",
+    borderColor: "#88C0D0",
   },
   placeholderAvatar: {
     width: 56,
     height: 56,
-    borderRadius: 20,
+    borderRadius: 28,
-    backgroundColor: theme.colors.primary,
     justifyContent: "center",
     alignItems: "center",
-    borderWidth: 2,
+    borderWidth: 3,
-    borderColor: "#fff",
+    borderColor: "#88C0D0",
   },
   section: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 24,
     marginBottom: 24,
   },
-  sectionHeader: {
+  statsCard: {
+    borderRadius: 20,
+  },
+  statsRow: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 16,
+    paddingVertical: 8,
   },
-  sectionTitle: {
+  statItem: {
-    fontSize: 18,
-    fontWeight: "700",
-    color: theme.colors.gray900,
-  },
-  seeAll: {
-    fontSize: 14,
-    color: theme.colors.primary,
-    fontWeight: "600",
-  },
-  activityCard: {
-    gap: 12,
-  },
-  recentItem: {
-    flexDirection: "row",
     alignItems: "center",
-    padding: 16,
-    borderRadius: 20,
-    backgroundColor: "#fff",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.6)",
-  },
-  recentIconContainer: {
-    marginRight: 16,
-  },
-  recentIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 16,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  recentInfo: {
     flex: 1,
   },
-  recentTitle: {
+  divider: {
-    fontSize: 16,
+    width: 1,
-    fontWeight: "600",
+    height: 70,
-    color: theme.colors.gray900,
-    marginBottom: 4,
   },
-  recentSubtitle: {
+  emojiIcon: {
-    fontSize: 12,
+    fontSize: 28,
-    color: theme.colors.gray500,
   },
-  recentValue: {
+  actionGrid: {
-    fontSize: 14,
+    flexDirection: "row",
-    fontWeight: "600",
+    flexWrap: "wrap",
-    color: theme.colors.gray900,
+    gap: 12,
+  },
+  actionCard: {
+    width: "48%",
+    alignItems: "center",
+    paddingVertical: 24,
+    borderRadius: 20,
+  },
+  progressHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  progressLabelRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  activityList: {
+    gap: 12,
+  },
+  activityItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    borderRadius: 16,
+  },
+  activityInfo: {
+    flex: 1,
+  },
+  emptyActivity: {
+    alignItems: "center",
+    paddingVertical: 40,
+    paddingHorizontal: 20,
   },
 });

apps/mobile/src/app/(tabs)/profile.tsx

@@ -11,11 +11,13 @@ import {
 import { useUser, useClerk, useAuth } from "@clerk/clerk-expo";
 import { useRouter } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
-import { LinearGradient } from "expo-linear-gradient";
-import { theme } from "../../styles/theme";
-import { AnimatedButton } from "../../components/AnimatedButton";
-import { GradientBackground } from "../../components/GradientBackground";
 import { useState, useEffect } from "react";
+import { useTheme } from "../../contexts/ThemeContext";
+import { MinimalCard } from "../../components/MinimalCard";
+import { ListItem } from "../../components/ListItem";
+import { MinimalButton } from "../../components/MinimalButton";
+import { Badge } from "../../components/Badge";
+import { IconContainer } from "../../components/IconContainer";
 import { API_BASE_URL, API_ENDPOINTS } from "../../config/api";
 import log from "../../utils/logger";
 
@@ -23,24 +25,9 @@ export default function ProfileScreen() {
   const { user } = useUser();
   const { signOut } = useClerk();
   const router = useRouter();
-
+  const { colors, typography, theme: activeTheme, setTheme } = useTheme();
-  const handleSignOut = async () => {
-    try {
-      await signOut();
-    } catch (err) {
-      log.error("Failed to sign out", err);
-    }
-  };
-
-  const confirmSignOut = () => {
-    Alert.alert("Sign Out", "Are you sure you want to sign out?", [
-      { text: "Cancel", style: "cancel" },
-      { text: "Sign Out", style: "destructive", onPress: handleSignOut },
-    ]);
-  };
-
-  // Gym selection state and handlers
   const { getToken } = useAuth();
+
   const [gyms, setGyms] = useState<
     Array<{ id: string; name: string; location?: string }>
   >([]);
@@ -60,7 +47,6 @@ export default function ProfileScreen() {
     }
   }, [user?.publicMetadata, gyms]);
 
-  // Auto-load gyms on mount
   useEffect(() => {
     loadGyms();
   }, []);
@@ -80,9 +66,7 @@ export default function ProfileScreen() {
         log.error(
           "Failed to fetch gyms - non-OK response",
           new Error(text.slice(0, 200)),
-          {
+          { status: res.status },
-            status: res.status,
-          },
         );
         setGyms([]);
         return;
@@ -92,9 +76,7 @@ export default function ProfileScreen() {
         log.error(
           "Failed to fetch gyms - expected JSON",
           new Error(text.slice(0, 200)),
-          {
+          { contentType },
-            contentType,
-          },
         );
         setGyms([]);
         return;
@@ -149,9 +131,7 @@ export default function ProfileScreen() {
         log.error(
           "Failed to update gym selection - non-OK response",
           new Error(text.slice(0, 200)),
-          {
+          { status: res.status },
-            status: res.status,
-          },
         );
         Alert.alert("Error", "Failed to update gym selection");
         return;
@@ -167,14 +147,12 @@ export default function ProfileScreen() {
           });
         }
       }
-      // Update current gym state for immediate UI reflection
       setCurrentGymId(selectedGymId);
       setCurrentGymName(
         selectedGymId
           ? (gyms.find((g) => g.id === selectedGymId)?.name ?? null)
           : null,
       );
-      // Attempt to reload Clerk user metadata so current gym reflects server state
       try {
         await (user as any)?.reload?.();
       } catch (e) {
@@ -190,372 +168,476 @@ export default function ProfileScreen() {
     }
   };
 
-  return (
+  const handleSignOut = async () => {
-    <View style={styles.container}>
+    try {
-      <GradientBackground variant="primary" style={styles.header}>
+      await signOut();
-        <View style={styles.profileCard}>
+    } catch (err) {
-          <View style={styles.avatarContainer}>
+      log.error("Failed to sign out", err);
-            {user?.imageUrl ? (
+    }
-              <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
+  };
-            ) : (
-              <View style={styles.placeholderAvatar}>
-                <Ionicons name="person" size={40} color="#fff" />
-              </View>
-            )}
-            <View style={styles.editBadge}>
-              <Ionicons name="pencil" size={12} color={theme.colors.primary} />
-            </View>
-          </View>
-          <Text style={styles.name}>{user?.fullName || "User"}</Text>
-          <Text style={styles.email}>
-            {user?.primaryEmailAddress?.emailAddress}
-          </Text>
-          <View style={styles.memberBadge}>
-            <Text style={styles.memberText}>Premium Member</Text>
-          </View>
-        </View>
-      </GradientBackground>
 
-      <View style={styles.content}>
+  const confirmSignOut = () => {
-        <View style={styles.section}>
+    Alert.alert("Sign Out", "Are you sure you want to sign out?", [
-          <Text style={styles.sectionTitle}>Account</Text>
+      { text: "Cancel", style: "cancel" },
-          <View style={[styles.infoCard, theme.shadows.subtle]}>
+      { text: "Sign Out", style: "destructive", onPress: handleSignOut },
-            <TouchableOpacity
+    ]);
-              style={styles.infoRow}
+  };
-              onPress={() => router.push("/personal-details")}
+
+  const handleThemeChange = () => {
+    Alert.alert("Choose Theme", "Select your preferred theme", [
+      {
+        text: "Light",
+        onPress: () => setTheme("light"),
+      },
+      {
+        text: "Dark",
+        onPress: () => setTheme("dark"),
+      },
+      {
+        text: "System",
+        onPress: () => setTheme("system"),
+      },
+      { text: "Cancel", style: "cancel" },
+    ]);
+  };
+
+  const getThemeLabel = () => {
+    if (activeTheme === "light") return "Light";
+    if (activeTheme === "dark") return "Dark";
+    return "System";
+  };
+
+  return (
+    <ScrollView
+      style={[styles.container, { backgroundColor: colors.background }]}
+      contentContainerStyle={styles.content}
+    >
+      {/* Header Card */}
+      <MinimalCard variant="elevated" style={styles.profileCard}>
+        <View style={styles.avatarContainer}>
+          {user?.imageUrl ? (
+            <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
+          ) : (
+            <View
+              style={[
+                styles.placeholderAvatar,
+                { backgroundColor: colors.primary },
+              ]}
             >
-              <LinearGradient
+              <Ionicons name="person" size={40} color={colors.white} />
-                colors={["rgba(59, 130, 246, 0.1)", "rgba(59, 130, 246, 0.05)"]}
+            </View>
-                style={styles.iconContainer}
+          )}
+        </View>
+        <Text
+          style={[typography.h2, { color: colors.textPrimary, marginTop: 16 }]}
+        >
+          {user?.fullName || "User"}
+        </Text>
+        <Text
+          style={[
+            typography.body,
+            { color: colors.textSecondary, marginTop: 4 },
+          ]}
+        >
+          {user?.primaryEmailAddress?.emailAddress}
+        </Text>
+        <Badge
+          label="Premium Member"
+          variant="primary"
+          style={{ marginTop: 12 }}
+        />
+      </MinimalCard>
+
+      {/* Theme Settings */}
+      <View style={styles.section}>
+        <Text
+          style={[
+            typography.h3,
+            { color: colors.textPrimary, marginBottom: 12 },
+          ]}
+        >
+          Appearance
+        </Text>
+        <MinimalCard variant="default">
+          <ListItem
+            title="Theme"
+            subtitle={`Current: ${getThemeLabel()}`}
+            leftIcon={
+              <IconContainer
+                variant="colored"
+                backgroundColor={`${colors.accent}20`}
+              >
+                <Ionicons
+                  name="color-palette"
+                  size={20}
+                  color={colors.accent}
+                />
+              </IconContainer>
+            }
+            rightElement={
+              <Ionicons
+                name="chevron-forward"
+                size={20}
+                color={colors.textTertiary}
+              />
+            }
+            onPress={handleThemeChange}
+          />
+        </MinimalCard>
+      </View>
+
+      {/* Account Settings */}
+      <View style={styles.section}>
+        <Text
+          style={[
+            typography.h3,
+            { color: colors.textPrimary, marginBottom: 12 },
+          ]}
+        >
+          Account
+        </Text>
+        <MinimalCard variant="default">
+          <ListItem
+            title="Personal Details"
+            leftIcon={
+              <IconContainer
+                variant="colored"
+                backgroundColor={`${colors.primary}20`}
               >
                 <Ionicons
                   name="person-outline"
                   size={20}
-                  color={theme.colors.primary}
+                  color={colors.primary}
                 />
-              </LinearGradient>
+              </IconContainer>
-              <Text style={styles.infoLabel}>Personal Details</Text>
+            }
+            rightElement={
               <Ionicons
                 name="chevron-forward"
                 size={20}
-                color={theme.colors.gray400}
+                color={colors.textTertiary}
               />
-            </TouchableOpacity>
+            }
-            <View style={styles.divider} />
+            onPress={() => router.push("/personal-details")}
-            <TouchableOpacity
+          />
-              style={styles.infoRow}
+          <View style={[styles.divider, { backgroundColor: colors.border }]} />
-              onPress={() => router.push("/fitness-profile")}
+          <ListItem
-            >
+            title="Fitness Profile"
-              <LinearGradient
+            leftIcon={
-                colors={["rgba(16, 185, 129, 0.1)", "rgba(16, 185, 129, 0.05)"]}
+              <IconContainer
-                style={styles.iconContainer}
+                variant="colored"
+                backgroundColor={`${colors.success}20`}
               >
                 <Ionicons
                   name="fitness-outline"
                   size={20}
-                  color={theme.colors.success}
+                  color={colors.success}
                 />
-              </LinearGradient>
+              </IconContainer>
-              <Text style={styles.infoLabel}>Fitness Profile</Text>
+            }
+            rightElement={
               <Ionicons
                 name="chevron-forward"
                 size={20}
-                color={theme.colors.gray400}
+                color={colors.textTertiary}
               />
-            </TouchableOpacity>
+            }
-            <View style={styles.divider} />
+            onPress={() => router.push("/fitness-profile")}
-            <TouchableOpacity style={styles.infoRow}>
+          />
-              <LinearGradient
+          <View style={[styles.divider, { backgroundColor: colors.border }]} />
-                colors={["rgba(245, 158, 11, 0.1)", "rgba(245, 158, 11, 0.05)"]}
+          <ListItem
-                style={styles.iconContainer}
+            title="Notifications"
+            leftIcon={
+              <IconContainer
+                variant="colored"
+                backgroundColor={`${colors.warning}20`}
               >
                 <Ionicons
                   name="notifications-outline"
                   size={20}
-                  color={theme.colors.warning}
+                  color={colors.warning}
                 />
-              </LinearGradient>
+              </IconContainer>
-              <Text style={styles.infoLabel}>Notifications</Text>
+            }
+            rightElement={
               <Ionicons
                 name="chevron-forward"
                 size={20}
-                color={theme.colors.gray400}
+                color={colors.textTertiary}
               />
-            </TouchableOpacity>
+            }
-          </View>
+          />
+        </MinimalCard>
+      </View>
 
-          {/* Gym Selection */}
+      {/* Gym Selection */}
-          <View
+      <View style={styles.section}>
-            style={[styles.infoCard, theme.shadows.subtle, { marginTop: 12 }]}
+        <View style={styles.sectionHeader}>
-          >
+          <Text style={[typography.h3, { color: colors.textPrimary }]}>
-            <View
+            Gym Selection
-              style={{
+          </Text>
-                flexDirection: "row",
+          <TouchableOpacity onPress={loadGyms}>
-                alignItems: "center",
+            <Text
-                justifyContent: "space-between",
+              style={[
-                padding: 12,
+                typography.body,
-              }}
+                { color: colors.primary, fontWeight: "600" },
+              ]}
             >
-              <Text style={styles.infoLabel}>
+              Refresh
-                Gym{" "}
+            </Text>
-                {currentGymName
+          </TouchableOpacity>
-                  ? `(Current: ${currentGymName})`
+        </View>
-                  : currentGymId
+        <MinimalCard variant="default">
-                    ? `(Current: ${currentGymId})`
+          {currentGymName && (
-                    : "(Current: None)"}
+            <View style={styles.currentGym}>
+              <Text
+                style={[typography.caption, { color: colors.textTertiary }]}
+              >
+                Current Gym
+              </Text>
+              <Text
+                style={[
+                  typography.h3,
+                  { color: colors.textPrimary, marginTop: 4 },
+                ]}
+              >
+                {currentGymName}
               </Text>
-              <TouchableOpacity onPress={loadGyms}>
-                <Text style={{ color: theme.colors.primary }}>
-                  Refresh Gyms
-                </Text>
-              </TouchableOpacity>
             </View>
+          )}
 
-            {gymsLoading ? (
+          {gymsLoading ? (
-              <ActivityIndicator style={{ padding: 12 }} />
+            <View style={styles.loadingContainer}>
-            ) : (
+              <ActivityIndicator color={colors.primary} />
+            </View>
+          ) : (
+            <>
               <ScrollView
                 horizontal
                 showsHorizontalScrollIndicator={false}
-                style={{ paddingHorizontal: 12, paddingBottom: 12 }}
+                style={styles.gymScroll}
+                contentContainerStyle={styles.gymScrollContent}
               >
-                <View style={{ flexDirection: "row" }}>
+                <TouchableOpacity
-                  <TouchableOpacity
+                  style={[
+                    styles.gymChip,
+                    {
+                      backgroundColor:
+                        selectedGymId === null
+                          ? `${colors.primary}20`
+                          : colors.surfaceElevated,
+                      borderColor:
+                        selectedGymId === null ? colors.primary : colors.border,
+                    },
+                  ]}
+                  onPress={() => setSelectedGymId(null)}
+                >
+                  <Text
                     style={[
-                      styles.infoRow,
+                      typography.body,
-                      selectedGymId === null && {
+                      {
-                        backgroundColor: "rgba(59, 130, 246, 0.1)",
+                        color:
+                          selectedGymId === null
+                            ? colors.primary
+                            : colors.textSecondary,
+                        fontWeight: selectedGymId === null ? "600" : "400",
                       },
                     ]}
-                    onPress={() => setSelectedGymId(null)}
                   >
-                    <Text style={styles.infoLabel}>Proceed without gym</Text>
+                    No Gym
-                  </TouchableOpacity>
+                  </Text>
-                  {gyms.map((gym) => (
+                </TouchableOpacity>
-                    <TouchableOpacity
+                {gyms.map((gym) => (
-                      key={gym.id}
+                  <TouchableOpacity
+                    key={gym.id}
+                    style={[
+                      styles.gymChip,
+                      {
+                        backgroundColor:
+                          selectedGymId === gym.id
+                            ? `${colors.primary}20`
+                            : colors.surfaceElevated,
+                        borderColor:
+                          selectedGymId === gym.id
+                            ? colors.primary
+                            : colors.border,
+                      },
+                    ]}
+                    onPress={() => setSelectedGymId(gym.id)}
+                  >
+                    <Text
                       style={[
-                        styles.infoRow,
+                        typography.body,
-                        selectedGymId === gym.id && {
+                        {
-                          backgroundColor: "rgba(59, 130, 246, 0.1)",
+                          color:
+                            selectedGymId === gym.id
+                              ? colors.primary
+                              : colors.textSecondary,
+                          fontWeight: selectedGymId === gym.id ? "600" : "400",
                         },
                       ]}
-                      onPress={() => setSelectedGymId(gym.id)}
                     >
-                      <Text style={styles.infoLabel}>{gym.name}</Text>
+                      {gym.name}
-                    </TouchableOpacity>
+                    </Text>
-                  ))}
+                  </TouchableOpacity>
-                </View>
+                ))}
               </ScrollView>
-            )}
+              <MinimalButton
-
+                title="Apply Selection"
-            <View style={{ padding: 12 }}>
-              <AnimatedButton
-                title="Apply Gym Selection"
                 onPress={handleApplyGym}
                 variant="primary"
-                style={{ marginTop: 4 }}
+                style={{ marginTop: 16 }}
-                icon={
-                  <Ionicons
-                    name="checkmark-outline"
-                    size={20}
-                    color={theme.colors.white}
-                  />
-                }
               />
-            </View>
+            </>
-          </View>
+          )}
-        </View>
+        </MinimalCard>
+      </View>
 
-        <View style={styles.section}>
+      {/* Support */}
-          <Text style={styles.sectionTitle}>Support</Text>
+      <View style={styles.section}>
-          <View style={[styles.infoCard, theme.shadows.subtle]}>
+        <Text
-            <TouchableOpacity style={styles.infoRow}>
+          style={[
-              <LinearGradient
+            typography.h3,
-                colors={["rgba(139, 92, 246, 0.1)", "rgba(139, 92, 246, 0.05)"]}
+            { color: colors.textPrimary, marginBottom: 12 },
-                style={styles.iconContainer}
+          ]}
+        >
+          Support
+        </Text>
+        <MinimalCard variant="default">
+          <ListItem
+            title="Help Center"
+            leftIcon={
+              <IconContainer
+                variant="colored"
+                backgroundColor={`${colors.info}20`}
               >
                 <Ionicons
                   name="help-circle-outline"
                   size={20}
-                  color={theme.colors.secondary}
+                  color={colors.info}
                 />
-              </LinearGradient>
+              </IconContainer>
-              <Text style={styles.infoLabel}>Help Center</Text>
+            }
+            rightElement={
               <Ionicons
                 name="chevron-forward"
                 size={20}
-                color={theme.colors.gray400}
+                color={colors.textTertiary}
               />
-            </TouchableOpacity>
+            }
-            <View style={styles.divider} />
+          />
-            <TouchableOpacity style={styles.infoRow}>
+          <View style={[styles.divider, { backgroundColor: colors.border }]} />
-              <LinearGradient
+          <ListItem
-                colors={[
+            title="Privacy & Security"
-                  "rgba(107, 114, 128, 0.1)",
+            leftIcon={
-                  "rgba(107, 114, 128, 0.05)",
+              <IconContainer variant="subtle">
-                ]}
-                style={styles.iconContainer}
-              >
                 <Ionicons
                   name="shield-checkmark-outline"
                   size={20}
-                  color={theme.colors.gray600}
+                  color={colors.textSecondary}
                 />
-              </LinearGradient>
+              </IconContainer>
-              <Text style={styles.infoLabel}>Privacy & Security</Text>
+            }
+            rightElement={
               <Ionicons
                 name="chevron-forward"
                 size={20}
-                color={theme.colors.gray400}
+                color={colors.textTertiary}
               />
-            </TouchableOpacity>
+            }
-          </View>
+          />
-        </View>
+        </MinimalCard>
+      </View>
 
-        <AnimatedButton
+      {/* Sign Out */}
+      <View style={styles.section}>
+        <MinimalButton
           title="Sign Out"
           onPress={confirmSignOut}
           variant="danger"
-          style={styles.signOutButton}
+          size="lg"
-          icon={<Ionicons name="log-out-outline" size={20} color="#fff" />}
         />
-
-        <Text style={styles.version}>Version 1.0.0</Text>
       </View>
-    </View>
+
+      <Text
+        style={[
+          typography.caption,
+          {
+            color: colors.textTertiary,
+            textAlign: "center",
+            marginBottom: 100,
+          },
+        ]}
+      >
+        Version 1.0.0
+      </Text>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.background,
   },
-  header: {
+  content: {
+    padding: 24,
     paddingTop: 60,
-    paddingBottom: 30,
-    borderBottomLeftRadius: theme.borderRadius.xl,
-    borderBottomRightRadius: theme.borderRadius.xl,
-    alignItems: "center",
   },
   profileCard: {
     alignItems: "center",
+    paddingVertical: 32,
+    marginBottom: 24,
   },
   avatarContainer: {
     position: "relative",
-    marginBottom: 16,
   },
   avatar: {
     width: 100,
     height: 100,
     borderRadius: 50,
-    borderWidth: 4,
-    borderColor: "rgba(255, 255, 255, 0.3)",
   },
   placeholderAvatar: {
     width: 100,
     height: 100,
     borderRadius: 50,
-    backgroundColor: "rgba(255, 255, 255, 0.2)",
     justifyContent: "center",
     alignItems: "center",
-    borderWidth: 4,
-    borderColor: "rgba(255, 255, 255, 0.3)",
-  },
-  editBadge: {
-    position: "absolute",
-    bottom: 0,
-    right: 0,
-    backgroundColor: theme.colors.white,
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    justifyContent: "center",
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  name: {
-    fontSize: theme.typography.fontSize["2xl"],
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.white,
-    marginBottom: 4,
-  },
-  email: {
-    fontSize: theme.typography.fontSize.sm,
-    color: "rgba(255, 255, 255, 0.8)",
-    marginBottom: 12,
-  },
-  memberBadge: {
-    backgroundColor: "rgba(255, 255, 255, 0.2)",
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: theme.borderRadius.full,
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.3)",
-  },
-  memberText: {
-    color: theme.colors.white,
-    fontSize: theme.typography.fontSize.xs,
-    fontWeight: theme.typography.fontWeight.bold,
-    letterSpacing: 0.5,
-  },
-  content: {
-    padding: 20,
-    marginTop: -20,
   },
   section: {
     marginBottom: 24,
   },
-  sectionTitle: {
+  sectionHeader: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray900,
-    marginBottom: 12,
-    marginLeft: 4,
-  },
-  infoCard: {
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.borderRadius.xl,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: theme.colors.gray100,
-  },
-  infoRow: {
     flexDirection: "row",
+    justifyContent: "space-between",
     alignItems: "center",
-    padding: 12,
+    marginBottom: 12,
-  },
-  iconContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: 10,
-    justifyContent: "center",
-    alignItems: "center",
-    marginRight: 12,
-  },
-  infoLabel: {
-    flex: 1,
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray900,
-    fontWeight: theme.typography.fontWeight.medium,
   },
   divider: {
     height: 1,
-    backgroundColor: theme.colors.gray100,
+    marginLeft: 52,
-    marginLeft: 60,
   },
-  signOutButton: {
+  currentGym: {
-    marginTop: 8,
+    marginBottom: 16,
+    paddingBottom: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(0, 0, 0, 0.05)",
   },
-  version: {
+  loadingContainer: {
-    textAlign: "center",
+    paddingVertical: 20,
-    marginTop: 24,
+    alignItems: "center",
-    color: theme.colors.gray400,
+  },
-    fontSize: theme.typography.fontSize.xs,
+  gymScroll: {
+    marginHorizontal: -16,
+  },
+  gymScrollContent: {
+    paddingHorizontal: 16,
+    gap: 8,
+  },
+  gymChip: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 20,
+    borderWidth: 1.5,
+    marginRight: 8,
   },
 });

apps/mobile/src/app/(tabs)/recommendations.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef } from "react";
+import React, { useState, useCallback } from "react";
 import {
   View,
   Text,
@@ -9,11 +9,15 @@ import {
   ActivityIndicator,
   Alert,
 } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
 import { Ionicons } from "@expo/vector-icons";
 import { useUser } from "@clerk/clerk-expo";
 import { useFocusEffect } from "expo-router";
-import { theme } from "../../styles/theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { MinimalCard } from "../../components/MinimalCard";
+import { SectionHeader } from "../../components/SectionHeader";
+import { MinimalButton } from "../../components/MinimalButton";
+import { Badge } from "../../components/Badge";
+import { IconContainer } from "../../components/IconContainer";
 import { useRecommendations } from "../../contexts/RecommendationsContext";
 import { useNotifications } from "../../contexts/NotificationsContext";
 import { NotificationsModal } from "../../components/NotificationsModal";
@@ -22,6 +26,7 @@ import log from "../../utils/logger";
 
 export default function RecommendationsScreen() {
   const { user } = useUser();
+  const { colors, typography } = useTheme();
   const {
     recommendations: allRecommendations,
     loading,
@@ -43,7 +48,7 @@ export default function RecommendationsScreen() {
     setNotificationsVisible(false);
   };
 
-  // Filter to show only approved recommendations for regular users
+  // Filter to show only approved recommendations
   const recommendations = allRecommendations.filter(
     (rec) => rec.status === "approved",
   );
@@ -101,14 +106,14 @@ export default function RecommendationsScreen() {
 
   if (loading && recommendations.length === 0) {
     return (
-      <View style={styles.centered}>
+      <View style={[styles.centered, { backgroundColor: colors.background }]}>
-        <ActivityIndicator size="large" color={theme.colors.primary} />
+        <ActivityIndicator size="large" color={colors.primary} />
       </View>
     );
   }
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
       <NotificationsModal
         visible={notificationsVisible}
         onClose={handleCloseNotifications}
@@ -119,98 +124,118 @@ export default function RecommendationsScreen() {
           <RefreshControl
             refreshing={refreshing}
             onRefresh={onRefresh}
-            tintColor={theme.colors.primary}
+            tintColor={colors.primary}
           />
         }
       >
         {/* Header */}
-        <LinearGradient
+        <View style={styles.header}>
-          colors={theme.gradients.primary}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={styles.header}
-        >
           <View>
-            <Text style={styles.headerTitle}>AI Recommendations</Text>
+            <Text style={[typography.h1, { color: colors.textPrimary }]}>
-            <Text style={styles.headerSubtitle}>
+              ✨ AI Recommendations
-              Personalized fitness & nutrition plans
+            </Text>
+            <Text
+              style={[
+                typography.body,
+                { color: colors.textSecondary, marginTop: 4 },
+              ]}
+            >
+              {recommendations.length === 0
+                ? "Let's create your perfect plan! 🚀"
+                : `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you! 💪`}
             </Text>
           </View>
           <TouchableOpacity
-            style={styles.iconContainer}
+            style={styles.notificationButton}
             onPress={handleOpenNotifications}
             activeOpacity={0.7}
           >
-            <Ionicons name="sparkles" size={32} color="#fff" />
+            <IconContainer
-            {unreadCount > 0 && (
+              variant="colored"
-              <View style={styles.badge}>
+              backgroundColor={`${colors.accent}20`}
-                <Text style={styles.badgeText}>{unreadCount}</Text>
+            >
-              </View>
+              <Ionicons name="sparkles" size={24} color={colors.accent} />
-            )}
+              {unreadCount > 0 && (
+                <View
+                  style={[
+                    styles.notificationBadge,
+                    { backgroundColor: colors.danger },
+                  ]}
+                >
+                  <Text style={styles.notificationBadgeText}>
+                    {unreadCount}
+                  </Text>
+                </View>
+              )}
+            </IconContainer>
           </TouchableOpacity>
-        </LinearGradient>
+        </View>
 
         {/* Generate Button */}
-        <View style={styles.actionContainer}>
+        <View style={styles.section}>
-          <TouchableOpacity
+          <MinimalButton
+            title="🎯 Generate New Plan"
             onPress={handleGenerateRecommendation}
+            variant="primary"
+            size="lg"
+            loading={generating}
             disabled={generating}
-            activeOpacity={0.8}
+            textStyle={{ fontSize: 16 }}
-          >
+          />
-            <LinearGradient
-              colors={theme.gradients.purple}
-              start={{ x: 0, y: 0 }}
-              end={{ x: 1, y: 0 }}
-              style={[styles.generateButton, theme.shadows.medium]}
-            >
-              {generating ? (
-                <ActivityIndicator size="small" color="#fff" />
-              ) : (
-                <>
-                  <Ionicons
-                    name="bulb"
-                    size={24}
-                    color="#fff"
-                    style={{ marginRight: 12 }}
-                  />
-                  <Text style={styles.generateButtonText}>
-                    Generate New Plan
-                  </Text>
-                </>
-              )}
-            </LinearGradient>
-          </TouchableOpacity>
         </View>
 
         {/* Recommendations List */}
         <View style={styles.section}>
+          <SectionHeader
+            title="💡 Your Plans"
+            subtitle={
+              recommendations.length > 0
+                ? `${recommendations.length} active plan${recommendations.length !== 1 ? "s" : ""}`
+                : undefined
+            }
+          />
+
           {recommendations.length === 0 ? (
-            <View style={styles.emptyState}>
+            <MinimalCard variant="default" style={{ borderRadius: 20 }}>
-              <LinearGradient
+              <View style={styles.emptyState}>
-                colors={["rgba(139, 92, 246, 0.1)", "rgba(139, 92, 246, 0.05)"]}
+                <Text style={{ fontSize: 64 }}>🤖</Text>
-                style={styles.emptyCard}
+                <Text
-              >
+                  style={[
-                <Ionicons
+                    typography.bodyEmphasis,
-                  name="sparkles-outline"
+                    { color: colors.textPrimary, marginTop: 16 },
-                  size={64}
+                  ]}
-                  color={theme.colors.purple}
+                >
-                />
+                  No Recommendations Yet
-                <Text style={styles.emptyTitle}>No Recommendations Yet</Text>
-                <Text style={styles.emptyText}>
-                  Tap "Generate New Plan" to get personalized AI-powered fitness
-                  and nutrition recommendations based on your profile and goals.
                 </Text>
-              </LinearGradient>
+                <Text
-            </View>
+                  style={[
+                    typography.body,
+                    {
+                      color: colors.textSecondary,
+                      marginTop: 8,
+                      textAlign: "center",
+                    },
+                  ]}
+                >
+                  Tap "Generate New Plan" to get personalized AI-powered fitness
+                  and nutrition recommendations! 🎯
+                </Text>
+              </View>
+            </MinimalCard>
           ) : (
-            recommendations.map((recommendation) => (
+            <View style={styles.recommendationsList}>
-              <RecommendationCard
+              {recommendations.map((recommendation) => (
-                key={recommendation.id}
+                <RecommendationCard
-                recommendation={recommendation}
+                  key={recommendation.id}
-              />
+                  recommendation={recommendation}
-            ))
+                />
+              ))}
+            </View>
           )}
         </View>
+
+        {/* Bottom Spacer */}
+        <View style={{ height: 100 }} />
       </ScrollView>
     </View>
   );
@@ -221,250 +246,195 @@ interface RecommendationCardProps {
 }
 
 function RecommendationCard({ recommendation }: RecommendationCardProps) {
+  const { colors, typography } = useTheme();
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <View style={styles.card}>
+    <MinimalCard variant="bordered" style={{ borderRadius: 20 }}>
-      <LinearGradient
+      {/* Header */}
-        colors={["rgba(255, 255, 255, 1)", "rgba(249, 250, 251, 1)"]}
+      <TouchableOpacity
-        style={[styles.cardContent, theme.shadows.medium]}
+        onPress={() => setExpanded(!expanded)}
+        activeOpacity={0.7}
+        style={styles.cardHeader}
       >
-        {/* Header */}
+        <View style={styles.cardHeaderLeft}>
-        <View style={styles.cardHeader}>
+          <IconContainer
-          <View style={styles.cardHeaderLeft}>
+            variant="colored"
-            <LinearGradient
+            backgroundColor={`${colors.success}20`}
-              colors={theme.gradients.success}
+          >
-              style={styles.cardIcon}
+            <Ionicons
-            >
+              name="checkmark-circle"
-              <Ionicons name="checkmark-circle" size={20} color="#fff" />
+              size={20}
-            </LinearGradient>
+              color={colors.success}
-            <View>
+            />
-              <Text style={styles.cardTitle}>AI Fitness Plan</Text>
+          </IconContainer>
-              <Text style={styles.cardDate}>
+          <View style={{ marginLeft: 12 }}>
-                {new Date(recommendation.generatedAt).toLocaleDateString()}
+            <Text style={[typography.h3, { color: colors.textPrimary }]}>
+              ✨ AI Fitness Plan
+            </Text>
+            <Text style={[typography.caption, { color: colors.textTertiary }]}>
+              {new Date(recommendation.generatedAt).toLocaleDateString()}
+            </Text>
+          </View>
+        </View>
+        <Ionicons
+          name={expanded ? "chevron-up" : "chevron-down"}
+          size={24}
+          color={colors.textTertiary}
+        />
+      </TouchableOpacity>
+
+      {/* Summary */}
+      <View style={styles.cardSummary}>
+        <Text
+          style={[typography.body, { color: colors.textSecondary }]}
+          numberOfLines={expanded ? undefined : 3}
+        >
+          {recommendation.recommendationText}
+        </Text>
+      </View>
+
+      {/* Expanded Content */}
+      {expanded && (
+        <View style={styles.expandedContent}>
+          {/* Activity Plan */}
+          <View
+            style={[
+              styles.planSection,
+              { backgroundColor: colors.surfaceElevated },
+            ]}
+          >
+            <View style={styles.planHeader}>
+              <Ionicons name="barbell" size={20} color={colors.primary} />
+              <Text
+                style={[
+                  typography.h3,
+                  { color: colors.textPrimary, marginLeft: 8 },
+                ]}
+              >
+                💪 Activity Plan
               </Text>
             </View>
+            <Text
+              style={[
+                typography.body,
+                { color: colors.textSecondary, marginTop: 8 },
+              ]}
+            >
+              {recommendation.activityPlan}
+            </Text>
           </View>
-          <TouchableOpacity onPress={() => setExpanded(!expanded)}>
-            <Ionicons
-              name={expanded ? "chevron-up" : "chevron-down"}
-              size={24}
-              color={theme.colors.gray400}
-            />
-          </TouchableOpacity>
-        </View>
 
-        {/* Summary */}
+          {/* Diet Plan */}
-        <View style={styles.cardSummary}>
+          <View
-          <Text
+            style={[
-            style={styles.summaryText}
+              styles.planSection,
-            numberOfLines={expanded ? undefined : 3}
+              { backgroundColor: colors.surfaceElevated },
+            ]}
           >
-            {recommendation.recommendationText}
+            <View style={styles.planHeader}>
-          </Text>
+              <Ionicons name="restaurant" size={20} color={colors.success} />
-        </View>
+              <Text
-
+                style={[
-        {/* Expanded Content */}
+                  typography.h3,
-        {expanded && (
+                  { color: colors.textPrimary, marginLeft: 8 },
-          <View style={styles.expandedContent}>
+                ]}
-            {/* Activity Plan */}
+              >
-            <View style={styles.planSection}>
+                🍽️ Diet Plan
-              <View style={styles.planHeader}>
+              </Text>
-                <Ionicons
-                  name="barbell"
-                  size={20}
-                  color={theme.colors.primary}
-                />
-                <Text style={styles.planTitle}>Activity Plan</Text>
-              </View>
-              <Text style={styles.planText}>{recommendation.activityPlan}</Text>
-            </View>
-
-            {/* Diet Plan */}
-            <View style={styles.planSection}>
-              <View style={styles.planHeader}>
-                <Ionicons
-                  name="restaurant"
-                  size={20}
-                  color={theme.colors.success}
-                />
-                <Text style={styles.planTitle}>Diet Plan</Text>
-              </View>
-              <Text style={styles.planText}>{recommendation.dietPlan}</Text>
             </View>
+            <Text
+              style={[
+                typography.body,
+                { color: colors.textSecondary, marginTop: 8 },
+              ]}
+            >
+              {recommendation.dietPlan}
+            </Text>
           </View>
-        )}
+        </View>
-      </LinearGradient>
+      )}
-    </View>
+    </MinimalCard>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.background,
   },
   centered: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: theme.colors.background,
   },
   scrollContent: {
-    paddingBottom: 100,
+    paddingBottom: 20,
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center",
+    alignItems: "flex-start",
-    padding: 24,
+    paddingHorizontal: 24,
     paddingTop: 60,
     paddingBottom: 24,
-    marginBottom: 20,
-    borderBottomLeftRadius: theme.borderRadius.xl,
-    borderBottomRightRadius: theme.borderRadius.xl,
   },
-  headerTitle: {
+  notificationButton: {
-    fontSize: theme.typography.fontSize["3xl"],
+    position: "relative",
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.white,
   },
-  headerSubtitle: {
+  notificationBadge: {
-    fontSize: theme.typography.fontSize.base,
-    color: "rgba(255, 255, 255, 0.9)",
-    marginTop: 4,
-  },
-  iconContainer: {
-    backgroundColor: "rgba(255, 255, 255, 0.2)",
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  badge: {
     position: "absolute",
     top: -4,
     right: -4,
-    backgroundColor: theme.colors.danger,
+    minWidth: 18,
-    borderRadius: 10,
+    height: 18,
-    width: 20,
+    borderRadius: 9,
-    height: 20,
     justifyContent: "center",
     alignItems: "center",
+    paddingHorizontal: 4,
   },
-  badgeText: {
+  notificationBadgeText: {
     color: "#fff",
-    fontSize: 12,
+    fontSize: 11,
-    fontWeight: "bold",
+    fontWeight: "700",
-  },
-  actionContainer: {
-    paddingHorizontal: 20,
-    marginBottom: 20,
-  },
-  generateButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-    borderRadius: theme.borderRadius.xl,
-  },
-  generateButtonText: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.white,
   },
   section: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 24,
+    marginBottom: 24,
   },
   emptyState: {
-    paddingVertical: 40,
-  },
-  emptyCard: {
-    borderRadius: theme.borderRadius["2xl"],
-    padding: 32,
     alignItems: "center",
+    paddingVertical: 40,
+    paddingHorizontal: 20,
   },
-  emptyTitle: {
+  recommendationsList: {
-    fontSize: theme.typography.fontSize.xl,
+    gap: 12,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray700,
-    marginTop: 16,
-    marginBottom: 8,
-  },
-  emptyText: {
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray500,
-    textAlign: "center",
-    lineHeight: 24,
-  },
-  card: {
-    marginBottom: 16,
-  },
-  cardContent: {
-    borderRadius: theme.borderRadius["2xl"],
-    padding: 20,
   },
   cardHeader: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 16,
   },
   cardHeaderLeft: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
+    flex: 1,
-  },
-  cardIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  cardTitle: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray800,
-  },
-  cardDate: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray500,
-    marginTop: 2,
   },
   cardSummary: {
-    marginBottom: 12,
+    marginTop: 12,
-  },
+    paddingTop: 12,
-  summaryText: {
+    borderTopWidth: 1,
-    fontSize: theme.typography.fontSize.base,
+    borderTopColor: "rgba(0, 0, 0, 0.05)",
-    color: theme.colors.gray700,
-    lineHeight: 24,
   },
   expandedContent: {
-    marginTop: 12,
+    marginTop: 16,
-    paddingTop: 16,
+    gap: 12,
-    borderTopWidth: 1,
-    borderTopColor: theme.colors.gray200,
   },
   planSection: {
-    marginBottom: 16,
+    padding: 16,
+    borderRadius: 16,
   },
   planHeader: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    marginBottom: 8,
-  },
-  planTitle: {
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray800,
-  },
-  planText: {
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray600,
-    lineHeight: 22,
   },
 });

apps/mobile/src/app/_layout.tsx

@@ -3,7 +3,9 @@ import { Stack } from "expo-router";
 import * as SecureStore from "expo-secure-store";
 import { View, Text } from "react-native";
 import { useEffect, useState } from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { validateEnv } from "../utils/env";
+import { ThemeProvider } from "../contexts/ThemeContext";
 import { StatisticsProvider } from "../contexts/StatisticsContext";
 import { FitnessGoalsProvider } from "../contexts/FitnessGoalsContext";
 import { RecommendationsProvider } from "../contexts/RecommendationsContext";
@@ -169,18 +171,22 @@ export default function RootLayout() {
   });
 
   return (
-    <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
+    <SafeAreaProvider>
-      <ClerkLoaded>
+      <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
-        <NotificationsProvider>
+        <ClerkLoaded>
-          <StatisticsProvider>
+          <ThemeProvider>
-            <FitnessGoalsProvider>
+            <NotificationsProvider>
-              <RecommendationsProvider>
+              <StatisticsProvider>
-                <AppContent />
+                <FitnessGoalsProvider>
-              </RecommendationsProvider>
+                  <RecommendationsProvider>
-            </FitnessGoalsProvider>
+                    <AppContent />
-          </StatisticsProvider>
+                  </RecommendationsProvider>
-        </NotificationsProvider>
+                </FitnessGoalsProvider>
-      </ClerkLoaded>
+              </StatisticsProvider>
-    </ClerkProvider>
+            </NotificationsProvider>
+          </ThemeProvider>
+        </ClerkLoaded>
+      </ClerkProvider>
+    </SafeAreaProvider>
   );
 }

apps/mobile/src/components/Badge.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { View, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+import { fontSize, fontWeight } from "../styles/typography";
+
+type BadgeVariant =
+  | "neutral"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "primary";
+type BadgeSize = "sm" | "md";
+
+interface BadgeProps {
+  label: string;
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Badge - Pill-shaped status indicator
+ *
+ * Variants:
+ * - neutral: Gray badge for general labels
+ * - success: Green badge for positive status
+ * - warning: Orange/yellow badge for warnings
+ * - danger: Red badge for errors or critical status
+ * - info: Blue badge for informational status
+ * - primary: Primary color badge
+ *
+ * Sizes:
+ * - sm: 5px vertical, 10px horizontal, 11px font
+ * - md: 6px vertical, 12px horizontal, 13px font (default)
+ */
+export function Badge({
+  label,
+  variant = "neutral",
+  size = "md",
+  style,
+}: BadgeProps) {
+  const { colors } = useTheme();
+
+  const sizeStyles = {
+    sm: {
+      paddingVertical: 5,
+      paddingHorizontal: 10,
+      fontSize: fontSize.xs,
+    },
+    md: {
+      paddingVertical: 6,
+      paddingHorizontal: 12,
+      fontSize: fontSize.sm,
+    },
+  };
+
+  const variantStyles: Record<
+    BadgeVariant,
+    { backgroundColor: string; color: string }
+  > = {
+    neutral: {
+      backgroundColor: colors.surfaceElevated,
+      color: colors.textSecondary,
+    },
+    success: {
+      backgroundColor: `${colors.success}20`, // 20% opacity
+      color: colors.success,
+    },
+    warning: {
+      backgroundColor: `${colors.warning}20`,
+      color: colors.warning,
+    },
+    danger: {
+      backgroundColor: `${colors.danger}20`,
+      color: colors.danger,
+    },
+    info: {
+      backgroundColor: `${colors.info}20`,
+      color: colors.info,
+    },
+    primary: {
+      backgroundColor: `${colors.primary}20`,
+      color: colors.primary,
+    },
+  };
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        {
+          backgroundColor: variantStyles[variant].backgroundColor,
+          paddingVertical: sizeStyles[size].paddingVertical,
+          paddingHorizontal: sizeStyles[size].paddingHorizontal,
+        },
+        style,
+      ]}
+    >
+      <Text
+        style={[
+          styles.label,
+          {
+            color: variantStyles[variant].color,
+            fontSize: sizeStyles[size].fontSize,
+            fontWeight: fontWeight.medium,
+          },
+        ]}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    borderRadius: 999, // Full pill shape
+    alignSelf: "flex-start",
+  },
+  label: {
+    textAlign: "center",
+  },
+});

apps/mobile/src/components/CustomTabBar.tsx

@@ -1,143 +1,129 @@
-import React from 'react';
+import React from "react";
-import { View, StyleSheet, TouchableOpacity, Platform, Dimensions } from 'react-native';
+import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
-import { Ionicons } from '@expo/vector-icons';
+import { Ionicons } from "@expo/vector-icons";
-import { LinearGradient } from 'expo-linear-gradient';
+import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { theme } from '../styles/theme';
+import { useTheme } from "../contexts/ThemeContext";
-import { Animated } from 'react-native';
 
-const { width } = Dimensions.get('window');
+/**
+ * CustomTabBar - Minimal bottom navigation with pill indicator
+ *
+ * Design:
+ * - Simple flat design (no floating, no glassmorphism)
+ * - Clean icons with outline/filled states
+ * - Small pill indicator below active tab
+ * - 56px height (reduced from 70px)
+ * - No animations (just opacity fade on press)
+ * - Theme-aware colors
+ */
+export function CustomTabBar({
+  state,
+  descriptors,
+  navigation,
+}: BottomTabBarProps) {
+  const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
 
-export function CustomTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
+  return (
-    return (
+    <View
-        <View style={styles.container}>
+      style={[
-            <LinearGradient
+        styles.container,
-                colors={['rgba(255, 255, 255, 0.9)', 'rgba(255, 255, 255, 0.7)']}
+        {
-                style={[styles.tabBar, theme.shadows.medium]}
+          backgroundColor: colors.surface,
-                start={{ x: 0, y: 0 }}
+          borderTopColor: colors.border,
-                end={{ x: 0, y: 1 }}
+          paddingBottom: insets.bottom,
-            >
+        },
-                {state.routes.map((route, index) => {
+      ]}
-                    const { options } = descriptors[route.key];
+    >
-                    const isFocused = state.index === index;
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const isFocused = state.index === index;
 
-                    const onPress = () => {
+        const onPress = () => {
-                        const event = navigation.emit({
+          const event = navigation.emit({
-                            type: 'tabPress',
+            type: "tabPress",
-                            target: route.key,
+            target: route.key,
-                            canPreventDefault: true,
+            canPreventDefault: true,
-                        });
+          });
 
-                        if (!isFocused && !event.defaultPrevented) {
+          if (!isFocused && !event.defaultPrevented) {
-                            navigation.navigate(route.name);
+            navigation.navigate(route.name);
-                        }
+          }
-                    };
+        };
 
-                    const getIconName = (routeName: string, focused: boolean): keyof typeof Ionicons.glyphMap => {
+        const getIconName = (
-                        switch (routeName) {
+          routeName: string,
-                            case 'index':
+          focused: boolean,
-                                return focused ? 'home' : 'home-outline';
+        ): keyof typeof Ionicons.glyphMap => {
-                            case 'goals':
+          switch (routeName) {
-                                return focused ? 'trophy' : 'trophy-outline';
+            case "index":
-                            case 'attendance':
+              return focused ? "home" : "home-outline";
-                                return focused ? 'calendar' : 'calendar-outline';
+            case "goals":
-                            case 'recommendations':
+              return focused ? "trophy" : "trophy-outline";
-                                return focused ? 'sparkles' : 'sparkles-outline';
+            case "attendance":
-                            case 'profile':
+              return focused ? "calendar" : "calendar-outline";
-                                return focused ? 'person' : 'person-outline';
+            case "recommendations":
-                            default:
+              return focused ? "sparkles" : "sparkles-outline";
-                                return 'ellipse-outline';
+            case "profile":
-                        }
+              return focused ? "person" : "person-outline";
-                    };
+            default:
+              return "ellipse-outline";
+          }
+        };
 
-                    // Animation for scale
+        return (
-                    const scaleValue = React.useRef(new Animated.Value(1)).current;
+          <TouchableOpacity
-
+            key={index}
-                    React.useEffect(() => {
+            accessibilityRole="button"
-                        Animated.spring(scaleValue, {
+            accessibilityState={isFocused ? { selected: true } : {}}
-                            toValue: isFocused ? 1.2 : 1,
+            accessibilityLabel={options.tabBarAccessibilityLabel}
-                            useNativeDriver: true,
+            testID={(options as any).tabBarTestID}
-                            friction: 8,
+            onPress={onPress}
-                        }).start();
+            style={styles.tabItem}
-                    }, [isFocused]);
+            activeOpacity={0.7}
-
+          >
-                    return (
+            <View style={styles.iconWrapper}>
-                        <TouchableOpacity
+              <Ionicons
-                            key={index}
+                name={getIconName(route.name, isFocused)}
-                            accessibilityRole="button"
+                size={24}
-                            accessibilityState={isFocused ? { selected: true } : {}}
+                color={isFocused ? colors.primary : colors.textTertiary}
-                            accessibilityLabel={options.tabBarAccessibilityLabel}
+              />
-                            testID={(options as any).tabBarTestID}
+              {isFocused && (
-                            onPress={onPress}
+                <View
-                            style={styles.tabItem}
+                  style={[
-                            activeOpacity={0.7}
+                    styles.indicator,
-                        >
+                    { backgroundColor: colors.primary },
-                            <Animated.View style={{ transform: [{ scale: scaleValue }] }}>
+                  ]}
-                                {isFocused ? (
+                />
-                                    <LinearGradient
+              )}
-                                        colors={theme.gradients.primary}
+            </View>
-                                        style={styles.iconContainer}
+          </TouchableOpacity>
-                                    >
+        );
-                                        <Ionicons
+      })}
-                                            name={getIconName(route.name, true)}
+    </View>
-                                            size={20}
+  );
-                                            color="#fff"
-                                        />
-                                    </LinearGradient>
-                                ) : (
-                                    <Ionicons
-                                        name={getIconName(route.name, false)}
-                                        size={24}
-                                        color={theme.colors.gray500}
-                                    />
-                                )}
-                            </Animated.View>
-                        </TouchableOpacity>
-                    );
-                })}
-            </LinearGradient>
-        </View>
-    );
 }
 
 const styles = StyleSheet.create({
-    container: {
+  container: {
-        position: 'absolute',
+    flexDirection: "row",
-        bottom: 0,
+    height: 56,
-        left: 0,
+    borderTopWidth: 1,
-        right: 0,
+  },
-        alignItems: 'center',
+  tabItem: {
-        paddingBottom: Platform.OS === 'ios' ? 30 : 20,
+    flex: 1,
-        pointerEvents: 'box-none',
+    alignItems: "center",
-    },
+    justifyContent: "center",
-    tabBar: {
+    height: "100%",
-        flexDirection: 'row',
+  },
-        backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  iconWrapper: {
-        borderRadius: 35,
+    alignItems: "center",
-        height: 70,
+    justifyContent: "center",
-        width: width - 40,
+  },
-        justifyContent: 'space-around',
+  indicator: {
-        alignItems: 'center',
+    width: 24,
-        borderWidth: 1,
+    height: 3,
-        borderColor: 'rgba(255, 255, 255, 0.5)',
+    borderRadius: 999,
-        paddingHorizontal: 10,
+    marginTop: 4,
-    },
+  },
-    tabItem: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-    },
-    iconContainer: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: theme.colors.primary,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 4,
-    },
 });

apps/mobile/src/components/GoalCreationModal.tsx

@@ -1,426 +1,526 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
-    View,
+  View,
-    Text,
+  Text,
-    StyleSheet,
+  StyleSheet,
-    Modal,
+  Modal,
-    TextInput,
+  TextInput,
-    TouchableOpacity,
+  TouchableOpacity,
-    ScrollView,
+  ScrollView,
-    Platform,
+  Platform,
-    Alert,
+  Alert,
-} from 'react-native';
+} from "react-native";
-import { Ionicons } from '@expo/vector-icons';
+import { Ionicons } from "@expo/vector-icons";
-import DateTimePicker from '@react-native-community/datetimepicker';
+import DateTimePicker from "@react-native-community/datetimepicker";
-import type { CreateGoalData } from '../services/fitnessGoals';
+import type { CreateGoalData } from "../services/fitnessGoals";
+import { useTheme } from "../contexts/ThemeContext";
+import { MinimalButton } from "./MinimalButton";
 
 interface GoalCreationModalProps {
-    visible: boolean;
+  visible: boolean;
-    onClose: () => void;
+  onClose: () => void;
-    onSubmit: (goalData: CreateGoalData) => Promise<void>;
+  onSubmit: (goalData: CreateGoalData) => Promise<void>;
 }
 
 const GOAL_TYPES = [
-    { value: 'weight_target', label: 'Weight Target' },
+  { value: "weight_target", label: "Weight Target" },
-    { value: 'strength_milestone', label: 'Strength Milestone' },
+  { value: "strength_milestone", label: "Strength Milestone" },
-    { value: 'endurance_target', label: 'Endurance Target' },
+  { value: "endurance_target", label: "Endurance Target" },
-    { value: 'flexibility_goal', label: 'Flexibility Goal' },
+  { value: "flexibility_goal", label: "Flexibility Goal" },
-    { value: 'habit_building', label: 'Habit Building' },
+  { value: "habit_building", label: "Habit Building" },
-    { value: 'custom', label: 'Custom Goal' },
+  { value: "custom", label: "Custom Goal" },
 ] as const;
 
 const PRIORITIES = [
-    { value: 'low', label: 'Low', color: '#10b981' },
+  { value: "low", label: "Low" },
-    { value: 'medium', label: 'Medium', color: '#f59e0b' },
+  { value: "medium", label: "Medium" },
-    { value: 'high', label: 'High', color: '#ef4444' },
+  { value: "high", label: "High" },
 ] as const;
 
-export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationModalProps) {
+export function GoalCreationModal({
-    const [goalType, setGoalType] = useState<CreateGoalData['goalType']>('weight_target');
+  visible,
-    const [title, setTitle] = useState('');
+  onClose,
-    const [description, setDescription] = useState('');
+  onSubmit,
-    const [targetValue, setTargetValue] = useState('');
+}: GoalCreationModalProps) {
-    const [currentValue, setCurrentValue] = useState('');
+  const { colors, typography } = useTheme();
-    const [unit, setUnit] = useState('');
+  const [goalType, setGoalType] =
-    const [priority, setPriority] = useState<'low' | 'medium' | 'high'>('medium');
+    useState<CreateGoalData["goalType"]>("weight_target");
-    const [targetDate, setTargetDate] = useState<Date | undefined>();
+  const [title, setTitle] = useState("");
-    const [showDatePicker, setShowDatePicker] = useState(false);
+  const [description, setDescription] = useState("");
-    const [submitting, setSubmitting] = useState(false);
+  const [targetValue, setTargetValue] = useState("");
+  const [currentValue, setCurrentValue] = useState("");
+  const [unit, setUnit] = useState("");
+  const [priority, setPriority] = useState<"low" | "medium" | "high">("medium");
+  const [targetDate, setTargetDate] = useState<Date | undefined>();
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
 
-    const resetForm = () => {
+  const resetForm = () => {
-        setGoalType('weight_target');
+    setGoalType("weight_target");
-        setTitle('');
+    setTitle("");
-        setDescription('');
+    setDescription("");
-        setTargetValue('');
+    setTargetValue("");
-        setCurrentValue('');
+    setCurrentValue("");
-        setUnit('');
+    setUnit("");
-        setPriority('medium');
+    setPriority("medium");
-        setTargetDate(undefined);
+    setTargetDate(undefined);
-    };
+  };
 
-    const handleSubmit = async () => {
+  const handleSubmit = async () => {
-        if (!title.trim()) {
+    if (!title.trim()) {
-            Alert.alert('Error', 'Please enter a goal title');
+      Alert.alert("Error", "Please enter a goal title");
-            return;
+      return;
-        }
+    }
 
-        setSubmitting(true);
+    setSubmitting(true);
-        try {
+    try {
-            const goalData: CreateGoalData = {
+      const goalData: CreateGoalData = {
-                goalType,
+        goalType,
-                title: title.trim(),
+        title: title.trim(),
-                description: description.trim() || undefined,
+        description: description.trim() || undefined,
-                targetValue: targetValue ? parseFloat(targetValue) : undefined,
+        targetValue: targetValue ? parseFloat(targetValue) : undefined,
-                currentValue: currentValue ? parseFloat(currentValue) : undefined,
+        currentValue: currentValue ? parseFloat(currentValue) : undefined,
-                unit: unit.trim() || undefined,
+        unit: unit.trim() || undefined,
-                targetDate: targetDate?.toISOString(),
+        targetDate: targetDate?.toISOString(),
-                priority,
+        priority,
-            };
+      };
 
-            await onSubmit(goalData);
+      await onSubmit(goalData);
-            resetForm();
+      resetForm();
-            onClose();
+      onClose();
-        } catch (error) {
+    } catch (error) {
-            console.error('Error creating goal:', error);
+      console.error("Error creating goal:", error);
-            Alert.alert('Error', 'Failed to create goal. Please try again.');
+      Alert.alert("Error", "Failed to create goal. Please try again.");
-        } finally {
+    } finally {
-            setSubmitting(false);
+      setSubmitting(false);
-        }
+    }
-    };
+  };
 
-    const handleClose = () => {
+  const handleClose = () => {
-        resetForm();
+    resetForm();
-        onClose();
+    onClose();
-    };
+  };
 
-    return (
+  const getPriorityColor = (p: "low" | "medium" | "high") => {
-        <Modal
+    switch (p) {
-            visible={visible}
+      case "high":
-            animationType="slide"
+        return colors.danger;
-            presentationStyle="pageSheet"
+      case "medium":
-            onRequestClose={handleClose}
+        return colors.warning;
+      case "low":
+        return colors.success;
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={handleClose}
+    >
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
+        <View
+          style={[
+            styles.header,
+            {
+              backgroundColor: colors.surface,
+              borderBottomColor: colors.border,
+            },
+          ]}
         >
-            <View style={styles.container}>
+          <Text style={[typography.h2, { color: colors.textPrimary }]}>
-                <View style={styles.header}>
+            Create Fitness Goal
-                    <Text style={styles.headerTitle}>Create Fitness Goal</Text>
+          </Text>
-                    <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
+          <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
-                        <Ionicons name="close" size={28} color="#111827" />
+            <Ionicons name="close" size={28} color={colors.textPrimary} />
-                    </TouchableOpacity>
+          </TouchableOpacity>
-                </View>
+        </View>
 
-                <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+        <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-                    {/* Goal Type */}
+          {/* Goal Type */}
-                    <View style={styles.field}>
+          <View style={styles.field}>
-                        <Text style={styles.label}>Goal Type *</Text>
+            <Text
-                        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.typeScroll}>
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
-                            {GOAL_TYPES.map((type) => (
+            >
-                                <TouchableOpacity
+              Goal Type *
-                                    key={type.value}
+            </Text>
-                                    style={[
+            <ScrollView
-                                        styles.typeButton,
+              horizontal
-                                        goalType === type.value && styles.typeButtonActive,
+              showsHorizontalScrollIndicator={false}
-                                    ]}
+              style={styles.typeScroll}
-                                    onPress={() => setGoalType(type.value)}
+            >
-                                >
+              {GOAL_TYPES.map((type) => (
-                                    <Text
+                <TouchableOpacity
-                                        style={[
+                  key={type.value}
-                                            styles.typeButtonText,
+                  style={[
-                                            goalType === type.value && styles.typeButtonTextActive,
+                    styles.typeButton,
-                                        ]}
+                    {
-                                    >
+                      borderColor: colors.border,
-                                        {type.label}
+                      backgroundColor: colors.surface,
-                                    </Text>
+                    },
-                                </TouchableOpacity>
+                    goalType === type.value && {
-                            ))}
+                      backgroundColor: colors.primary,
-                        </ScrollView>
+                      borderColor: colors.primary,
-                    </View>
+                    },
+                  ]}
+                  onPress={() => setGoalType(type.value)}
+                >
+                  <Text
+                    style={[
+                      typography.caption,
+                      { color: colors.textSecondary },
+                      goalType === type.value && {
+                        color: colors.white,
+                        fontWeight: "600",
+                      },
+                    ]}
+                  >
+                    {type.label}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          </View>
 
-                    {/* Title */}
+          {/* Title */}
-                    <View style={styles.field}>
+          <View style={styles.field}>
-                        <Text style={styles.label}>Title *</Text>
+            <Text
-                        <TextInput
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
-                            style={styles.input}
+            >
-                            value={title}
+              Title *
-                            onChangeText={setTitle}
+            </Text>
-                            placeholder="e.g., Lose 5kg"
+            <TextInput
-                            placeholderTextColor="#9ca3af"
+              style={[
-                        />
+                styles.input,
-                    </View>
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
+              value={title}
+              onChangeText={setTitle}
+              placeholder="e.g., Lose 5kg"
+              placeholderTextColor={colors.textTertiary}
+            />
+          </View>
 
-                    {/* Description */}
+          {/* Description */}
-                    <View style={styles.field}>
+          <View style={styles.field}>
-                        <Text style={styles.label}>Description</Text>
+            <Text
-                        <TextInput
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
-                            style={[styles.input, styles.textArea]}
+            >
-                            value={description}
+              Description
-                            onChangeText={setDescription}
+            </Text>
-                            placeholder="Optional description"
+            <TextInput
-                            placeholderTextColor="#9ca3af"
+              style={[
-                            multiline
+                styles.input,
-                            numberOfLines={3}
+                styles.textArea,
-                        />
+                {
-                    </View>
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
+              value={description}
+              onChangeText={setDescription}
+              placeholder="Optional description"
+              placeholderTextColor={colors.textTertiary}
+              multiline
+              numberOfLines={3}
+            />
+          </View>
 
-                    {/* Target Value & Unit */}
+          {/* Target Value & Unit */}
-                    <View style={styles.row}>
+          <View style={styles.row}>
-                        <View style={[styles.field, styles.flex1]}>
+            <View style={[styles.field, styles.flex1]}>
-                            <Text style={styles.label}>Target Value</Text>
+              <Text
-                            <TextInput
+                style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
-                                style={styles.input}
+              >
-                                value={targetValue}
+                Target Value
-                                onChangeText={setTargetValue}
+              </Text>
-                                placeholder="e.g., 70"
+              <TextInput
-                                placeholderTextColor="#9ca3af"
+                style={[
-                                keyboardType="numeric"
+                  styles.input,
-                            />
+                  {
-                        </View>
+                    backgroundColor: colors.surface,
-                        <View style={[styles.field, styles.flex1]}>
+                    borderColor: colors.border,
-                            <Text style={styles.label}>Unit</Text>
+                    color: colors.textPrimary,
-                            <TextInput
+                  },
-                                style={styles.input}
+                ]}
-                                value={unit}
+                value={targetValue}
-                                onChangeText={setUnit}
+                onChangeText={setTargetValue}
-                                placeholder="e.g., kg"
+                placeholder="e.g., 70"
-                                placeholderTextColor="#9ca3af"
+                placeholderTextColor={colors.textTertiary}
-                            />
+                keyboardType="numeric"
-                        </View>
+              />
-                    </View>
-
-                    {/* Current Value */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Current Value</Text>
-                        <TextInput
-                            style={styles.input}
-                            value={currentValue}
-                            onChangeText={setCurrentValue}
-                            placeholder="Starting value (optional)"
-                            placeholderTextColor="#9ca3af"
-                            keyboardType="numeric"
-                        />
-                    </View>
-
-                    {/* Target Date */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Target Date</Text>
-                        <TouchableOpacity
-                            style={styles.dateButton}
-                            onPress={() => setShowDatePicker(!showDatePicker)}
-                        >
-                            <Text style={targetDate ? styles.dateText : styles.datePlaceholder}>
-                                {targetDate ? targetDate.toLocaleDateString() : 'Select target date'}
-                            </Text>
-                            <Ionicons name={showDatePicker ? "chevron-up" : "calendar-outline"} size={20} color="#6b7280" />
-                        </TouchableOpacity>
-                    </View>
-
-                    {showDatePicker && (
-                        <View style={Platform.OS === 'ios' ? styles.datePickerContainer : undefined}>
-                            <DateTimePicker
-                                value={targetDate || new Date()}
-                                mode="date"
-                                display={Platform.OS === 'ios' ? 'inline' : 'default'}
-                                onChange={(event, selectedDate) => {
-                                    setShowDatePicker(Platform.OS === 'ios');
-                                    if (selectedDate) {
-                                        setTargetDate(selectedDate);
-                                    }
-                                }}
-                                minimumDate={new Date()}
-                                themeVariant="light"
-                            />
-                        </View>
-                    )}
-
-                    {/* Priority */}
-                    <View style={styles.field}>
-                        <Text style={styles.label}>Priority</Text>
-                        <View style={styles.priorityContainer}>
-                            {PRIORITIES.map((p) => (
-                                <TouchableOpacity
-                                    key={p.value}
-                                    style={[
-                                        styles.priorityButton,
-                                        priority === p.value && { backgroundColor: p.color },
-                                    ]}
-                                    onPress={() => setPriority(p.value)}
-                                >
-                                    <Text
-                                        style={[
-                                            styles.priorityButtonText,
-                                            priority === p.value && styles.priorityButtonTextActive,
-                                        ]}
-                                    >
-                                        {p.label}
-                                    </Text>
-                                </TouchableOpacity>
-                            ))}
-                        </View>
-                    </View>
-                </ScrollView>
-
-                <View style={styles.footer}>
-                    <TouchableOpacity
-                        style={[styles.submitButton, submitting && styles.submitButtonDisabled]}
-                        onPress={handleSubmit}
-                        disabled={submitting}
-                    >
-                        <Text style={styles.submitButtonText}>
-                            {submitting ? 'Creating...' : 'Create Goal'}
-                        </Text>
-                    </TouchableOpacity>
-                </View>
             </View>
-        </Modal>
+            <View style={[styles.field, styles.flex1]}>
-    );
+              <Text
+                style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+              >
+                Unit
+              </Text>
+              <TextInput
+                style={[
+                  styles.input,
+                  {
+                    backgroundColor: colors.surface,
+                    borderColor: colors.border,
+                    color: colors.textPrimary,
+                  },
+                ]}
+                value={unit}
+                onChangeText={setUnit}
+                placeholder="e.g., kg"
+                placeholderTextColor={colors.textTertiary}
+              />
+            </View>
+          </View>
+
+          {/* Current Value */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Current Value
+            </Text>
+            <TextInput
+              style={[
+                styles.input,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                  color: colors.textPrimary,
+                },
+              ]}
+              value={currentValue}
+              onChangeText={setCurrentValue}
+              placeholder="Starting value (optional)"
+              placeholderTextColor={colors.textTertiary}
+              keyboardType="numeric"
+            />
+          </View>
+
+          {/* Target Date */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Target Date
+            </Text>
+            <TouchableOpacity
+              style={[
+                styles.dateButton,
+                {
+                  backgroundColor: colors.surface,
+                  borderColor: colors.border,
+                },
+              ]}
+              onPress={() => setShowDatePicker(!showDatePicker)}
+            >
+              <Text
+                style={[
+                  typography.body,
+                  {
+                    color: targetDate
+                      ? colors.textPrimary
+                      : colors.textTertiary,
+                  },
+                ]}
+              >
+                {targetDate
+                  ? targetDate.toLocaleDateString()
+                  : "Select target date"}
+              </Text>
+              <Ionicons
+                name={showDatePicker ? "chevron-up" : "calendar-outline"}
+                size={20}
+                color={colors.textSecondary}
+              />
+            </TouchableOpacity>
+          </View>
+
+          {showDatePicker && (
+            <View
+              style={
+                Platform.OS === "ios"
+                  ? [
+                      styles.datePickerContainer,
+                      {
+                        backgroundColor: colors.surface,
+                        borderColor: colors.border,
+                      },
+                    ]
+                  : undefined
+              }
+            >
+              <DateTimePicker
+                value={targetDate || new Date()}
+                mode="date"
+                display={Platform.OS === "ios" ? "inline" : "default"}
+                onChange={(event, selectedDate) => {
+                  setShowDatePicker(Platform.OS === "ios");
+                  if (selectedDate) {
+                    setTargetDate(selectedDate);
+                  }
+                }}
+                minimumDate={new Date()}
+                themeVariant="light"
+              />
+            </View>
+          )}
+
+          {/* Priority */}
+          <View style={styles.field}>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              Priority
+            </Text>
+            <View style={styles.priorityContainer}>
+              {PRIORITIES.map((p) => (
+                <TouchableOpacity
+                  key={p.value}
+                  style={[
+                    styles.priorityButton,
+                    {
+                      borderColor: colors.border,
+                      backgroundColor: colors.surface,
+                    },
+                    priority === p.value && {
+                      backgroundColor: getPriorityColor(p.value),
+                      borderColor: getPriorityColor(p.value),
+                    },
+                  ]}
+                  onPress={() => setPriority(p.value)}
+                >
+                  <Text
+                    style={[
+                      typography.body,
+                      { color: colors.textSecondary },
+                      priority === p.value && {
+                        color: colors.white,
+                        fontWeight: "600",
+                      },
+                    ]}
+                  >
+                    {p.label}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+        </ScrollView>
+
+        <View
+          style={[
+            styles.footer,
+            {
+              backgroundColor: colors.surface,
+              borderTopColor: colors.border,
+            },
+          ]}
+        >
+          <MinimalButton
+            variant="primary"
+            title={submitting ? "Creating..." : "Create Goal"}
+            onPress={handleSubmit}
+            disabled={submitting}
+            loading={submitting}
+            style={styles.submitButton}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
+  container: {
-        flex: 1,
+    flex: 1,
-        backgroundColor: '#f9fafb',
+  },
-    },
+  header: {
-    header: {
+    flexDirection: "row",
-        flexDirection: 'row',
+    justifyContent: "space-between",
-        justifyContent: 'space-between',
+    alignItems: "center",
-        alignItems: 'center',
+    padding: 20,
-        padding: 20,
+    paddingTop: Platform.OS === "ios" ? 60 : 20,
-        paddingTop: Platform.OS === 'ios' ? 60 : 20,
+    borderBottomWidth: 1,
-        backgroundColor: '#fff',
+  },
-        borderBottomWidth: 1,
+  closeButton: {
-        borderBottomColor: '#e5e7eb',
+    padding: 4,
-    },
+  },
-    headerTitle: {
+  content: {
-        fontSize: 20,
+    flex: 1,
-        fontWeight: '600',
+    padding: 20,
-        color: '#111827',
+  },
-    },
+  field: {
-    closeButton: {
+    marginBottom: 20,
-        padding: 4,
+  },
-    },
+  input: {
-    content: {
+    borderWidth: 1,
-        flex: 1,
+    borderRadius: 8,
-        padding: 20,
+    padding: 12,
-    },
+    fontSize: 16,
-    field: {
+    marginTop: 8,
-        marginBottom: 20,
+  },
-    },
+  textArea: {
-    label: {
+    height: 80,
-        fontSize: 14,
+    textAlignVertical: "top",
-        fontWeight: '600',
+  },
-        color: '#374151',
+  row: {
-        marginBottom: 8,
+    flexDirection: "row",
-    },
+    gap: 12,
-    input: {
+  },
-        backgroundColor: '#fff',
+  flex1: {
-        borderWidth: 1,
+    flex: 1,
-        borderColor: '#d1d5db',
+  },
-        borderRadius: 8,
+  typeScroll: {
-        padding: 12,
+    flexGrow: 0,
-        fontSize: 16,
+    marginTop: 8,
-        color: '#111827',
+  },
-    },
+  typeButton: {
-    textArea: {
+    paddingHorizontal: 16,
-        height: 80,
+    paddingVertical: 8,
-        textAlignVertical: 'top',
+    borderRadius: 8,
-    },
+    borderWidth: 1,
-    row: {
+    marginRight: 8,
-        flexDirection: 'row',
+  },
-        gap: 12,
+  dateButton: {
-    },
+    flexDirection: "row",
-    flex1: {
+    justifyContent: "space-between",
-        flex: 1,
+    alignItems: "center",
-    },
+    borderWidth: 1,
-    typeScroll: {
+    borderRadius: 8,
-        flexGrow: 0,
+    padding: 12,
-    },
+    marginTop: 8,
-    typeButton: {
+  },
-        paddingHorizontal: 16,
+  priorityContainer: {
-        paddingVertical: 8,
+    flexDirection: "row",
-        borderRadius: 8,
+    gap: 12,
-        borderWidth: 1,
+    marginTop: 8,
-        borderColor: '#d1d5db',
+  },
-        backgroundColor: '#fff',
+  priorityButton: {
-        marginRight: 8,
+    flex: 1,
-    },
+    paddingVertical: 12,
-    typeButtonActive: {
+    borderRadius: 8,
-        backgroundColor: '#2563eb',
+    borderWidth: 1,
-        borderColor: '#2563eb',
+    alignItems: "center",
-    },
+  },
-    typeButtonText: {
+  footer: {
-        fontSize: 14,
+    padding: 20,
-        color: '#374151',
+    paddingBottom: Platform.OS === "ios" ? 40 : 20,
-    },
+    borderTopWidth: 1,
-    typeButtonTextActive: {
+  },
-        color: '#fff',
+  submitButton: {
-        fontWeight: '600',
+    width: "100%",
-    },
+  },
-    dateButton: {
+  datePickerContainer: {
-        flexDirection: 'row',
+    borderRadius: 8,
-        justifyContent: 'space-between',
+    borderWidth: 1,
-        alignItems: 'center',
+    marginTop: 8,
-        backgroundColor: '#fff',
+    overflow: "hidden",
-        borderWidth: 1,
+  },
-        borderColor: '#d1d5db',
-        borderRadius: 8,
-        padding: 12,
-    },
-    dateText: {
-        fontSize: 16,
-        color: '#111827',
-    },
-    datePlaceholder: {
-        fontSize: 16,
-        color: '#9ca3af',
-    },
-    priorityContainer: {
-        flexDirection: 'row',
-        gap: 12,
-    },
-    priorityButton: {
-        flex: 1,
-        paddingVertical: 12,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: '#d1d5db',
-        backgroundColor: '#fff',
-        alignItems: 'center',
-    },
-    priorityButtonText: {
-        fontSize: 14,
-        color: '#374151',
-        fontWeight: '500',
-    },
-    priorityButtonTextActive: {
-        color: '#fff',
-        fontWeight: '600',
-    },
-    footer: {
-        padding: 20,
-        paddingBottom: Platform.OS === 'ios' ? 40 : 20,
-        backgroundColor: '#fff',
-        borderTopWidth: 1,
-        borderTopColor: '#e5e7eb',
-    },
-    submitButton: {
-        backgroundColor: '#2563eb',
-        borderRadius: 8,
-        padding: 16,
-        alignItems: 'center',
-    },
-    submitButtonDisabled: {
-        opacity: 0.6,
-    },
-    submitButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#fff',
-    },
-    datePickerContainer: {
-        backgroundColor: '#fff',
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: '#d1d5db',
-        marginTop: 8,
-        overflow: 'hidden',
-    },
 });

apps/mobile/src/components/GoalProgressCard.tsx

@@ -1,293 +1,330 @@
-import React from 'react';
+import React, { useEffect, useRef } from "react";
-import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import {
-import { Ionicons } from '@expo/vector-icons';
+  View,
-import { LinearGradient } from 'expo-linear-gradient';
+  Text,
-import type { FitnessGoal } from '../services/fitnessGoals';
+  StyleSheet,
-import { theme } from '../styles/theme';
+  TouchableOpacity,
+  Alert,
+  Animated,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import type { FitnessGoal } from "../services/fitnessGoals";
+import { useTheme } from "../contexts/ThemeContext";
+import { MinimalCard } from "./MinimalCard";
+import { Badge } from "./Badge";
+import { ProgressBar } from "./ProgressBar";
+import { IconContainer } from "./IconContainer";
 
 interface GoalProgressCardProps {
-    goal: FitnessGoal;
+  goal: FitnessGoal;
-    onPress?: () => void;
+  onPress?: () => void;
-    onComplete?: () => void;
+  onComplete?: () => void;
-    onDelete?: () => void;
+  onDelete?: () => void;
 }
 
-export function GoalProgressCard({ goal, onPress, onComplete, onDelete }: GoalProgressCardProps) {
+export function GoalProgressCard({
-    const isCompleted = goal.status === 'completed';
+  goal,
-    const progress = goal.progress || 0;
+  onPress,
+  onComplete,
+  onDelete,
+}: GoalProgressCardProps) {
+  const { colors, typography } = useTheme();
+  const isCompleted = goal.status === "completed";
+  const progress = (goal.progress || 0) / 100; // Convert to 0-1 scale
+  const scaleAnim = useRef(new Animated.Value(1)).current;
 
-    // Calculate days remaining
+  // Celebration animation when goal is completed
-    const daysRemaining = goal.targetDate
+  useEffect(() => {
-        ? Math.ceil((new Date(goal.targetDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
+    if (isCompleted) {
-        : null;
+      Animated.sequence([
+        Animated.spring(scaleAnim, {
+          toValue: 1.05,
+          friction: 3,
+          tension: 40,
+          useNativeDriver: true,
+        }),
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          friction: 3,
+          tension: 40,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [isCompleted]);
 
-    const getGoalTypeIcon = (type: string) => {
+  const handleComplete = () => {
-        switch (type) {
+    if (onComplete) {
-            case 'weight_target': return 'scale-outline';
+      // Trigger celebration animation
-            case 'strength_milestone': return 'barbell-outline';
+      Animated.sequence([
-            case 'endurance_target': return 'bicycle-outline';
+        Animated.spring(scaleAnim, {
-            case 'flexibility_goal': return 'body-outline';
+          toValue: 1.1,
-            case 'habit_building': return 'calendar-outline';
+          friction: 3,
-            default: return 'flag-outline';
+          tension: 40,
-        }
+          useNativeDriver: true,
-    };
+        }),
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          friction: 3,
+          tension: 40,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        onComplete();
+      });
+    }
+  };
 
-    const getPriorityGradient = (priority: string): readonly [string, string] => {
+  // Calculate days remaining
-        switch (priority) {
+  const daysRemaining = goal.targetDate
-            case 'high': return theme.gradients.danger;
+    ? Math.ceil(
-            case 'medium': return theme.gradients.warning;
+        (new Date(goal.targetDate).getTime() - Date.now()) /
-            case 'low': return theme.gradients.success;
+          (1000 * 60 * 60 * 24),
-            default: return theme.gradients.primary;
+      )
-        }
+    : null;
-    };
 
-    const handleDelete = () => {
+  const getGoalTypeIcon = (type: string) => {
-        Alert.alert(
+    switch (type) {
-            'Delete Goal',
+      case "weight_target":
-            'Are you sure you want to delete this goal?',
+        return "scale-outline";
-            [
+      case "strength_milestone":
-                { text: 'Cancel', style: 'cancel' },
+        return "barbell-outline";
-                { text: 'Delete', style: 'destructive', onPress: onDelete },
+      case "endurance_target":
-            ]
+        return "bicycle-outline";
-        );
+      case "flexibility_goal":
-    };
+        return "body-outline";
+      case "habit_building":
+        return "calendar-outline";
+      default:
+        return "flag-outline";
+    }
+  };
 
-    return (
+  const getPriorityColor = (priority: string) => {
-        <TouchableOpacity
+    switch (priority) {
-            onPress={onPress}
+      case "high":
-            activeOpacity={0.7}
+        return colors.danger;
+      case "medium":
+        return colors.warning;
+      case "low":
+        return colors.success;
+      default:
+        return colors.primary;
+    }
+  };
+
+  const handleDelete = () => {
+    Alert.alert("Delete Goal", "Are you sure you want to delete this goal?", [
+      { text: "Cancel", style: "cancel" },
+      { text: "Delete", style: "destructive", onPress: onDelete },
+    ]);
+  };
+
+  return (
+    <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        <MinimalCard
+          variant="bordered"
+          style={[
+            styles.card,
+            isCompleted && {
+              backgroundColor: colors.overlayLight,
+            },
+          ]}
         >
-            <LinearGradient
+          {/* Header */}
-                colors={isCompleted
+          <View style={styles.header}>
-                    ? ['rgba(16, 185, 129, 0.05)', 'rgba(5, 150, 105, 0.02)'] as const
+            <View style={styles.titleRow}>
-                    : ['rgba(255, 255, 255, 1)', 'rgba(249, 250, 251, 1)'] as const
+              <IconContainer
+                variant="colored"
+                backgroundColor={
+                  isCompleted ? colors.success : getPriorityColor(goal.priority)
                 }
-                style={[
+              >
-                    styles.card,
+                <Ionicons
-                    theme.shadows.medium,
+                  name={getGoalTypeIcon(goal.goalType) as any}
-                    isCompleted && styles.cardCompleted
+                  size={20}
-                ]}
+                  color={colors.white}
-            >
-                {/* Priority Accent Bar */}
-                <LinearGradient
-                    colors={getPriorityGradient(goal.priority)}
-                    start={{ x: 0, y: 0 }}
-                    end={{ x: 0, y: 1 }}
-                    style={styles.priorityAccent}
                 />
+              </IconContainer>
 
-                <View style={styles.header}>
+              <View style={styles.titleContainer}>
-                    <View style={styles.titleRow}>
+                <Text
-                        <LinearGradient
+                  style={[
-                            colors={isCompleted ? theme.gradients.success : getPriorityGradient(goal.priority)}
+                    typography.h3,
-                            style={styles.iconContainer}
+                    { color: colors.textPrimary },
-                        >
+                    isCompleted && {
-                            <Ionicons
+                      color: colors.textSecondary,
-                                name={getGoalTypeIcon(goal.goalType) as any}
+                      textDecorationLine: "line-through",
-                                size={20}
+                    },
-                                color="#fff"
+                  ]}
-                            />
+                >
-                        </LinearGradient>
+                  {goal.title}
-                        <View style={styles.titleContainer}>
+                </Text>
-                            <Text style={[styles.title, isCompleted && styles.titleCompleted]}>
+                {goal.description && (
-                                {goal.title}
+                  <Text
-                            </Text>
+                    style={[
-                            {goal.description && (
+                      typography.caption,
-                                <Text style={styles.description} numberOfLines={2}>
+                      { color: colors.textTertiary, marginTop: 2 },
-                                    {goal.description}
+                    ]}
-                                </Text>
+                    numberOfLines={2}
-                            )}
+                  >
-                        </View>
+                    {goal.description}
-                    </View>
+                  </Text>
-
-                    <View style={styles.actions}>
-                        {!isCompleted && onComplete && (
-                            <TouchableOpacity onPress={onComplete} style={styles.actionButton}>
-                                <Ionicons name="checkmark-circle-outline" size={24} color={theme.colors.success} />
-                            </TouchableOpacity>
-                        )}
-                        {onDelete && (
-                            <TouchableOpacity onPress={handleDelete} style={styles.actionButton}>
-                                <Ionicons name="trash-outline" size={22} color={theme.colors.danger} />
-                            </TouchableOpacity>
-                        )}
-                    </View>
-                </View>
-
-                {goal.targetValue && (
-                    <View style={styles.progressSection}>
-                        <View style={styles.progressInfo}>
-                            <Text style={styles.progressText}>
-                                {goal.currentValue || 0} / {goal.targetValue} {goal.unit || ''}
-                            </Text>
-                            <Text style={[styles.progressPercentage, isCompleted && { color: theme.colors.success }]}>
-                                {progress.toFixed(0)}%
-                            </Text>
-                        </View>
-
-                        <View style={styles.progressBarContainer}>
-                            <LinearGradient
-                                colors={isCompleted ? theme.gradients.success : getPriorityGradient(goal.priority)}
-                                start={{ x: 0, y: 0 }}
-                                end={{ x: 1, y: 0 }}
-                                style={[
-                                    styles.progressBar,
-                                    { width: `${Math.min(progress, 100)}%` }
-                                ]}
-                            />
-                        </View>
-                    </View>
                 )}
+              </View>
+            </View>
 
-                <View style={styles.footer}>
+            {/* Action Buttons */}
-                    <LinearGradient
+            <View style={styles.actions}>
-                        colors={getPriorityGradient(goal.priority)}
+              {!isCompleted && onComplete && (
-                        style={styles.priorityBadge}
+                <TouchableOpacity
-                    >
+                  onPress={handleComplete}
-                        <Text style={styles.priorityText}>{goal.priority.toUpperCase()}</Text>
+                  style={styles.actionButton}
-                    </LinearGradient>
+                >
+                  <Ionicons
+                    name="checkmark-circle-outline"
+                    size={24}
+                    color={colors.success}
+                  />
+                </TouchableOpacity>
+              )}
+              {onDelete && (
+                <TouchableOpacity
+                  onPress={handleDelete}
+                  style={styles.actionButton}
+                >
+                  <Ionicons
+                    name="trash-outline"
+                    size={22}
+                    color={colors.danger}
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+          </View>
 
-                    {daysRemaining !== null && !isCompleted && (
+          {/* Progress Section */}
-                        <Text style={[styles.daysRemaining, daysRemaining < 0 && styles.overdue]}>
+          {goal.targetValue && (
-                            {daysRemaining < 0
+            <View style={styles.progressSection}>
-                                ? `${Math.abs(daysRemaining)} days overdue`
+              <View style={styles.progressInfo}>
-                                : `${daysRemaining} days remaining`
+                <Text
-                            }
+                  style={[typography.caption, { color: colors.textSecondary }]}
-                        </Text>
+                >
-                    )}
+                  {goal.currentValue || 0} / {goal.targetValue}{" "}
+                  {goal.unit || ""}
+                </Text>
+                <Text
+                  style={[
+                    typography.bodyEmphasis,
+                    {
+                      color: isCompleted ? colors.success : colors.primary,
+                    },
+                  ]}
+                >
+                  {(progress * 100).toFixed(0)}%
+                </Text>
+              </View>
 
-                    {isCompleted && goal.completedDate && (
+              <ProgressBar
-                        <Text style={styles.completedDate}>
+                progress={progress}
-                            Completed {new Date(goal.completedDate).toLocaleDateString()}
+                color={
-                        </Text>
+                  isCompleted ? colors.success : getPriorityColor(goal.priority)
-                    )}
+                }
-                </View>
+              />
-            </LinearGradient>
+            </View>
-        </TouchableOpacity>
+          )}
-    );
+
+          {/* Footer */}
+          <View style={styles.footer}>
+            {isCompleted ? (
+              <Badge variant="success" label="COMPLETED" />
+            ) : (
+              <View>
+                {goal.priority === "high" && (
+                  <Badge variant="danger" label={goal.priority.toUpperCase()} />
+                )}
+                {goal.priority === "medium" && (
+                  <Badge
+                    variant="warning"
+                    label={goal.priority.toUpperCase()}
+                  />
+                )}
+                {goal.priority === "low" && (
+                  <Badge
+                    variant="success"
+                    label={goal.priority.toUpperCase()}
+                  />
+                )}
+              </View>
+            )}
+
+            {daysRemaining !== null && !isCompleted && (
+              <Text
+                style={[
+                  typography.caption,
+                  {
+                    color:
+                      daysRemaining < 0 ? colors.danger : colors.textTertiary,
+                  },
+                ]}
+              >
+                {daysRemaining < 0
+                  ? `${Math.abs(daysRemaining)} days overdue`
+                  : `${daysRemaining} days remaining`}
+              </Text>
+            )}
+
+            {isCompleted && goal.completedDate && (
+              <Text style={[typography.caption, { color: colors.success }]}>
+                Completed {new Date(goal.completedDate).toLocaleDateString()}
+              </Text>
+            )}
+          </View>
+        </MinimalCard>
+      </TouchableOpacity>
+    </Animated.View>
+  );
 }
 
 const styles = StyleSheet.create({
-    card: {
+  card: {
-        borderRadius: theme.borderRadius.xl,
+    marginBottom: 12,
-        padding: 16,
+  },
-        marginBottom: 12,
+  header: {
-        borderWidth: 1,
+    flexDirection: "row",
-        borderColor: 'rgba(59, 130, 246, 0.1)',
+    justifyContent: "space-between",
-        overflow: 'hidden',
+    alignItems: "flex-start",
-    },
+    marginBottom: 12,
-    cardCompleted: {
+  },
-        borderColor: 'rgba(16, 185, 129, 0.2)',
+  titleRow: {
-    },
+    flexDirection: "row",
-    priorityAccent: {
+    alignItems: "flex-start",
-        position: 'absolute',
+    flex: 1,
-        left: 0,
+  },
-        top: 0,
+  titleContainer: {
-        bottom: 0,
+    flex: 1,
-        width: 4,
+    marginLeft: 12,
-    },
+  },
-    header: {
+  actions: {
-        flexDirection: 'row',
+    flexDirection: "row",
-        justifyContent: 'space-between',
+    gap: 8,
-        alignItems: 'flex-start',
+  },
-        marginBottom: 12,
+  actionButton: {
-        marginLeft: 8,
+    padding: 4,
-    },
+  },
-    titleRow: {
+  progressSection: {
-        flexDirection: 'row',
+    marginBottom: 12,
-        alignItems: 'flex-start',
+  },
-        flex: 1,
+  progressInfo: {
-    },
+    flexDirection: "row",
-    iconContainer: {
+    justifyContent: "space-between",
-        width: 40,
+    alignItems: "center",
-        height: 40,
+    marginBottom: 8,
-        borderRadius: 20,
+  },
-        justifyContent: 'center',
+  footer: {
-        alignItems: 'center',
+    flexDirection: "row",
-        marginRight: 12,
+    alignItems: "center",
-    },
+    justifyContent: "space-between",
-    titleContainer: {
+  },
-        flex: 1,
-    },
-    title: {
-        fontSize: theme.typography.fontSize.lg,
-        fontWeight: theme.typography.fontWeight.semibold,
-        color: theme.colors.gray900,
-        marginBottom: 4,
-    },
-    titleCompleted: {
-        color: theme.colors.gray600,
-        textDecorationLine: 'line-through',
-    },
-    description: {
-        fontSize: theme.typography.fontSize.sm,
-        color: theme.colors.gray600,
-        lineHeight: 18,
-    },
-    actions: {
-        flexDirection: 'row',
-        gap: 8,
-    },
-    actionButton: {
-        padding: 4,
-    },
-    progressSection: {
-        marginBottom: 12,
-        marginLeft: 8,
-    },
-    progressInfo: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginBottom: 8,
-    },
-    progressText: {
-        fontSize: theme.typography.fontSize.sm,
-        fontWeight: theme.typography.fontWeight.medium,
-        color: theme.colors.gray700,
-    },
-    progressPercentage: {
-        fontSize: theme.typography.fontSize.sm,
-        fontWeight: theme.typography.fontWeight.semibold,
-        color: theme.colors.primary,
-    },
-    progressBarContainer: {
-        height: 8,
-        backgroundColor: theme.colors.gray200,
-        borderRadius: 4,
-        overflow: 'hidden',
-    },
-    progressBar: {
-        height: '100%',
-        borderRadius: 4,
-    },
-    footer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginLeft: 8,
-    },
-    priorityBadge: {
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: theme.borderRadius.md,
-    },
-    priorityText: {
-        fontSize: theme.typography.fontSize.xs,
-        fontWeight: theme.typography.fontWeight.semibold,
-        color: theme.colors.white,
-    },
-    daysRemaining: {
-        fontSize: theme.typography.fontSize.xs,
-        color: theme.colors.gray600,
-        fontWeight: theme.typography.fontWeight.medium,
-    },
-    overdue: {
-        color: theme.colors.danger,
-        fontWeight: theme.typography.fontWeight.semibold,
-    },
-    completedDate: {
-        fontSize: theme.typography.fontSize.xs,
-        color: theme.colors.success,
-        fontWeight: theme.typography.fontWeight.medium,
-    },
 });

apps/mobile/src/components/IconContainer.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+type IconContainerVariant = "plain" | "subtle" | "colored";
+type IconContainerSize = "sm" | "md" | "lg";
+
+interface IconContainerProps {
+  children: React.ReactNode;
+  variant?: IconContainerVariant;
+  size?: IconContainerSize;
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * IconContainer - Clean container for icons with subtle backgrounds
+ *
+ * Variants:
+ * - plain: No background, just the icon
+ * - subtle: Light background (surfaceSecondary)
+ * - colored: Custom background color (pass backgroundColor prop)
+ *
+ * Sizes:
+ * - sm: 32px circle
+ * - md: 40px circle (default)
+ * - lg: 48px circle
+ */
+export function IconContainer({
+  children,
+  variant = "subtle",
+  size = "md",
+  backgroundColor,
+  style,
+}: IconContainerProps) {
+  const { colors } = useTheme();
+
+  const sizeStyles: Record<IconContainerSize, ViewStyle> = {
+    sm: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+    },
+    md: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+    },
+    lg: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+    },
+  };
+
+  const getBackgroundColor = (): string | undefined => {
+    if (variant === "colored" && backgroundColor) {
+      return backgroundColor;
+    }
+    if (variant === "subtle") {
+      return colors.surfaceElevated;
+    }
+    return "transparent";
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        sizeStyles[size],
+        { backgroundColor: getBackgroundColor() },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

apps/mobile/src/components/ListItem.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+} from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+interface ListItemProps {
+  title: string;
+  subtitle?: string;
+  leftIcon?: React.ReactNode;
+  rightElement?: React.ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * ListItem - Clean list item with optional icon and trailing element
+ *
+ * Usage:
+ * - Settings lists
+ * - Navigation items
+ * - Selectable options
+ *
+ * Features:
+ * - Optional left icon (wrap in IconContainer)
+ * - Optional subtitle for additional context
+ * - Optional right element (arrow, badge, switch, etc.)
+ * - Optional onPress for touchable items
+ */
+export function ListItem({
+  title,
+  subtitle,
+  leftIcon,
+  rightElement,
+  onPress,
+  style,
+}: ListItemProps) {
+  const { colors, typography } = useTheme();
+
+  const content = (
+    <View style={[styles.container, style]}>
+      {leftIcon && <View style={styles.leftIcon}>{leftIcon}</View>}
+      <View style={styles.textContainer}>
+        <Text style={[typography.h3, { color: colors.textPrimary }]}>
+          {title}
+        </Text>
+        {subtitle && (
+          <Text
+            style={[
+              typography.caption,
+              { color: colors.textTertiary, marginTop: 2 },
+            ]}
+          >
+            {subtitle}
+          </Text>
+        )}
+      </View>
+      {rightElement && <View style={styles.rightElement}>{rightElement}</View>}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return content;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "transparent",
+  },
+  leftIcon: {
+    marginRight: 12,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  rightElement: {
+    marginLeft: 12,
+  },
+});

apps/mobile/src/components/MinimalButton.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle,
+  StyleProp,
+} from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+import { fontSize, fontWeight } from "../styles/typography";
+
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
+
+interface MinimalButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+/**
+ * MinimalButton - Clean button component with solid colors
+ *
+ * Variants:
+ * - primary: Solid primary background
+ * - secondary: Outlined with primary color
+ * - tertiary: Text only, no background
+ * - danger: Solid danger background
+ *
+ * Sizes:
+ * - sm: 12px vertical padding, 16px horizontal
+ * - md: 14px vertical padding, 24px horizontal (default)
+ * - lg: 16px vertical padding, 32px horizontal
+ */
+export function MinimalButton({
+  title,
+  onPress,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled = false,
+  style,
+  textStyle,
+}: MinimalButtonProps) {
+  const { colors } = useTheme();
+
+  const isDisabled = disabled || loading;
+
+  // Get button styles based on variant
+  const getButtonStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      borderRadius: 10,
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: isDisabled ? 0.5 : 1,
+    };
+
+    // Size-specific padding
+    const sizeStyles: Record<
+      ButtonSize,
+      { paddingVertical: number; paddingHorizontal: number }
+    > = {
+      sm: { paddingVertical: 12, paddingHorizontal: 16 },
+      md: { paddingVertical: 14, paddingHorizontal: 24 },
+      lg: { paddingVertical: 16, paddingHorizontal: 32 },
+    };
+
+    const variantStyles: Record<ButtonVariant, ViewStyle> = {
+      primary: {
+        backgroundColor: colors.primary,
+      },
+      secondary: {
+        backgroundColor: "transparent",
+        borderWidth: 1.5,
+        borderColor: colors.primary,
+      },
+      tertiary: {
+        backgroundColor: "transparent",
+      },
+      danger: {
+        backgroundColor: colors.danger,
+      },
+    };
+
+    return {
+      ...baseStyle,
+      ...sizeStyles[size],
+      ...variantStyles[variant],
+    };
+  };
+
+  // Get text styles based on variant
+  const getTextStyle = (): TextStyle => {
+    const baseTextStyle: TextStyle = {
+      fontSize: fontSize.base,
+      fontWeight: fontWeight.semibold,
+    };
+
+    const variantTextStyles: Record<ButtonVariant, TextStyle> = {
+      primary: {
+        color: colors.white,
+      },
+      secondary: {
+        color: colors.primary,
+      },
+      tertiary: {
+        color: colors.primary,
+      },
+      danger: {
+        color: colors.white,
+      },
+    };
+
+    return {
+      ...baseTextStyle,
+      ...variantTextStyles[variant],
+    };
+  };
+
+  return (
+    <TouchableOpacity
+      style={[getButtonStyle(), style]}
+      onPress={onPress}
+      disabled={isDisabled}
+      activeOpacity={0.7}
+    >
+      {loading ? (
+        <ActivityIndicator
+          size="small"
+          color={
+            variant === "secondary" || variant === "tertiary"
+              ? colors.primary
+              : colors.white
+          }
+        />
+      ) : (
+        <Text style={[getTextStyle(), textStyle]}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  // No static styles needed - all dynamic based on theme
+});

apps/mobile/src/components/MinimalCard.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+  StyleProp,
+} from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+type CardVariant = "default" | "elevated" | "bordered";
+
+interface MinimalCardProps {
+  children: React.ReactNode;
+  variant?: CardVariant;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * MinimalCard - Clean card component without gradients
+ *
+ * Variants:
+ * - default: Subtle shadow on surface background
+ * - elevated: More prominent shadow
+ * - bordered: Border instead of shadow
+ */
+export function MinimalCard({
+  children,
+  variant = "default",
+  onPress,
+  style,
+}: MinimalCardProps) {
+  const { colors } = useTheme();
+
+  const cardStyles = [
+    styles.base,
+    {
+      backgroundColor: colors.surface,
+    },
+    variant === "default" && styles.default,
+    variant === "elevated" && styles.elevated,
+    variant === "bordered" && {
+      borderWidth: 1,
+      borderColor: colors.border,
+    },
+    style,
+  ];
+
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        style={cardStyles}
+        onPress={onPress}
+        activeOpacity={0.7}
+      >
+        {children}
+      </TouchableOpacity>
+    );
+  }
+
+  return <View style={cardStyles}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 12,
+    padding: 16,
+  },
+  default: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 3,
+    elevation: 1,
+  },
+  elevated: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+});

apps/mobile/src/components/ProgressBar.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+interface ProgressBarProps {
+  progress: number; // 0-1 (e.g., 0.75 for 75%)
+  color?: string;
+  backgroundColor?: string;
+  height?: number;
+  borderRadius?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * ProgressBar - Simple linear progress indicator
+ *
+ * Usage:
+ * - Goal progress tracking
+ * - Loading states
+ * - Completion indicators
+ *
+ * Props:
+ * - progress: Value between 0 and 1 (e.g., 0.75 for 75%)
+ * - color: Custom fill color (defaults to theme primary)
+ * - backgroundColor: Custom track color (defaults to theme border)
+ * - height: Bar height in pixels (defaults to 8)
+ * - borderRadius: Corner radius (defaults to 999 for full pill shape)
+ */
+export function ProgressBar({
+  progress,
+  color,
+  backgroundColor,
+  height = 8,
+  borderRadius = 999,
+  style,
+}: ProgressBarProps) {
+  const { colors } = useTheme();
+
+  // Clamp progress between 0 and 1
+  const clampedProgress = Math.min(Math.max(progress, 0), 1);
+
+  const trackColor = backgroundColor || colors.border;
+  const fillColor = color || colors.primary;
+
+  return (
+    <View
+      style={[
+        styles.track,
+        {
+          height,
+          borderRadius,
+          backgroundColor: trackColor,
+        },
+        style,
+      ]}
+    >
+      <View
+        style={[
+          styles.fill,
+          {
+            width: `${clampedProgress * 100}%`,
+            height,
+            borderRadius,
+            backgroundColor: fillColor,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    width: "100%",
+    overflow: "hidden",
+  },
+  fill: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+  },
+});

apps/mobile/src/components/SectionHeader.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+} from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+interface SectionHeaderProps {
+  title: string;
+  subtitle?: string;
+  actionLabel?: string;
+  onActionPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * SectionHeader - Clean section header with optional action button
+ *
+ * Usage:
+ * - Divides content into logical sections
+ * - Optional subtitle for additional context
+ * - Optional action button (e.g., "See All", "Add New")
+ */
+export function SectionHeader({
+  title,
+  subtitle,
+  actionLabel,
+  onActionPress,
+  style,
+}: SectionHeaderProps) {
+  const { colors, typography } = useTheme();
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.textContainer}>
+        <Text style={[typography.h2, { color: colors.textPrimary }]}>
+          {title}
+        </Text>
+        {subtitle && (
+          <Text
+            style={[
+              typography.caption,
+              { color: colors.textTertiary, marginTop: 2 },
+            ]}
+          >
+            {subtitle}
+          </Text>
+        )}
+      </View>
+      {actionLabel && onActionPress && (
+        <TouchableOpacity onPress={onActionPress} activeOpacity={0.7}>
+          <Text
+            style={[
+              typography.body,
+              { color: colors.primary, fontWeight: "600" },
+            ]}
+          >
+            {actionLabel}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  textContainer: {
+    flex: 1,
+  },
+});

apps/mobile/src/contexts/ThemeContext.tsx

@@ -0,0 +1,129 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
+import { useColorScheme } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { ColorScheme, lightColors, darkColors } from "../styles/colors";
+import {
+  TypographyPresets,
+  createTypographyPresets,
+} from "../styles/typography";
+
+type ThemeMode = "light" | "dark" | "system";
+type ActiveTheme = "light" | "dark";
+
+interface ThemeContextType {
+  // Current active theme
+  theme: ActiveTheme;
+
+  // User's theme preference
+  themeMode: ThemeMode;
+
+  // Active color scheme
+  colors: ColorScheme;
+
+  // Typography presets
+  typography: TypographyPresets;
+
+  // Theme actions
+  setTheme: (mode: ThemeMode) => void;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const THEME_STORAGE_KEY = "@fitai:theme";
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const systemColorScheme = useColorScheme();
+  const [themeMode, setThemeMode] = useState<ThemeMode>("system");
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Determine active theme based on mode and system preference
+  const getActiveTheme = (): ActiveTheme => {
+    if (themeMode === "system") {
+      return systemColorScheme === "dark" ? "dark" : "light";
+    }
+    return themeMode;
+  };
+
+  const activeTheme = getActiveTheme();
+  const colors = activeTheme === "dark" ? darkColors : lightColors;
+  const typography = createTypographyPresets(
+    colors.textPrimary,
+    colors.textSecondary,
+    colors.textTertiary,
+  );
+
+  // Load saved theme preference on mount
+  useEffect(() => {
+    const loadTheme = async () => {
+      try {
+        const savedTheme = await AsyncStorage.getItem(THEME_STORAGE_KEY);
+        if (savedTheme && ["light", "dark", "system"].includes(savedTheme)) {
+          setThemeMode(savedTheme as ThemeMode);
+        }
+      } catch (error) {
+        console.error("Failed to load theme preference:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadTheme();
+  }, []);
+
+  // Save theme preference when it changes
+  const setTheme = async (mode: ThemeMode) => {
+    try {
+      setThemeMode(mode);
+      await AsyncStorage.setItem(THEME_STORAGE_KEY, mode);
+    } catch (error) {
+      console.error("Failed to save theme preference:", error);
+    }
+  };
+
+  // Toggle between light and dark (sets explicit mode, not system)
+  const toggleTheme = () => {
+    const newMode = activeTheme === "dark" ? "light" : "dark";
+    setTheme(newMode);
+  };
+
+  // Don't render children until theme is loaded
+  if (isLoading) {
+    return null;
+  }
+
+  const value: ThemeContextType = {
+    theme: activeTheme,
+    themeMode,
+    colors,
+    typography,
+    setTheme,
+    toggleTheme,
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+/**
+ * Hook to access theme context
+ * @throws Error if used outside ThemeProvider
+ */
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}

apps/mobile/src/styles/colors.ts

@@ -0,0 +1,140 @@
+/**
+ * FitAI Color System
+ * Nord Color Palette - A minimal, arctic-inspired palette
+ * https://www.nordtheme.com/
+ */
+
+export interface ColorScheme {
+  // Primary Colors
+  primary: string;
+  primaryDark: string;
+  primaryLight: string;
+
+  // Accent Colors
+  accent: string;
+  terracotta: string;
+  sand: string;
+
+  // Status Colors
+  success: string;
+  warning: string;
+  danger: string;
+  info: string;
+
+  // Neutrals
+  background: string;
+  surface: string;
+  surfaceElevated: string;
+
+  // Text
+  textPrimary: string;
+  textSecondary: string;
+  textTertiary: string;
+
+  // Borders
+  border: string;
+  borderLight: string;
+
+  // Overlays
+  overlay: string;
+  overlayLight: string;
+
+  // Legacy compatibility (will be phased out)
+  white: string;
+  black: string;
+}
+
+/**
+ * Light Mode Color Palette
+ * Nord Snow Storm (light backgrounds) with Polar Night (dark text)
+ */
+export const lightColors: ColorScheme = {
+  // Primary Colors (Nord Frost - Aurora blue-green)
+  primary: "#88C0D0", // Nord Frost 8 (main actions, cyan)
+  primaryDark: "#5E81AC", // Nord Frost 10 (dark blue)
+  primaryLight: "#8FBCBB", // Nord Frost 7 (pale cyan)
+
+  // Accent Colors
+  accent: "#81A1C1", // Nord Frost 9 (blue-gray)
+  terracotta: "#D08770", // Nord Aurora 12 (orange - replaces terracotta)
+  sand: "#EBCB8B", // Nord Aurora 13 (yellow - warm accent)
+
+  // Status Colors
+  success: "#A3BE8C", // Nord Aurora 14 (green)
+  warning: "#EBCB8B", // Nord Aurora 13 (yellow)
+  danger: "#BF616A", // Nord Aurora 11 (red)
+  info: "#81A1C1", // Nord Frost 9 (blue)
+
+  // Neutrals (Snow Storm palette)
+  background: "#ECEFF4", // Nord Snow Storm 3 (lightest)
+  surface: "#E5E9F0", // Nord Snow Storm 2 (medium)
+  surfaceElevated: "#D8DEE9", // Nord Snow Storm 1 (slightly darker)
+
+  // Text (Polar Night palette)
+  textPrimary: "#2E3440", // Nord Polar Night 0 (darkest)
+  textSecondary: "#3B4252", // Nord Polar Night 1
+  textTertiary: "#4C566A", // Nord Polar Night 3
+
+  // Borders
+  border: "#D8DEE9", // Nord Snow Storm 1
+  borderLight: "#E5E9F0", // Nord Snow Storm 2
+
+  // Overlays
+  overlay: "rgba(46, 52, 64, 0.5)", // Polar Night 0
+  overlayLight: "rgba(46, 52, 64, 0.05)",
+
+  // Legacy
+  white: "#ECEFF4",
+  black: "#2E3440",
+};
+
+/**
+ * Dark Mode Color Palette
+ * Nord Polar Night (dark backgrounds) with Snow Storm (light text)
+ */
+export const darkColors: ColorScheme = {
+  // Primary Colors (Nord Frost - adjusted for dark mode)
+  primary: "#88C0D0", // Nord Frost 8 (cyan - brighter on dark)
+  primaryDark: "#5E81AC", // Nord Frost 10 (dark blue)
+  primaryLight: "#8FBCBB", // Nord Frost 7 (pale cyan)
+
+  // Accent Colors
+  accent: "#81A1C1", // Nord Frost 9 (blue-gray)
+  terracotta: "#D08770", // Nord Aurora 12 (orange)
+  sand: "#EBCB8B", // Nord Aurora 13 (yellow)
+
+  // Status Colors
+  success: "#A3BE8C", // Nord Aurora 14 (green)
+  warning: "#EBCB8B", // Nord Aurora 13 (yellow)
+  danger: "#BF616A", // Nord Aurora 11 (red)
+  info: "#81A1C1", // Nord Frost 9 (blue)
+
+  // Neutrals (Polar Night palette)
+  background: "#2E3440", // Nord Polar Night 0 (darkest)
+  surface: "#3B4252", // Nord Polar Night 1 (medium dark)
+  surfaceElevated: "#434C5E", // Nord Polar Night 2 (lighter)
+
+  // Text (Snow Storm palette)
+  textPrimary: "#ECEFF4", // Nord Snow Storm 3 (lightest)
+  textSecondary: "#E5E9F0", // Nord Snow Storm 2
+  textTertiary: "#D8DEE9", // Nord Snow Storm 1
+
+  // Borders
+  border: "#434C5E", // Nord Polar Night 2
+  borderLight: "#3B4252", // Nord Polar Night 1
+
+  // Overlays
+  overlay: "rgba(0, 0, 0, 0.6)",
+  overlayLight: "rgba(236, 239, 244, 0.05)", // Snow Storm 3
+
+  // Legacy
+  white: "#ECEFF4",
+  black: "#2E3440",
+};
+
+/**
+ * Get color scheme based on theme mode
+ */
+export const getColors = (mode: "light" | "dark"): ColorScheme => {
+  return mode === "dark" ? darkColors : lightColors;
+};

apps/mobile/src/styles/theme.ts

@@ -1,191 +1,159 @@
 /**
- * Modern Design System Theme
+ * FitAI Design System Theme
- * Centralized theme configuration with gradients, colors, shadows, and spacing
+ * Minimalist theme with light/dark mode support
+ * @deprecated Use useTheme() hook instead for dynamic theming
  */
 
+import { lightColors, darkColors } from "./colors";
+import { typography as typographySystem } from "./typography";
+
+/**
+ * Legacy theme object for backward compatibility
+ * New components should use useTheme() hook instead
+ */
 export const theme = {
-    // Color Palette
+  // Color Palette (light mode - for legacy components)
-    colors: {
+  colors: {
-        // Primary colors
+    ...lightColors,
-        primary: '#3b82f6',
-        primaryDark: '#2563eb',
-        primaryLight: '#60a5fa',
-        secondary: '#8b5cf6',
 
-        // Accent colors
+    // Legacy color mappings (deprecated - use new colors instead)
-        purple: '#8b5cf6',
+    secondary: "#8b5cf6", // Old purple - deprecated
-        purpleDark: '#7c3aed',
+    purple: "#A9B4A0", // Mapped to accent
-        pink: '#ec4899',
+    purpleDark: "#5A7A6E",
+    pink: "#C1876B", // Mapped to terracotta
+    successLight: "#8DB76A",
+    gray50: "#F2EFE9",
+    gray100: "#E8E4DF",
+    gray200: "#E8E4DF",
+    gray300: "#B8BFB5",
+    gray400: "#8B9A8F",
+    gray500: "#5C6B61",
+    gray600: "#5C6B61",
+    gray700: "#2C3731",
+    gray800: "#2C3731",
+    gray900: "#2C3731",
+  },
 
-        // Success
+  // Typography (updated to new system)
-        success: '#10b981',
+  typography: typographySystem,
-        successDark: '#059669',
-        successLight: '#34d399',
 
-        // Warning
+  // Spacing Scale (updated for minimalism)
-        warning: '#f59e0b',
+  spacing: {
-        warningDark: '#d97706',
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24, // Increased from 20
+    "2xl": 32, // Increased from 24
+    "3xl": 40, // Increased from 32
+    "4xl": 48, // New
+    "5xl": 64, // New
+  },
 
-        // Danger
+  // Border Radius (reduced for minimalism)
-        danger: '#ef4444',
+  borderRadius: {
-        dangerDark: '#dc2626',
+    sm: 4,
+    md: 6,
+    lg: 10,
+    xl: 12, // Reduced from 16
+    "2xl": 16, // Reduced from 20
+    "3xl": 20, // Reduced from 24
+    full: 9999,
+  },
 
-        // Neutrals
+  // Shadow System (simplified)
-        white: '#ffffff',
+  shadows: {
-        black: '#000000',
+    subtle: {
-        gray50: '#f9fafb',
+      shadowColor: "#000",
-        gray100: '#f3f4f6',
+      shadowOffset: { width: 0, height: 1 },
-        gray200: '#e5e7eb',
+      shadowOpacity: 0.05,
-        gray300: '#d1d5db',
+      shadowRadius: 3,
-        gray400: '#9ca3af',
+      elevation: 1,
-        gray500: '#6b7280',
-        gray600: '#4b5563',
-        gray700: '#374151',
-        gray800: '#1f2937',
-        gray900: '#111827',
-
-        // Backgrounds
-        background: '#f5f5f5',
-        backgroundDark: '#0f172a',
-        surface: '#ffffff',
-        surfaceDark: '#1e293b',
     },
-
+    medium: {
-    // Gradient Definitions
+      shadowColor: "#000",
-    gradients: {
+      shadowOffset: { width: 0, height: 2 },
-        primary: ['#3b82f6', '#8b5cf6'] as const,
+      shadowOpacity: 0.08,
-        primaryVertical: ['#3b82f6', '#2563eb'] as const,
+      shadowRadius: 8,
-        success: ['#10b981', '#059669'] as const,
+      elevation: 2,
-        warning: ['#f59e0b', '#d97706'] as const,
-        danger: ['#ef4444', '#ec4899'] as const,
-        purple: ['#8b5cf6', '#7c3aed'] as const,
-        ocean: ['#06b6d4', '#3b82f6'] as const,
-        sunset: ['#f59e0b', '#ef4444'] as const,
-        forest: ['#10b981', '#059669'] as const,
-        lavender: ['#a78bfa', '#ec4899'] as const,
-        dark: ['#1e293b', '#0f172a'] as const,
     },
-
+    strong: {
-    // Shadow System
+      shadowColor: "#000",
-    shadows: {
+      shadowOffset: { width: 0, height: 4 },
-        subtle: {
+      shadowOpacity: 0.12,
-            shadowColor: '#000',
+      shadowRadius: 16,
-            shadowOffset: { width: 0, height: 1 },
+      elevation: 4,
-            shadowOpacity: 0.05,
-            shadowRadius: 2,
-            elevation: 2,
-        },
-        medium: {
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.1,
-            shadowRadius: 4,
-            elevation: 3,
-        },
-        strong: {
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.15,
-            shadowRadius: 8,
-            elevation: 5,
-        },
-        glow: {
-            shadowColor: '#3b82f6',
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.3,
-            shadowRadius: 12,
-            elevation: 8,
-        },
-        glowDanger: {
-            shadowColor: '#ef4444',
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.3,
-            shadowRadius: 12,
-            elevation: 8,
-        },
     },
-
+    // Legacy glow shadows (deprecated - avoid in new designs)
-    // Typography
+    glow: {
-    typography: {
+      shadowColor: "#6B9080",
-        // Font sizes
+      shadowOffset: { width: 0, height: 4 },
-        fontSize: {
+      shadowOpacity: 0.2,
-            xs: 12,
+      shadowRadius: 12,
-            sm: 14,
+      elevation: 6,
-            base: 16,
-            lg: 18,
-            xl: 20,
-            '2xl': 24,
-            '3xl': 28,
-            '4xl': 32,
-            '5xl': 36,
-        },
-        // Font weights
-        fontWeight: {
-            normal: '400' as const,
-            medium: '500' as const,
-            semibold: '600' as const,
-            bold: '700' as const,
-            extrabold: '800' as const,
-        },
-        // Line heights
-        lineHeight: {
-            tight: 1.2,
-            normal: 1.5,
-            relaxed: 1.75,
-        },
     },
-
+    glowDanger: {
-    // Spacing Scale
+      shadowColor: "#B66B6B",
-    spacing: {
+      shadowOffset: { width: 0, height: 4 },
-        xs: 4,
+      shadowOpacity: 0.2,
-        sm: 8,
+      shadowRadius: 12,
-        md: 12,
+      elevation: 6,
-        lg: 16,
-        xl: 20,
-        '2xl': 24,
-        '3xl': 32,
-        '4xl': 40,
-        '5xl': 48,
     },
+  },
 
-    // Border Radius
+  // Animation Timing (simplified)
-    borderRadius: {
+  animation: {
-        sm: 4,
+    duration: {
-        md: 8,
+      fast: 200,
-        lg: 12,
+      normal: 300,
-        xl: 16,
+      slow: 500,
-        '2xl': 20,
-        '3xl': 24,
-        full: 9999,
     },
+  },
 
-    // Animation Timing
+  // Gradients (kept for legacy compatibility - should be avoided in new designs)
-    animation: {
+  gradients: {
-        duration: {
+    primary: ["#6B9080", "#8AAE9E"] as const,
-            fast: 150,
+    success: ["#7BA05B", "#8DB76A"] as const,
-            normal: 250,
+    warning: ["#D4A574", "#E0B886"] as const,
-            slow: 350,
+    danger: ["#B66B6B", "#C87D7D"] as const,
-        },
+    // Legacy gradients (deprecated)
-        easing: {
+    purple: ["#8b5cf6", "#7c3aed"] as const,
-            easeIn: 'ease-in',
+    ocean: ["#06b6d4", "#3b82f6"] as const,
-            easeOut: 'ease-out',
+    sunset: ["#f59e0b", "#ef4444"] as const,
-            easeInOut: 'ease-in-out',
+    forest: ["#10b981", "#059669"] as const,
-        },
+    lavender: ["#a78bfa", "#ec4899"] as const,
-    },
+    dark: ["#1e293b", "#0f172a"] as const,
+    primaryVertical: ["#6B9080", "#5A7A6E"] as const,
+  },
+};
 
-    // Glassmorphism
+/**
-    glass: {
+ * Dark theme object
-        light: {
+ * @deprecated Use useTheme() hook instead
-            backgroundColor: 'rgba(255, 255, 255, 0.7)',
+ */
-            borderWidth: 1,
+export const darkTheme = {
-            borderColor: 'rgba(255, 255, 255, 0.3)',
+  ...theme,
-        },
+  colors: {
-        dark: {
+    ...darkColors,
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+
-            borderWidth: 1,
+    // Legacy color mappings
-            borderColor: 'rgba(255, 255, 255, 0.1)',
+    secondary: "#8b5cf6", // Old purple - deprecated
-        },
+    purple: "#B5C2B0", // Mapped to dark accent
-    },
+    purpleDark: "#6B9080",
+    pink: "#D4A285", // Mapped to dark terracotta
+    successLight: "#8DB76A",
+    gray50: "#2F3432",
+    gray100: "#3A3F3C",
+    gray200: "#3A3F3C",
+    gray300: "#7A8379",
+    gray400: "#7A8379",
+    gray500: "#B8BFB5",
+    gray600: "#B8BFB5",
+    gray700: "#E8E6E1",
+    gray800: "#E8E6E1",
+    gray900: "#E8E6E1",
+  },
 };
 
 export type Theme = typeof theme;
+export type DarkTheme = typeof darkTheme;

apps/mobile/src/styles/typography.ts

@@ -0,0 +1,145 @@
+/**
+ * FitAI Typography System
+ * Minimalist typography with clear hierarchy using system fonts
+ */
+
+import { TextStyle } from "react-native";
+
+/**
+ * Font Sizes
+ * Refined scale with fewer sizes for clearer hierarchy
+ */
+export const fontSize = {
+  xs: 11,
+  sm: 13,
+  base: 15,
+  md: 17, // Body emphasis
+  lg: 20,
+  xl: 24,
+  "2xl": 28,
+  "3xl": 34,
+  "4xl": 40,
+} as const;
+
+/**
+ * Font Weights
+ */
+export const fontWeight = {
+  regular: "400" as TextStyle["fontWeight"],
+  medium: "500" as TextStyle["fontWeight"],
+  semibold: "600" as TextStyle["fontWeight"],
+  bold: "700" as TextStyle["fontWeight"],
+} as const;
+
+/**
+ * Line Heights
+ */
+export const lineHeight = {
+  tight: 1.2,
+  normal: 1.5,
+  relaxed: 1.7,
+} as const;
+
+/**
+ * Letter Spacing
+ */
+export const letterSpacing = {
+  tight: -0.5,
+  normal: 0,
+  wide: 0.5,
+  wider: 1,
+} as const;
+
+/**
+ * Typography Presets
+ * Ready-to-use text styles for common use cases
+ */
+export interface TypographyPresets {
+  h1: TextStyle;
+  h2: TextStyle;
+  h3: TextStyle;
+  body: TextStyle;
+  bodyEmphasis: TextStyle;
+  label: TextStyle;
+  stat: TextStyle;
+  caption: TextStyle;
+}
+
+export const createTypographyPresets = (
+  textPrimary: string,
+  textSecondary: string,
+  textTertiary: string,
+): TypographyPresets => ({
+  // Display Text (Screen Titles)
+  h1: {
+    fontSize: fontSize["3xl"],
+    fontWeight: fontWeight.bold,
+    letterSpacing: letterSpacing.tight,
+    lineHeight: fontSize["3xl"] * lineHeight.tight,
+    color: textPrimary,
+  },
+
+  // Section Headers
+  h2: {
+    fontSize: fontSize.xl,
+    fontWeight: fontWeight.semibold,
+    letterSpacing: -0.3,
+    color: textPrimary,
+  },
+
+  // Card Titles
+  h3: {
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.semibold,
+    color: textPrimary,
+  },
+
+  // Body Text
+  body: {
+    fontSize: fontSize.base,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.base * lineHeight.normal,
+    color: textSecondary,
+  },
+
+  // Emphasized Body
+  bodyEmphasis: {
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.medium,
+    lineHeight: fontSize.md * lineHeight.normal,
+    color: textPrimary,
+  },
+
+  // Labels (uppercase, spaced)
+  label: {
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.medium,
+    letterSpacing: letterSpacing.wide,
+    textTransform: "uppercase",
+    color: textTertiary,
+  },
+
+  // Stats/Numbers
+  stat: {
+    fontSize: fontSize["2xl"],
+    fontWeight: fontWeight.bold,
+    color: textPrimary,
+  },
+
+  // Caption/Small text
+  caption: {
+    fontSize: fontSize.xs,
+    fontWeight: fontWeight.regular,
+    color: textTertiary,
+  },
+});
+
+/**
+ * Typography utility object
+ */
+export const typography = {
+  fontSize,
+  fontWeight,
+  lineHeight,
+  letterSpacing,
+};

apps/mobile/src/utils/activityFeed.ts

@@ -0,0 +1,220 @@
+/**
+ * Activity Feed Utilities
+ *
+ * Combines multiple data sources (check-ins, goals, nutrition) into a unified activity feed
+ */
+
+import type { AttendanceStatistics } from "../api/types";
+import type { FitnessGoal } from "../services/fitnessGoals";
+
+export enum ActivityType {
+  GYM_CHECKIN = "gym_checkin",
+  GOAL_COMPLETED = "goal_completed",
+  GOAL_CREATED = "goal_created",
+  NUTRITION_MILESTONE = "nutrition_milestone",
+}
+
+export interface ActivityItem {
+  id: string;
+  type: ActivityType;
+  title: string;
+  timestamp: Date;
+  duration?: number; // in minutes
+  metadata?: Record<string, any>;
+}
+
+/**
+ * Convert attendance check-ins to activity items
+ */
+export function checkInsToActivities(
+  attendance: AttendanceStatistics,
+): ActivityItem[] {
+  return attendance.recentCheckIns.map((checkIn) => {
+    const checkInDate = new Date(checkIn.checkInTime);
+
+    return {
+      id: `checkin-${checkIn.id}`,
+      type: ActivityType.GYM_CHECKIN,
+      title: "Gym Check-in",
+      timestamp: checkInDate,
+      duration: checkIn.duration || undefined,
+      metadata: {
+        checkOutTime: checkIn.checkOutTime,
+      },
+    };
+  });
+}
+
+/**
+ * Convert completed goals to activity items
+ */
+export function completedGoalsToActivities(
+  goals: FitnessGoal[],
+): ActivityItem[] {
+  return goals
+    .filter((goal) => goal.status === "completed" && goal.completedDate)
+    .map((goal) => {
+      const completedDate = new Date(goal.completedDate!);
+
+      return {
+        id: `goal-completed-${goal.id}`,
+        type: ActivityType.GOAL_COMPLETED,
+        title: goal.title,
+        timestamp: completedDate,
+        metadata: {
+          goalType: goal.goalType,
+          priority: goal.priority,
+          targetValue: goal.targetValue,
+          unit: goal.unit,
+        },
+      };
+    });
+}
+
+/**
+ * Convert recently created goals to activity items
+ */
+export function newGoalsToActivities(
+  goals: FitnessGoal[],
+  daysBack: number = 7,
+): ActivityItem[] {
+  const cutoffDate = new Date();
+  cutoffDate.setDate(cutoffDate.getDate() - daysBack);
+
+  return goals
+    .filter((goal) => {
+      const createdDate = new Date(goal.createdAt);
+      return goal.status === "active" && createdDate > cutoffDate;
+    })
+    .map((goal) => {
+      const createdDate = new Date(goal.createdAt);
+
+      return {
+        id: `goal-created-${goal.id}`,
+        type: ActivityType.GOAL_CREATED,
+        title: goal.title,
+        timestamp: createdDate,
+        metadata: {
+          goalType: goal.goalType,
+          priority: goal.priority,
+        },
+      };
+    });
+}
+
+/**
+ * Combine and sort all activities by timestamp (most recent first)
+ */
+export function combineActivities(
+  ...activityGroups: ActivityItem[][]
+): ActivityItem[] {
+  const allActivities = activityGroups.flat();
+
+  return allActivities.sort(
+    (a, b) => b.timestamp.getTime() - a.timestamp.getTime(),
+  );
+}
+
+/**
+ * Get recent activities limited to a specific count
+ */
+export function getRecentActivities(
+  activities: ActivityItem[],
+  limit: number = 5,
+): ActivityItem[] {
+  return activities.slice(0, limit);
+}
+
+/**
+ * Format activity timestamp for display
+ */
+export function formatActivityTime(timestamp: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - timestamp.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  // Today
+  if (diffDays === 0) {
+    if (diffMins < 60) {
+      return diffMins <= 1 ? "Just now" : `${diffMins}m ago`;
+    }
+    return `Today, ${timestamp.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    })}`;
+  }
+
+  // Yesterday
+  if (diffDays === 1) {
+    return `Yesterday, ${timestamp.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    })}`;
+  }
+
+  // This week (within 7 days)
+  if (diffDays < 7) {
+    return `${diffDays}d ago`;
+  }
+
+  // Older
+  return timestamp.toLocaleDateString();
+}
+
+/**
+ * Format duration in minutes to human-readable string
+ */
+export function formatDuration(minutes?: number): string | undefined {
+  if (!minutes) return undefined;
+
+  if (minutes < 60) {
+    return `${minutes}m`;
+  }
+
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+
+  if (mins === 0) {
+    return `${hours}h`;
+  }
+
+  return `${hours}h ${mins}m`;
+}
+
+/**
+ * Get icon name for activity type
+ */
+export function getActivityIcon(type: ActivityType): string {
+  switch (type) {
+    case ActivityType.GYM_CHECKIN:
+      return "barbell";
+    case ActivityType.GOAL_COMPLETED:
+      return "trophy";
+    case ActivityType.GOAL_CREATED:
+      return "flag";
+    case ActivityType.NUTRITION_MILESTONE:
+      return "restaurant";
+    default:
+      return "checkmark-circle";
+  }
+}
+
+/**
+ * Get activity title prefix/emoji
+ */
+export function getActivityEmoji(type: ActivityType): string {
+  switch (type) {
+    case ActivityType.GYM_CHECKIN:
+      return "💪";
+    case ActivityType.GOAL_COMPLETED:
+      return "🏆";
+    case ActivityType.GOAL_CREATED:
+      return "🎯";
+    case ActivityType.NUTRITION_MILESTONE:
+      return "🍽️";
+    default:
+      return "✅";
+  }
+}