mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-10-31 18:19:43 +00:00
Update
This commit is contained in:
Jamie Brunton committed
1 parent
71667d6104
commit
f46f0d59df
24 files changed
+2647
-516
No files matched your search
@@ -1,6 +1,14 @@
|
||||
import { useEffect } from "react";
|
||||
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform, useWindowDimensions } from "react-native";
|
||||
import Animated, { FadeInDown, FadeInRight } from "react-native-reanimated";
|
||||
import Animated, {
|
||||
FadeInDown,
|
||||
FadeInRight,
|
||||
useSharedValue,
|
||||
useAnimatedStyle,
|
||||
withRepeat,
|
||||
withTiming,
|
||||
Easing,
|
||||
} from "react-native-reanimated";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { useAuthStore, useMatchStore, usePacksStore } from "../../src/store";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
@@ -25,6 +33,28 @@ export default function HomeScreen() {
|
||||
const isWideScreen = width > MAX_CONTENT_WIDTH;
|
||||
const enabledPacksCount = packs.length;
|
||||
|
||||
// Subtle pulsating animation for the CTA icon
|
||||
const pulseScale = useSharedValue(1);
|
||||
|
||||
useEffect(() => {
|
||||
const startPulse = () => {
|
||||
pulseScale.value = 1;
|
||||
pulseScale.value = withRepeat(
|
||||
withTiming(1.1, { duration: 1000, easing: Easing.inOut(Easing.ease) }),
|
||||
-1,
|
||||
true
|
||||
);
|
||||
};
|
||||
const timeout = setTimeout(startPulse, 100);
|
||||
return () => clearTimeout(timeout);
|
||||
}, []);
|
||||
|
||||
const pulseAnimatedStyle = useAnimatedStyle(() => {
|
||||
return {
|
||||
transform: [{ scale: pulseScale.value }],
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<GradientBackground>
|
||||
<ScrollView
|
||||
@@ -191,9 +221,9 @@ export default function HomeScreen() {
|
||||
Swipe through questions and discover what you both enjoy
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.ctaIconContainer}>
|
||||
<Animated.View style={[styles.ctaIconContainer, pulseAnimatedStyle]}>
|
||||
<Ionicons name="flame" size={24} color={colors.text} />
|
||||
</View>
|
||||
</Animated.View>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { View, Text, StyleSheet, FlatList, RefreshControl, TouchableOpacity, ActivityIndicator, Platform, useWindowDimensions } from "react-native";
|
||||
import { useMatchStore, useAuthStore } from "../../src/store";
|
||||
import { useEffect, useCallback } from "react";
|
||||
import { useEffect, useCallback, useState } from "react";
|
||||
import { useFocusEffect } from "expo-router";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useRouter } from "expo-router";
|
||||
@@ -8,6 +8,8 @@ import { LinearGradient } from "expo-linear-gradient";
|
||||
import Animated, { FadeInDown, FadeInRight } from "react-native-reanimated";
|
||||
import { GradientBackground, GlassCard } from "../../src/components/ui";
|
||||
import { colors, gradients, spacing, typography, radius, shadows } from "../../src/theme";
|
||||
import MatchesTutorial from "../../src/components/MatchesTutorial";
|
||||
import { hasSeenMatchesTutorial, markMatchesTutorialSeen } from "../../src/lib/matchesTutorialSeen";
|
||||
|
||||
const MAX_CONTENT_WIDTH = 500;
|
||||
|
||||
@@ -17,6 +19,27 @@ export default function MatchesScreen() {
|
||||
const router = useRouter();
|
||||
const { width } = useWindowDimensions();
|
||||
const isWideScreen = width > MAX_CONTENT_WIDTH;
|
||||
const [showTutorial, setShowTutorial] = useState(false);
|
||||
|
||||
// Check if tutorial should be shown when screen is focused or matches change
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
const checkTutorial = async () => {
|
||||
if (matches.length > 0) {
|
||||
const seen = await hasSeenMatchesTutorial();
|
||||
if (!seen) {
|
||||
setShowTutorial(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
checkTutorial();
|
||||
}, [matches.length])
|
||||
);
|
||||
|
||||
const handleTutorialComplete = async () => {
|
||||
await markMatchesTutorialSeen();
|
||||
setShowTutorial(false);
|
||||
};
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
@@ -187,6 +210,11 @@ export default function MatchesScreen() {
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Matches Tutorial Overlay */}
|
||||
{showTutorial && (
|
||||
<MatchesTutorial onComplete={handleTutorialComplete} />
|
||||
)}
|
||||
</GradientBackground>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -313,7 +313,6 @@ export default function OnboardingScreen() {
|
||||
</View>
|
||||
|
||||
<GlassCard style={styles.card}>
|
||||
<Text style={styles.label}>I'm using Sauci to...</Text>
|
||||
<View style={styles.purposeList}>
|
||||
{PURPOSE_OPTIONS.map((option) => (
|
||||
<Pressable
|
||||
|
||||
+137
-267
@@ -1,24 +1,23 @@
|
||||
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Switch, RefreshControl, Platform, Alert } from "react-native";
|
||||
import { View, Text, StyleSheet, ScrollView, RefreshControl, Platform, Alert } from "react-native";
|
||||
import { usePacksStore, useAuthStore, useSubscriptionStore } from "../../src/store";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { router } from "expo-router";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useMemo, useState, useCallback } from "react";
|
||||
import Animated, { FadeInDown, FadeInRight, FadeIn, FadeOut, Layout } from "react-native-reanimated";
|
||||
import { GradientBackground, GlassCard } from "../../src/components/ui";
|
||||
import Animated, { FadeInDown, FadeIn, Layout } from "react-native-reanimated";
|
||||
import { GradientBackground } from "../../src/components/ui";
|
||||
import { Paywall } from "../../src/components/Paywall";
|
||||
import { PackTeaser } from "../../src/components/PackTeaser";
|
||||
import { colors, spacing, typography, radius } from "../../src/theme";
|
||||
import type { QuestionPack, Category } from "../../src/types";
|
||||
|
||||
interface CategoryWithPacks extends Category {
|
||||
packs: QuestionPack[];
|
||||
}
|
||||
import { CategoryTabs, FilterType } from "../../src/components/CategoryTabs";
|
||||
import { BoutiquePackCard } from "../../src/components/BoutiquePackCard";
|
||||
import { colors, spacing, typography } from "../../src/theme";
|
||||
import type { QuestionPack } from "../../src/types";
|
||||
|
||||
export default function PacksScreen() {
|
||||
const { category } = useLocalSearchParams<{ category?: string }>();
|
||||
const { packs, categories, enabledPackIds, togglePack, isLoading, fetchPacks } = usePacksStore();
|
||||
const { user, partner } = useAuthStore();
|
||||
const { subscription } = useSubscriptionStore();
|
||||
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
|
||||
const [selectedFilter, setSelectedFilter] = useState<FilterType>('all');
|
||||
const [showPaywall, setShowPaywall] = useState(false);
|
||||
const [showTeaser, setShowTeaser] = useState(false);
|
||||
const [teaserPack, setTeaserPack] = useState<QuestionPack | null>(null);
|
||||
@@ -32,6 +31,47 @@ export default function PacksScreen() {
|
||||
fetchPacks();
|
||||
}, []);
|
||||
|
||||
// Apply category filter from URL param
|
||||
useEffect(() => {
|
||||
if (category) {
|
||||
setSelectedFilter(category);
|
||||
}
|
||||
}, [category]);
|
||||
|
||||
// Filter packs by selected filter (all, enabled, or category id)
|
||||
const filteredPacks = useMemo(() => {
|
||||
if (selectedFilter === 'all') return packs;
|
||||
if (selectedFilter === 'enabled') return packs.filter(p => enabledPackIds.includes(p.id));
|
||||
// Otherwise it's a category id
|
||||
return packs.filter(p => p.category_id === selectedFilter);
|
||||
}, [packs, selectedFilter, enabledPackIds]);
|
||||
|
||||
// Split packs into two columns for masonry layout
|
||||
const { leftColumn, rightColumn } = useMemo(() => {
|
||||
const left: { pack: QuestionPack; index: number }[] = [];
|
||||
const right: { pack: QuestionPack; index: number }[] = [];
|
||||
let leftHeight = 0;
|
||||
let rightHeight = 0;
|
||||
|
||||
filteredPacks.forEach((pack, index) => {
|
||||
// Estimate card height based on description length
|
||||
const baseHeight = 180;
|
||||
const descLength = pack.description?.length || 0;
|
||||
const extraHeight = Math.min(Math.ceil(descLength / 40) * 10, 40);
|
||||
const cardHeight = baseHeight + extraHeight;
|
||||
|
||||
if (leftHeight <= rightHeight) {
|
||||
left.push({ pack, index });
|
||||
leftHeight += cardHeight;
|
||||
} else {
|
||||
right.push({ pack, index });
|
||||
rightHeight += cardHeight;
|
||||
}
|
||||
});
|
||||
|
||||
return { leftColumn: left, rightColumn: right };
|
||||
}, [filteredPacks]);
|
||||
|
||||
// Handle toggling a pack - show teaser if premium pack without access
|
||||
const handleTogglePack = useCallback(async (pack: QuestionPack) => {
|
||||
if (pack.is_premium && !hasPremiumAccess) {
|
||||
@@ -52,6 +92,17 @@ export default function PacksScreen() {
|
||||
}
|
||||
}, [hasPremiumAccess, togglePack]);
|
||||
|
||||
// Handle pack press - navigate or show teaser
|
||||
const handlePackPress = useCallback((pack: QuestionPack) => {
|
||||
const isPremiumLocked = pack.is_premium && !hasPremiumAccess;
|
||||
if (isPremiumLocked) {
|
||||
setTeaserPack(pack);
|
||||
setShowTeaser(true);
|
||||
} else {
|
||||
router.push(`/pack/${pack.id}`);
|
||||
}
|
||||
}, [hasPremiumAccess]);
|
||||
|
||||
// Handle teaser unlock button - show paywall
|
||||
const handleTeaserUnlock = useCallback(() => {
|
||||
setShowTeaser(false);
|
||||
@@ -68,155 +119,10 @@ export default function PacksScreen() {
|
||||
const enabledPackCount = enabledPacks.length;
|
||||
const totalQuestions = enabledPacks.reduce((sum, p) => sum + (p.questions?.[0]?.count || 0), 0);
|
||||
|
||||
// Group packs by category
|
||||
const categoriesWithPacks = useMemo((): CategoryWithPacks[] => {
|
||||
return categories
|
||||
.map(category => ({
|
||||
...category,
|
||||
packs: packs.filter(p => p.category_id === category.id)
|
||||
}))
|
||||
.filter(cat => cat.packs.length > 0);
|
||||
}, [packs, categories]);
|
||||
|
||||
const toggleCategory = useCallback((categoryId: string) => {
|
||||
setExpandedCategories(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(categoryId)) {
|
||||
next.delete(categoryId);
|
||||
} else {
|
||||
next.add(categoryId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const renderPack = (item: QuestionPack, index: number) => {
|
||||
const isEnabled = enabledPackIds.includes(item.id);
|
||||
const isPremiumLocked = item.is_premium && !hasPremiumAccess;
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
key={item.id}
|
||||
entering={FadeIn.delay(index * 50).duration(200)}
|
||||
exiting={FadeOut.duration(150)}
|
||||
layout={Layout.springify()}
|
||||
>
|
||||
<View style={styles.packItem}>
|
||||
<TouchableOpacity
|
||||
style={styles.packContent}
|
||||
activeOpacity={0.7}
|
||||
onPress={() => {
|
||||
if (isPremiumLocked) {
|
||||
setTeaserPack(item);
|
||||
setShowTeaser(true);
|
||||
} else {
|
||||
router.push(`/pack/${item.id}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View style={[
|
||||
styles.packIcon,
|
||||
isEnabled && styles.packIconActive,
|
||||
isPremiumLocked && styles.packIconLocked
|
||||
]}>
|
||||
<Text style={styles.packEmoji}>{item.icon || "📦"}</Text>
|
||||
</View>
|
||||
<View style={styles.packInfo}>
|
||||
<View style={styles.packHeader}>
|
||||
<Text
|
||||
style={[
|
||||
styles.packName,
|
||||
isPremiumLocked && styles.packNameLocked
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{item.name}
|
||||
</Text>
|
||||
{item.is_premium && (
|
||||
<View style={[
|
||||
styles.badge,
|
||||
isPremiumLocked && styles.badgeLocked
|
||||
]}>
|
||||
<Ionicons
|
||||
name={isPremiumLocked ? "lock-closed" : "star"}
|
||||
size={10}
|
||||
color={colors.text}
|
||||
/>
|
||||
<Text style={styles.badgeText}>PRO</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Text style={[
|
||||
styles.packDescription,
|
||||
isPremiumLocked && styles.packDescriptionLocked
|
||||
]} numberOfLines={1}>
|
||||
{isPremiumLocked ? "Upgrade to unlock" : item.description}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<Switch
|
||||
value={isEnabled}
|
||||
onValueChange={() => handleTogglePack(item)}
|
||||
disabled={isPremiumLocked}
|
||||
trackColor={{
|
||||
false: colors.glass.background,
|
||||
true: colors.primary,
|
||||
}}
|
||||
thumbColor={colors.text}
|
||||
ios_backgroundColor={colors.glass.background}
|
||||
style={isPremiumLocked ? { opacity: 0.4 } : undefined}
|
||||
/>
|
||||
</View>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
const renderCategory = ({ item: category, index }: { item: CategoryWithPacks; index: number }) => {
|
||||
const isExpanded = expandedCategories.has(category.id);
|
||||
const enabledInCategory = category.packs.filter(p => enabledPackIds.includes(p.id)).length;
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
entering={FadeInDown.delay(index * 100).duration(300)}
|
||||
layout={Layout.springify()}
|
||||
>
|
||||
<GlassCard style={styles.categoryCard}>
|
||||
<TouchableOpacity
|
||||
style={styles.categoryHeader}
|
||||
activeOpacity={0.7}
|
||||
onPress={() => toggleCategory(category.id)}
|
||||
>
|
||||
<Text style={styles.categoryIcon}>{category.icon}</Text>
|
||||
<View style={styles.categoryInfo}>
|
||||
<Text style={styles.categoryName}>{category.name}</Text>
|
||||
<Text style={styles.categoryMeta}>
|
||||
{category.packs.length} packs · {enabledInCategory} enabled
|
||||
</Text>
|
||||
</View>
|
||||
<Ionicons
|
||||
name={isExpanded ? "chevron-up" : "chevron-down"}
|
||||
size={24}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
{isExpanded && (
|
||||
<Animated.View
|
||||
entering={FadeIn.duration(200)}
|
||||
exiting={FadeOut.duration(150)}
|
||||
style={styles.packsContainer}
|
||||
>
|
||||
{category.packs.map((pack, idx) => renderPack(pack, idx))}
|
||||
</Animated.View>
|
||||
)}
|
||||
</GlassCard>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<GradientBackground>
|
||||
<View style={styles.container}>
|
||||
{/* Header */}
|
||||
<Animated.View
|
||||
entering={FadeInDown.duration(400)}
|
||||
style={styles.header}
|
||||
@@ -227,11 +133,18 @@ export default function PacksScreen() {
|
||||
</Text>
|
||||
</Animated.View>
|
||||
|
||||
<FlatList
|
||||
data={categoriesWithPacks}
|
||||
renderItem={renderCategory}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerStyle={styles.list}
|
||||
{/* Category Tabs */}
|
||||
<Animated.View entering={FadeInDown.delay(100).duration(400)}>
|
||||
<CategoryTabs
|
||||
categories={categories}
|
||||
selectedFilter={selectedFilter}
|
||||
onSelectFilter={setSelectedFilter}
|
||||
enabledCount={enabledPackIds.length}
|
||||
/>
|
||||
</Animated.View>
|
||||
|
||||
{/* Masonry Grid */}
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
@@ -241,7 +154,9 @@ export default function PacksScreen() {
|
||||
colors={[colors.primary]}
|
||||
/>
|
||||
}
|
||||
ListEmptyComponent={
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
>
|
||||
{filteredPacks.length === 0 ? (
|
||||
<Animated.View
|
||||
entering={FadeInDown.delay(200).duration(400)}
|
||||
style={styles.emptyContainer}
|
||||
@@ -251,12 +166,59 @@ export default function PacksScreen() {
|
||||
</View>
|
||||
<Text style={styles.emptyTitle}>No packs available</Text>
|
||||
<Text style={styles.emptyText}>
|
||||
Check back later for new question packs!
|
||||
{selectedFilter === 'enabled'
|
||||
? "No packs enabled yet. Enable some packs to see them here!"
|
||||
: selectedFilter !== 'all'
|
||||
? "No packs in this category. Try selecting a different one."
|
||||
: "Check back later for new question packs!"}
|
||||
</Text>
|
||||
</Animated.View>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.masonryContainer}>
|
||||
{/* Left Column */}
|
||||
<View style={styles.column}>
|
||||
{leftColumn.map(({ pack, index }, columnIndex) => (
|
||||
<Animated.View
|
||||
key={pack.id}
|
||||
entering={FadeInDown.delay(columnIndex * 80).duration(400)}
|
||||
layout={Layout.springify()}
|
||||
>
|
||||
<BoutiquePackCard
|
||||
pack={pack}
|
||||
index={index}
|
||||
isEnabled={enabledPackIds.includes(pack.id)}
|
||||
isPremiumLocked={pack.is_premium && !hasPremiumAccess}
|
||||
onPress={() => handlePackPress(pack)}
|
||||
onToggle={() => handleTogglePack(pack)}
|
||||
/>
|
||||
</Animated.View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Right Column */}
|
||||
<View style={styles.column}>
|
||||
{rightColumn.map(({ pack, index }, columnIndex) => (
|
||||
<Animated.View
|
||||
key={pack.id}
|
||||
entering={FadeInDown.delay(columnIndex * 80 + 40).duration(400)}
|
||||
layout={Layout.springify()}
|
||||
>
|
||||
<BoutiquePackCard
|
||||
pack={pack}
|
||||
index={index}
|
||||
isEnabled={enabledPackIds.includes(pack.id)}
|
||||
isPremiumLocked={pack.is_premium && !hasPremiumAccess}
|
||||
onPress={() => handlePackPress(pack)}
|
||||
onToggle={() => handleTogglePack(pack)}
|
||||
/>
|
||||
</Animated.View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
{/* Modals */}
|
||||
{teaserPack && (
|
||||
<PackTeaser
|
||||
visible={showTeaser}
|
||||
@@ -288,7 +250,7 @@ const styles = StyleSheet.create({
|
||||
header: {
|
||||
paddingTop: 60,
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingBottom: spacing.md,
|
||||
paddingBottom: spacing.sm,
|
||||
},
|
||||
title: {
|
||||
...typography.title1,
|
||||
@@ -299,114 +261,22 @@ const styles = StyleSheet.create({
|
||||
color: colors.textSecondary,
|
||||
marginTop: spacing.xs,
|
||||
},
|
||||
list: {
|
||||
padding: spacing.lg,
|
||||
scrollContent: {
|
||||
paddingBottom: Platform.OS === 'ios' ? 120 : 100,
|
||||
},
|
||||
categoryCard: {
|
||||
marginBottom: spacing.md,
|
||||
masonryContainer: {
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: spacing.md,
|
||||
gap: spacing.md,
|
||||
},
|
||||
categoryHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
categoryIcon: {
|
||||
fontSize: 32,
|
||||
marginRight: spacing.md,
|
||||
},
|
||||
categoryInfo: {
|
||||
column: {
|
||||
flex: 1,
|
||||
},
|
||||
categoryName: {
|
||||
...typography.title3,
|
||||
color: colors.text,
|
||||
},
|
||||
categoryMeta: {
|
||||
...typography.caption1,
|
||||
color: colors.textSecondary,
|
||||
marginTop: 2,
|
||||
},
|
||||
packsContainer: {
|
||||
marginTop: spacing.md,
|
||||
paddingTop: spacing.md,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.glass.border,
|
||||
},
|
||||
packItem: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingVertical: spacing.sm,
|
||||
},
|
||||
packContent: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
packIcon: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
backgroundColor: colors.glass.background,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: spacing.md,
|
||||
},
|
||||
packIconActive: {
|
||||
backgroundColor: colors.primaryLight,
|
||||
},
|
||||
packIconLocked: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
packEmoji: {
|
||||
fontSize: 22,
|
||||
},
|
||||
packInfo: {
|
||||
flex: 1,
|
||||
marginRight: spacing.md,
|
||||
},
|
||||
packHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 2,
|
||||
},
|
||||
packName: {
|
||||
...typography.headline,
|
||||
color: colors.text,
|
||||
marginRight: spacing.sm,
|
||||
flex: 1,
|
||||
flexShrink: 1,
|
||||
},
|
||||
packNameLocked: {
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
packDescription: {
|
||||
...typography.caption1,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
packDescriptionLocked: {
|
||||
color: colors.textTertiary,
|
||||
fontStyle: "italic",
|
||||
},
|
||||
badge: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: colors.primary,
|
||||
paddingHorizontal: spacing.sm,
|
||||
paddingVertical: 2,
|
||||
borderRadius: radius.xs,
|
||||
gap: 2,
|
||||
},
|
||||
badgeLocked: {
|
||||
backgroundColor: colors.glass.backgroundLight,
|
||||
},
|
||||
badgeText: {
|
||||
...typography.caption2,
|
||||
color: colors.text,
|
||||
fontWeight: "700",
|
||||
gap: spacing.md,
|
||||
},
|
||||
emptyContainer: {
|
||||
alignItems: "center",
|
||||
paddingVertical: spacing.xxl,
|
||||
paddingHorizontal: spacing.lg,
|
||||
},
|
||||
emptyIconContainer: {
|
||||
width: 80,
|
||||
|
||||
@@ -6,6 +6,7 @@ import { LinearGradient } from "expo-linear-gradient";
|
||||
import Animated, { FadeInDown } from "react-native-reanimated";
|
||||
import { supabase } from "../../src/lib/supabase";
|
||||
import { resetSwipeTutorial } from "../../src/lib/swipeTutorialSeen";
|
||||
import { resetMatchesTutorial } from "../../src/lib/matchesTutorialSeen";
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import * as FileSystem from 'expo-file-system';
|
||||
import { decode } from 'base64-arraybuffer';
|
||||
@@ -821,6 +822,60 @@ export default function ProfileScreen() {
|
||||
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.preferencesDivider} />
|
||||
<TouchableOpacity
|
||||
style={styles.rowContainer}
|
||||
onPress={async () => {
|
||||
await resetMatchesTutorial();
|
||||
Alert.alert("Success", "Matches tutorial has been reset. It will show again next time you visit the matches screen.");
|
||||
}}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.rowLeft}>
|
||||
<View style={styles.debugIcon}>
|
||||
<Ionicons name="heart" size={20} color={colors.warning} />
|
||||
</View>
|
||||
<View style={styles.rowTextContainer}>
|
||||
<Text style={styles.rowValue}>Reset Matches Tutorial</Text>
|
||||
<Text style={styles.rowLabel}>Show the tutorial again</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.chevronContainer}>
|
||||
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.preferencesDivider} />
|
||||
<TouchableOpacity
|
||||
style={styles.rowContainer}
|
||||
onPress={async () => {
|
||||
if (!user?.id) return;
|
||||
try {
|
||||
const { error } = await supabase
|
||||
.from('profiles')
|
||||
.update({ onboarding_completed: false })
|
||||
.eq('id', user.id);
|
||||
if (error) throw error;
|
||||
await fetchUser();
|
||||
Alert.alert("Success", "Onboarding has been reset. You will see the onboarding flow on next app launch.");
|
||||
} catch (error) {
|
||||
Alert.alert("Error", "Failed to reset onboarding.");
|
||||
}
|
||||
}}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.rowLeft}>
|
||||
<View style={styles.debugIcon}>
|
||||
<Ionicons name="school-outline" size={20} color={colors.warning} />
|
||||
</View>
|
||||
<View style={styles.rowTextContainer}>
|
||||
<Text style={styles.rowValue}>Reset Onboarding</Text>
|
||||
<Text style={styles.rowLabel}>Show onboarding flow again</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.chevronContainer}>
|
||||
<Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</GlassCard>
|
||||
</Animated.View>
|
||||
)}
|
||||
|
||||
+429
-233
@@ -1,9 +1,14 @@
|
||||
import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, Modal, Pressable } from "react-native";
|
||||
import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, Modal, Pressable, Platform } from "react-native";
|
||||
import { useLocalSearchParams, useRouter } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { supabase } from "../../src/lib/supabase";
|
||||
import { usePacksStore } from "../../src/store";
|
||||
import { usePacksStore, useSubscriptionStore, useAuthStore } from "../../src/store";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import Animated, { FadeInDown, FadeIn } from "react-native-reanimated";
|
||||
import { GradientBackground, GlassCard, ShimmerEffect } from "../../src/components/ui";
|
||||
import { colors, gradients, spacing, radius, typography, blur, shadows } from "../../src/theme";
|
||||
import { Question } from "../../src/types";
|
||||
|
||||
type TooltipType = 'initiator' | 'coupleType' | null;
|
||||
@@ -19,15 +24,31 @@ const TOOLTIP_CONTENT = {
|
||||
},
|
||||
};
|
||||
|
||||
// Boutique gradient for question cards
|
||||
const QUESTION_GRADIENTS: Array<readonly [string, string]> = [
|
||||
['rgba(233, 69, 96, 0.15)', 'rgba(155, 89, 182, 0.15)'],
|
||||
['rgba(155, 89, 182, 0.15)', 'rgba(233, 69, 96, 0.15)'],
|
||||
['rgba(183, 110, 121, 0.12)', 'rgba(139, 69, 87, 0.12)'],
|
||||
['rgba(142, 68, 173, 0.12)', 'rgba(44, 62, 80, 0.12)'],
|
||||
];
|
||||
|
||||
export default function PackDetailsScreen() {
|
||||
const { id } = useLocalSearchParams();
|
||||
const router = useRouter();
|
||||
const { packs, fetchPacks } = usePacksStore();
|
||||
const { subscription } = useSubscriptionStore();
|
||||
const { user, partner } = useAuthStore();
|
||||
const [questions, setQuestions] = useState<Question[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [activeTooltip, setActiveTooltip] = useState<TooltipType>(null);
|
||||
|
||||
const pack = packs.find((p) => p.id === id);
|
||||
const hasPremiumAccess = user?.is_premium || partner?.is_premium || subscription.isProUser;
|
||||
const isPremium = pack?.is_premium && hasPremiumAccess;
|
||||
|
||||
// Get category for breadcrumb
|
||||
const { categories } = usePacksStore();
|
||||
const category = categories.find(c => c.id === pack?.category_id);
|
||||
|
||||
useEffect(() => {
|
||||
if (packs.length === 0) {
|
||||
@@ -53,311 +74,486 @@ export default function PackDetailsScreen() {
|
||||
}
|
||||
};
|
||||
|
||||
const renderItem = ({ item }: { item: Question }) => (
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.questionText}>{item.text}</Text>
|
||||
{item.partner_text && (
|
||||
<Text style={styles.partnerText}>Partner role: {item.partner_text}</Text>
|
||||
)}
|
||||
<View style={styles.footerContainer}>
|
||||
<View style={styles.intensityContainer}>
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<Ionicons
|
||||
key={index}
|
||||
name="flame"
|
||||
size={12}
|
||||
color={index < item.intensity ? "#e94560" : "#333"}
|
||||
style={{ marginRight: 2 }}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
{/* Initiator indicator */}
|
||||
{item.target_user_genders && item.target_user_genders.length > 0 ? (
|
||||
<View style={styles.targetsContainer}>
|
||||
<Pressable
|
||||
style={[styles.targetBadge, styles.initiatorBadge]}
|
||||
onPress={() => setActiveTooltip('initiator')}
|
||||
>
|
||||
<Ionicons name="arrow-forward" size={12} color="#f39c12" style={{ marginRight: 4 }} />
|
||||
{item.target_user_genders.map((g, i) => (
|
||||
<Ionicons
|
||||
key={g}
|
||||
name={g === 'male' ? 'male' : g === 'female' ? 'female' : 'person'}
|
||||
size={14}
|
||||
color="#f39c12"
|
||||
style={i > 0 ? { marginLeft: 4 } : {}}
|
||||
/>
|
||||
))}
|
||||
<Ionicons name="help-circle-outline" size={14} color="#f39c12" style={{ marginLeft: 6 }} />
|
||||
</Pressable>
|
||||
</View>
|
||||
) : null}
|
||||
{/* Couple type indicator */}
|
||||
{item.allowed_couple_genders && item.allowed_couple_genders.length > 0 ? (
|
||||
<Pressable
|
||||
style={styles.targetsContainer}
|
||||
onPress={() => setActiveTooltip('coupleType')}
|
||||
>
|
||||
{item.allowed_couple_genders.map((g) => {
|
||||
const icons = [];
|
||||
if (g === 'male+male') {
|
||||
icons.push('male', 'male');
|
||||
} else if (g === 'female+female') {
|
||||
icons.push('female', 'female');
|
||||
} else {
|
||||
icons.push('male', 'female');
|
||||
}
|
||||
const useBlur = Platform.OS === 'ios';
|
||||
|
||||
return (
|
||||
<View key={g} style={styles.targetBadge}>
|
||||
{icons.map((icon, i) => (
|
||||
<Ionicons
|
||||
key={i}
|
||||
name={icon as any}
|
||||
size={14}
|
||||
color="#ccc"
|
||||
style={i > 0 ? { marginLeft: 4 } : {}}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
<Ionicons name="help-circle-outline" size={14} color="#ccc" style={{ marginLeft: 6 }} />
|
||||
</Pressable>
|
||||
) : (
|
||||
<Pressable
|
||||
style={styles.targetsContainer}
|
||||
onPress={() => setActiveTooltip('coupleType')}
|
||||
>
|
||||
<View style={styles.targetBadge}>
|
||||
<Ionicons name="people" size={14} color="#ccc" />
|
||||
const renderItem = ({ item, index }: { item: Question; index: number }) => {
|
||||
const cardGradient = QUESTION_GRADIENTS[index % QUESTION_GRADIENTS.length];
|
||||
|
||||
return (
|
||||
<Animated.View entering={FadeInDown.delay(index * 50).duration(300)}>
|
||||
<GlassCard style={styles.questionCard}>
|
||||
{/* Subtle gradient overlay */}
|
||||
<LinearGradient
|
||||
colors={cardGradient}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
|
||||
<View style={styles.questionContent}>
|
||||
<Text style={styles.questionText}>{item.text}</Text>
|
||||
|
||||
{item.partner_text && (
|
||||
<View style={styles.partnerTextContainer}>
|
||||
<Ionicons name="swap-horizontal" size={14} color={colors.premium.rose} />
|
||||
<Text style={styles.partnerText}>{item.partner_text}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.footerContainer}>
|
||||
{/* Intensity */}
|
||||
<View style={styles.intensityContainer}>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Ionicons
|
||||
key={i}
|
||||
name="flame"
|
||||
size={14}
|
||||
color={i < item.intensity ? colors.primary : colors.textTertiary}
|
||||
style={{ marginRight: 2 }}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View style={styles.badgesContainer}>
|
||||
{/* Initiator indicator */}
|
||||
{item.target_user_genders && item.target_user_genders.length > 0 && (
|
||||
<Pressable
|
||||
style={styles.targetBadge}
|
||||
onPress={() => setActiveTooltip('initiator')}
|
||||
>
|
||||
<Ionicons name="arrow-forward" size={12} color={colors.premium.gold} style={{ marginRight: 4 }} />
|
||||
{item.target_user_genders.map((g, i) => (
|
||||
<Ionicons
|
||||
key={g}
|
||||
name={g === 'male' ? 'male' : g === 'female' ? 'female' : 'person'}
|
||||
size={14}
|
||||
color={colors.premium.gold}
|
||||
style={i > 0 ? { marginLeft: 4 } : {}}
|
||||
/>
|
||||
))}
|
||||
<Ionicons name="help-circle-outline" size={12} color={colors.premium.gold} style={{ marginLeft: 4 }} />
|
||||
</Pressable>
|
||||
)}
|
||||
|
||||
{/* Couple type indicator */}
|
||||
<Pressable
|
||||
style={styles.targetBadge}
|
||||
onPress={() => setActiveTooltip('coupleType')}
|
||||
>
|
||||
{item.allowed_couple_genders && item.allowed_couple_genders.length > 0 ? (
|
||||
item.allowed_couple_genders.map((g) => {
|
||||
const icons: ('male' | 'female')[] = [];
|
||||
if (g === 'male+male') {
|
||||
icons.push('male', 'male');
|
||||
} else if (g === 'female+female') {
|
||||
icons.push('female', 'female');
|
||||
} else {
|
||||
icons.push('male', 'female');
|
||||
}
|
||||
|
||||
return (
|
||||
<View key={g} style={styles.coupleIconGroup}>
|
||||
{icons.map((icon, i) => (
|
||||
<Ionicons
|
||||
key={i}
|
||||
name={icon}
|
||||
size={14}
|
||||
color={colors.textSecondary}
|
||||
style={i > 0 ? { marginLeft: 2 } : {}}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Ionicons name="people" size={14} color={colors.textSecondary} />
|
||||
)}
|
||||
<Ionicons name="help-circle-outline" size={12} color={colors.textTertiary} style={{ marginLeft: 4 }} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
<Ionicons name="help-circle-outline" size={14} color="#ccc" style={{ marginLeft: 6 }} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</GlassCard>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<GradientBackground>
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color={colors.primary} />
|
||||
</View>
|
||||
</GradientBackground>
|
||||
);
|
||||
}
|
||||
|
||||
const heroContent = (
|
||||
<View style={styles.heroInner}>
|
||||
{/* Background gradient */}
|
||||
<LinearGradient
|
||||
colors={isPremium ? gradients.boutiqueGold as [string, string] : gradients.boutiqueRose as [string, string]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
|
||||
{/* Glass overlay */}
|
||||
{useBlur ? (
|
||||
<BlurView
|
||||
intensity={blur.light}
|
||||
tint="dark"
|
||||
style={[StyleSheet.absoluteFill, styles.heroBlur]}
|
||||
/>
|
||||
) : (
|
||||
<View style={[StyleSheet.absoluteFill, styles.heroBlurFallback]} />
|
||||
)}
|
||||
|
||||
{/* Silk texture */}
|
||||
<LinearGradient
|
||||
colors={gradients.silkLight as [string, string]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={[StyleSheet.absoluteFill, { opacity: 0.5 }]}
|
||||
/>
|
||||
|
||||
{/* Back button */}
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
|
||||
<View style={styles.backButtonInner}>
|
||||
<Ionicons name="arrow-back" size={22} color={colors.text} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Pack info */}
|
||||
<View style={styles.heroContent}>
|
||||
<View style={[
|
||||
styles.iconContainer,
|
||||
isPremium && styles.iconContainerPremium
|
||||
]}>
|
||||
<Text style={styles.emoji}>{pack?.icon || "📦"}</Text>
|
||||
</View>
|
||||
|
||||
{pack?.is_premium && (
|
||||
<View style={styles.proBadge}>
|
||||
<Ionicons name="star" size={12} color={colors.text} />
|
||||
<Text style={styles.proBadgeText}>PRO</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Category breadcrumb - tappable to filter by category */}
|
||||
{category && (
|
||||
<TouchableOpacity
|
||||
style={styles.breadcrumb}
|
||||
onPress={() => router.replace(`/(app)/packs?category=${category.id}`)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.breadcrumbText}>{category.icon} {category.name}</Text>
|
||||
<Ionicons name="chevron-forward" size={12} color={colors.textTertiary} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<Text style={styles.title}>{pack?.name || "Pack Details"}</Text>
|
||||
<Text style={styles.description}>{pack?.description}</Text>
|
||||
|
||||
<View style={styles.statsBadge}>
|
||||
<Text style={styles.statsText}>{questions.length} questions</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#e94560" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
|
||||
<Ionicons name="arrow-back" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.title}>{pack?.name || "Pack Details"}</Text>
|
||||
<View style={{ width: 24 }} />
|
||||
</View>
|
||||
<GradientBackground>
|
||||
<View style={styles.container}>
|
||||
{/* Hero Section */}
|
||||
<Animated.View entering={FadeIn.duration(400)}>
|
||||
{isPremium ? (
|
||||
<ShimmerEffect enabled={true} style={styles.heroContainer}>
|
||||
{heroContent}
|
||||
</ShimmerEffect>
|
||||
) : (
|
||||
<View style={styles.heroContainer}>
|
||||
{heroContent}
|
||||
</View>
|
||||
)}
|
||||
</Animated.View>
|
||||
|
||||
{pack && (
|
||||
<View style={styles.packInfo}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Text style={styles.emoji}>{pack.icon || "📦"}</Text>
|
||||
</View>
|
||||
<Text style={styles.description}>{pack.description}</Text>
|
||||
</View>
|
||||
)}
|
||||
{/* Questions List */}
|
||||
<FlatList
|
||||
data={questions}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerStyle={styles.list}
|
||||
showsVerticalScrollIndicator={false}
|
||||
ListEmptyComponent={
|
||||
<Animated.View entering={FadeInDown.delay(100).duration(300)} style={styles.emptyContainer}>
|
||||
<Ionicons name="help-circle-outline" size={48} color={colors.textTertiary} />
|
||||
<Text style={styles.emptyText}>No questions in this pack yet</Text>
|
||||
</Animated.View>
|
||||
}
|
||||
/>
|
||||
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionTitle}>Questions ({questions.length})</Text>
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
data={questions}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerStyle={styles.list}
|
||||
/>
|
||||
|
||||
{/* Tooltip Modal */}
|
||||
<Modal
|
||||
visible={activeTooltip !== null}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setActiveTooltip(null)}
|
||||
>
|
||||
<Pressable
|
||||
style={styles.modalOverlay}
|
||||
onPress={() => setActiveTooltip(null)}
|
||||
{/* Tooltip Modal */}
|
||||
<Modal
|
||||
visible={activeTooltip !== null}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setActiveTooltip(null)}
|
||||
>
|
||||
<View style={styles.tooltipContainer}>
|
||||
<Text style={styles.tooltipTitle}>
|
||||
{activeTooltip && TOOLTIP_CONTENT[activeTooltip].title}
|
||||
</Text>
|
||||
<Text style={styles.tooltipDescription}>
|
||||
{activeTooltip && TOOLTIP_CONTENT[activeTooltip].description}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.tooltipButton}
|
||||
onPress={() => setActiveTooltip(null)}
|
||||
>
|
||||
<Text style={styles.tooltipButtonText}>Got it</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
</View>
|
||||
<Pressable
|
||||
style={styles.modalOverlay}
|
||||
onPress={() => setActiveTooltip(null)}
|
||||
>
|
||||
<GlassCard style={styles.tooltipContainer}>
|
||||
<LinearGradient
|
||||
colors={gradients.laceTint as [string, string]}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<Text style={styles.tooltipTitle}>
|
||||
{activeTooltip && TOOLTIP_CONTENT[activeTooltip].title}
|
||||
</Text>
|
||||
<Text style={styles.tooltipDescription}>
|
||||
{activeTooltip && TOOLTIP_CONTENT[activeTooltip].description}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.tooltipButton}
|
||||
onPress={() => setActiveTooltip(null)}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={gradients.primary as [string, string]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={styles.tooltipButtonGradient}
|
||||
>
|
||||
<Text style={styles.tooltipButtonText}>Got it</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</GlassCard>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
</View>
|
||||
</GradientBackground>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#1a1a2e",
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#1a1a2e",
|
||||
},
|
||||
header: {
|
||||
paddingTop: 60,
|
||||
paddingHorizontal: 24,
|
||||
paddingBottom: 24,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#16213e",
|
||||
heroContainer: {
|
||||
borderBottomLeftRadius: radius.xl,
|
||||
borderBottomRightRadius: radius.xl,
|
||||
overflow: 'hidden',
|
||||
...shadows.lg,
|
||||
},
|
||||
heroInner: {
|
||||
paddingTop: 50,
|
||||
paddingBottom: spacing.lg,
|
||||
minHeight: 260,
|
||||
},
|
||||
heroBlur: {
|
||||
backgroundColor: 'rgba(22, 33, 62, 0.4)',
|
||||
},
|
||||
heroBlurFallback: {
|
||||
backgroundColor: 'rgba(22, 33, 62, 0.6)',
|
||||
},
|
||||
backButton: {
|
||||
padding: 4,
|
||||
position: 'absolute',
|
||||
top: 50,
|
||||
left: spacing.md,
|
||||
zIndex: 10,
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
backButtonInner: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: colors.glass.border,
|
||||
},
|
||||
packInfo: {
|
||||
padding: 24,
|
||||
alignItems: "center",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#16213e",
|
||||
heroContent: {
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingTop: spacing.xl,
|
||||
},
|
||||
iconContainer: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.05)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.md,
|
||||
borderWidth: 2,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
iconContainerPremium: {
|
||||
borderColor: colors.premium.gold,
|
||||
backgroundColor: colors.premium.goldLight,
|
||||
},
|
||||
emoji: {
|
||||
fontSize: 32,
|
||||
fontSize: 40,
|
||||
},
|
||||
proBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.premium.gold,
|
||||
paddingHorizontal: spacing.sm,
|
||||
paddingVertical: 4,
|
||||
borderRadius: radius.sm,
|
||||
gap: 4,
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
proBadgeText: {
|
||||
...typography.caption1,
|
||||
color: colors.text,
|
||||
fontWeight: '700',
|
||||
},
|
||||
breadcrumb: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
marginBottom: spacing.xs,
|
||||
},
|
||||
breadcrumbText: {
|
||||
...typography.caption1,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
title: {
|
||||
...typography.title2,
|
||||
color: colors.text,
|
||||
textAlign: 'center',
|
||||
marginBottom: spacing.xs,
|
||||
},
|
||||
description: {
|
||||
fontSize: 16,
|
||||
color: "#ccc",
|
||||
textAlign: "center",
|
||||
...typography.body,
|
||||
color: colors.textSecondary,
|
||||
textAlign: 'center',
|
||||
lineHeight: 24,
|
||||
paddingHorizontal: spacing.md,
|
||||
},
|
||||
sectionHeader: {
|
||||
padding: 24,
|
||||
paddingBottom: 8,
|
||||
statsBadge: {
|
||||
marginTop: spacing.md,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
paddingHorizontal: spacing.md,
|
||||
paddingVertical: spacing.xs,
|
||||
borderRadius: radius.full,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.glass.border,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
color: "#e94560",
|
||||
statsText: {
|
||||
...typography.subhead,
|
||||
color: colors.textSecondary,
|
||||
fontWeight: '500',
|
||||
},
|
||||
list: {
|
||||
padding: 24,
|
||||
padding: spacing.md,
|
||||
paddingBottom: Platform.OS === 'ios' ? 100 : 80,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: "#16213e",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: "#0f3460",
|
||||
questionCard: {
|
||||
marginBottom: spacing.md,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
questionContent: {
|
||||
padding: spacing.md,
|
||||
},
|
||||
questionText: {
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
marginBottom: 8,
|
||||
lineHeight: 22,
|
||||
...typography.body,
|
||||
color: colors.text,
|
||||
marginBottom: spacing.sm,
|
||||
lineHeight: 24,
|
||||
},
|
||||
intensityContainer: {
|
||||
flexDirection: "row",
|
||||
partnerTextContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing.xs,
|
||||
marginBottom: spacing.sm,
|
||||
paddingVertical: spacing.xs,
|
||||
paddingHorizontal: spacing.sm,
|
||||
backgroundColor: colors.premium.roseLight,
|
||||
borderRadius: radius.sm,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
partnerText: {
|
||||
fontSize: 14,
|
||||
color: "#aaa",
|
||||
fontStyle: "italic",
|
||||
marginBottom: 8,
|
||||
...typography.caption1,
|
||||
color: colors.premium.rose,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
footerContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginTop: 8,
|
||||
marginTop: spacing.xs,
|
||||
},
|
||||
targetsContainer: {
|
||||
intensityContainer: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
},
|
||||
badgesContainer: {
|
||||
flexDirection: 'row',
|
||||
gap: spacing.sm,
|
||||
},
|
||||
targetBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 6,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.08)',
|
||||
paddingHorizontal: spacing.sm,
|
||||
paddingVertical: spacing.xs,
|
||||
borderRadius: radius.sm,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
borderColor: colors.glass.border,
|
||||
},
|
||||
initiatorBadge: {
|
||||
backgroundColor: 'rgba(243, 156, 18, 0.15)',
|
||||
borderColor: 'rgba(243, 156, 18, 0.3)',
|
||||
coupleIconGroup: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
emptyContainer: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: spacing.xxl,
|
||||
gap: spacing.md,
|
||||
},
|
||||
emptyText: {
|
||||
...typography.body,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 24,
|
||||
padding: spacing.lg,
|
||||
},
|
||||
tooltipContainer: {
|
||||
backgroundColor: '#16213e',
|
||||
borderRadius: 16,
|
||||
padding: 24,
|
||||
maxWidth: 320,
|
||||
borderWidth: 1,
|
||||
borderColor: '#0f3460',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
tooltipTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
marginBottom: 12,
|
||||
...typography.title3,
|
||||
color: colors.text,
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
tooltipDescription: {
|
||||
fontSize: 14,
|
||||
color: '#ccc',
|
||||
lineHeight: 22,
|
||||
marginBottom: 20,
|
||||
...typography.body,
|
||||
color: colors.textSecondary,
|
||||
lineHeight: 24,
|
||||
marginBottom: spacing.lg,
|
||||
},
|
||||
tooltipButton: {
|
||||
backgroundColor: '#e94560',
|
||||
borderRadius: 8,
|
||||
paddingVertical: 12,
|
||||
borderRadius: radius.md,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
tooltipButtonGradient: {
|
||||
paddingVertical: spacing.sm,
|
||||
alignItems: 'center',
|
||||
},
|
||||
tooltipButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#fff',
|
||||
...typography.headline,
|
||||
color: colors.text,
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user