refactor screens, navigation & player for new architecture
Simplify Home, Activity, Profile, Complete, Player, and Program screens to work with the new Supabase-driven data layer. Update root and tab layouts. Add Settings, Terms, and Zone routes. Add OfflineBanner component and progressStore. Update all player sub-components to use the refreshed design system tokens.
This commit is contained in:
Millian Lamiaux
@@ -1,580 +1,179 @@
|
||||
/**
|
||||
* TabataFit Activity Screen
|
||||
* Premium stats dashboard — streak, rings, weekly chart, history
|
||||
* TabataGo Activity Tab
|
||||
* Streak, weekly sessions, program history — driven by progressStore.
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Dimensions, Pressable } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { Icon, type IconName } from '@/src/shared/components/Icon'
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import { View, Text, StyleSheet, ScrollView } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useActivityStore, getWeeklyActivity } from '@/src/shared/stores'
|
||||
import { getWorkoutById } from '@/src/shared/data'
|
||||
import { ACHIEVEMENTS } from '@/src/shared/data'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
import { NativeGauge } from '@/src/shared/components/native'
|
||||
import { NativeButton } from '@/src/shared/components/native'
|
||||
|
||||
import { useThemeColors, BRAND, PHASE } from '@/src/shared/theme'
|
||||
import { Icon } from '@/src/shared/components/Icon'
|
||||
import { useProgressStore } from '@/src/shared/stores/progressStore'
|
||||
import { useThemeColors } from '@/src/shared/theme'
|
||||
import type { ThemeColors } from '@/src/shared/theme/types'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
import { GREEN, NAVY, BORDER_COLORS, TEXT } from '@/src/shared/constants/colors'
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window')
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STAT RING — Native SwiftUI Gauge
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function StatRing({
|
||||
value,
|
||||
max,
|
||||
color,
|
||||
size = 52,
|
||||
}: {
|
||||
value: number
|
||||
max: number
|
||||
color: string
|
||||
size?: number
|
||||
}) {
|
||||
return (
|
||||
<NativeGauge value={value} maxValue={max} color={color} size={size} />
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STAT CARD
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function StatCard({
|
||||
label,
|
||||
value,
|
||||
max,
|
||||
color,
|
||||
icon,
|
||||
}: {
|
||||
label: string
|
||||
value: number
|
||||
max: number
|
||||
color: string
|
||||
icon: IconName
|
||||
}) {
|
||||
const colors = useThemeColors()
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
return (
|
||||
<View style={styles.statCard}>
|
||||
<View style={styles.statCardInner}>
|
||||
<StatRing value={value} max={max} color={color} size={52} />
|
||||
<View style={{ flex: 1, marginLeft: SPACING[3] }}>
|
||||
<StyledText size={24} weight="bold" color={colors.text.primary}>
|
||||
{String(value)}
|
||||
</StyledText>
|
||||
<StyledText size={12} color={colors.text.tertiary}>
|
||||
{label}
|
||||
</StyledText>
|
||||
</View>
|
||||
<Icon name={icon} size={18} tintColor={color} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// WEEKLY BAR
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function WeeklyBar({
|
||||
day,
|
||||
completed,
|
||||
isToday,
|
||||
}: {
|
||||
day: string
|
||||
completed: boolean
|
||||
isToday: boolean
|
||||
}) {
|
||||
const colors = useThemeColors()
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
return (
|
||||
<View style={styles.weekBarColumn}>
|
||||
<View style={[styles.weekBar, completed && styles.weekBarFilled]} />
|
||||
<StyledText
|
||||
size={11}
|
||||
weight={isToday ? 'bold' : 'regular'}
|
||||
color={isToday ? colors.text.primary : colors.text.hint}
|
||||
>
|
||||
{day}
|
||||
</StyledText>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// EMPTY STATE
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function EmptyState({ onStartWorkout }: { onStartWorkout: () => void }) {
|
||||
const { t } = useTranslation()
|
||||
const colors = useThemeColors()
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
|
||||
return (
|
||||
<View style={styles.emptyState}>
|
||||
<View style={styles.emptyIconCircle}>
|
||||
<Icon name="flame" size={48} tintColor={GREEN[500]} />
|
||||
</View>
|
||||
<StyledText size={22} weight="bold" color={colors.text.primary} style={styles.emptyTitle}>
|
||||
{t('screens:activity.emptyTitle')}
|
||||
</StyledText>
|
||||
<StyledText size={15} color={colors.text.tertiary} style={styles.emptySubtitle}>
|
||||
{t('screens:activity.emptySubtitle')}
|
||||
</StyledText>
|
||||
<View style={{ width: '100%', alignItems: 'center' }}>
|
||||
<NativeButton
|
||||
variant="primary"
|
||||
title={t('screens:activity.startFirstWorkout')}
|
||||
onPress={onStartWorkout}
|
||||
systemImage="play.fill"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const DAY_KEYS = ['days.sun', 'days.mon', 'days.tue', 'days.wed', 'days.thu', 'days.fri', 'days.sat'] as const
|
||||
import { GREEN, NAVY, TEXT, BORDER_COLORS } from '@/src/shared/constants/colors'
|
||||
|
||||
export default function ActivityScreen() {
|
||||
const { t } = useTranslation()
|
||||
const insets = useSafeAreaInsets()
|
||||
const router = useRouter()
|
||||
const colors = useThemeColors()
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
const streak = useActivityStore((s) => s.streak)
|
||||
const history = useActivityStore((s) => s.history)
|
||||
const totalWorkouts = history.length
|
||||
const totalMinutes = useMemo(() => history.reduce((sum, r) => sum + r.durationMinutes, 0), [history])
|
||||
const totalCalories = useMemo(() => history.reduce((sum, r) => sum + r.calories, 0), [history])
|
||||
const recentWorkouts = useMemo(() => history.slice(0, 5), [history])
|
||||
const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])
|
||||
|
||||
const today = new Date().getDay() // 0=Sun
|
||||
const history = useProgressStore(s => s.history)
|
||||
const streak = useProgressStore(s => s.streak)
|
||||
const weeklyCount = useProgressStore(s => s.getWeeklyCount())
|
||||
const completedCount = useProgressStore(s => s.getCompletedCount())
|
||||
|
||||
// Check achievements
|
||||
const unlockedAchievements = ACHIEVEMENTS.filter(a => {
|
||||
switch (a.type) {
|
||||
case 'workouts': return totalWorkouts >= a.requirement
|
||||
case 'streak': return streak.longest >= a.requirement
|
||||
case 'minutes': return totalMinutes >= a.requirement
|
||||
case 'calories': return totalCalories >= a.requirement
|
||||
default: return false
|
||||
}
|
||||
})
|
||||
const displayAchievements = ACHIEVEMENTS.slice(0, 4).map(a => ({
|
||||
...a,
|
||||
unlocked: unlockedAchievements.some(u => u.id === a.id),
|
||||
}))
|
||||
|
||||
const formatDate = (timestamp: number) => {
|
||||
const now = Date.now()
|
||||
const diff = now - timestamp
|
||||
if (diff < 86400000) return t('screens:activity.today')
|
||||
if (diff < 172800000) return t('screens:activity.yesterday')
|
||||
return t('screens:activity.daysAgo', { count: Math.floor(diff / 86400000) })
|
||||
}
|
||||
const totalMinutes = useMemo(
|
||||
() => history.reduce((sum, s) => sum + Math.round(s.durationSeconds / 60), 0),
|
||||
[history],
|
||||
)
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 20 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header */}
|
||||
<StyledText
|
||||
size={34}
|
||||
weight="bold"
|
||||
color={colors.text.primary}
|
||||
style={{ marginBottom: SPACING[6] }}
|
||||
>
|
||||
{t('screens:activity.title')}
|
||||
</StyledText>
|
||||
<ScrollView
|
||||
style={styles.container}
|
||||
contentContainerStyle={[styles.content, { paddingTop: insets.top + SPACING[4], paddingBottom: insets.bottom + SPACING[6] }]}
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
>
|
||||
<Text style={styles.title}>{t('screens:tabs.progression')}</Text>
|
||||
|
||||
{/* Empty state when no history */}
|
||||
{history.length === 0 ? (
|
||||
<EmptyState onStartWorkout={() => router.push('/(tabs)' as any)} />
|
||||
) : (
|
||||
<>
|
||||
{/* Streak Banner */}
|
||||
<View style={styles.streakBanner}>
|
||||
<View style={styles.streakRow}>
|
||||
<View style={styles.streakIconWrap}>
|
||||
<Icon name="flame.fill" size={28} tintColor={TEXT.PRIMARY} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<StyledText size={28} weight="bold" color={TEXT.PRIMARY}>
|
||||
{String(streak.current || 0)}
|
||||
</StyledText>
|
||||
<StyledText size={13} color={TEXT.PRIMARY}>
|
||||
{t('screens:activity.dayStreak')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.streakMeta}>
|
||||
<StyledText size={11} color={TEXT.SECONDARY}>
|
||||
{t('screens:activity.longest')}
|
||||
</StyledText>
|
||||
<StyledText size={20} weight="bold" color={TEXT.PRIMARY}>
|
||||
{String(streak.longest)}
|
||||
</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* Streak hero */}
|
||||
<View style={styles.streakHero}>
|
||||
<Icon name="flame.fill" size={32} tintColor={GREEN[500]} />
|
||||
<Text selectable style={styles.streakCount}>{streak.current}</Text>
|
||||
<Text style={styles.streakLabel}>{t('screens:activity.dayStreak')}</Text>
|
||||
<Text style={styles.streakRecord}>
|
||||
{t('screens:activity.longest')}: {streak.longest}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Stats Grid — 2x2 */}
|
||||
<View style={styles.statsGrid}>
|
||||
<StatCard
|
||||
label={t('screens:activity.workouts')}
|
||||
value={totalWorkouts}
|
||||
max={100}
|
||||
color={GREEN[500]}
|
||||
icon="dumbbell"
|
||||
/>
|
||||
<StatCard
|
||||
label={t('screens:activity.minutes')}
|
||||
value={totalMinutes}
|
||||
max={300}
|
||||
color={PHASE.REST}
|
||||
icon="clock"
|
||||
/>
|
||||
<StatCard
|
||||
label={t('screens:activity.calories')}
|
||||
value={totalCalories}
|
||||
max={5000}
|
||||
color={GREEN[600]}
|
||||
icon="bolt"
|
||||
/>
|
||||
<StatCard
|
||||
label={t('screens:activity.bestStreak')}
|
||||
value={streak.longest}
|
||||
max={30}
|
||||
color={BRAND.SUCCESS}
|
||||
icon="arrow.up.right"
|
||||
/>
|
||||
</View>
|
||||
{/* Stats grid */}
|
||||
<View style={styles.grid}>
|
||||
<StatCard
|
||||
icon="checkmark.circle.fill"
|
||||
value={completedCount}
|
||||
label={t('screens:programs.completed')}
|
||||
color={GREEN[500]}
|
||||
/>
|
||||
<StatCard
|
||||
icon="calendar"
|
||||
value={weeklyCount}
|
||||
label={t('screens:activity.thisWeek')}
|
||||
color="#5AC8FA"
|
||||
/>
|
||||
<StatCard
|
||||
icon="clock.fill"
|
||||
value={totalMinutes}
|
||||
label={t('screens:player.minutes')}
|
||||
color="#FF6B35"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* This Week */}
|
||||
<View style={styles.section}>
|
||||
<StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
|
||||
{t('screens:activity.thisWeek')}
|
||||
</StyledText>
|
||||
<View style={styles.weekCard}>
|
||||
<View style={styles.weekBarsRow}>
|
||||
{weeklyActivity.map((d, i) => (
|
||||
<WeeklyBar
|
||||
key={i}
|
||||
day={t(DAY_KEYS[i])}
|
||||
completed={d.completed}
|
||||
isToday={i === today}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<View style={styles.weekSummary}>
|
||||
<StyledText size={13} color={colors.text.tertiary}>
|
||||
{t('screens:activity.ofDays', { completed: weeklyActivity.filter(d => d.completed).length })}
|
||||
</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Recent Workouts */}
|
||||
{recentWorkouts.length > 0 && (
|
||||
<View style={styles.section}>
|
||||
<StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
|
||||
{t('screens:activity.recent')}
|
||||
</StyledText>
|
||||
<View style={styles.recentCard}>
|
||||
{recentWorkouts.map((result, idx) => {
|
||||
const workout = getWorkoutById(result.workoutId)
|
||||
const workoutTitle = workout ? t(`content:workouts.${workout.id}`, { defaultValue: workout.title }) : t('screens:activity.workouts')
|
||||
return (
|
||||
<View key={result.id}>
|
||||
<View style={styles.recentRow}>
|
||||
<View style={styles.recentDot}>
|
||||
<View style={[styles.dot, { backgroundColor: GREEN[500] }]} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<StyledText size={15} weight="semibold" color={colors.text.primary}>
|
||||
{workoutTitle}
|
||||
</StyledText>
|
||||
<StyledText size={12} color={colors.text.tertiary}>
|
||||
{formatDate(result.completedAt) + ' \u00B7 ' + t('units.minUnit', { count: result.durationMinutes })}
|
||||
</StyledText>
|
||||
</View>
|
||||
<StyledText size={14} weight="semibold" color={GREEN[500]}>
|
||||
{t('units.calUnit', { count: result.calories })}
|
||||
</StyledText>
|
||||
</View>
|
||||
{idx < recentWorkouts.length - 1 && <View style={styles.recentDivider} />}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Achievements */}
|
||||
<View style={styles.section}>
|
||||
<StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
|
||||
{t('screens:activity.achievements')}
|
||||
</StyledText>
|
||||
<View style={styles.achievementsRow}>
|
||||
{displayAchievements.map((a) => (
|
||||
<View key={a.id} style={styles.achievementCard}>
|
||||
<View
|
||||
style={[
|
||||
styles.achievementIcon,
|
||||
a.unlocked
|
||||
? { backgroundColor: GREEN.DIM }
|
||||
: { backgroundColor: colors.bg.overlay1 },
|
||||
]}
|
||||
>
|
||||
<Icon
|
||||
name={a.unlocked ? 'trophy.fill' : 'lock.fill'}
|
||||
size={22}
|
||||
tintColor={a.unlocked ? GREEN[500] : colors.text.hint}
|
||||
/>
|
||||
</View>
|
||||
<StyledText
|
||||
size={11}
|
||||
weight="semibold"
|
||||
color={a.unlocked ? colors.text.primary : colors.text.hint}
|
||||
numberOfLines={1}
|
||||
style={{ marginTop: SPACING[2], textAlign: 'center' }}
|
||||
>
|
||||
{t(`content:achievements.${a.id}.title`, { defaultValue: a.title })}
|
||||
</StyledText>
|
||||
{/* Recent history */}
|
||||
{history.length > 0 && (
|
||||
<View style={styles.historySection}>
|
||||
<Text style={styles.sectionTitle}>{t('screens:activity.recent')}</Text>
|
||||
{history.slice(0, 10).map((session, i) => (
|
||||
<View key={i} style={styles.historyRow}>
|
||||
<Icon name="checkmark.circle.fill" size={18} tintColor={GREEN[500]} />
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.historyTitle} numberOfLines={1}>{session.programId}</Text>
|
||||
<Text style={styles.historyMeta}>
|
||||
{Math.round(session.durationSeconds / 60)} min
|
||||
{' · '}
|
||||
{new Date(session.completedAt).toLocaleDateString()}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
{history.length === 0 && (
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={styles.emptyTitle}>{t('screens:activity.emptyTitle')}</Text>
|
||||
<Text style={styles.emptySubtitle}>{t('screens:activity.emptySubtitle')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({ icon, value, label, color }: { icon: any; value: number; label: string; color: string }) {
|
||||
return (
|
||||
<View style={cardStyles.card}>
|
||||
<Icon name={icon} size={22} tintColor={color} />
|
||||
<Text selectable style={cardStyles.value}>{value}</Text>
|
||||
<Text style={cardStyles.label}>{label}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const CARD_HALF = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
|
||||
const cardStyles = StyleSheet.create({
|
||||
card: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
padding: SPACING[3],
|
||||
borderRadius: RADIUS.LG,
|
||||
backgroundColor: NAVY[800],
|
||||
borderWidth: 1,
|
||||
borderColor: BORDER_COLORS.DIM,
|
||||
gap: SPACING[1],
|
||||
borderCurve: 'continuous',
|
||||
},
|
||||
value: { ...TYPOGRAPHY.TITLE_2, color: TEXT.PRIMARY, fontVariant: ['tabular-nums'] },
|
||||
label: { ...TYPOGRAPHY.CAPTION_2, color: TEXT.TERTIARY, textAlign: 'center' },
|
||||
})
|
||||
|
||||
function createStyles(colors: ThemeColors) {
|
||||
return StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.bg.base,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
container: { flex: 1, backgroundColor: colors.bg.base },
|
||||
content: { paddingHorizontal: LAYOUT.SCREEN_PADDING },
|
||||
|
||||
// Streak
|
||||
streakBanner: {
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[5],
|
||||
backgroundColor: GREEN[500],
|
||||
title: { ...TYPOGRAPHY.LARGE_TITLE, color: TEXT.PRIMARY, marginBottom: SPACING[5] },
|
||||
|
||||
streakHero: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[6],
|
||||
marginBottom: SPACING[4],
|
||||
backgroundColor: NAVY[800],
|
||||
borderRadius: RADIUS.XL,
|
||||
borderWidth: 1,
|
||||
borderColor: BORDER_COLORS.DIM,
|
||||
gap: SPACING[1],
|
||||
},
|
||||
streakRow: {
|
||||
streakCount: { ...TYPOGRAPHY.LARGE_TITLE, color: TEXT.PRIMARY, fontSize: 56, fontVariant: ['tabular-nums'] },
|
||||
streakLabel: { ...TYPOGRAPHY.HEADLINE, color: TEXT.SECONDARY },
|
||||
streakRecord: { ...TYPOGRAPHY.CAPTION_1, color: TEXT.TERTIARY, marginTop: SPACING[1] },
|
||||
|
||||
grid: { flexDirection: 'row', gap: SPACING[3], marginBottom: SPACING[6] },
|
||||
|
||||
historySection: { gap: SPACING[2] },
|
||||
sectionTitle: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
color: TEXT.TERTIARY,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
marginBottom: SPACING[1],
|
||||
},
|
||||
historyRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: SPACING[5],
|
||||
paddingVertical: SPACING[5],
|
||||
gap: SPACING[4],
|
||||
},
|
||||
streakIconWrap: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: RADIUS.FULL,
|
||||
backgroundColor: NAVY[900],
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
streakMeta: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: NAVY[900],
|
||||
paddingHorizontal: SPACING[4],
|
||||
paddingVertical: SPACING[2],
|
||||
gap: SPACING[3],
|
||||
padding: SPACING[3],
|
||||
backgroundColor: colors.surface.default.backgroundColor,
|
||||
borderRadius: RADIUS.MD,
|
||||
},
|
||||
|
||||
// Stats 2x2
|
||||
statsGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[3],
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
statCard: {
|
||||
width: CARD_HALF,
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border.dim,
|
||||
backgroundColor: NAVY[800],
|
||||
},
|
||||
statCardInner: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: SPACING[4],
|
||||
borderColor: colors.surface.default.borderColor,
|
||||
},
|
||||
historyTitle: { ...TYPOGRAPHY.SUBHEADLINE, color: TEXT.PRIMARY },
|
||||
historyMeta: { ...TYPOGRAPHY.CAPTION_1, color: TEXT.TERTIARY, marginTop: 2 },
|
||||
|
||||
// Section
|
||||
section: {
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
|
||||
// Weekly
|
||||
weekCard: {
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border.dim,
|
||||
backgroundColor: NAVY[800],
|
||||
paddingTop: SPACING[5],
|
||||
paddingBottom: SPACING[4],
|
||||
},
|
||||
weekBarsRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'flex-end',
|
||||
paddingHorizontal: SPACING[4],
|
||||
height: 100,
|
||||
},
|
||||
weekBarColumn: {
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
gap: SPACING[2],
|
||||
},
|
||||
weekBar: {
|
||||
width: 24,
|
||||
height: 60,
|
||||
borderRadius: RADIUS.SM,
|
||||
backgroundColor: colors.bg.overlay2,
|
||||
},
|
||||
weekBarFilled: {
|
||||
backgroundColor: GREEN[500],
|
||||
},
|
||||
weekSummary: {
|
||||
alignItems: 'center',
|
||||
marginTop: SPACING[3],
|
||||
paddingTop: SPACING[3],
|
||||
borderTopWidth: StyleSheet.hairlineWidth,
|
||||
borderTopColor: colors.bg.overlay2,
|
||||
marginHorizontal: SPACING[4],
|
||||
},
|
||||
|
||||
// Recent
|
||||
recentCard: {
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border.dim,
|
||||
backgroundColor: NAVY[800],
|
||||
paddingVertical: SPACING[2],
|
||||
},
|
||||
recentRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: SPACING[4],
|
||||
paddingVertical: SPACING[3],
|
||||
},
|
||||
recentDot: {
|
||||
width: 24,
|
||||
alignItems: 'center',
|
||||
marginRight: SPACING[3],
|
||||
},
|
||||
dot: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
recentDivider: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
backgroundColor: colors.border.dim,
|
||||
marginLeft: SPACING[4] + 24 + SPACING[3],
|
||||
},
|
||||
|
||||
// Achievements
|
||||
achievementsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: SPACING[3],
|
||||
},
|
||||
achievementCard: {
|
||||
flex: 1,
|
||||
aspectRatio: 0.9,
|
||||
borderRadius: RADIUS.LG,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border.dim,
|
||||
backgroundColor: NAVY[800],
|
||||
overflow: 'hidden',
|
||||
paddingHorizontal: SPACING[1],
|
||||
},
|
||||
achievementIcon: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: RADIUS.FULL,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
// Empty State
|
||||
emptyState: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingTop: SPACING[10],
|
||||
paddingHorizontal: SPACING[6],
|
||||
},
|
||||
emptyIconCircle: {
|
||||
width: 96,
|
||||
height: 96,
|
||||
borderRadius: RADIUS.FULL,
|
||||
backgroundColor: GREEN.DIM,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
emptyTitle: {
|
||||
textAlign: 'center' as const,
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
emptySubtitle: {
|
||||
textAlign: 'center' as const,
|
||||
lineHeight: 22,
|
||||
marginBottom: SPACING[8],
|
||||
},
|
||||
emptyCtaButton: {
|
||||
flexDirection: 'row' as const,
|
||||
alignItems: 'center' as const,
|
||||
justifyContent: 'center' as const,
|
||||
height: 52,
|
||||
paddingHorizontal: SPACING[8],
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden' as const,
|
||||
backgroundColor: GREEN[500],
|
||||
},
|
||||
emptyState: { alignItems: 'center', marginTop: SPACING[12], gap: SPACING[2] },
|
||||
emptyTitle: { ...TYPOGRAPHY.HEADLINE, color: TEXT.PRIMARY },
|
||||
emptySubtitle: { ...TYPOGRAPHY.BODY, color: TEXT.TERTIARY, textAlign: 'center' },
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user