dimitar/fitaiProto
1
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

redesign take 2 complete

Browse Source 
fix artefacts from previous dessign
This commit is contained in:
dimitar committed 2026-03-12 17:56:46 +01:00
1 parent aba9b1395b
commit 5d6166df1b
17 files changed
+941 -878
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/mobile/src/components/ActivityRing.tsx
+128
View 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",
},
});
apps/mobile/src/components/Badge.tsx
+25 -32
View File
@@ -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: {
apps/mobile/src/components/CustomTabBar.tsx
+39 -17
View File
@@ -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,
},
});
apps/mobile/src/components/GoalProgressCard.tsx
+13 -10
View File
@@ -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",
apps/mobile/src/components/IconContainer.tsx
+15 -23
View File
@@ -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,
},
};
apps/mobile/src/components/MinimalButton.tsx
+43 -43
View File
@@ -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
});
apps/mobile/src/components/MinimalCard.tsx
+21 -21
View File
@@ -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,
},
});
apps/mobile/src/components/ProgressBar.tsx
+4 -19
View File
@@ -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 (
apps/mobile/src/components/SectionHeader.tsx
+3 -16
View File
@@ -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,