diff --git a/client/components/onboarding/IntentSelectionStep.tsx b/client/components/onboarding/IntentSelectionStep.tsx index 6ecf290..bc46871 100644 --- a/client/components/onboarding/IntentSelectionStep.tsx +++ b/client/components/onboarding/IntentSelectionStep.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { View, StyleSheet, TouchableOpacity } from 'react-native'; +import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'; import { useTranslation } from 'react-i18next'; -import { SerifText } from './SerifText'; -import { OnboardingColors } from '@/constants/OnboardingTheme'; +import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme'; export const INTENTS = [ { id: 'love', labelKey: 'intent.love', icon: '❤️' }, @@ -20,7 +19,7 @@ export function IntentSelectionStep({ selectedIds, onToggle }: IntentSelectionSt const { t } = useTranslation(); return ( - {t('intent.title')} + {t('intent.title')} {INTENTS.map((intent) => { @@ -35,10 +34,10 @@ export function IntentSelectionStep({ selectedIds, onToggle }: IntentSelectionSt onPress={() => onToggle(intent.id)} activeOpacity={0.7} > - {intent.icon} - + {intent.icon} + {t(intent.labelKey)} - + ); })} @@ -56,6 +55,8 @@ const styles = StyleSheet.create({ fontSize: 24, marginBottom: 40, textAlign: 'center', + fontFamily: OnboardingFont.question, + color: OnboardingColors.textPrimary, }, grid: { flexDirection: 'row', @@ -86,10 +87,12 @@ const styles = StyleSheet.create({ }, icon: { fontSize: 32, + fontFamily: OnboardingFont.question, }, label: { fontSize: 18, color: OnboardingColors.textPrimary, + fontFamily: OnboardingFont.question, }, labelSelected: { fontWeight: 'bold', diff --git a/client/components/onboarding/OnboardingLayout.tsx b/client/components/onboarding/OnboardingLayout.tsx index 5b864dd..3a7913b 100644 --- a/client/components/onboarding/OnboardingLayout.tsx +++ b/client/components/onboarding/OnboardingLayout.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform } from 'react-native'; import { useTranslation } from 'react-i18next'; -import { OnboardingColors } from '@/constants/OnboardingTheme'; +import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme'; interface OnboardingLayoutProps { children: React.ReactNode; @@ -119,13 +119,13 @@ const styles = StyleSheet.create({ questionTitle: { fontSize: 22, color: OnboardingColors.questionTitle, - fontFamily: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif', + fontFamily: OnboardingFont.question, flex: 1, }, progressText: { fontSize: 18, color: OnboardingColors.textProgress, - fontFamily: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif', + fontFamily: OnboardingFont.question, marginLeft: 10, }, content: { diff --git a/client/components/onboarding/ReminderStep.tsx b/client/components/onboarding/ReminderStep.tsx index b660495..7c2cea6 100644 --- a/client/components/onboarding/ReminderStep.tsx +++ b/client/components/onboarding/ReminderStep.tsx @@ -11,10 +11,10 @@ interface ReminderStepProps { value: number; onChange: (value: number) => void; onFinish: () => void; - onSkip: () => void; + onSkip?: () => void; } -export function ReminderStep({ value, onChange, onFinish, onSkip }: ReminderStepProps) { +export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) { const { t } = useTranslation(); const insets = useSafeAreaInsets(); @@ -48,10 +48,6 @@ export function ReminderStep({ value, onChange, onFinish, onSkip }: ReminderStep - - - {t('onboarding.skip')} - ); @@ -93,17 +89,5 @@ const styles = StyleSheet.create({ footer: { position: 'absolute', alignItems: 'center', - } - , - skipBtn: { - marginTop: 14, - paddingVertical: 10, - paddingHorizontal: 18, - }, - skipText: { - color: OnboardingColors.textPrimary, - fontSize: 15, - fontWeight: '600', - opacity: 0.85, }, }); diff --git a/client/components/onboarding/SelectionStep.tsx b/client/components/onboarding/SelectionStep.tsx index 2bb9e25..2773aa9 100644 --- a/client/components/onboarding/SelectionStep.tsx +++ b/client/components/onboarding/SelectionStep.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'; +import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { OnboardingColors } from '@/constants/OnboardingTheme'; -import { SerifText } from './SerifText'; +import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme'; import SelectedIcon from '@/assets/images/icon/selected_icon.svg'; import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg'; import BtnClicked from '@/assets/images/icon/btn_clicked.svg'; @@ -25,7 +24,8 @@ export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip } const insets = useSafeAreaInsets(); const footerBottom = insets.bottom + 16; const footerButtonHeight = 57; - const footerPaddingBottom = footerBottom + footerButtonHeight + 24; + // 底部留白加大,避免最后一项与按钮边框视觉重叠 + const footerPaddingBottom = footerBottom + footerButtonHeight + 40; return ( @@ -43,7 +43,7 @@ export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip } onPress={() => onToggle(option.id)} activeOpacity={0.7} > - {option.label} + {option.label} {isSelected && ( @@ -95,6 +95,7 @@ const styles = StyleSheet.create({ fontSize: 18, color: OnboardingColors.textPrimary, fontWeight: '500', + fontFamily: OnboardingFont.question, flex: 1, }, iconWrapper: { diff --git a/client/constants/OnboardingTheme.ts b/client/constants/OnboardingTheme.ts index 871489f..022e7ef 100644 --- a/client/constants/OnboardingTheme.ts +++ b/client/constants/OnboardingTheme.ts @@ -1,3 +1,10 @@ +import { Platform } from 'react-native'; + +/** 与 onboarding 问题标题一致的字体(PingFang TC / sans-serif) */ +export const OnboardingFont = { + question: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif', +}; + export const OnboardingColors = { background: '#FFF4EA', textPrimary: '#772F00', diff --git a/client/src/i18n/locales/all.json b/client/src/i18n/locales/all.json index aa4fddc..763335b 100644 --- a/client/src/i18n/locales/all.json +++ b/client/src/i18n/locales/all.json @@ -14,7 +14,7 @@ "progress": "{{current}}/{{total}}", "next": "Next", "skip": "Skip", - "skipAll": "Skip onboarding", + "skipAll": "Skip", "q1Title": "How are you feeling lately?", "q1Desc": "No right or wrong. You can skip and adjust later.", "q2Title": "What kind of support do you want?", @@ -26,9 +26,9 @@ }, "onboardingSurvey": { "steps": { - "name": { "title": "What do you want to be called?", "placeholder": "Mama" }, + "name": { "title": "What should we call you?", "placeholder": "Mama" }, "status": { - "title": "Which stage of motherhood are you in?", + "title": "Where are you at right now?", "options": { "pregnant": "Pregnant / Preparing", "has_kids": "Parenting", @@ -66,7 +66,7 @@ "balance": "Rest & balance" } }, - "reminder": { "title": "How many reminders do you want per day?" } + "reminder": { "title": "How often would you like a gentle reminder?" } } }, "intent": { @@ -142,13 +142,13 @@ "widgetDesc": "Put gentle reminders on your home screen: long-press → tap “+” → search “Mindfulness” → add a size you like." }, "consent": { - "title": "You Are Perfect.", - "subtitle": "Everything\nWill Be Better.", + "title": "Hey mama.", + "subtitle": "You’re doing okay\nright now.", "agree": "Agree & Continue", "privacy": "Privacy Policy", "terms": "Terms of Use", "notice": "By continuing, you agree to the Privacy Policy and Terms of Use.", - "noticeRich": "By continuing, you agree to the {{privacyLabel}}{{privacySuffix}} and {{termsLabel}}{{termsSuffix}}.", + "noticeRich": "By continuing,\nyou agree to the {{privacyLabel}}{{privacySuffix}} and {{termsLabel}}{{termsSuffix}}.", "linkUnavailable": "Failed to load the policy link. Please check your network and try again.", "linkUnavailableDev": "Failed to load the policy link. Please check your network or API_BASE_URL: {{baseUrl}}", "linkLoadingSuffix": " (loading…)"