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

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',
},
});