redesign take 2 complete
fix artefacts from previous dessign
This commit is contained in:
parent
aba9b1395b
commit
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>
|
||||
@ -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,
|
||||
},
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -213,7 +213,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 +224,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>
|
||||
@ -580,8 +590,9 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
padding: 24,
|
||||
padding: 20,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 100,
|
||||
},
|
||||
profileCard: {
|
||||
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",
|
||||
|
||||
@ -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,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