657737e5a4
- Monitoring badge: equipment active + subscription active - Get kit badge: user hasn't ordered equipment yet - Equipment status badges: ordered, shipped, delivered - No subscription warning when equipment works but no sub - Stripe subscription caching in backend (hourly sync) - BeneficiaryMenu with edit/share/archive/delete actions
655 lines
19 KiB
TypeScript
655 lines
19 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
ActivityIndicator,
|
|
RefreshControl,
|
|
Image,
|
|
} from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { router } from 'expo-router';
|
|
import { useFocusEffect } from '@react-navigation/native';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { useBeneficiary } from '@/contexts/BeneficiaryContext';
|
|
import { api } from '@/services/api';
|
|
import {
|
|
AppColors,
|
|
BorderRadius,
|
|
FontSizes,
|
|
FontWeights,
|
|
Spacing,
|
|
Shadows,
|
|
AvatarSizes,
|
|
} from '@/constants/theme';
|
|
import type { Beneficiary } from '@/types';
|
|
import { isSubscriptionActive } from '@/services/subscription';
|
|
|
|
// Beneficiary card with equipment status support
|
|
interface BeneficiaryCardProps {
|
|
beneficiary: Beneficiary;
|
|
onPress: () => void;
|
|
onActivate?: () => void;
|
|
}
|
|
|
|
// Equipment status config
|
|
const equipmentStatusConfig = {
|
|
none: {
|
|
icon: 'cart-outline' as const,
|
|
label: 'Get kit',
|
|
sublabel: 'Order equipment',
|
|
color: AppColors.textMuted,
|
|
bgColor: AppColors.backgroundSecondary,
|
|
},
|
|
ordered: {
|
|
icon: 'cube-outline' as const,
|
|
label: 'Kit ordered',
|
|
sublabel: 'Preparing to ship',
|
|
color: AppColors.info,
|
|
bgColor: AppColors.infoLight,
|
|
},
|
|
shipped: {
|
|
icon: 'car-outline' as const,
|
|
label: 'In transit',
|
|
sublabel: 'Track your package',
|
|
color: AppColors.warning,
|
|
bgColor: AppColors.warningLight,
|
|
},
|
|
delivered: {
|
|
icon: 'checkmark-circle-outline' as const,
|
|
label: 'Delivered',
|
|
sublabel: 'Ready to activate',
|
|
color: AppColors.success,
|
|
bgColor: AppColors.successLight,
|
|
},
|
|
active: {
|
|
icon: 'pulse-outline' as const,
|
|
label: 'Monitoring',
|
|
sublabel: 'System active',
|
|
color: AppColors.success,
|
|
bgColor: AppColors.successLight,
|
|
},
|
|
};
|
|
|
|
function BeneficiaryCard({ beneficiary, onPress, onActivate }: BeneficiaryCardProps) {
|
|
const equipmentStatus = beneficiary.equipmentStatus;
|
|
const isAwaitingEquipment = equipmentStatus && ['ordered', 'shipped', 'delivered'].includes(equipmentStatus);
|
|
const isEquipmentActive = equipmentStatus === 'active' || equipmentStatus === 'demo';
|
|
const hasSubscription = isSubscriptionActive(beneficiary.subscription);
|
|
const needsKit = !equipmentStatus || equipmentStatus === 'none';
|
|
|
|
// Monitoring = equipment works + subscription active (all good!)
|
|
const isMonitoring = isEquipmentActive && hasSubscription;
|
|
|
|
// No subscription warning: equipment works but no subscription
|
|
const hasNoSubscription = isEquipmentActive && !hasSubscription;
|
|
|
|
const statusConfig = equipmentStatus ? equipmentStatusConfig[equipmentStatus as keyof typeof equipmentStatusConfig] : equipmentStatusConfig.none;
|
|
|
|
// Check if avatar is valid (not empty, null, or placeholder)
|
|
const hasValidAvatar = beneficiary.avatar &&
|
|
beneficiary.avatar.trim() !== '' &&
|
|
!beneficiary.avatar.includes('placeholder');
|
|
|
|
// Handle press - if delivered, go to activate
|
|
const handlePress = () => {
|
|
if (equipmentStatus === 'delivered' && onActivate) {
|
|
onActivate();
|
|
} else {
|
|
onPress();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.card, hasNoSubscription && styles.cardNoSubscription]}
|
|
onPress={handlePress}
|
|
activeOpacity={0.7}
|
|
>
|
|
{/* Avatar */}
|
|
<View style={styles.avatarWrapper}>
|
|
{hasValidAvatar ? (
|
|
<Image source={{ uri: beneficiary.avatar }} style={styles.avatarImage} />
|
|
) : (
|
|
<View style={[styles.avatar, hasNoSubscription && styles.avatarNoSubscription]}>
|
|
<Text style={[styles.avatarText, hasNoSubscription && styles.avatarTextNoSubscription]}>
|
|
{beneficiary.name.charAt(0).toUpperCase()}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Name and Status */}
|
|
<View style={styles.info}>
|
|
<Text style={styles.name} numberOfLines={1}>{beneficiary.name}</Text>
|
|
{/* User's role for this beneficiary */}
|
|
{beneficiary.role && (
|
|
<Text style={styles.roleText}>
|
|
You: {beneficiary.role.charAt(0).toUpperCase() + beneficiary.role.slice(1)}
|
|
</Text>
|
|
)}
|
|
{/* Equipment status badge (awaiting delivery) */}
|
|
{isAwaitingEquipment && statusConfig && (
|
|
<View style={[styles.statusBadge, { backgroundColor: statusConfig.bgColor }]}>
|
|
<Ionicons name={statusConfig.icon} size={14} color={statusConfig.color} />
|
|
<Text style={[styles.statusText, { color: statusConfig.color }]}>
|
|
{statusConfig.label}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{/* Monitoring badge (equipment works + subscription active) */}
|
|
{isMonitoring && (
|
|
<View style={[styles.statusBadge, { backgroundColor: equipmentStatusConfig.active.bgColor }]}>
|
|
<Ionicons name={equipmentStatusConfig.active.icon} size={14} color={equipmentStatusConfig.active.color} />
|
|
<Text style={[styles.statusText, { color: equipmentStatusConfig.active.color }]}>
|
|
{equipmentStatusConfig.active.label}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{/* No subscription warning */}
|
|
{hasNoSubscription && (
|
|
<View style={styles.noSubscriptionBadge}>
|
|
<Ionicons name="alert-circle" size={14} color={AppColors.error} />
|
|
<Text style={styles.noSubscriptionText}>No subscription</Text>
|
|
</View>
|
|
)}
|
|
{/* Get kit badge (no equipment) */}
|
|
{needsKit && (
|
|
<View style={[styles.statusBadge, { backgroundColor: equipmentStatusConfig.none.bgColor }]}>
|
|
<Ionicons name={equipmentStatusConfig.none.icon} size={14} color={equipmentStatusConfig.none.color} />
|
|
<Text style={[styles.statusText, { color: equipmentStatusConfig.none.color }]}>
|
|
{equipmentStatusConfig.none.label}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Action button or Arrow */}
|
|
{equipmentStatus === 'delivered' ? (
|
|
<TouchableOpacity
|
|
style={styles.activateButton}
|
|
onPress={onActivate}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={styles.activateButtonText}>Activate</Text>
|
|
</TouchableOpacity>
|
|
) : (
|
|
<View style={styles.arrowContainer}>
|
|
<Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
|
|
</View>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
export default function HomeScreen() {
|
|
const { user } = useAuth();
|
|
const { currentBeneficiary, setCurrentBeneficiary } = useBeneficiary();
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
|
|
// Load beneficiaries when screen is focused (after editing profile, etc.)
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
loadBeneficiaries();
|
|
}, [])
|
|
);
|
|
|
|
const loadBeneficiaries = async () => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
try {
|
|
const onboardingCompleted = await api.isOnboardingCompleted();
|
|
|
|
// Get beneficiaries from WellNuo API
|
|
const response = await api.getAllBeneficiaries();
|
|
|
|
if (response.ok && response.data) {
|
|
setBeneficiaries(response.data);
|
|
|
|
if (!currentBeneficiary && response.data.length > 0) {
|
|
setCurrentBeneficiary(response.data[0]);
|
|
}
|
|
} else {
|
|
if (response.error?.code === 'UNAUTHORIZED') {
|
|
router.replace('/(auth)/login');
|
|
return;
|
|
}
|
|
// Show error when API fails
|
|
const errorMessage = response.error?.message || 'Failed to load beneficiaries';
|
|
console.error('[HomeScreen] Failed to load beneficiaries:', errorMessage);
|
|
setError(errorMessage);
|
|
setBeneficiaries([]);
|
|
}
|
|
|
|
// Redirect to onboarding if no beneficiaries
|
|
const allBeneficiaries = response.ok ? (response.data || []) : [];
|
|
if (allBeneficiaries.length === 0 && !onboardingCompleted) {
|
|
router.replace({
|
|
pathname: '/(auth)/add-loved-one',
|
|
params: { email: user?.email || '' },
|
|
});
|
|
return;
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load beneficiaries:', err);
|
|
setError('Failed to load beneficiaries');
|
|
setBeneficiaries([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRefresh = async () => {
|
|
setIsRefreshing(true);
|
|
await loadBeneficiaries();
|
|
setIsRefreshing(false);
|
|
};
|
|
|
|
const handleBeneficiaryPress = (beneficiary: Beneficiary) => {
|
|
setCurrentBeneficiary(beneficiary);
|
|
// Always go to beneficiary detail page (which includes MockDashboard)
|
|
router.push(`/(tabs)/beneficiaries/${beneficiary.id}`);
|
|
};
|
|
|
|
const handleActivate = (beneficiary: Beneficiary) => {
|
|
setCurrentBeneficiary(beneficiary);
|
|
router.push({
|
|
pathname: '/(auth)/activate',
|
|
params: { lovedOneName: beneficiary.name, beneficiaryId: beneficiary.id.toString() },
|
|
});
|
|
};
|
|
|
|
const getDisplayName = () => {
|
|
// Check firstName/lastName from API
|
|
if (user?.firstName) {
|
|
return user.lastName ? `${user.firstName} ${user.lastName}` : user.firstName;
|
|
}
|
|
// Fallback to email prefix
|
|
if (user?.email) return user.email.split('@')[0];
|
|
return 'User';
|
|
};
|
|
|
|
const displayName = getDisplayName();
|
|
const greeting = new Date().getHours() < 12 ? 'Good morning' : new Date().getHours() < 18 ? 'Good afternoon' : 'Good evening';
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
<View style={styles.header}>
|
|
<View>
|
|
<Text style={styles.greeting}>{greeting},</Text>
|
|
<Text style={styles.displayName}>{displayName}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="large" color={AppColors.primary} />
|
|
<Text style={styles.loadingText}>Loading...</Text>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<View style={styles.headerContent}>
|
|
<View>
|
|
<Text style={styles.greeting}>{greeting},</Text>
|
|
<Text style={styles.displayName}>{displayName}</Text>
|
|
</View>
|
|
<TouchableOpacity style={styles.headerAction} onPress={handleRefresh}>
|
|
<Ionicons name="refresh" size={22} color={AppColors.primary} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<View style={styles.errorContainer}>
|
|
<View style={styles.errorContent}>
|
|
<Ionicons name="alert-circle" size={24} color={AppColors.error} />
|
|
<Text style={styles.errorText}>{error}</Text>
|
|
</View>
|
|
<TouchableOpacity style={styles.retryButton} onPress={handleRefresh}>
|
|
<Text style={styles.retryButtonText}>Try Again</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
|
|
{/* Section Title */}
|
|
{beneficiaries.length > 0 && !error && (
|
|
<View style={styles.sectionHeader}>
|
|
<Text style={styles.sectionTitle}>My Loved Ones</Text>
|
|
<Text style={styles.sectionCount}>{beneficiaries.length}</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Content */}
|
|
{beneficiaries.length === 0 && !error ? (
|
|
<View style={styles.emptyContainer}>
|
|
<View style={styles.emptyIconContainer}>
|
|
<Ionicons name="people-outline" size={48} color={AppColors.primary} />
|
|
</View>
|
|
<Text style={styles.emptyTitle}>No loved ones yet</Text>
|
|
<Text style={styles.emptyText}>
|
|
Add a loved one to start monitoring their wellbeing and stay connected.
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={styles.addButtonLarge}
|
|
onPress={() => router.push('/(auth)/add-loved-one')}
|
|
>
|
|
<Ionicons name="add" size={22} color={AppColors.white} />
|
|
<Text style={styles.addButtonText}>Add Loved One</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
) : (
|
|
<>
|
|
<FlatList
|
|
data={beneficiaries}
|
|
keyExtractor={(item) => item.id.toString()}
|
|
renderItem={({ item }) => (
|
|
<BeneficiaryCard
|
|
beneficiary={item}
|
|
onPress={() => handleBeneficiaryPress(item)}
|
|
onActivate={() => handleActivate(item)}
|
|
/>
|
|
)}
|
|
contentContainerStyle={styles.listContent}
|
|
showsVerticalScrollIndicator={false}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={isRefreshing}
|
|
onRefresh={handleRefresh}
|
|
colors={[AppColors.primary]}
|
|
tintColor={AppColors.primary}
|
|
/>
|
|
}
|
|
/>
|
|
{/* Floating Add Button */}
|
|
<TouchableOpacity
|
|
style={styles.fab}
|
|
onPress={() => router.push('/(auth)/add-loved-one')}
|
|
activeOpacity={0.9}
|
|
>
|
|
<Ionicons name="add" size={28} color={AppColors.white} />
|
|
</TouchableOpacity>
|
|
</>
|
|
)}
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: AppColors.background,
|
|
},
|
|
header: {
|
|
paddingHorizontal: Spacing.lg,
|
|
paddingTop: Spacing.md,
|
|
paddingBottom: Spacing.lg,
|
|
backgroundColor: AppColors.background,
|
|
},
|
|
headerContent: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
greeting: {
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.textSecondary,
|
|
fontWeight: FontWeights.medium,
|
|
},
|
|
displayName: {
|
|
fontSize: FontSizes['2xl'],
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.textPrimary,
|
|
marginTop: 2,
|
|
},
|
|
headerAction: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: BorderRadius.lg,
|
|
backgroundColor: AppColors.primaryLighter,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
sectionHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: Spacing.lg,
|
|
marginBottom: Spacing.md,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: FontSizes.lg,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.textPrimary,
|
|
},
|
|
sectionCount: {
|
|
fontSize: FontSizes.sm,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.primary,
|
|
backgroundColor: AppColors.primaryLighter,
|
|
paddingHorizontal: Spacing.sm,
|
|
paddingVertical: 2,
|
|
borderRadius: BorderRadius.full,
|
|
marginLeft: Spacing.sm,
|
|
overflow: 'hidden',
|
|
},
|
|
loadingContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
loadingText: {
|
|
marginTop: Spacing.md,
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.textSecondary,
|
|
},
|
|
errorContainer: {
|
|
marginHorizontal: Spacing.lg,
|
|
marginBottom: Spacing.lg,
|
|
padding: Spacing.lg,
|
|
backgroundColor: AppColors.errorLight,
|
|
borderRadius: BorderRadius.lg,
|
|
borderWidth: 1,
|
|
borderColor: AppColors.error,
|
|
},
|
|
errorContent: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: Spacing.sm,
|
|
},
|
|
errorText: {
|
|
flex: 1,
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.error,
|
|
fontWeight: FontWeights.medium,
|
|
},
|
|
retryButton: {
|
|
marginTop: Spacing.md,
|
|
backgroundColor: AppColors.error,
|
|
paddingVertical: Spacing.sm,
|
|
paddingHorizontal: Spacing.lg,
|
|
borderRadius: BorderRadius.md,
|
|
alignSelf: 'flex-start',
|
|
},
|
|
retryButtonText: {
|
|
color: AppColors.white,
|
|
fontSize: FontSizes.sm,
|
|
fontWeight: FontWeights.semibold,
|
|
},
|
|
emptyContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingHorizontal: Spacing.xl,
|
|
},
|
|
emptyIconContainer: {
|
|
width: 96,
|
|
height: 96,
|
|
borderRadius: BorderRadius['2xl'],
|
|
backgroundColor: AppColors.primaryLighter,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: Spacing.lg,
|
|
},
|
|
emptyTitle: {
|
|
fontSize: FontSizes.xl,
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.textPrimary,
|
|
marginBottom: Spacing.sm,
|
|
},
|
|
emptyText: {
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.textSecondary,
|
|
textAlign: 'center',
|
|
lineHeight: 24,
|
|
marginBottom: Spacing.xl,
|
|
},
|
|
addButtonLarge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: AppColors.primary,
|
|
paddingVertical: Spacing.md,
|
|
paddingHorizontal: Spacing.xl,
|
|
borderRadius: BorderRadius.lg,
|
|
gap: Spacing.sm,
|
|
...Shadows.primary,
|
|
},
|
|
addButtonText: {
|
|
fontSize: FontSizes.base,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.white,
|
|
},
|
|
listContent: {
|
|
paddingHorizontal: Spacing.lg,
|
|
paddingBottom: 100,
|
|
},
|
|
// Card styles
|
|
card: {
|
|
backgroundColor: AppColors.surface,
|
|
borderRadius: BorderRadius.xl,
|
|
marginBottom: Spacing.md,
|
|
padding: Spacing.md,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
borderWidth: 2,
|
|
borderColor: 'transparent',
|
|
...Shadows.sm,
|
|
},
|
|
cardNoSubscription: {
|
|
borderColor: AppColors.error,
|
|
backgroundColor: AppColors.errorLight,
|
|
},
|
|
avatarWrapper: {
|
|
position: 'relative',
|
|
},
|
|
avatar: {
|
|
width: AvatarSizes.md,
|
|
height: AvatarSizes.md,
|
|
borderRadius: AvatarSizes.md / 2,
|
|
backgroundColor: AppColors.primaryLighter,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
avatarImage: {
|
|
width: AvatarSizes.md,
|
|
height: AvatarSizes.md,
|
|
borderRadius: AvatarSizes.md / 2,
|
|
},
|
|
avatarText: {
|
|
fontSize: FontSizes.xl,
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.primary,
|
|
},
|
|
avatarNoSubscription: {
|
|
backgroundColor: AppColors.errorLight,
|
|
},
|
|
avatarTextNoSubscription: {
|
|
color: AppColors.error,
|
|
},
|
|
info: {
|
|
flex: 1,
|
|
marginLeft: Spacing.md,
|
|
marginRight: Spacing.sm,
|
|
},
|
|
name: {
|
|
fontSize: FontSizes.lg,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.textPrimary,
|
|
},
|
|
roleText: {
|
|
fontSize: FontSizes.xs,
|
|
color: AppColors.textMuted,
|
|
marginTop: 2,
|
|
},
|
|
noSubscriptionBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: 4,
|
|
gap: 4,
|
|
},
|
|
noSubscriptionText: {
|
|
fontSize: FontSizes.xs,
|
|
fontWeight: FontWeights.medium,
|
|
color: AppColors.error,
|
|
},
|
|
statusBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: Spacing.sm,
|
|
paddingVertical: 4,
|
|
borderRadius: BorderRadius.md,
|
|
marginTop: 4,
|
|
alignSelf: 'flex-start',
|
|
gap: 4,
|
|
},
|
|
statusText: {
|
|
fontSize: FontSizes.xs,
|
|
fontWeight: FontWeights.medium,
|
|
},
|
|
activateButton: {
|
|
backgroundColor: AppColors.primary,
|
|
paddingHorizontal: Spacing.md,
|
|
paddingVertical: Spacing.sm,
|
|
borderRadius: BorderRadius.md,
|
|
},
|
|
activateButtonText: {
|
|
color: AppColors.white,
|
|
fontSize: FontSizes.sm,
|
|
fontWeight: FontWeights.semibold,
|
|
},
|
|
arrowContainer: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: BorderRadius.md,
|
|
backgroundColor: AppColors.surfaceSecondary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
// Floating Action Button
|
|
fab: {
|
|
position: 'absolute',
|
|
bottom: Spacing.xl,
|
|
right: Spacing.lg,
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
backgroundColor: AppColors.primary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
...Shadows.lg,
|
|
},
|
|
});
|