Compare commits
2 Commits
aba9b1395b
...
064dafad57
| Author | SHA1 | Date | |
|---|---|---|---|
| 064dafad57 | |||
| 5d6166df1b |
Binary file not shown.
@ -103,20 +103,22 @@ export default function AttendanceScreen() {
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={[typography.h1, { color: colors.textPrimary }]}>
|
||||
📍 Attendance
|
||||
<Text
|
||||
style={[typography.h1, { color: colors.textPrimary, fontSize: 32 }]}
|
||||
>
|
||||
Attendance
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary, marginTop: 4 },
|
||||
{ color: colors.textSecondary, marginTop: 8 },
|
||||
]}
|
||||
>
|
||||
{activeCheckIn
|
||||
? "You're crushing it today! 💪"
|
||||
? "You're crushing it today!"
|
||||
: history.length === 0
|
||||
? "Ready to start your fitness journey? 🚀"
|
||||
: "Track your gym visits and build streaks! 🔥"}
|
||||
? "Ready to start your fitness journey?"
|
||||
: "Track your gym visits and build streaks!"}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
|
||||
@ -150,21 +150,26 @@ export default function GoalsScreen() {
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View>
|
||||
<Text style={[typography.h1, { color: colors.textPrimary }]}>
|
||||
🎯 Fitness Goals
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text
|
||||
style={[
|
||||
typography.h1,
|
||||
{ color: colors.textPrimary, fontSize: 32 },
|
||||
]}
|
||||
>
|
||||
Goals
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary, marginTop: 4 },
|
||||
{ color: colors.textSecondary, marginTop: 8 },
|
||||
]}
|
||||
>
|
||||
{activeGoals.length === 0
|
||||
? "Ready to crush some goals? 💪"
|
||||
? "Ready to crush some goals?"
|
||||
: activeGoals.length === 1
|
||||
? "You're on a mission! Keep it up! 🚀"
|
||||
: `${activeGoals.length} goals in progress. Legend! ⭐`}
|
||||
? "You're on a mission! Keep it up!"
|
||||
: `${activeGoals.length} goals in progress. Let's go!`}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
@ -183,45 +188,69 @@ export default function GoalsScreen() {
|
||||
{goals && goals.length > 0 && (
|
||||
<View style={styles.section}>
|
||||
<View style={styles.statsRow}>
|
||||
<MinimalCard variant="bordered" style={styles.statCard}>
|
||||
<Text style={[typography.stat, { color: colors.primary }]}>
|
||||
<MinimalCard
|
||||
variant="elevated"
|
||||
style={[styles.statCard, { backgroundColor: colors.primary }]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.white, fontSize: 36 },
|
||||
]}
|
||||
>
|
||||
{activeGoals.length}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 4 },
|
||||
typography.label,
|
||||
{ color: "rgba(255,255,255,0.8)", marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
🎯 Active
|
||||
ACTIVE
|
||||
</Text>
|
||||
</MinimalCard>
|
||||
|
||||
<MinimalCard variant="bordered" style={styles.statCard}>
|
||||
<Text style={[typography.stat, { color: colors.success }]}>
|
||||
<MinimalCard
|
||||
variant="elevated"
|
||||
style={[styles.statCard, { backgroundColor: colors.success }]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.white, fontSize: 36 },
|
||||
]}
|
||||
>
|
||||
{completedGoals.length}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 4 },
|
||||
typography.label,
|
||||
{ color: "rgba(255,255,255,0.8)", marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
{completedGoals.length >= 5 ? "🏆" : "✅"} Completed
|
||||
COMPLETED
|
||||
</Text>
|
||||
</MinimalCard>
|
||||
|
||||
<MinimalCard variant="bordered" style={styles.statCard}>
|
||||
<Text style={[typography.stat, { color: colors.textPrimary }]}>
|
||||
<MinimalCard
|
||||
variant="elevated"
|
||||
style={[styles.statCard, { backgroundColor: colors.accent }]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.white, fontSize: 36 },
|
||||
]}
|
||||
>
|
||||
{avgProgress}%
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 4 },
|
||||
typography.label,
|
||||
{ color: "rgba(255,255,255,0.8)", marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
{avgProgress >= 75 ? "🔥" : "📊"} Progress
|
||||
PROGRESS
|
||||
</Text>
|
||||
</MinimalCard>
|
||||
</View>
|
||||
@ -229,66 +258,104 @@ export default function GoalsScreen() {
|
||||
)}
|
||||
|
||||
{/* Analytics Section */}
|
||||
{statistics && (
|
||||
<View style={styles.section}>
|
||||
<MinimalCard variant="default">
|
||||
{statistics &&
|
||||
(statistics.weeklyTrend.length > 0 ||
|
||||
statistics.goals.goalsByType.length > 0) && (
|
||||
<View style={styles.section}>
|
||||
<TouchableOpacity
|
||||
style={styles.analyticsHeader}
|
||||
onPress={() => setShowAnalytics(!showAnalytics)}
|
||||
activeOpacity={0.7}
|
||||
activeOpacity={0.85}
|
||||
>
|
||||
<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={showAnalytics ? "chevron-up" : "chevron-down"}
|
||||
size={20}
|
||||
color={colors.textTertiary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<MinimalCard variant="elevated" style={styles.analyticsCard}>
|
||||
<View style={styles.analyticsHeader}>
|
||||
<View style={styles.analyticsHeaderLeft}>
|
||||
<View
|
||||
style={[
|
||||
styles.analyticsIcon,
|
||||
{ backgroundColor: `${colors.primary}15` },
|
||||
]}
|
||||
>
|
||||
<Ionicons
|
||||
name="bar-chart"
|
||||
size={24}
|
||||
color={colors.primary}
|
||||
/>
|
||||
</View>
|
||||
<View>
|
||||
<Text
|
||||
style={[typography.h3, { color: colors.textPrimary }]}
|
||||
>
|
||||
Progress Analytics
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 2 },
|
||||
]}
|
||||
>
|
||||
{showAnalytics ? "Tap to collapse" : "Tap to expand"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.analyticsToggle,
|
||||
{ backgroundColor: colors.surfaceElevated },
|
||||
]}
|
||||
>
|
||||
<Ionicons
|
||||
name={showAnalytics ? "chevron-up" : "chevron-down"}
|
||||
size={20}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{showAnalytics && (
|
||||
<View
|
||||
style={[
|
||||
styles.analyticsContent,
|
||||
{ borderTopColor: colors.border },
|
||||
]}
|
||||
>
|
||||
{statistics.weeklyTrend.length > 0 && (
|
||||
<WeeklyProgressChart
|
||||
weeklyData={statistics.weeklyTrend}
|
||||
title="8-Week Trend"
|
||||
/>
|
||||
{showAnalytics && (
|
||||
<View style={styles.analyticsContent}>
|
||||
{statistics.weeklyTrend.length > 0 && (
|
||||
<View style={styles.chartSection}>
|
||||
<Text
|
||||
style={[
|
||||
typography.h4,
|
||||
{ color: colors.textPrimary, marginBottom: 16 },
|
||||
]}
|
||||
>
|
||||
Weekly Trend
|
||||
</Text>
|
||||
<WeeklyProgressChart
|
||||
weeklyData={statistics.weeklyTrend}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{statistics.goals.goalsByType.length > 0 && (
|
||||
<View style={styles.chartSection}>
|
||||
<Text
|
||||
style={[
|
||||
typography.h4,
|
||||
{ color: colors.textPrimary, marginBottom: 16 },
|
||||
]}
|
||||
>
|
||||
Goals by Type
|
||||
</Text>
|
||||
<GoalTypeBreakdownChart
|
||||
data={statistics.goals.goalsByType}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
{statistics.goals.goalsByType.length > 0 && (
|
||||
<GoalTypeBreakdownChart
|
||||
data={statistics.goals.goalsByType}
|
||||
title="Goals by Type"
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</MinimalCard>
|
||||
</View>
|
||||
)}
|
||||
</MinimalCard>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Active Goals */}
|
||||
<View style={styles.section}>
|
||||
<SectionHeader
|
||||
title={`🚀 Active Goals (${activeGoals.length})`}
|
||||
actionLabel="Add New"
|
||||
title={`Active Goals (${activeGoals.length})`}
|
||||
subtitle="Keep pushing forward!"
|
||||
actionLabel="+ Add New"
|
||||
onActionPress={() => setIsModalVisible(true)}
|
||||
/>
|
||||
{activeGoals.length === 0 ? (
|
||||
@ -331,7 +398,8 @@ export default function GoalsScreen() {
|
||||
{completedGoals.length > 0 && (
|
||||
<View style={styles.section}>
|
||||
<SectionHeader
|
||||
title={`✨ Completed Goals (${completedGoals.length})`}
|
||||
title={`Completed (${completedGoals.length})`}
|
||||
subtitle="Great work!"
|
||||
/>
|
||||
<View style={styles.goalsList}>
|
||||
{completedGoals.map((goal) => (
|
||||
@ -386,15 +454,15 @@ const styles = StyleSheet.create({
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
paddingHorizontal: 24,
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 24,
|
||||
paddingBottom: 20,
|
||||
},
|
||||
debugButton: {
|
||||
padding: 8,
|
||||
},
|
||||
section: {
|
||||
paddingHorizontal: 24,
|
||||
paddingHorizontal: 20,
|
||||
marginBottom: 24,
|
||||
},
|
||||
statsRow: {
|
||||
@ -405,8 +473,12 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 20,
|
||||
},
|
||||
analyticsCard: {
|
||||
padding: 20,
|
||||
},
|
||||
analyticsHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
@ -416,13 +488,32 @@ const styles = StyleSheet.create({
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
analyticsIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: 14,
|
||||
},
|
||||
analyticsToggle: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
analyticsContent: {
|
||||
paddingTop: 16,
|
||||
marginTop: 16,
|
||||
paddingTop: 24,
|
||||
marginTop: 20,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: "rgba(0,0,0,0.05)",
|
||||
},
|
||||
chartSection: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
goalsList: {
|
||||
gap: 12,
|
||||
gap: 16,
|
||||
},
|
||||
emptyState: {
|
||||
alignItems: "center",
|
||||
@ -433,18 +524,18 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
fabContainer: {
|
||||
position: "absolute",
|
||||
right: 24,
|
||||
right: 20,
|
||||
bottom: 90,
|
||||
},
|
||||
fab: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 22,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
shadowOffset: { width: 0, height: 6 },
|
||||
shadowOpacity: 0.35,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
},
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -19,6 +19,7 @@ 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 { fitnessProfileApi, FitnessProfile } from "../../api/fitnessProfile";
|
||||
import log from "../../utils/logger";
|
||||
|
||||
export default function ProfileScreen() {
|
||||
@ -35,6 +36,11 @@ export default function ProfileScreen() {
|
||||
const [selectedGymId, setSelectedGymId] = useState<string | null>(null);
|
||||
const [currentGymId, setCurrentGymId] = useState<string | null>(null);
|
||||
const [currentGymName, setCurrentGymName] = useState<string | null>(null);
|
||||
const [showGymDropdown, setShowGymDropdown] = useState(false);
|
||||
const [fitnessProfile, setFitnessProfile] = useState<FitnessProfile | null>(
|
||||
null,
|
||||
);
|
||||
const [profileLoading, setProfileLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const gid =
|
||||
@ -49,8 +55,23 @@ export default function ProfileScreen() {
|
||||
|
||||
useEffect(() => {
|
||||
loadGyms();
|
||||
loadFitnessProfile();
|
||||
}, []);
|
||||
|
||||
const loadFitnessProfile = async () => {
|
||||
try {
|
||||
setProfileLoading(true);
|
||||
const token = await getToken();
|
||||
if (!token) return;
|
||||
const profile = await fitnessProfileApi.getFitnessProfile(token);
|
||||
setFitnessProfile(profile);
|
||||
} catch (error) {
|
||||
log.error("Failed to load fitness profile", error);
|
||||
} finally {
|
||||
setProfileLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadGyms = async () => {
|
||||
try {
|
||||
setGymsLoading(true);
|
||||
@ -115,8 +136,12 @@ export default function ProfileScreen() {
|
||||
const handleApplyGym = async () => {
|
||||
try {
|
||||
const token = await getToken();
|
||||
const url = `${API_BASE_URL}${API_ENDPOINTS.USERS}/gym`;
|
||||
log.debug("Updating gym selection", { url, gymId: selectedGymId });
|
||||
const url = `${API_BASE_URL}${API_ENDPOINTS.USERS.GYM}`;
|
||||
log.debug("Updating gym selection", {
|
||||
url,
|
||||
gymId: selectedGymId,
|
||||
token: token ? "present" : "missing",
|
||||
});
|
||||
const res = await fetch(url, {
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
@ -213,7 +238,10 @@ export default function ProfileScreen() {
|
||||
contentContainerStyle={styles.content}
|
||||
>
|
||||
{/* Header Card */}
|
||||
<MinimalCard variant="elevated" style={styles.profileCard}>
|
||||
<MinimalCard
|
||||
variant="elevated"
|
||||
style={[styles.profileCard, { backgroundColor: colors.primary }]}
|
||||
>
|
||||
<View style={styles.avatarContainer}>
|
||||
{user?.imageUrl ? (
|
||||
<Image source={{ uri: user.imageUrl }} style={styles.avatar} />
|
||||
@ -221,29 +249,36 @@ export default function ProfileScreen() {
|
||||
<View
|
||||
style={[
|
||||
styles.placeholderAvatar,
|
||||
{ backgroundColor: colors.primary },
|
||||
{
|
||||
backgroundColor: colors.white,
|
||||
borderWidth: 3,
|
||||
borderColor: colors.white,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Ionicons name="person" size={40} color={colors.white} />
|
||||
<Ionicons name="person" size={40} color={colors.primary} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={[typography.h2, { color: colors.textPrimary, marginTop: 16 }]}
|
||||
style={[
|
||||
typography.h1,
|
||||
{ color: colors.white, marginTop: 16, fontSize: 28 },
|
||||
]}
|
||||
>
|
||||
{user?.fullName || "User"}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary, marginTop: 4 },
|
||||
{ color: "rgba(255,255,255,0.8)", marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
{user?.primaryEmailAddress?.emailAddress}
|
||||
</Text>
|
||||
<Badge
|
||||
label="Premium Member"
|
||||
variant="primary"
|
||||
variant="success"
|
||||
style={{ marginTop: 12 }}
|
||||
/>
|
||||
</MinimalCard>
|
||||
@ -321,29 +356,145 @@ export default function ProfileScreen() {
|
||||
onPress={() => router.push("/personal-details")}
|
||||
/>
|
||||
<View style={[styles.divider, { backgroundColor: colors.border }]} />
|
||||
<ListItem
|
||||
title="Fitness Profile"
|
||||
leftIcon={
|
||||
<IconContainer
|
||||
variant="colored"
|
||||
backgroundColor={`${colors.success}20`}
|
||||
>
|
||||
<Ionicons
|
||||
name="fitness-outline"
|
||||
size={20}
|
||||
color={colors.success}
|
||||
/>
|
||||
</IconContainer>
|
||||
}
|
||||
rightElement={
|
||||
<Ionicons
|
||||
name="chevron-forward"
|
||||
size={20}
|
||||
color={colors.textTertiary}
|
||||
/>
|
||||
}
|
||||
|
||||
{/* Fitness Profile Card */}
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push("/fitness-profile")}
|
||||
/>
|
||||
activeOpacity={0.85}
|
||||
>
|
||||
<MinimalCard variant="elevated" style={styles.fitnessProfileCard}>
|
||||
<View style={styles.fitnessProfileHeader}>
|
||||
<View
|
||||
style={[
|
||||
styles.fitnessProfileIcon,
|
||||
{ backgroundColor: colors.success },
|
||||
]}
|
||||
>
|
||||
<Ionicons name="fitness" size={24} color={colors.white} />
|
||||
</View>
|
||||
<View style={{ flex: 1, marginLeft: 14 }}>
|
||||
<Text style={[typography.h4, { color: colors.textPrimary }]}>
|
||||
Fitness Profile
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 2 },
|
||||
]}
|
||||
>
|
||||
{fitnessProfile ? "Tap to edit" : "Set up your profile"}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.editButton,
|
||||
{ backgroundColor: colors.primary },
|
||||
]}
|
||||
>
|
||||
<Ionicons name="pencil" size={16} color={colors.white} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{profileLoading ? (
|
||||
<View style={styles.profileLoading}>
|
||||
<ActivityIndicator color={colors.primary} />
|
||||
</View>
|
||||
) : fitnessProfile ? (
|
||||
<View
|
||||
style={[
|
||||
styles.fitnessProfileStats,
|
||||
{ borderTopColor: colors.border },
|
||||
]}
|
||||
>
|
||||
<View style={styles.profileStat}>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.primary, fontSize: 28 },
|
||||
]}
|
||||
>
|
||||
{fitnessProfile.height || "-"}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary },
|
||||
]}
|
||||
>
|
||||
Height (cm)
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.profileStatDivider,
|
||||
{ backgroundColor: colors.border },
|
||||
]}
|
||||
/>
|
||||
<View style={styles.profileStat}>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.success, fontSize: 28 },
|
||||
]}
|
||||
>
|
||||
{fitnessProfile.weight || "-"}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary },
|
||||
]}
|
||||
>
|
||||
Weight (kg)
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.profileStatDivider,
|
||||
{ backgroundColor: colors.border },
|
||||
]}
|
||||
/>
|
||||
<View style={styles.profileStat}>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.warning, fontSize: 28 },
|
||||
]}
|
||||
>
|
||||
{fitnessProfile.age || "-"}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary },
|
||||
]}
|
||||
>
|
||||
Age
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View
|
||||
style={[styles.noProfile, { borderTopColor: colors.border }]}
|
||||
>
|
||||
<Text
|
||||
style={[typography.body, { color: colors.textSecondary }]}
|
||||
>
|
||||
Complete your fitness profile to get personalized
|
||||
recommendations
|
||||
</Text>
|
||||
<MinimalButton
|
||||
title="Set Up Profile"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
style={{ marginTop: 12 }}
|
||||
onPress={() => router.push("/fitness-profile")}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</MinimalCard>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={[styles.divider, { backgroundColor: colors.border }]} />
|
||||
<ListItem
|
||||
title="Notifications"
|
||||
@ -372,65 +523,71 @@ export default function ProfileScreen() {
|
||||
|
||||
{/* Gym Selection */}
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={[typography.h3, { color: colors.textPrimary }]}>
|
||||
Gym Selection
|
||||
</Text>
|
||||
<TouchableOpacity onPress={loadGyms}>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.primary, fontWeight: "600" },
|
||||
]}
|
||||
>
|
||||
Refresh
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<MinimalCard variant="default">
|
||||
{currentGymName && (
|
||||
<View style={styles.currentGym}>
|
||||
<Text
|
||||
style={[typography.caption, { color: colors.textTertiary }]}
|
||||
>
|
||||
Current Gym
|
||||
</Text>
|
||||
<Text
|
||||
<Text
|
||||
style={[
|
||||
typography.h3,
|
||||
{ color: colors.textPrimary, marginBottom: 12 },
|
||||
]}
|
||||
>
|
||||
Gym Selection
|
||||
</Text>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowGymDropdown(!showGymDropdown)}
|
||||
activeOpacity={0.85}
|
||||
>
|
||||
<MinimalCard variant="bordered" style={styles.dropdownCard}>
|
||||
<View style={styles.dropdownHeader}>
|
||||
<View>
|
||||
<Text
|
||||
style={[typography.caption, { color: colors.textTertiary }]}
|
||||
>
|
||||
Current Gym
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.bodyEmphasis,
|
||||
{ color: colors.textPrimary, marginTop: 2 },
|
||||
]}
|
||||
>
|
||||
{currentGymName || "No gym selected"}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
typography.h3,
|
||||
{ color: colors.textPrimary, marginTop: 4 },
|
||||
styles.dropdownIcon,
|
||||
{ backgroundColor: colors.surfaceElevated },
|
||||
]}
|
||||
>
|
||||
{currentGymName}
|
||||
</Text>
|
||||
<Ionicons
|
||||
name={showGymDropdown ? "chevron-up" : "chevron-down"}
|
||||
size={20}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</MinimalCard>
|
||||
</TouchableOpacity>
|
||||
|
||||
{gymsLoading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator color={colors.primary} />
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={styles.gymScroll}
|
||||
contentContainerStyle={styles.gymScrollContent}
|
||||
>
|
||||
{showGymDropdown && (
|
||||
<MinimalCard variant="elevated" style={styles.dropdownOptions}>
|
||||
{gymsLoading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator color={colors.primary} />
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.gymChip,
|
||||
{
|
||||
backgroundColor:
|
||||
selectedGymId === null
|
||||
? `${colors.primary}20`
|
||||
: colors.surfaceElevated,
|
||||
borderColor:
|
||||
selectedGymId === null ? colors.primary : colors.border,
|
||||
styles.dropdownOption,
|
||||
selectedGymId === null && {
|
||||
backgroundColor: `${colors.primary}15`,
|
||||
},
|
||||
]}
|
||||
onPress={() => setSelectedGymId(null)}
|
||||
onPress={() => {
|
||||
setSelectedGymId(null);
|
||||
setShowGymDropdown(false);
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
@ -446,51 +603,78 @@ export default function ProfileScreen() {
|
||||
>
|
||||
No Gym
|
||||
</Text>
|
||||
{selectedGymId === null && (
|
||||
<Ionicons
|
||||
name="checkmark"
|
||||
size={20}
|
||||
color={colors.primary}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{gyms.map((gym) => (
|
||||
<TouchableOpacity
|
||||
key={gym.id}
|
||||
style={[
|
||||
styles.gymChip,
|
||||
{
|
||||
backgroundColor:
|
||||
selectedGymId === gym.id
|
||||
? `${colors.primary}20`
|
||||
: colors.surfaceElevated,
|
||||
borderColor:
|
||||
selectedGymId === gym.id
|
||||
? colors.primary
|
||||
: colors.border,
|
||||
styles.dropdownOption,
|
||||
selectedGymId === gym.id && {
|
||||
backgroundColor: `${colors.primary}15`,
|
||||
},
|
||||
]}
|
||||
onPress={() => setSelectedGymId(gym.id)}
|
||||
onPress={() => {
|
||||
setSelectedGymId(gym.id);
|
||||
setShowGymDropdown(false);
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{
|
||||
color:
|
||||
selectedGymId === gym.id
|
||||
? colors.primary
|
||||
: colors.textSecondary,
|
||||
fontWeight: selectedGymId === gym.id ? "600" : "400",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{gym.name}
|
||||
</Text>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{
|
||||
color:
|
||||
selectedGymId === gym.id
|
||||
? colors.primary
|
||||
: colors.textSecondary,
|
||||
fontWeight:
|
||||
selectedGymId === gym.id ? "600" : "400",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{gym.name}
|
||||
</Text>
|
||||
{gym.location && (
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 2 },
|
||||
]}
|
||||
>
|
||||
{gym.location}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
{selectedGymId === gym.id && (
|
||||
<Ionicons
|
||||
name="checkmark"
|
||||
size={20}
|
||||
color={colors.primary}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
<MinimalButton
|
||||
title="Apply Selection"
|
||||
onPress={handleApplyGym}
|
||||
variant="primary"
|
||||
style={{ marginTop: 16 }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</MinimalCard>
|
||||
{selectedGymId !== currentGymId && (
|
||||
<MinimalButton
|
||||
title="Apply Selection"
|
||||
onPress={handleApplyGym}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
fullWidth
|
||||
style={{ marginTop: 12 }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</MinimalCard>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Support */}
|
||||
@ -580,8 +764,9 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
padding: 24,
|
||||
padding: 20,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 100,
|
||||
},
|
||||
profileCard: {
|
||||
alignItems: "center",
|
||||
@ -640,4 +825,78 @@ const styles = StyleSheet.create({
|
||||
borderWidth: 1.5,
|
||||
marginRight: 8,
|
||||
},
|
||||
dropdownCard: {
|
||||
padding: 16,
|
||||
},
|
||||
dropdownHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
dropdownIcon: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
dropdownOptions: {
|
||||
marginTop: 8,
|
||||
padding: 8,
|
||||
},
|
||||
dropdownOption: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 12,
|
||||
marginBottom: 4,
|
||||
},
|
||||
fitnessProfileCard: {
|
||||
padding: 16,
|
||||
},
|
||||
fitnessProfileHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
fitnessProfileIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
editButton: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
profileLoading: {
|
||||
paddingVertical: 20,
|
||||
alignItems: "center",
|
||||
},
|
||||
fitnessProfileStats: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
marginTop: 20,
|
||||
paddingTop: 16,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
profileStat: {
|
||||
alignItems: "center",
|
||||
flex: 1,
|
||||
},
|
||||
profileStatDivider: {
|
||||
width: 1,
|
||||
height: 40,
|
||||
},
|
||||
noProfile: {
|
||||
marginTop: 16,
|
||||
paddingTop: 16,
|
||||
borderTopWidth: 1,
|
||||
alignItems: "center",
|
||||
},
|
||||
});
|
||||
|
||||
@ -130,19 +130,24 @@ export default function RecommendationsScreen() {
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View>
|
||||
<Text style={[typography.h1, { color: colors.textPrimary }]}>
|
||||
✨ AI Recommendations
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text
|
||||
style={[
|
||||
typography.h1,
|
||||
{ color: colors.textPrimary, fontSize: 32 },
|
||||
]}
|
||||
>
|
||||
Recommendations
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary, marginTop: 4 },
|
||||
{ color: colors.textSecondary, marginTop: 8 },
|
||||
]}
|
||||
>
|
||||
{recommendations.length === 0
|
||||
? "Let's create your perfect plan! 🚀"
|
||||
: `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you! 💪`}
|
||||
? "Let's create your perfect plan!"
|
||||
: `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you!`}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
@ -152,9 +157,10 @@ export default function RecommendationsScreen() {
|
||||
>
|
||||
<IconContainer
|
||||
variant="colored"
|
||||
backgroundColor={`${colors.accent}20`}
|
||||
backgroundColor={colors.accent}
|
||||
size="lg"
|
||||
>
|
||||
<Ionicons name="sparkles" size={24} color={colors.accent} />
|
||||
<Ionicons name="sparkles" size={24} color={colors.white} />
|
||||
{unreadCount > 0 && (
|
||||
<View
|
||||
style={[
|
||||
@ -174,10 +180,11 @@ export default function RecommendationsScreen() {
|
||||
{/* Generate Button */}
|
||||
<View style={styles.section}>
|
||||
<MinimalButton
|
||||
title="🎯 Generate New Plan"
|
||||
title="Generate New Plan"
|
||||
onPress={handleGenerateRecommendation}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
fullWidth
|
||||
loading={generating}
|
||||
disabled={generating}
|
||||
textStyle={{ fontSize: 16 }}
|
||||
|
||||
128
apps/mobile/src/components/ActivityRing.tsx
Normal file
128
apps/mobile/src/components/ActivityRing.tsx
Normal file
@ -0,0 +1,128 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { View, Animated, StyleSheet, Text } from "react-native";
|
||||
import Svg, { Circle } from "react-native-svg";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
|
||||
|
||||
interface ActivityRingProps {
|
||||
size?: number;
|
||||
strokeWidth?: number;
|
||||
progress: number;
|
||||
current: number;
|
||||
goal: number;
|
||||
label: string;
|
||||
color: string;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function ActivityRing({
|
||||
size = 100,
|
||||
strokeWidth = 10,
|
||||
progress,
|
||||
current,
|
||||
goal,
|
||||
label,
|
||||
color,
|
||||
icon,
|
||||
}: ActivityRingProps) {
|
||||
const { colors, typography } = useTheme();
|
||||
const animatedValue = useRef(new Animated.Value(0)).current;
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const circumference = radius * 2 * Math.PI;
|
||||
|
||||
useEffect(() => {
|
||||
Animated.timing(animatedValue, {
|
||||
toValue: Math.min(progress, 100),
|
||||
duration: 1200,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}, [progress]);
|
||||
|
||||
const strokeDashoffset = animatedValue.interpolate({
|
||||
inputRange: [0, 100],
|
||||
outputRange: [circumference, 0],
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
|
||||
<Circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke={colors.surfaceElevated}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="transparent"
|
||||
/>
|
||||
<AnimatedCircle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke={color}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="transparent"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
strokeLinecap="round"
|
||||
rotation="-90"
|
||||
origin={`${size / 2}, ${size / 2}`}
|
||||
/>
|
||||
</Svg>
|
||||
<View
|
||||
style={[
|
||||
StyleSheet.absoluteFillObject,
|
||||
{ justifyContent: "center", alignItems: "center" },
|
||||
]}
|
||||
>
|
||||
{icon ? (
|
||||
<View style={styles.iconContainer}>{icon}</View>
|
||||
) : (
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.textPrimary, fontSize: size * 0.28 },
|
||||
]}
|
||||
>
|
||||
{Math.round(current)}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={[
|
||||
typography.label,
|
||||
{ color: colors.textTertiary, marginTop: 8, textAlign: "center" },
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textSecondary, marginTop: 2 },
|
||||
]}
|
||||
>
|
||||
/ {goal.toLocaleString()}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
alignItems: "center",
|
||||
},
|
||||
iconContainer: {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
});
|
||||
@ -10,49 +10,41 @@ type BadgeVariant =
|
||||
| "danger"
|
||||
| "info"
|
||||
| "primary";
|
||||
type BadgeSize = "sm" | "md";
|
||||
type BadgeSize = "sm" | "md" | "lg";
|
||||
|
||||
interface BadgeProps {
|
||||
label: string;
|
||||
variant?: BadgeVariant;
|
||||
size?: BadgeSize;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
emoji?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,
|
||||
emoji,
|
||||
}: BadgeProps) {
|
||||
const { colors } = useTheme();
|
||||
|
||||
const sizeStyles = {
|
||||
sm: {
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 12,
|
||||
fontSize: fontSize.xs,
|
||||
},
|
||||
md: {
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 14,
|
||||
fontSize: fontSize.sm,
|
||||
},
|
||||
lg: {
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 18,
|
||||
fontSize: fontSize.base,
|
||||
},
|
||||
};
|
||||
|
||||
const variantStyles: Record<
|
||||
@ -64,24 +56,24 @@ export function Badge({
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
success: {
|
||||
backgroundColor: `${colors.success}20`, // 20% opacity
|
||||
color: colors.success,
|
||||
backgroundColor: colors.success,
|
||||
color: colors.white,
|
||||
},
|
||||
warning: {
|
||||
backgroundColor: `${colors.warning}20`,
|
||||
color: colors.warning,
|
||||
backgroundColor: colors.warning,
|
||||
color: colors.black,
|
||||
},
|
||||
danger: {
|
||||
backgroundColor: `${colors.danger}20`,
|
||||
color: colors.danger,
|
||||
backgroundColor: colors.danger,
|
||||
color: colors.white,
|
||||
},
|
||||
info: {
|
||||
backgroundColor: `${colors.info}20`,
|
||||
color: colors.info,
|
||||
backgroundColor: colors.info,
|
||||
color: colors.white,
|
||||
},
|
||||
primary: {
|
||||
backgroundColor: `${colors.primary}20`,
|
||||
color: colors.primary,
|
||||
backgroundColor: colors.primary,
|
||||
color: colors.white,
|
||||
},
|
||||
};
|
||||
|
||||
@ -103,10 +95,11 @@ export function Badge({
|
||||
{
|
||||
color: variantStyles[variant].color,
|
||||
fontSize: sizeStyles[size].fontSize,
|
||||
fontWeight: fontWeight.medium,
|
||||
fontWeight: fontWeight.bold,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{emoji && `${emoji} `}
|
||||
{label}
|
||||
</Text>
|
||||
</View>
|
||||
@ -115,7 +108,7 @@ export function Badge({
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
badge: {
|
||||
borderRadius: 999, // Full pill shape
|
||||
borderRadius: 12,
|
||||
alignSelf: "flex-start",
|
||||
},
|
||||
label: {
|
||||
|
||||
@ -1,21 +1,10 @@
|
||||
import React from "react";
|
||||
import { View, StyleSheet, TouchableOpacity } from "react-native";
|
||||
import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
|
||||
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
/**
|
||||
* 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,
|
||||
@ -71,6 +60,23 @@ export function CustomTabBar({
|
||||
}
|
||||
};
|
||||
|
||||
const getLabel = (routeName: string) => {
|
||||
switch (routeName) {
|
||||
case "index":
|
||||
return "Home";
|
||||
case "goals":
|
||||
return "Goals";
|
||||
case "attendance":
|
||||
return "Attendance";
|
||||
case "recommendations":
|
||||
return "Plans";
|
||||
case "profile":
|
||||
return "Profile";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
@ -85,7 +91,7 @@ export function CustomTabBar({
|
||||
<View style={styles.iconWrapper}>
|
||||
<Ionicons
|
||||
name={getIconName(route.name, isFocused)}
|
||||
size={24}
|
||||
size={26}
|
||||
color={isFocused ? colors.primary : colors.textTertiary}
|
||||
/>
|
||||
{isFocused && (
|
||||
@ -97,6 +103,17 @@ export function CustomTabBar({
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={[
|
||||
styles.label,
|
||||
{
|
||||
color: isFocused ? colors.primary : colors.textTertiary,
|
||||
fontWeight: isFocused ? "700" : "500",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{getLabel(route.name)}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
@ -107,8 +124,9 @@ export function CustomTabBar({
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: "row",
|
||||
height: 56,
|
||||
height: 70,
|
||||
borderTopWidth: 1,
|
||||
paddingTop: 8,
|
||||
},
|
||||
tabItem: {
|
||||
flex: 1,
|
||||
@ -121,9 +139,13 @@ const styles = StyleSheet.create({
|
||||
justifyContent: "center",
|
||||
},
|
||||
indicator: {
|
||||
width: 24,
|
||||
height: 3,
|
||||
borderRadius: 999,
|
||||
width: 20,
|
||||
height: 4,
|
||||
borderRadius: 2,
|
||||
marginTop: 4,
|
||||
},
|
||||
label: {
|
||||
fontSize: 11,
|
||||
marginTop: 4,
|
||||
},
|
||||
});
|
||||
|
||||
@ -122,15 +122,17 @@ export function GoalProgressCard({
|
||||
|
||||
return (
|
||||
<Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
|
||||
<TouchableOpacity onPress={onPress} activeOpacity={0.7}>
|
||||
<TouchableOpacity onPress={onPress} activeOpacity={0.85}>
|
||||
<MinimalCard
|
||||
variant="bordered"
|
||||
variant="elevated"
|
||||
style={[
|
||||
styles.card,
|
||||
isCompleted && {
|
||||
backgroundColor: colors.overlayLight,
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
opacity: 0.8,
|
||||
},
|
||||
]}
|
||||
padding={20}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
@ -289,13 +291,14 @@ export function GoalProgressCard({
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
marginBottom: 12,
|
||||
marginBottom: 16,
|
||||
borderRadius: 20,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
marginBottom: 12,
|
||||
marginBottom: 16,
|
||||
},
|
||||
titleRow: {
|
||||
flexDirection: "row",
|
||||
@ -304,23 +307,23 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
titleContainer: {
|
||||
flex: 1,
|
||||
marginLeft: 12,
|
||||
marginLeft: 14,
|
||||
},
|
||||
actions: {
|
||||
flexDirection: "row",
|
||||
gap: 8,
|
||||
gap: 12,
|
||||
},
|
||||
actionButton: {
|
||||
padding: 4,
|
||||
padding: 6,
|
||||
},
|
||||
progressSection: {
|
||||
marginBottom: 12,
|
||||
marginBottom: 16,
|
||||
},
|
||||
progressInfo: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 8,
|
||||
marginBottom: 10,
|
||||
},
|
||||
footer: {
|
||||
flexDirection: "row",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet, Dimensions } from "react-native";
|
||||
import { PieChart } from "react-native-chart-kit";
|
||||
import { theme } from "../styles/theme";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
interface GoalTypeData {
|
||||
goalType: string;
|
||||
@ -17,37 +17,40 @@ export function GoalTypeBreakdownChart({
|
||||
data,
|
||||
title = "Goals by Type",
|
||||
}: GoalTypeBreakdownChartProps) {
|
||||
const { colors, typography } = useTheme();
|
||||
const screenWidth = Dimensions.get("window").width;
|
||||
|
||||
// Color palette for different goal types
|
||||
const colors = [
|
||||
"#3b82f6", // Blue
|
||||
"#10b981", // Green
|
||||
"#f59e0b", // Orange
|
||||
"#8b5cf6", // Purple
|
||||
"#ec4899", // Pink
|
||||
"#06b6d4", // Cyan
|
||||
const chartColors = [
|
||||
colors.primary,
|
||||
colors.success,
|
||||
colors.warning,
|
||||
colors.accent,
|
||||
colors.secondary,
|
||||
colors.info,
|
||||
];
|
||||
|
||||
// Prepare chart data
|
||||
const chartData = data.map((item, index) => ({
|
||||
name: item.goalType,
|
||||
name: item.goalType
|
||||
.replace(/_/g, " ")
|
||||
.replace(/\b\w/g, (l) => l.toUpperCase()),
|
||||
count: item.count,
|
||||
color: colors[index % colors.length],
|
||||
legendFontColor: theme.colors.gray600,
|
||||
color: chartColors[index % chartColors.length],
|
||||
legendFontColor: colors.textSecondary,
|
||||
legendFontSize: 12,
|
||||
}));
|
||||
|
||||
const chartConfig = {
|
||||
color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
|
||||
};
|
||||
const totalGoals = data.reduce((sum, item) => sum + item.count, 0);
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
<Text style={[typography.h4, { color: colors.textPrimary }]}>
|
||||
{title}
|
||||
</Text>
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={styles.emptyText}>No goals yet</Text>
|
||||
<Text style={[typography.body, { color: colors.textTertiary }]}>
|
||||
No goals yet
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@ -55,46 +58,123 @@ export function GoalTypeBreakdownChart({
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
<Text
|
||||
style={[typography.h4, { color: colors.textPrimary, marginBottom: 16 }]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
|
||||
{/* Summary Stats */}
|
||||
<View style={styles.summaryRow}>
|
||||
<View style={styles.summaryItem}>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.primary, fontSize: 32 },
|
||||
]}
|
||||
>
|
||||
{totalGoals}
|
||||
</Text>
|
||||
<Text style={[typography.caption, { color: colors.textTertiary }]}>
|
||||
Total Goals
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.summaryItem}>
|
||||
<Text
|
||||
style={[
|
||||
typography.statLarge,
|
||||
{ color: colors.success, fontSize: 32 },
|
||||
]}
|
||||
>
|
||||
{data.length}
|
||||
</Text>
|
||||
<Text style={[typography.caption, { color: colors.textTertiary }]}>
|
||||
Types
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.chartContainer}>
|
||||
<PieChart
|
||||
data={chartData}
|
||||
width={screenWidth - 60}
|
||||
height={200}
|
||||
chartConfig={chartConfig}
|
||||
width={screenWidth - 80}
|
||||
height={160}
|
||||
chartConfig={{
|
||||
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
|
||||
}}
|
||||
accessor="count"
|
||||
backgroundColor="transparent"
|
||||
paddingLeft="15"
|
||||
absolute
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Legend */}
|
||||
<View style={styles.legendGrid}>
|
||||
{data.map((item, index) => (
|
||||
<View key={item.goalType} style={styles.legendItem}>
|
||||
<View
|
||||
style={[
|
||||
styles.legendDot,
|
||||
{ backgroundColor: chartColors[index % chartColors.length] },
|
||||
]}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textSecondary, flex: 1 },
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{item.goalType
|
||||
.replace(/_/g, " ")
|
||||
.replace(/\b\w/g, (l) => l.toUpperCase())}
|
||||
</Text>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
{item.count}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: theme.colors.white,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
...theme.shadows.medium,
|
||||
borderRadius: 16,
|
||||
padding: 4,
|
||||
},
|
||||
title: {
|
||||
fontSize: theme.typography.fontSize.lg,
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.gray700,
|
||||
marginBottom: 12,
|
||||
summaryRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
marginBottom: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
summaryItem: {
|
||||
alignItems: "center",
|
||||
},
|
||||
chartContainer: {
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
},
|
||||
legendGrid: {
|
||||
gap: 10,
|
||||
},
|
||||
legendItem: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
},
|
||||
legendDot: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 6,
|
||||
},
|
||||
emptyState: {
|
||||
paddingVertical: 40,
|
||||
paddingVertical: 32,
|
||||
alignItems: "center",
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: theme.typography.fontSize.sm,
|
||||
color: theme.colors.gray400,
|
||||
},
|
||||
});
|
||||
|
||||
@ -3,7 +3,7 @@ import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
type IconContainerVariant = "plain" | "subtle" | "colored";
|
||||
type IconContainerSize = "sm" | "md" | "lg";
|
||||
type IconContainerSize = "sm" | "md" | "lg" | "xl";
|
||||
|
||||
interface IconContainerProps {
|
||||
children: React.ReactNode;
|
||||
@ -13,19 +13,6 @@ interface IconContainerProps {
|
||||
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",
|
||||
@ -37,19 +24,24 @@ export function IconContainer({
|
||||
|
||||
const sizeStyles: Record<IconContainerSize, ViewStyle> = {
|
||||
sm: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
},
|
||||
md: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
},
|
||||
lg: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
borderRadius: 14,
|
||||
},
|
||||
lg: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 16,
|
||||
},
|
||||
xl: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 18,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -11,8 +11,13 @@ import {
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
import { fontSize, fontWeight } from "../styles/typography";
|
||||
|
||||
type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
|
||||
type ButtonSize = "sm" | "md" | "lg";
|
||||
type ButtonVariant =
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "tertiary"
|
||||
| "danger"
|
||||
| "success";
|
||||
type ButtonSize = "sm" | "md" | "lg" | "xl";
|
||||
|
||||
interface MinimalButtonProps {
|
||||
title: string;
|
||||
@ -23,22 +28,9 @@ interface MinimalButtonProps {
|
||||
disabled?: boolean;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
textStyle?: StyleProp<TextStyle>;
|
||||
fullWidth?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,
|
||||
@ -48,37 +40,42 @@ export function MinimalButton({
|
||||
disabled = false,
|
||||
style,
|
||||
textStyle,
|
||||
fullWidth = false,
|
||||
}: MinimalButtonProps) {
|
||||
const { colors } = useTheme();
|
||||
|
||||
const isDisabled = disabled || loading;
|
||||
|
||||
// Get button styles based on variant
|
||||
const getButtonStyle = (): ViewStyle => {
|
||||
const baseStyle: ViewStyle = {
|
||||
borderRadius: 10,
|
||||
borderRadius: 14,
|
||||
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 },
|
||||
sm: { paddingVertical: 12, paddingHorizontal: 20 },
|
||||
md: { paddingVertical: 16, paddingHorizontal: 28 },
|
||||
lg: { paddingVertical: 18, paddingHorizontal: 36 },
|
||||
xl: { paddingVertical: 20, paddingHorizontal: 44 },
|
||||
};
|
||||
|
||||
const variantStyles: Record<ButtonVariant, ViewStyle> = {
|
||||
primary: {
|
||||
backgroundColor: colors.primary,
|
||||
shadowColor: colors.primary,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
secondary: {
|
||||
backgroundColor: "transparent",
|
||||
borderWidth: 1.5,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.primary,
|
||||
},
|
||||
tertiary: {
|
||||
@ -86,6 +83,19 @@ export function MinimalButton({
|
||||
},
|
||||
danger: {
|
||||
backgroundColor: colors.danger,
|
||||
shadowColor: colors.danger,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
success: {
|
||||
backgroundColor: colors.success,
|
||||
shadowColor: colors.success,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
};
|
||||
|
||||
@ -93,29 +103,23 @@ export function MinimalButton({
|
||||
...baseStyle,
|
||||
...sizeStyles[size],
|
||||
...variantStyles[variant],
|
||||
...(fullWidth && { width: "100%" }),
|
||||
};
|
||||
};
|
||||
|
||||
// Get text styles based on variant
|
||||
const getTextStyle = (): TextStyle => {
|
||||
const baseTextStyle: TextStyle = {
|
||||
fontSize: fontSize.base,
|
||||
fontWeight: fontWeight.semibold,
|
||||
fontSize: size === "sm" ? fontSize.sm : fontSize.md,
|
||||
fontWeight: fontWeight.bold,
|
||||
letterSpacing: 0.5,
|
||||
};
|
||||
|
||||
const variantTextStyles: Record<ButtonVariant, TextStyle> = {
|
||||
primary: {
|
||||
color: colors.white,
|
||||
},
|
||||
secondary: {
|
||||
color: colors.primary,
|
||||
},
|
||||
tertiary: {
|
||||
color: colors.primary,
|
||||
},
|
||||
danger: {
|
||||
color: colors.white,
|
||||
},
|
||||
primary: { color: colors.white },
|
||||
secondary: { color: colors.primary },
|
||||
tertiary: { color: colors.primary },
|
||||
danger: { color: colors.white },
|
||||
success: { color: colors.white },
|
||||
};
|
||||
|
||||
return {
|
||||
@ -129,7 +133,7 @@ export function MinimalButton({
|
||||
style={[getButtonStyle(), style]}
|
||||
onPress={onPress}
|
||||
disabled={isDisabled}
|
||||
activeOpacity={0.7}
|
||||
activeOpacity={0.85}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator
|
||||
@ -146,7 +150,3 @@ export function MinimalButton({
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
// No static styles needed - all dynamic based on theme
|
||||
});
|
||||
|
||||
@ -8,28 +8,22 @@ import {
|
||||
} from "react-native";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
type CardVariant = "default" | "elevated" | "bordered";
|
||||
type CardVariant = "default" | "elevated" | "bordered" | "gradient";
|
||||
|
||||
interface MinimalCardProps {
|
||||
children: React.ReactNode;
|
||||
variant?: CardVariant;
|
||||
onPress?: () => void;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
padding?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,
|
||||
padding = 20,
|
||||
}: MinimalCardProps) {
|
||||
const { colors } = useTheme();
|
||||
|
||||
@ -37,13 +31,20 @@ export function MinimalCard({
|
||||
styles.base,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
padding: padding,
|
||||
},
|
||||
variant === "default" && styles.default,
|
||||
variant === "elevated" && styles.elevated,
|
||||
variant === "elevated" && {
|
||||
...styles.elevated,
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
},
|
||||
variant === "bordered" && {
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
variant === "gradient" && {
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
},
|
||||
style,
|
||||
];
|
||||
|
||||
@ -52,7 +53,7 @@ export function MinimalCard({
|
||||
<TouchableOpacity
|
||||
style={cardStyles}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.7}
|
||||
activeOpacity={0.85}
|
||||
>
|
||||
{children}
|
||||
</TouchableOpacity>
|
||||
@ -64,21 +65,20 @@ export function MinimalCard({
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
borderRadius: 20,
|
||||
},
|
||||
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,
|
||||
elevation: 3,
|
||||
},
|
||||
elevated: {
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 16,
|
||||
elevation: 6,
|
||||
},
|
||||
});
|
||||
|
||||
@ -3,43 +3,28 @@ 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%)
|
||||
progress: number;
|
||||
color?: string;
|
||||
backgroundColor?: string;
|
||||
height?: number;
|
||||
borderRadius?: number;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
animated?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,
|
||||
height = 10,
|
||||
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 trackColor = backgroundColor || colors.surfaceElevated;
|
||||
const fillColor = color || colors.primary;
|
||||
|
||||
return (
|
||||
|
||||
@ -17,14 +17,6 @@ interface SectionHeaderProps {
|
||||
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,
|
||||
@ -44,7 +36,7 @@ export function SectionHeader({
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 2 },
|
||||
{ color: colors.textTertiary, marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
{subtitle}
|
||||
@ -53,12 +45,7 @@ export function SectionHeader({
|
||||
</View>
|
||||
{actionLabel && onActionPress && (
|
||||
<TouchableOpacity onPress={onActionPress} activeOpacity={0.7}>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.primary, fontWeight: "600" },
|
||||
]}
|
||||
>
|
||||
<Text style={[typography.bodyEmphasis, { color: colors.primary }]}>
|
||||
{actionLabel}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
@ -72,7 +59,7 @@ const styles = StyleSheet.create({
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 12,
|
||||
marginBottom: 16,
|
||||
},
|
||||
textContainer: {
|
||||
flex: 1,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet, Dimensions } from "react-native";
|
||||
import { LineChart } from "react-native-chart-kit";
|
||||
import { theme } from "../styles/theme";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
import type { WeeklyTrendData } from "../api/types";
|
||||
|
||||
interface WeeklyProgressChartProps {
|
||||
@ -13,28 +13,26 @@ export function WeeklyProgressChart({
|
||||
weeklyData,
|
||||
title = "Weekly Progress",
|
||||
}: WeeklyProgressChartProps) {
|
||||
const { colors, typography } = useTheme();
|
||||
const screenWidth = Dimensions.get("window").width;
|
||||
|
||||
// Prepare chart data
|
||||
const labels = weeklyData.map((week) => week.weekLabel);
|
||||
const checkInsData = weeklyData.map((week) => week.checkIns);
|
||||
const goalsCompletedData = weeklyData.map((week) => week.goalsCompleted);
|
||||
const avgProgressData = weeklyData.map((week) => week.averageProgress);
|
||||
const labels = weeklyData.map((week: WeeklyTrendData) => week.weekLabel);
|
||||
const checkInsData = weeklyData.map((week: WeeklyTrendData) => week.checkIns);
|
||||
const goalsCompletedData = weeklyData.map(
|
||||
(week: WeeklyTrendData) => week.goalsCompleted,
|
||||
);
|
||||
|
||||
const chartConfig = {
|
||||
backgroundColor: theme.colors.white,
|
||||
backgroundGradientFrom: theme.colors.white,
|
||||
backgroundGradientTo: theme.colors.white,
|
||||
backgroundColor: colors.surface,
|
||||
backgroundGradientFrom: colors.surface,
|
||||
backgroundGradientTo: colors.surface,
|
||||
decimalPlaces: 0,
|
||||
color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
|
||||
labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
|
||||
style: {
|
||||
borderRadius: theme.borderRadius.lg,
|
||||
},
|
||||
color: (opacity = 1) => `rgba(0, 102, 255, ${opacity})`,
|
||||
labelColor: (opacity = 1) => colors.textTertiary,
|
||||
propsForDots: {
|
||||
r: "4",
|
||||
r: "5",
|
||||
strokeWidth: "2",
|
||||
stroke: theme.colors.primary,
|
||||
stroke: colors.primary,
|
||||
},
|
||||
};
|
||||
|
||||
@ -43,31 +41,40 @@ export function WeeklyProgressChart({
|
||||
datasets: [
|
||||
{
|
||||
data: checkInsData,
|
||||
color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`, // Blue for check-ins
|
||||
strokeWidth: 2,
|
||||
color: () => colors.primary,
|
||||
strokeWidth: 3,
|
||||
},
|
||||
{
|
||||
data: goalsCompletedData,
|
||||
color: (opacity = 1) => `rgba(16, 185, 129, ${opacity})`, // Green for goals
|
||||
strokeWidth: 2,
|
||||
color: () => colors.success,
|
||||
strokeWidth: 3,
|
||||
},
|
||||
],
|
||||
legend: ["Check-ins", "Goals Completed"],
|
||||
legend: ["Check-ins", "Goals"],
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
{title && (
|
||||
<Text
|
||||
style={[
|
||||
typography.h4,
|
||||
{ color: colors.textPrimary, marginBottom: 16 },
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
<View style={styles.chartContainer}>
|
||||
<LineChart
|
||||
data={data}
|
||||
width={screenWidth - 60}
|
||||
height={220}
|
||||
width={screenWidth - 80}
|
||||
height={180}
|
||||
chartConfig={chartConfig}
|
||||
bezier
|
||||
style={styles.chart}
|
||||
withInnerLines={true}
|
||||
withOuterLines={true}
|
||||
withOuterLines={false}
|
||||
withVerticalLabels={true}
|
||||
withHorizontalLabels={true}
|
||||
fromZero={true}
|
||||
@ -75,12 +82,20 @@ export function WeeklyProgressChart({
|
||||
</View>
|
||||
<View style={styles.legend}>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: "#3b82f6" }]} />
|
||||
<Text style={styles.legendText}>Check-ins</Text>
|
||||
<View
|
||||
style={[styles.legendDot, { backgroundColor: colors.primary }]}
|
||||
/>
|
||||
<Text style={[typography.caption, { color: colors.textSecondary }]}>
|
||||
Check-ins
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: "#10b981" }]} />
|
||||
<Text style={styles.legendText}>Goals Completed</Text>
|
||||
<View
|
||||
style={[styles.legendDot, { backgroundColor: colors.success }]}
|
||||
/>
|
||||
<Text style={[typography.caption, { color: colors.textSecondary }]}>
|
||||
Goals
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@ -89,17 +104,8 @@ export function WeeklyProgressChart({
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: theme.colors.white,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
...theme.shadows.medium,
|
||||
},
|
||||
title: {
|
||||
fontSize: theme.typography.fontSize.lg,
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.gray700,
|
||||
marginBottom: 12,
|
||||
borderRadius: 16,
|
||||
padding: 4,
|
||||
},
|
||||
chartContainer: {
|
||||
alignItems: "center",
|
||||
@ -107,26 +113,22 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
chart: {
|
||||
marginVertical: 8,
|
||||
borderRadius: theme.borderRadius.lg,
|
||||
borderRadius: 12,
|
||||
},
|
||||
legend: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
gap: 20,
|
||||
gap: 24,
|
||||
paddingTop: 8,
|
||||
},
|
||||
legendItem: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
gap: 8,
|
||||
},
|
||||
legendDot: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
},
|
||||
legendText: {
|
||||
fontSize: theme.typography.fontSize.sm,
|
||||
color: theme.colors.gray500,
|
||||
},
|
||||
});
|
||||
|
||||
@ -35,6 +35,7 @@ export const API_ENDPOINTS = {
|
||||
USERS: {
|
||||
LIST: "/api/users",
|
||||
STATISTICS: "/api/users/statistics",
|
||||
GYM: "/api/users/gym",
|
||||
},
|
||||
GYMS: "/api/gyms",
|
||||
ATTENDANCE: {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/**
|
||||
* FitAI Color System
|
||||
* Nord Color Palette - A minimal, arctic-inspired palette
|
||||
* https://www.nordtheme.com/
|
||||
* FitAI Color System - BOLD MODERN
|
||||
* Electric Blue palette with high-energy fitness app aesthetics
|
||||
*/
|
||||
|
||||
export interface ColorScheme {
|
||||
@ -12,6 +11,7 @@ export interface ColorScheme {
|
||||
|
||||
// Accent Colors
|
||||
accent: string;
|
||||
secondary: string;
|
||||
terracotta: string;
|
||||
sand: string;
|
||||
|
||||
@ -21,6 +21,11 @@ export interface ColorScheme {
|
||||
danger: string;
|
||||
info: string;
|
||||
|
||||
// Activity Ring Colors
|
||||
calories: string;
|
||||
water: string;
|
||||
workouts: string;
|
||||
|
||||
// Neutrals
|
||||
background: string;
|
||||
surface: string;
|
||||
@ -39,97 +44,119 @@ export interface ColorScheme {
|
||||
overlay: string;
|
||||
overlayLight: string;
|
||||
|
||||
// Legacy compatibility (will be phased out)
|
||||
// Gradients (as arrays)
|
||||
primaryGradient: string[];
|
||||
cardGradient: string[];
|
||||
|
||||
// Legacy compatibility
|
||||
white: string;
|
||||
black: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Light Mode Color Palette
|
||||
* Nord Snow Storm (light backgrounds) with Polar Night (dark text)
|
||||
* Light Mode - Bold & Energetic
|
||||
*/
|
||||
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)
|
||||
// Primary Colors - Electric Blue
|
||||
primary: "#0066FF",
|
||||
primaryDark: "#0052CC",
|
||||
primaryLight: "#3385FF",
|
||||
|
||||
// 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)
|
||||
accent: "#7B2CBF", // Purple
|
||||
secondary: "#FF3B7A", // Hot Pink
|
||||
terracotta: "#FF6B35", // Neon Orange
|
||||
sand: "#FFD60A", // Electric 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)
|
||||
// Status Colors - Vibrant
|
||||
success: "#00D26A",
|
||||
warning: "#FFB800",
|
||||
danger: "#FF3B3B",
|
||||
info: "#00B8D9",
|
||||
|
||||
// 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)
|
||||
// Activity Ring Colors
|
||||
calories: "#FF6B35", // Orange for calories
|
||||
water: "#00B8D9", // Cyan for water
|
||||
workouts: "#0066FF", // Blue for workouts
|
||||
|
||||
// Text (Polar Night palette)
|
||||
textPrimary: "#2E3440", // Nord Polar Night 0 (darkest)
|
||||
textSecondary: "#3B4252", // Nord Polar Night 1
|
||||
textTertiary: "#4C566A", // Nord Polar Night 3
|
||||
// Neutrals - Bold dark on light
|
||||
background: "#F5F5F7",
|
||||
surface: "#FFFFFF",
|
||||
surfaceElevated: "#FFFFFF",
|
||||
|
||||
// Text - High contrast dark
|
||||
textPrimary: "#1A1A1A",
|
||||
textSecondary: "#4A4A4A",
|
||||
textTertiary: "#8E8E93",
|
||||
|
||||
// Borders
|
||||
border: "#D8DEE9", // Nord Snow Storm 1
|
||||
borderLight: "#E5E9F0", // Nord Snow Storm 2
|
||||
border: "#E5E5EA",
|
||||
borderLight: "#F0F0F5",
|
||||
|
||||
// Overlays
|
||||
overlay: "rgba(46, 52, 64, 0.5)", // Polar Night 0
|
||||
overlayLight: "rgba(46, 52, 64, 0.05)",
|
||||
overlay: "rgba(0, 0, 0, 0.5)",
|
||||
overlayLight: "rgba(0, 0, 0, 0.03)",
|
||||
|
||||
// Gradients
|
||||
primaryGradient: ["#0066FF", "#0052CC"],
|
||||
cardGradient: ["#FFFFFF", "#F8F8FA"],
|
||||
|
||||
// Legacy
|
||||
white: "#ECEFF4",
|
||||
black: "#2E3440",
|
||||
white: "#FFFFFF",
|
||||
black: "#1A1A1A",
|
||||
};
|
||||
|
||||
/**
|
||||
* Dark Mode Color Palette
|
||||
* Nord Polar Night (dark backgrounds) with Snow Storm (light text)
|
||||
* Dark Mode - Premium & Immersive
|
||||
*/
|
||||
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)
|
||||
// Primary Colors - Electric Blue (brighter on dark)
|
||||
primary: "#0A84FF",
|
||||
primaryDark: "#0066FF",
|
||||
primaryLight: "#5AC8FA",
|
||||
|
||||
// Accent Colors
|
||||
accent: "#81A1C1", // Nord Frost 9 (blue-gray)
|
||||
terracotta: "#D08770", // Nord Aurora 12 (orange)
|
||||
sand: "#EBCB8B", // Nord Aurora 13 (yellow)
|
||||
accent: "#BF5AF2", // Purple
|
||||
secondary: "#FF375F", // Hot Pink
|
||||
terracotta: "#FF9500", // Orange
|
||||
sand: "#FFD60A", // 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)
|
||||
success: "#30D158",
|
||||
warning: "#FFD60A",
|
||||
danger: "#FF453A",
|
||||
info: "#64D2FF",
|
||||
|
||||
// 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)
|
||||
// Activity Ring Colors (even brighter for dark mode)
|
||||
calories: "#FF9500",
|
||||
water: "#64D2FF",
|
||||
workouts: "#0A84FF",
|
||||
|
||||
// Text (Snow Storm palette)
|
||||
textPrimary: "#ECEFF4", // Nord Snow Storm 3 (lightest)
|
||||
textSecondary: "#E5E9F0", // Nord Snow Storm 2
|
||||
textTertiary: "#D8DEE9", // Nord Snow Storm 1
|
||||
// Neutrals - Dark backgrounds
|
||||
background: "#000000",
|
||||
surface: "#1C1C1E",
|
||||
surfaceElevated: "#2C2C2E",
|
||||
|
||||
// Text - Bright on dark
|
||||
textPrimary: "#FFFFFF",
|
||||
textSecondary: "#EBEBF5",
|
||||
textTertiary: "#8E8E93",
|
||||
|
||||
// Borders
|
||||
border: "#434C5E", // Nord Polar Night 2
|
||||
borderLight: "#3B4252", // Nord Polar Night 1
|
||||
border: "#38383A",
|
||||
borderLight: "#48484A",
|
||||
|
||||
// Overlays
|
||||
overlay: "rgba(0, 0, 0, 0.6)",
|
||||
overlayLight: "rgba(236, 239, 244, 0.05)", // Snow Storm 3
|
||||
overlayLight: "rgba(255, 255, 255, 0.05)",
|
||||
|
||||
// Gradients
|
||||
primaryGradient: ["#0A84FF", "#0066FF"],
|
||||
cardGradient: ["#1C1C1E", "#2C2C2E"],
|
||||
|
||||
// Legacy
|
||||
white: "#ECEFF4",
|
||||
black: "#2E3440",
|
||||
white: "#FFFFFF",
|
||||
black: "#000000",
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -1,53 +1,54 @@
|
||||
/**
|
||||
* FitAI Typography System
|
||||
* Minimalist typography with clear hierarchy using system fonts
|
||||
* FitAI Typography System - BOLD MODERN
|
||||
* High-impact typography with clear hierarchy using system fonts
|
||||
*/
|
||||
|
||||
import { TextStyle } from "react-native";
|
||||
|
||||
/**
|
||||
* Font Sizes
|
||||
* Refined scale with fewer sizes for clearer hierarchy
|
||||
* Font Sizes - Larger for bold impact
|
||||
*/
|
||||
export const fontSize = {
|
||||
xs: 11,
|
||||
sm: 13,
|
||||
base: 15,
|
||||
md: 17, // Body emphasis
|
||||
lg: 20,
|
||||
xl: 24,
|
||||
"2xl": 28,
|
||||
"3xl": 34,
|
||||
"4xl": 40,
|
||||
xs: 12,
|
||||
sm: 14,
|
||||
base: 16,
|
||||
md: 18, // Body emphasis
|
||||
lg: 22,
|
||||
xl: 26,
|
||||
"2xl": 32,
|
||||
"3xl": 40,
|
||||
"4xl": 52,
|
||||
"5xl": 64,
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Font Weights
|
||||
* Font Weights - Emphasize bold
|
||||
*/
|
||||
export const fontWeight = {
|
||||
regular: "400" as TextStyle["fontWeight"],
|
||||
medium: "500" as TextStyle["fontWeight"],
|
||||
semibold: "600" as TextStyle["fontWeight"],
|
||||
bold: "700" as TextStyle["fontWeight"],
|
||||
extrabold: "800" as TextStyle["fontWeight"],
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Line Heights
|
||||
*/
|
||||
export const lineHeight = {
|
||||
tight: 1.2,
|
||||
normal: 1.5,
|
||||
relaxed: 1.7,
|
||||
tight: 1.15,
|
||||
normal: 1.4,
|
||||
relaxed: 1.6,
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Letter Spacing
|
||||
*/
|
||||
export const letterSpacing = {
|
||||
tight: -0.5,
|
||||
tight: -1,
|
||||
normal: 0,
|
||||
wide: 0.5,
|
||||
wider: 1,
|
||||
wider: 1.5,
|
||||
} as const;
|
||||
|
||||
/**
|
||||
@ -58,11 +59,14 @@ export interface TypographyPresets {
|
||||
h1: TextStyle;
|
||||
h2: TextStyle;
|
||||
h3: TextStyle;
|
||||
h4: TextStyle;
|
||||
body: TextStyle;
|
||||
bodyEmphasis: TextStyle;
|
||||
label: TextStyle;
|
||||
stat: TextStyle;
|
||||
statLarge: TextStyle;
|
||||
caption: TextStyle;
|
||||
button: TextStyle;
|
||||
}
|
||||
|
||||
export const createTypographyPresets = (
|
||||
@ -70,25 +74,33 @@ export const createTypographyPresets = (
|
||||
textSecondary: string,
|
||||
textTertiary: string,
|
||||
): TypographyPresets => ({
|
||||
// Display Text (Screen Titles)
|
||||
// Display Text (Screen Titles) - Extra Bold
|
||||
h1: {
|
||||
fontSize: fontSize["3xl"],
|
||||
fontWeight: fontWeight.bold,
|
||||
fontSize: fontSize["4xl"],
|
||||
fontWeight: fontWeight.extrabold,
|
||||
letterSpacing: letterSpacing.tight,
|
||||
lineHeight: fontSize["3xl"] * lineHeight.tight,
|
||||
lineHeight: fontSize["4xl"] * lineHeight.tight,
|
||||
color: textPrimary,
|
||||
},
|
||||
|
||||
// Section Headers
|
||||
// Section Headers - Bold
|
||||
h2: {
|
||||
fontSize: fontSize.xl,
|
||||
fontSize: fontSize["2xl"],
|
||||
fontWeight: fontWeight.bold,
|
||||
letterSpacing: -0.5,
|
||||
color: textPrimary,
|
||||
},
|
||||
|
||||
// Card Titles - Semibold
|
||||
h3: {
|
||||
fontSize: fontSize.lg,
|
||||
fontWeight: fontWeight.semibold,
|
||||
letterSpacing: -0.3,
|
||||
color: textPrimary,
|
||||
},
|
||||
|
||||
// Card Titles
|
||||
h3: {
|
||||
// Small Headers
|
||||
h4: {
|
||||
fontSize: fontSize.md,
|
||||
fontWeight: fontWeight.semibold,
|
||||
color: textPrimary,
|
||||
@ -112,17 +124,27 @@ export const createTypographyPresets = (
|
||||
|
||||
// Labels (uppercase, spaced)
|
||||
label: {
|
||||
fontSize: fontSize.sm,
|
||||
fontWeight: fontWeight.medium,
|
||||
letterSpacing: letterSpacing.wide,
|
||||
fontSize: fontSize.xs,
|
||||
fontWeight: fontWeight.semibold,
|
||||
letterSpacing: letterSpacing.wider,
|
||||
textTransform: "uppercase",
|
||||
color: textTertiary,
|
||||
},
|
||||
|
||||
// Stats/Numbers
|
||||
// Stats/Numbers - Bold Large
|
||||
stat: {
|
||||
fontSize: fontSize["2xl"],
|
||||
fontSize: fontSize["3xl"],
|
||||
fontWeight: fontWeight.bold,
|
||||
letterSpacing: -1,
|
||||
color: textPrimary,
|
||||
},
|
||||
|
||||
// Large Stats (Hero numbers)
|
||||
statLarge: {
|
||||
fontSize: fontSize["5xl"],
|
||||
fontWeight: fontWeight.extrabold,
|
||||
letterSpacing: -2,
|
||||
lineHeight: fontSize["5xl"] * lineHeight.tight,
|
||||
color: textPrimary,
|
||||
},
|
||||
|
||||
@ -132,6 +154,13 @@ export const createTypographyPresets = (
|
||||
fontWeight: fontWeight.regular,
|
||||
color: textTertiary,
|
||||
},
|
||||
|
||||
// Button Text
|
||||
button: {
|
||||
fontSize: fontSize.base,
|
||||
fontWeight: fontWeight.bold,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user