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

27
components/OnboardingQuestion.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useColors } from '../constants/Colors';
@@ -42,9 +42,15 @@ export function OnboardingQuestion({
</View>
<View style={styles.backBtn} />
</View>
<Text style={[styles.title, { color: colors.text }]}>{title}</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>{subtitle}</Text>
<View style={styles.options}>
{/* Scrollbar statt fixem Block: bei grosser Systemschriftgroesse wuchsen
Titel und Karten frueher ueber den Footer und haben den CTA verdeckt. */}
<ScrollView
style={styles.optionsScroll}
contentContainerStyle={styles.options}
showsVerticalScrollIndicator={false}
>
<Text style={[styles.title, { color: colors.text }]} maxFontSizeMultiplier={1.25}>{title}</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]} maxFontSizeMultiplier={1.3}>{subtitle}</Text>
{options.map((option) => {
const active = selectedId === option.id;
return (
@@ -59,13 +65,13 @@ export function OnboardingQuestion({
>
<Text style={styles.emoji}>{option.emoji}</Text>
<View style={styles.cardCopy}>
<Text style={[styles.cardLabel, { color: active ? colors.primary : colors.text }]}>{option.label}</Text>
{option.subtitle ? <Text style={[styles.cardSubtitle, { color: colors.textMuted }]}>{option.subtitle}</Text> : null}
<Text style={[styles.cardLabel, { color: active ? colors.primary : colors.text }]} maxFontSizeMultiplier={1.3}>{option.label}</Text>
{option.subtitle ? <Text style={[styles.cardSubtitle, { color: colors.textMuted }]} maxFontSizeMultiplier={1.3}>{option.subtitle}</Text> : null}
</View>
</TouchableOpacity>
);
})}
</View>
</ScrollView>
<View style={styles.footer}>
{skipLabel && onSkip ? (
<TouchableOpacity onPress={onSkip} style={styles.skipBtn}>
@@ -78,7 +84,7 @@ export function OnboardingQuestion({
activeOpacity={0.86}
style={[styles.cta, { backgroundColor: selectedId ? colors.primary : colors.surfaceMuted }]}
>
<Text style={[styles.ctaText, { color: selectedId ? colors.onPrimary : colors.textMuted }]}>{continueLabel}</Text>
<Text style={[styles.ctaText, { color: selectedId ? colors.onPrimary : colors.textMuted }]} maxFontSizeMultiplier={1.2}>{continueLabel}</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
@@ -93,7 +99,8 @@ const styles = StyleSheet.create({
progressFill: { height: 6, borderRadius: 3 },
title: { fontSize: 30, lineHeight: 35, fontWeight: '900', textAlign: 'center', marginTop: 18, marginBottom: 8 },
subtitle: { fontSize: 15, lineHeight: 20, textAlign: 'center', marginBottom: 22 },
options: { gap: 12, flex: 1 },
optionsScroll: { flex: 1 },
options: { gap: 12, paddingBottom: 12 },
card: { flexDirection: 'row', alignItems: 'center', gap: 14, borderRadius: 16, borderWidth: 2, paddingHorizontal: 16, paddingVertical: 18 },
emoji: { fontSize: 26 },
cardCopy: { flex: 1, gap: 2 },
@@ -102,6 +109,6 @@ const styles = StyleSheet.create({
footer: { gap: 8, paddingBottom: 6 },
skipBtn: { alignItems: 'center', paddingVertical: 6 },
skipText: { fontSize: 14, fontWeight: '700' },
cta: { height: 56, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
cta: { minHeight: 56, paddingVertical: 16, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
ctaText: { fontSize: 17, fontWeight: '800' },
});