redesign take 2 complete
fix artefacts from previous dessign
This commit is contained in:
dimitar committed
1 parent
aba9b1395b
commit
5d6166df1b
17 files changed
+941
-878
No files matched your search
@@ -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>
|
||||
@@ -287,8 +316,9 @@ export default function GoalsScreen() {
|
||||
{/* 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 +361,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 +417,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,6 +436,7 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 20,
|
||||
},
|
||||
analyticsHeader: {
|
||||
@@ -433,18 +465,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,
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user