tknuth/Greenlens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Press

Browse Source
This commit is contained in:
knuthtimo-lab
2026-07-30 10:03:37 +02:00
parent 018b751723
commit c9e776ae98
19 changed files with 1256 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/auth/login.tsx
View File

@@ -366,7 +366,7 @@ const styles = StyleSheet.create({
fieldGroup: { gap: 6 },
label: { fontSize: 13, fontWeight: '800', marginLeft: 2 },
inputRow: {
height: 54,
minHeight: 54,
borderWidth: 1,
borderRadius: 14,
flexDirection: 'row',
@@ -374,7 +374,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 14,
},
inputIcon: { marginRight: 10 },
input: { flex: 1, height: 54, fontSize: 15 },
input: { flex: 1, minHeight: 54, fontSize: 15 },
eyeBtn: { padding: 5, marginLeft: 6 },
forgotBtn: { alignItems: 'flex-end', marginTop: -4 },
forgotText: { fontSize: 14, fontWeight: '800' },
@@ -388,7 +388,8 @@ const styles = StyleSheet.create({
},
errorText: { flex: 1, fontSize: 13, lineHeight: 18, fontWeight: '700' },
primaryBtn: {
height: 56,
minHeight: 56,
paddingVertical: 14,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',

10
app/auth/signup.tsx
View File

@@ -467,7 +467,8 @@ const styles = StyleSheet.create({
dividerLine: { flex: 1, height: 1 },
dividerText: { fontSize: 12, fontWeight: '800' },
emailChoiceBtn: {
height: 56,
minHeight: 56,
paddingVertical: 14,
borderRadius: 14,
borderWidth: 1.5,
flexDirection: 'row',
@@ -480,7 +481,7 @@ const styles = StyleSheet.create({
fieldGroup: { gap: 6 },
label: { fontSize: 13, fontWeight: '800', marginLeft: 2 },
inputRow: {
height: 52,
minHeight: 52,
borderWidth: 1,
borderRadius: 14,
flexDirection: 'row',
@@ -488,7 +489,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 14,
},
inputIcon: { marginRight: 10 },
input: { flex: 1, height: 52, fontSize: 15 },
input: { flex: 1, minHeight: 52, fontSize: 15 },
eyeBtn: { padding: 5, marginLeft: 6 },
errorBox: {
flexDirection: 'row',
@@ -500,7 +501,8 @@ const styles = StyleSheet.create({
},
errorText: { flex: 1, fontSize: 13, lineHeight: 18, fontWeight: '700' },
primaryBtn: {
height: 56,
minHeight: 56,
paddingVertical: 14,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',

275
app/onboarding.tsx
View File

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
import {
Image,
ImageBackground,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
@@ -103,10 +104,14 @@ const getProofPoints = (language: Language): string[] => {
export default function OnboardingScreen() {
const { language } = useApp();
const { height } = useWindowDimensions();
const compact = height < 700;
const { height, width } = useWindowDimensions();
const compact = height < 700 || width < 380;
const posthog = useSafeAnalytics();
const insets = useSafeAreaInsets();
// Der Hero bekommt den Rest der Hoehe, faellt aber nie unter diese Grenze.
// Vorher war er fest auf 52% - dadurch hat die laengere Headline-Variante
// den dritten Button aus dem Bildschirm geschoben.
const heroMinHeight = Math.round(height * (compact ? 0.34 : 0.40));
const [variant, setVariant] = React.useState<WelcomeHeadlineVariant | null>(null);
const copy = getWelcomeCopy(language, variant ?? 'symptom');
@@ -132,104 +137,138 @@ export default function OnboardingScreen() {
style={[{ position: 'absolute', top: 0, left: 0, right: 0, width: '100%' }, { height: compact ? '65%' : '70%' }]}
resizeMode="cover"
/>
<View style={[{ width: '100%' }, { height: compact ? '48%' : '52%' }]}>
<View style={[styles.heroSafe, { paddingTop: Math.max(insets.top, 16) }]}>
<View style={styles.heroTopRow}>
<View style={styles.brandRow}>
<Image
source={require('../assets/icon.png')}
style={styles.logo}
resizeMode="cover"
/>
<Text style={styles.brandName}>
Green<Text style={styles.brandAccent}>Lens</Text>
</Text>
</View>
{/* Rating und Anzahl immer gemeinsam: 5,0 aus 6 Bewertungen ist
ehrlich und ueberpruefbar - eine nackte Sternezahl waere es nicht. */}
<View style={styles.ratingPill}>
<Ionicons name="star" size={13} color="#f5c04e" />
<Text style={styles.ratingText}>{copy.ratingValue}</Text>
<Text style={styles.ratingCount}>· {copy.ratingCount}</Text>
</View>
</View>
{testimonial ? (
<View style={[styles.testimonialCard, compact && styles.testimonialCardCompact]}>
<Text style={styles.testimonialText} numberOfLines={compact ? 3 : 4}>
„{testimonial.quote}"
</Text>
<View style={styles.testimonialMeta}>
<Text style={styles.testimonialAuthor}>
{testimonial.author}
{testimonial.isTranslated ? ` · ${translatedNote(language)}` : ''}
<ScrollView
style={styles.scroll}
contentContainerStyle={styles.scrollContent}
showsVerticalScrollIndicator={false}
bounces={false}
alwaysBounceVertical={false}
>
<View style={[styles.heroBlock, { minHeight: heroMinHeight }]}>
<View style={[styles.heroSafe, { paddingTop: Math.max(insets.top, 16) }]}>
<View style={styles.heroTopRow}>
<View style={styles.brandRow}>
<Image
source={require('../assets/icon.png')}
style={styles.logo}
resizeMode="cover"
/>
<Text
style={styles.brandName}
maxFontSizeMultiplier={1.2}
numberOfLines={1}
adjustsFontSizeToFit
minimumFontScale={0.82}
>
Green<Text style={styles.brandAccent}>Lens</Text>
</Text>
</View>
{/* Rating und Anzahl immer gemeinsam: 5,0 aus 6 Bewertungen ist
ehrlich und ueberpruefbar - eine nackte Sternezahl waere es nicht. */}
<View style={styles.ratingPill}>
<Ionicons name="star" size={13} color="#f5c04e" />
<Text style={styles.ratingText} maxFontSizeMultiplier={1.2} numberOfLines={1}>
{copy.ratingValue}
</Text>
<Text
style={styles.ratingCount}
maxFontSizeMultiplier={1.2}
numberOfLines={1}
adjustsFontSizeToFit
minimumFontScale={0.72}
>
· {copy.ratingCount}
</Text>
<View style={styles.starsRow}>
{Array.from({ length: testimonial.stars }).map((_, i) => (
<Ionicons key={i} name="star" size={14} color="#f5c04e" />
))}
</View>
</View>
</View>
) : (
/* Kein belegtes Zitat vorhanden → Argument statt erfundenem Social Proof. */
<View style={[styles.testimonialCard, compact && styles.testimonialCardCompact]}>
{proofPoints.map((point) => (
<View key={point} style={styles.proofRow}>
<Ionicons name="checkmark-circle" size={15} color="#a6d66f" />
<Text style={styles.proofText}>{point}</Text>
{testimonial ? (
<View style={[styles.testimonialCard, compact && styles.testimonialCardCompact]}>
<Text
style={styles.testimonialText}
numberOfLines={compact ? 3 : 4}
maxFontSizeMultiplier={1.3}
>
„{testimonial.quote}"
</Text>
<View style={styles.testimonialMeta}>
<Text style={styles.testimonialAuthor} maxFontSizeMultiplier={1.2}>
{testimonial.author}
{testimonial.isTranslated ? ` · ${translatedNote(language)}` : ''}
</Text>
<View style={styles.starsRow}>
{Array.from({ length: testimonial.stars }).map((_, i) => (
<Ionicons key={i} name="star" size={14} color="#f5c04e" />
))}
</View>
</View>
))}
</View>
)}
</View>
</View>
<View style={styles.sheet}>
<View style={styles.sheetHandle} />
<View style={styles.sheetContent}>
<View style={styles.topSpacer} />
{/* Erst rendern, wenn die Variante feststeht. Sonst blitzt fuer die
Haelfte der Nutzer kurz die falsche Headline auf und wechselt dann -
das sieht kaputt aus und verfaelscht den Test. */}
<View style={{ opacity: variant ? 1 : 0 }}>
<Text style={[styles.headline, compact && styles.headlineCompact]}>{copy.headline}</Text>
<Text style={styles.subline}>{copy.subline}</Text>
</View>
) : (
/* Kein belegtes Zitat vorhanden → Argument statt erfundenem Social Proof. */
<View style={[styles.testimonialCard, compact && styles.testimonialCardCompact]}>
{proofPoints.map((point) => (
<View key={point} style={styles.proofRow}>
<Ionicons name="checkmark-circle" size={15} color="#a6d66f" />
<Text style={styles.proofText} maxFontSizeMultiplier={1.3}>{point}</Text>
</View>
))}
</View>
)}
</View>
<View style={styles.spacer} />
<TouchableOpacity
style={styles.cta}
onPress={() => {
posthog.capture('onboarding_started', { welcome_variant: variant ?? 'unassigned' });
router.push('/onboarding/slides');
}}
activeOpacity={0.86}
>
<Text style={styles.ctaText}>{copy.cta}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => router.push('/auth/login')} style={styles.loginLink}>
<Text style={styles.loginText}>{copy.login}</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
posthog.capture('onboarding_demo_scan_started', {
welcome_variant: variant ?? 'unassigned',
});
router.push('/scanner');
}}
style={styles.demoLink}
>
<Ionicons name="scan-outline" size={18} color="#a6d66f" />
<Text style={styles.demoText}>{copy.demoScan}</Text>
</TouchableOpacity>
<Text style={styles.legal}>{copy.legal}</Text>
</View>
</View>
<View style={[styles.sheet, { paddingBottom: Math.max(insets.bottom, 12) }]}>
<View style={styles.sheetHandle} />
<View style={styles.sheetContent}>
{/* Erst rendern, wenn die Variante feststeht. Sonst blitzt fuer die
Haelfte der Nutzer kurz die falsche Headline auf und wechselt dann -
das sieht kaputt aus und verfaelscht den Test. */}
<View style={{ opacity: variant ? 1 : 0 }}>
{/* maxFontSizeMultiplier: groessere Systemschrift darf die Headline
wachsen lassen, aber nicht die CTAs aus dem Screen schieben. */}
<Text
style={[styles.headline, compact && styles.headlineCompact]}
maxFontSizeMultiplier={1.25}
>
{copy.headline}
</Text>
<Text style={styles.subline} maxFontSizeMultiplier={1.3}>{copy.subline}</Text>
</View>
<View style={styles.spacer} />
<TouchableOpacity
style={styles.cta}
onPress={() => {
posthog.capture('onboarding_started', { welcome_variant: variant ?? 'unassigned' });
router.push('/onboarding/slides');
}}
activeOpacity={0.86}
>
<Text style={styles.ctaText} maxFontSizeMultiplier={1.2}>{copy.cta}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => router.push('/auth/login')} style={styles.loginLink}>
<Text style={styles.loginText} maxFontSizeMultiplier={1.2}>{copy.login}</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
posthog.capture('onboarding_demo_scan_started', {
welcome_variant: variant ?? 'unassigned',
});
router.push('/scanner');
}}
style={styles.demoLink}
>
<Ionicons name="scan-outline" size={18} color="#a6d66f" />
<Text style={styles.demoText} maxFontSizeMultiplier={1.2}>{copy.demoScan}</Text>
</TouchableOpacity>
<Text style={styles.legal} maxFontSizeMultiplier={1.3}>{copy.legal}</Text>
</View>
</View>
</ScrollView>
</View>
);
}
@@ -239,6 +278,22 @@ const styles = StyleSheet.create({
flex: 1,
backgroundColor: '#0a110b',
},
scroll: {
flex: 1,
},
scrollContent: {
// Fuellt mindestens den Bildschirm. Wird der Inhalt hoeher (lange
// Headline-Variante, grosse Systemschrift, kleines Geraet), scrollt der
// Screen - statt die unteren Buttons abzuschneiden.
flexGrow: 1,
},
heroBlock: {
width: '100%',
// Nimmt den Platz, den das Sheet uebrig laesst, faellt aber nie unter
// heroMinHeight. Vorher fest 52% - das hat nur bei kurzer Copy gepasst.
flexGrow: 1,
flexShrink: 0,
},
hero: {
width: '100%',
},
@@ -269,6 +324,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
gap: 10,
flexShrink: 1,
},
logo: {
width: 36,
@@ -277,6 +333,7 @@ const styles = StyleSheet.create({
backgroundColor: '#fff',
},
brandName: {
flexShrink: 1,
color: '#ffffff',
fontSize: 24,
fontWeight: '900',
@@ -285,9 +342,11 @@ const styles = StyleSheet.create({
color: '#8ba885',
},
ratingPill: {
flexShrink: 1,
flexDirection: 'row',
alignItems: 'center',
gap: 6,
marginLeft: 10,
backgroundColor: 'rgba(0, 0, 0, 0.55)',
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.25)',
@@ -301,6 +360,7 @@ const styles = StyleSheet.create({
fontWeight: '700',
},
ratingCount: {
flexShrink: 1,
color: '#c9d3c2',
fontSize: 11,
fontWeight: '600',
@@ -347,6 +407,9 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
},
testimonialAuthor: {
flex: 1,
flexShrink: 1,
marginRight: 8,
color: '#a6d66f',
fontSize: 13,
fontWeight: '700',
@@ -356,7 +419,7 @@ const styles = StyleSheet.create({
gap: 1,
},
sheet: {
flex: 1,
flexShrink: 0,
backgroundColor: '#0c160d',
borderTopLeftRadius: 28,
borderTopRightRadius: 28,
@@ -374,14 +437,10 @@ const styles = StyleSheet.create({
marginBottom: 8,
},
sheetContent: {
flex: 1,
paddingHorizontal: 24,
paddingTop: 8,
paddingTop: 12,
paddingBottom: 12,
},
topSpacer: {
height: 12,
},
headline: {
color: '#ffffff',
fontSize: 28,
@@ -402,15 +461,16 @@ const styles = StyleSheet.create({
textAlign: 'center',
},
spacer: {
height: 18,
height: 14,
},
cta: {
height: 60,
minHeight: 58,
paddingVertical: 16,
borderRadius: 16,
backgroundColor: '#437824',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 6,
marginBottom: 4,
},
ctaText: {
color: '#f8f7ef',
@@ -419,7 +479,7 @@ const styles = StyleSheet.create({
},
loginLink: {
alignItems: 'center',
paddingVertical: 10,
paddingVertical: 9,
},
loginText: {
color: '#a6d66f',
@@ -431,13 +491,14 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
gap: 8,
height: 52,
minHeight: 50,
paddingVertical: 13,
borderRadius: 14,
borderWidth: 1.5,
borderColor: '#a6d66f',
backgroundColor: 'rgba(166, 214, 111, 0.05)',
marginVertical: 8,
marginBottom: 12,
marginTop: 6,
marginBottom: 10,
},
demoText: {
color: '#a6d66f',

69
app/onboarding/customize.tsx
View File

@@ -55,21 +55,31 @@ export default function CustomizeOnboardingScreen() {
<View style={[styles.container, { backgroundColor: colors.background }]}>
<ThemeBackdrop colors={colors} />
<SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
<View style={styles.header}>
<TouchableOpacity onPress={skipCustomization} style={[styles.iconBtn, { backgroundColor: colors.surface, borderColor: colors.border }]}>
<Ionicons name="close" size={20} color={colors.text} />
</TouchableOpacity>
<View style={styles.headerCopy}>
<Text style={[styles.eyebrow, { color: colors.primary }]}>{t.onboardingChecklistIntro}</Text>
<Text style={[styles.title, { color: colors.text }]}>{t.customizeOnboardingTitle}</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.customizeOnboardingSubtitle}</Text>
<ScrollView
style={styles.scroll}
contentContainerStyle={styles.content}
showsVerticalScrollIndicator={false}
>
<View style={styles.header}>
<TouchableOpacity onPress={skipCustomization} style={[styles.iconBtn, { backgroundColor: colors.surface, borderColor: colors.border }]}>
<Ionicons name="close" size={20} color={colors.text} />
</TouchableOpacity>
<View style={styles.headerCopy}>
<Text style={[styles.eyebrow, { color: colors.primary }]} maxFontSizeMultiplier={1.3}>
{t.onboardingChecklistIntro}
</Text>
<Text style={[styles.title, { color: colors.text }]} maxFontSizeMultiplier={1.25}>
{t.customizeOnboardingTitle}
</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]} maxFontSizeMultiplier={1.3}>
{t.customizeOnboardingSubtitle}
</Text>
</View>
</View>
</View>
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
<View style={[styles.previewCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
<Text style={[styles.previewLabel, { color: colors.textMuted }]}>{t.customizeOnboardingPreview}</Text>
<Text style={[styles.previewTitle, { color: colors.text }]}>{t.onboardingTagline}</Text>
<Text style={[styles.previewLabel, { color: colors.textMuted }]} maxFontSizeMultiplier={1.3}>{t.customizeOnboardingPreview}</Text>
<Text style={[styles.previewTitle, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{t.onboardingTagline}</Text>
<View style={styles.previewMeta}>
<View style={[styles.previewChip, { backgroundColor: colors.primarySoft }]}>
<Text style={[styles.previewChipText, { color: colors.primaryDark }]}>{appearanceMode}</Text>
@@ -84,7 +94,7 @@ export default function CustomizeOnboardingScreen() {
</View>
<View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t.appearanceMode}</Text>
<Text style={[styles.sectionTitle, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{t.appearanceMode}</Text>
<View style={styles.segmentedControl}>
{(['system', 'light', 'dark'] as AppearanceMode[]).map((mode) => {
const isActive = appearanceMode === mode;
@@ -96,7 +106,7 @@ export default function CustomizeOnboardingScreen() {
style={[styles.segmentBtn, isActive && { backgroundColor: colors.primary }]}
onPress={() => setAppearanceMode(mode)}
>
<Text style={[styles.segmentText, { color: isActive ? colors.onPrimary : colors.text }]}>
<Text style={[styles.segmentText, { color: isActive ? colors.onPrimary : colors.text }]} maxFontSizeMultiplier={1.2} numberOfLines={2}>
{label}
</Text>
</TouchableOpacity>
@@ -106,7 +116,7 @@ export default function CustomizeOnboardingScreen() {
</View>
<View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t.colorPalette}</Text>
<Text style={[styles.sectionTitle, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{t.colorPalette}</Text>
<View style={styles.swatchContainer}>
{(['forest', 'ocean', 'sunset', 'mono'] as ColorPalette[]).map((palette) => {
const isActive = colorPalette === palette;
@@ -127,7 +137,7 @@ export default function CustomizeOnboardingScreen() {
onPress={() => setColorPalette(palette)}
>
<View style={[styles.swatch, { backgroundColor: swatch[0] }]} />
<Text style={[styles.swatchLabel, { color: colors.text }]}>{label}</Text>
<Text style={[styles.swatchLabel, { color: colors.text }]} maxFontSizeMultiplier={1.2} numberOfLines={2}>{label}</Text>
</TouchableOpacity>
);
})}
@@ -135,7 +145,7 @@ export default function CustomizeOnboardingScreen() {
</View>
<View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t.language}</Text>
<Text style={[styles.sectionTitle, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{t.language}</Text>
<View style={styles.languageRow}>
{(['en', 'de', 'es'] as Language[]).map((lang) => {
const isActive = language === lang;
@@ -147,7 +157,10 @@ export default function CustomizeOnboardingScreen() {
style={[styles.languageBtn, isActive && { backgroundColor: colors.primary }]}
onPress={() => changeLanguage(lang)}
>
<Text style={{ color: isActive ? colors.onPrimary : colors.text, fontWeight: '600' }}>
<Text
style={{ color: isActive ? colors.onPrimary : colors.text, fontWeight: '600' }}
maxFontSizeMultiplier={1.2}
>
{label}
</Text>
</TouchableOpacity>
@@ -162,10 +175,10 @@ export default function CustomizeOnboardingScreen() {
style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
onPress={skipCustomization}
>
<Text style={[styles.secondaryBtnText, { color: colors.text }]}>{t.customizeOnboardingSkip}</Text>
<Text style={[styles.secondaryBtnText, { color: colors.text }]} maxFontSizeMultiplier={1.2} numberOfLines={2}>{t.customizeOnboardingSkip}</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.primaryBtn, { backgroundColor: colors.primary }]} onPress={finishCustomization}>
<Text style={[styles.primaryBtnText, { color: colors.onPrimary }]}>{t.customizeOnboardingContinue}</Text>
<Text style={[styles.primaryBtnText, { color: colors.onPrimary }]} maxFontSizeMultiplier={1.2} numberOfLines={2}>{t.customizeOnboardingContinue}</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
@@ -180,12 +193,13 @@ const styles = StyleSheet.create({
safeArea: {
flex: 1,
},
scroll: {
flex: 1,
},
header: {
flexDirection: 'row',
alignItems: 'flex-start',
gap: 14,
paddingHorizontal: 20,
paddingTop: 12,
},
iconBtn: {
width: 40,
@@ -218,6 +232,7 @@ const styles = StyleSheet.create({
content: {
padding: 20,
gap: 16,
paddingBottom: 12,
},
previewCard: {
borderWidth: 1,
@@ -317,7 +332,9 @@ const styles = StyleSheet.create({
},
secondaryBtn: {
flex: 1,
height: 52,
minHeight: 52,
paddingHorizontal: 8,
paddingVertical: 14,
borderRadius: 16,
borderWidth: 1.5,
alignItems: 'center',
@@ -326,10 +343,13 @@ const styles = StyleSheet.create({
secondaryBtnText: {
fontSize: 15,
fontWeight: '600',
textAlign: 'center',
},
primaryBtn: {
flex: 1.3,
height: 52,
minHeight: 52,
paddingHorizontal: 8,
paddingVertical: 14,
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',
@@ -337,5 +357,6 @@ const styles = StyleSheet.create({
primaryBtnText: {
fontSize: 15,
fontWeight: '700',
textAlign: 'center',
},
});

33
app/onboarding/health-check.tsx
View File

@@ -126,12 +126,18 @@ export default function HealthCheckOnboardingScreen() {
</View>
<View style={styles.backBtn} />
</View>
<View style={styles.header}>
<Text style={[styles.title, { color: colors.text }]}>{copy.title}</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>{copy.subtitle}</Text>
</View>
{/* Header liegt im Scrollbereich: bei grosser Systemschrift wuchs er
sonst nach unten und hat den Scrollbereich auf Null gequetscht. */}
<ScrollView
style={styles.scroll}
contentContainerStyle={styles.content}
showsVerticalScrollIndicator={false}
>
<View style={styles.header}>
<Text style={[styles.title, { color: colors.text }]} maxFontSizeMultiplier={1.25}>{copy.title}</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]} maxFontSizeMultiplier={1.3}>{copy.subtitle}</Text>
</View>
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
{/* Worked Example statt Wegbeschreibung: ein echtes Ergebnis schlaegt
jede Behauptung ueber die Qualitaet der Ergebnisse. */}
<View style={[styles.exampleCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
@@ -212,10 +218,10 @@ export default function HealthCheckOnboardingScreen() {
style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
onPress={() => finish(true)}
>
<Text style={[styles.secondaryBtnText, { color: colors.text }]}>{copy.skip}</Text>
<Text style={[styles.secondaryBtnText, { color: colors.text }]} maxFontSizeMultiplier={1.2} numberOfLines={2}>{copy.skip}</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.primaryBtn, { backgroundColor: colors.primary }]} onPress={() => finish(false)}>
<Text style={[styles.primaryBtnText, { color: colors.onPrimary }]}>{copy.cta}</Text>
<Text style={[styles.primaryBtnText, { color: colors.onPrimary }]} maxFontSizeMultiplier={1.2} numberOfLines={2}>{copy.cta}</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
@@ -226,11 +232,12 @@ export default function HealthCheckOnboardingScreen() {
const styles = StyleSheet.create({
container: { flex: 1 },
safeArea: { flex: 1, paddingHorizontal: 20, paddingTop: 24, paddingBottom: 20 },
scroll: { flex: 1 },
topBar: { flexDirection: 'row', alignItems: 'center', gap: 14, paddingVertical: 10 },
backBtn: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
progressTrack: { flex: 1, height: 6, borderRadius: 3, overflow: 'hidden' },
progressFill: { height: 6, borderRadius: 3 },
header: { gap: 9, marginTop: 8, marginBottom: 18 },
header: { gap: 9, marginTop: 8, marginBottom: 4 },
title: { fontSize: 30, lineHeight: 34, fontWeight: '900' },
subtitle: { fontSize: 14, lineHeight: 20 },
content: { gap: 14, paddingBottom: 12 },
@@ -268,8 +275,10 @@ const styles = StyleSheet.create({
guidanceCard: { borderRadius: 18, borderWidth: 1, padding: 14, flexDirection: 'row', alignItems: 'flex-start', gap: 10 },
guidanceText: { flex: 1, fontSize: 12, lineHeight: 18, fontWeight: '600' },
footer: { flexDirection: 'row', gap: 12, marginTop: 12 },
secondaryBtn: { flex: 1, height: 52, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
secondaryBtnText: { fontSize: 15, fontWeight: '600' },
primaryBtn: { flex: 1.3, height: 52, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
primaryBtnText: { fontSize: 15, fontWeight: '700' },
// minHeight statt height: sonst wird der Label-Text bei groesserer
// Systemschrift oben und unten abgeschnitten.
secondaryBtn: { flex: 1, minHeight: 52, paddingVertical: 14, paddingHorizontal: 8, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
secondaryBtnText: { fontSize: 15, fontWeight: '600', textAlign: 'center' },
primaryBtn: { flex: 1.3, minHeight: 52, paddingVertical: 14, paddingHorizontal: 8, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
primaryBtnText: { fontSize: 15, fontWeight: '700', textAlign: 'center' },
});

20
app/onboarding/personalizing.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
import { Animated, Easing, Image, ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { router } from 'expo-router';
@@ -178,7 +178,14 @@ export default function OnboardingPersonalizingScreen() {
return (
<SafeAreaView style={[styles.safe, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}>
<Text style={[styles.percent, { color: colors.primary }]}>{percent}%</Text>
{/* Scrollbar, damit die Zusammenfassungs-Karte auf kleinen Geraeten und
bei grosser Systemschrift nicht unten wegfaellt. */}
<ScrollView
style={styles.scroll}
contentContainerStyle={styles.scrollContent}
showsVerticalScrollIndicator={false}
>
<Text style={[styles.percent, { color: colors.primary }]} maxFontSizeMultiplier={1.2}>{percent}%</Text>
<View style={styles.ringWrap}>
<Svg width={RING_SIZE} height={RING_SIZE} style={StyleSheet.absoluteFill}>
<Circle
@@ -208,7 +215,7 @@ export default function OnboardingPersonalizingScreen() {
</View>
<View style={[styles.statusPill, { backgroundColor: colors.surfaceMuted }]}>
<Ionicons name="sync-outline" size={15} color={colors.textSecondary} />
<Text style={[styles.statusText, { color: colors.textSecondary }]}>{copy.status}</Text>
<Text style={[styles.statusText, { color: colors.textSecondary }]} maxFontSizeMultiplier={1.3}>{copy.status}</Text>
</View>
<View style={styles.checklist}>
{copy.steps.map((label, index) => {
@@ -220,7 +227,7 @@ export default function OnboardingPersonalizingScreen() {
size={24}
color={done ? colors.primary : colors.border}
/>
<Text style={[styles.checkLabel, { color: done ? colors.text : colors.textMuted }]}>{label}</Text>
<Text style={[styles.checkLabel, { color: done ? colors.text : colors.textMuted }]} maxFontSizeMultiplier={1.3}>{label}</Text>
</View>
);
})}
@@ -239,12 +246,15 @@ export default function OnboardingPersonalizingScreen() {
)}
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safe: { flex: 1, alignItems: 'center', paddingHorizontal: 24, paddingTop: 30 },
safe: { flex: 1 },
scroll: { flex: 1 },
scrollContent: { flexGrow: 1, alignItems: 'center', paddingHorizontal: 24, paddingTop: 30, paddingBottom: 16 },
percent: { fontSize: 56, fontWeight: '900', marginBottom: 16 },
ringWrap: { width: 150, height: 150, alignItems: 'center', justifyContent: 'center', marginBottom: 22 },
ringImage: { width: 112, height: 112, borderRadius: 56 },

112
app/onboarding/slides.tsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import React, { useEffect, useRef, useState } from 'react';
import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useSafeAnalytics } from '../../services/analytics';
@@ -112,6 +112,7 @@ const getSlidesCopy = (language: Language) => {
};
type SlidesCopy = ReturnType<typeof getSlidesCopy>;
const OVERLAY_TEXT_MAX_MULTIPLIER = 1.2;
/** Slide 1: Ursachen-Ranking statt Prozent-Behauptung. */
function CauseRankingOverlay({ copy, colors }: { copy: SlidesCopy; colors: ColorsType }) {
@@ -124,16 +125,18 @@ function CauseRankingOverlay({ copy, colors }: { copy: SlidesCopy; colors: Color
<View style={[styles.cornerBR, { borderColor: colors.primary }]} />
</View>
<View style={styles.healthCard}>
<Text style={styles.overlayEyebrow}>{copy.causeTitle}</Text>
<Text style={styles.overlayEyebrow} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.causeTitle}
</Text>
<View style={[styles.healthRow, styles.healthRowWarning]}>
<Ionicons name="alert-circle" size={15} color="#C62828" />
<Text style={styles.healthRowWarningText}>
<Text style={styles.healthRowWarningText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.causePrimary} · {copy.causePrimaryLevel}
</Text>
</View>
<View style={[styles.healthRow, styles.healthRowNeutral]}>
<Ionicons name="help-circle-outline" size={15} color="#6b7280" />
<Text style={styles.healthRowNeutralText}>
<Text style={styles.healthRowNeutralText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.causeSecondary} · {copy.causeSecondaryLevel}
</Text>
</View>
@@ -141,8 +144,12 @@ function CauseRankingOverlay({ copy, colors }: { copy: SlidesCopy; colors: Color
positionierte Overlays ueberlappen sich, sobald Uebersetzungen die
Karte wachsen lassen. */}
<View style={styles.checkInline}>
<Text style={styles.checkChipLabel}>{copy.checkLabel}</Text>
<Text style={styles.checkChipText}>{copy.checkItems}</Text>
<Text style={styles.checkChipLabel} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.checkLabel}
</Text>
<Text style={styles.checkChipText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.checkItems}
</Text>
</View>
</View>
</>
@@ -157,15 +164,21 @@ function PlanOverlay({ copy }: { copy: SlidesCopy }) {
<View style={styles.healthCardIcon}>
<Ionicons name="calendar" size={16} color="#2e7d32" />
</View>
<Text style={styles.healthCardTitle}>{copy.planLabel}</Text>
<Text style={styles.healthCardTitle} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.planLabel}
</Text>
</View>
<View style={[styles.healthRow, styles.healthRowSuccess]}>
<Ionicons name="water-outline" size={15} color="#2e7d32" />
<Text style={styles.healthRowSuccessText}>{copy.planNow}</Text>
<Text style={styles.healthRowSuccessText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.planNow}
</Text>
</View>
<View style={[styles.healthRow, styles.healthRowNeutral]}>
<Ionicons name="chatbubble-ellipses-outline" size={15} color="#6b7280" />
<Text style={styles.healthRowNeutralText}>{copy.planFollowUp}</Text>
<Text style={styles.healthRowNeutralText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.planFollowUp}
</Text>
</View>
</View>
);
@@ -179,23 +192,35 @@ function UncertaintyOverlay({ copy }: { copy: SlidesCopy }) {
<View style={styles.healthCardIcon}>
<Ionicons name="eye-off-outline" size={16} color="#6b7280" />
</View>
<Text style={styles.healthCardTitle}>{copy.uncertainTitle}</Text>
<Text style={styles.healthCardTitle} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.uncertainTitle}
</Text>
</View>
{copy.uncertainItems.map((item) => (
<View key={item} style={[styles.healthRow, styles.healthRowNeutral]}>
<Ionicons name="close-circle-outline" size={15} color="#6b7280" />
<Text style={styles.healthRowNeutralText}>{item}</Text>
<Text style={styles.healthRowNeutralText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{item}
</Text>
</View>
))}
<Text style={styles.overlayNote}>{copy.uncertainNote}</Text>
<Text style={styles.overlayNote} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.uncertainNote}
</Text>
</View>
);
}
export default function OnboardingSlidesScreen() {
const router = useRouter();
const scrollRef = useRef<ScrollView>(null);
const { height } = useWindowDimensions();
const insets = useSafeAreaInsets();
const compact = height < 700;
// Das Bild bekommt den Platz, den das Sheet uebrig laesst - aber nie weniger
// als diese Untergrenze. Feste Prozenthoehen haben bei groesserer
// System-Schriftgroesse den CTA aus dem Bildschirm geschoben.
const imageMinHeight = Math.round(height * (compact ? 0.46 : 0.42));
const { language, isDarkMode, colorPalette } = useApp();
const colors = useColors(isDarkMode, colorPalette);
const posthog = useSafeAnalytics();
@@ -204,6 +229,7 @@ export default function OnboardingSlidesScreen() {
const slide = copy.slides[page];
useEffect(() => {
scrollRef.current?.scrollTo({ y: 0, animated: false });
posthog.capture('onboarding_slide_viewed', { index: page, slide: ['triage', 'plan', 'uncertainty'][page] });
}, [page, posthog]);
@@ -224,8 +250,15 @@ export default function OnboardingSlidesScreen() {
};
return (
<View style={[styles.container, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}>
<View style={[styles.imageArea, { height: compact ? '58%' : '65%' }]}>
<ScrollView
ref={scrollRef}
style={[styles.container, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}
contentContainerStyle={styles.scrollContent}
showsVerticalScrollIndicator={false}
bounces={false}
alwaysBounceVertical={false}
>
<View style={[styles.imageArea, { minHeight: imageMinHeight }]}>
<Image
source={
page === 0
@@ -246,9 +279,20 @@ export default function OnboardingSlidesScreen() {
{page === 1 && <PlanOverlay copy={copy} />}
{page === 2 && <UncertaintyOverlay copy={copy} />}
</View>
<View style={[styles.sheet, { backgroundColor: colors.surface }]}>
<Text style={[styles.title, { color: colors.text }]}>{slide.title}</Text>
<Text style={[styles.body, { color: colors.textSecondary }]}>{slide.body}</Text>
<View
style={[
styles.sheet,
{ backgroundColor: colors.surface, paddingBottom: Math.max(insets.bottom, 16) + 8 },
]}
>
{/* maxFontSizeMultiplier: die Systemschriftgroesse darf die Headline
vergroessern, aber nicht so weit, dass sie das halbe Sheet frisst. */}
<Text style={[styles.title, { color: colors.text }]} maxFontSizeMultiplier={1.25}>
{slide.title}
</Text>
<Text style={[styles.body, { color: colors.textSecondary }]} maxFontSizeMultiplier={1.35}>
{slide.body}
</Text>
<View style={styles.dots}>
{copy.slides.map((_, index) => (
<View
@@ -267,10 +311,12 @@ export default function OnboardingSlidesScreen() {
onPress={next}
activeOpacity={0.86}
>
<Text style={[styles.ctaText, { color: colors.onPrimary }]}>{copy.continueLabel}</Text>
<Text style={[styles.ctaText, { color: colors.onPrimary }]} maxFontSizeMultiplier={1.2}>
{copy.continueLabel}
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
}
@@ -278,21 +324,26 @@ const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollContent: {
// Fuellt mindestens den Bildschirm; wird der Inhalt bei sehr grosser
// Schrift hoeher, scrollt der Screen statt den CTA abzuschneiden.
flexGrow: 1,
},
imageArea: {
height: '58%',
flexGrow: 1,
flexShrink: 0,
position: 'relative',
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
position: 'absolute',
...StyleSheet.absoluteFillObject,
},
imageSafeArea: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
zIndex: 2,
},
backBtn: {
marginLeft: 16,
@@ -358,6 +409,7 @@ const styles = StyleSheet.create({
bottom: 34,
left: 16,
right: 16,
zIndex: 1,
backgroundColor: 'rgba(255,255,255,0.96)',
borderRadius: 18,
padding: 14,
@@ -456,7 +508,9 @@ const styles = StyleSheet.create({
// Reminder chips overlay (slide 3)
// Bottom sheet
sheet: {
flex: 1,
// Hoehe folgt dem Inhalt statt einem festen Prozentwert - sonst haengt es
// von Textlaenge und Systemschriftgroesse ab, ob der CTA noch passt.
flexShrink: 0,
borderTopLeftRadius: 28,
borderTopRightRadius: 28,
marginTop: -24,
@@ -481,7 +535,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
gap: 8,
marginBottom: 'auto',
marginBottom: 22,
},
dot: {
width: 8,
@@ -495,11 +549,11 @@ const styles = StyleSheet.create({
},
cta: {
alignSelf: 'stretch',
height: 58,
minHeight: 58,
paddingVertical: 16,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 24,
},
ctaText: {
fontSize: 17,

52
app/onboarding/source.tsx
View File

@@ -7,6 +7,7 @@ import {
Image,
KeyboardAvoidingView,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
@@ -312,6 +313,7 @@ export default function OnboardingChatScreen() {
});
const flatListRef = useRef<FlatList>(null);
const inputScrollRef = useRef<ScrollView>(null);
const floatAnim = useRef(new Animated.Value(0)).current;
// Float animation loop for the background monstera pot
@@ -382,6 +384,10 @@ export default function OnboardingChatScreen() {
}, 100);
}, [messages, isTyping]);
useEffect(() => {
inputScrollRef.current?.scrollTo({ y: 0, animated: false });
}, [currentStep]);
const selectOption = (id: string, label: string) => {
// Add user bubble
const userMsg: Message = {
@@ -509,7 +515,7 @@ export default function OnboardingChatScreen() {
if (currentStep === 0) {
return (
<View style={styles.optionsWrap}>
<Text style={styles.stepTitle}>{copy.stepSituation}</Text>
<Text style={styles.stepTitle} maxFontSizeMultiplier={1.3}>{copy.stepSituation}</Text>
<View style={styles.optionsVertical}>
{([
{ id: 'acute', label: copy.situations.acute, icon: 'alert-circle-outline' as const },
@@ -519,7 +525,7 @@ export default function OnboardingChatScreen() {
<TouchableOpacity key={opt.id} style={[styles.optionRow, { borderColor: colors.border }]} onPress={() => selectOption(opt.id, opt.label)}>
<View style={styles.optionRowLeft}>
<Ionicons name={opt.icon} size={18} color={colors.primary} style={{ marginRight: 10 }} />
<Text style={[styles.rowText, { color: colors.text }]}>{opt.label}</Text>
<Text style={[styles.rowText, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{opt.label}</Text>
</View>
<Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
</TouchableOpacity>
@@ -533,7 +539,7 @@ export default function OnboardingChatScreen() {
if (currentStep === 1) {
return (
<View style={styles.optionsWrap}>
<Text style={styles.stepTitle}>{copy.stepSymptom}</Text>
<Text style={styles.stepTitle} maxFontSizeMultiplier={1.3}>{copy.stepSymptom}</Text>
<View style={styles.optionsGrid}>
{([
{ id: 'yellow', label: copy.symptoms.yellow, icon: 'leaf-outline' as const },
@@ -545,7 +551,7 @@ export default function OnboardingChatScreen() {
]).map((opt) => (
<TouchableOpacity key={opt.id} style={[styles.pillBtn, { borderColor: colors.border }]} onPress={() => selectOption(opt.id, opt.label)}>
<Ionicons name={opt.icon} size={15} color={colors.primary} style={{ marginRight: 4 }} />
<Text style={[styles.pillLabel, { color: colors.text }]}>{opt.label}</Text>
<Text style={[styles.pillLabel, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{opt.label}</Text>
</TouchableOpacity>
))}
</View>
@@ -557,7 +563,7 @@ export default function OnboardingChatScreen() {
if (currentStep === 2) {
return (
<View style={styles.optionsWrap}>
<Text style={styles.stepTitle}>{copy.stepLight}</Text>
<Text style={styles.stepTitle} maxFontSizeMultiplier={1.3}>{copy.stepLight}</Text>
<View style={styles.optionsVertical}>
{([
{ id: 'bright_indirect', label: copy.lights.bright_indirect.title, sub: copy.lights.bright_indirect.sub, icon: 'wb-twilight' },
@@ -566,8 +572,8 @@ export default function OnboardingChatScreen() {
]).map((opt) => (
<TouchableOpacity key={opt.id} style={[styles.bentoOption, { borderColor: colors.border }]} onPress={() => selectOption(opt.id, opt.label)}>
<View style={styles.bentoCopy}>
<Text style={[styles.bentoTitle, { color: colors.text }]}>{opt.label}</Text>
<Text style={[styles.bentoSub, { color: colors.textSecondary }]}>{opt.sub}</Text>
<Text style={[styles.bentoTitle, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{opt.label}</Text>
<Text style={[styles.bentoSub, { color: colors.textSecondary }]} maxFontSizeMultiplier={1.3}>{opt.sub}</Text>
</View>
<Ionicons name={opt.icon === 'sunny' ? 'sunny-outline' : opt.icon === 'brightness-4' ? 'contrast' : 'partly-sunny-outline'} size={20} color={colors.primary} />
</TouchableOpacity>
@@ -582,7 +588,7 @@ export default function OnboardingChatScreen() {
if (currentStep === 3) {
return (
<View style={styles.optionsWrap}>
<Text style={styles.stepTitle}>{copy.stepExperience}</Text>
<Text style={styles.stepTitle} maxFontSizeMultiplier={1.3}>{copy.stepExperience}</Text>
<View style={styles.optionsVertical}>
{([
{ id: 'beginner', label: copy.experiences.beginner, icon: 'leaf-outline' as const },
@@ -592,7 +598,7 @@ export default function OnboardingChatScreen() {
<TouchableOpacity key={opt.id} style={[styles.optionRow, { borderColor: colors.border }]} onPress={() => selectOption(opt.id, opt.label)}>
<View style={styles.optionRowLeft}>
<Ionicons name={opt.icon} size={18} color={colors.primary} style={{ marginRight: 10 }} />
<Text style={[styles.rowText, { color: colors.text }]}>{opt.label}</Text>
<Text style={[styles.rowText, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{opt.label}</Text>
</View>
<Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
</TouchableOpacity>
@@ -608,7 +614,7 @@ export default function OnboardingChatScreen() {
if (currentStep === 4) {
return (
<View style={styles.optionsWrap}>
<Text style={styles.stepTitle}>{copy.stepSource}</Text>
<Text style={styles.stepTitle} maxFontSizeMultiplier={1.3}>{copy.stepSource}</Text>
<View style={styles.optionsGrid}>
{([
{ id: 'app_store', label: copy.sources.app_store, icon: 'logo-apple' as const },
@@ -623,7 +629,7 @@ export default function OnboardingChatScreen() {
]).map((opt) => (
<TouchableOpacity key={opt.id} style={[styles.pillBtn, { borderColor: colors.border }]} onPress={() => selectOption(opt.id, opt.label)}>
<Ionicons name={opt.icon} size={15} color={colors.primary} style={{ marginRight: 4 }} />
<Text style={[styles.pillLabel, { color: colors.text }]}>{opt.label}</Text>
<Text style={[styles.pillLabel, { color: colors.text }]} maxFontSizeMultiplier={1.3}>{opt.label}</Text>
</TouchableOpacity>
))}
</View>
@@ -636,7 +642,7 @@ export default function OnboardingChatScreen() {
return (
<View style={styles.footerWrap}>
<TouchableOpacity style={[styles.continueCta, { backgroundColor: colors.primary }]} onPress={onFinish} activeOpacity={0.86}>
<Text style={[styles.continueCtaText, { color: colors.onPrimary }]}>{copy.continue}</Text>
<Text style={[styles.continueCtaText, { color: colors.onPrimary }]} maxFontSizeMultiplier={1.2}>{copy.continue}</Text>
</TouchableOpacity>
</View>
);
@@ -734,9 +740,18 @@ export default function OnboardingChatScreen() {
/>
</View>
{/* Input/Selection Panel */}
{/* Input/Selection Panel. Scrollbar und in der Hoehe gedeckelt: der
Attributions-Schritt hat 9 Optionen, die bei grosser Systemschrift
sonst den Chatverlauf und den Weiter-Button verdraengen. */}
<View style={styles.inputPanel}>
{renderOptions()}
<ScrollView
ref={inputScrollRef}
contentContainerStyle={styles.inputPanelContent}
showsVerticalScrollIndicator={false}
bounces={false}
>
{renderOptions()}
</ScrollView>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
@@ -902,12 +917,16 @@ const styles = StyleSheet.create({
borderRadius: 3,
},
inputPanel: {
flexShrink: 1,
maxHeight: '58%',
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: 'rgba(255,255,255,0.08)',
backgroundColor: '#131e14',
},
inputPanelContent: {
paddingTop: 12,
paddingBottom: 24,
paddingHorizontal: 16,
backgroundColor: '#131e14',
},
optionsWrap: {
gap: 10,
@@ -989,7 +1008,8 @@ const styles = StyleSheet.create({
paddingVertical: 8,
},
continueCta: {
height: 56,
minHeight: 56,
paddingVertical: 16,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',

19
app/profile/billing.tsx
View File

@@ -756,7 +756,9 @@ export default function BillingScreen() {
return (
<View style={[styles.hardPaywallScreen, { backgroundColor: colors.background }]}>
<View style={styles.hardPaywallPlain}>
<SafeAreaView style={styles.hardPaywallSafe} edges={['top']}>
{/* 'bottom' mit drin: sonst liegen Kuendigungshinweis und
Privacy/Terms auf dem Home-Indicator. */}
<SafeAreaView style={styles.hardPaywallSafe} edges={['top', 'bottom']}>
<View style={styles.heroTopBar}>
<TouchableOpacity onPress={handleBack} style={[styles.heroIconButton, { backgroundColor: colors.surfaceMuted }]}>
<Ionicons name="close" size={24} color={colors.text} />
@@ -773,7 +775,7 @@ export default function BillingScreen() {
showsVerticalScrollIndicator={false}
>
<Text style={[styles.paywallEyebrow, { color: colors.primary }]}>{copy.paywallEyebrow.toUpperCase()}</Text>
<Text style={[styles.paywallHeadline, { color: colors.text }]}>{copy.paywallHeadline}</Text>
<Text style={[styles.paywallHeadline, { color: colors.text }]} maxFontSizeMultiplier={1.25}>{copy.paywallHeadline}</Text>
<Text style={[styles.paywallSub, { color: colors.textSecondary }]}>{copy.paywallSub}</Text>
{/* Feature-Bullets ueber der Angebotskarte: kurz, drei
@@ -857,7 +859,10 @@ export default function BillingScreen() {
<ActivityIndicator color={colors.onPrimary} />
) : (
<>
<Text style={[styles.offerCtaText, { color: colors.onPrimary }]}>
<Text
style={[styles.offerCtaText, { color: colors.onPrimary }]}
maxFontSizeMultiplier={1.2}
>
{trialEnabled ? copy.ctaTrial : copy.ctaMonthly}
</Text>
<Ionicons name="arrow-forward" size={19} color={colors.onPrimary} />
@@ -1366,11 +1371,15 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
gap: 9,
height: 56,
// minHeight statt height: der Kauf-Button darf mit der Systemschrift
// wachsen, statt sein Label abzuschneiden.
minHeight: 56,
paddingVertical: 14,
paddingHorizontal: 12,
borderRadius: 14,
marginTop: 16,
},
offerCtaText: { fontSize: 17.5, fontWeight: '800' },
offerCtaText: { fontSize: 17.5, fontWeight: '800', textAlign: 'center' },
offerAltLink: { alignItems: 'center', paddingVertical: 13 },
offerAltLinkText: { fontSize: 13.5, fontWeight: '600', textDecorationLine: 'underline' },
dueBanner: {