Adjust onboarding header to short step label and top-align step content

MealMood/Resources/en.lproj/Localizable.strings

@@ -7,6 +7,7 @@
 "onboarding_welcome_step_4" = "Add your usual dishes to start fast";
 "onboarding_nav_intro" = "Quick setup";
 "onboarding_nav_setup" = "Setup";
+"onboarding_nav_step_short" = "Step %d";
 "onboarding_nav_step_counter" = "Step %d/%d";
 "onboarding_start" = "Get Started";
 "onboarding_continue" = "Continue";

MealMood/Resources/es.lproj/Localizable.strings

@@ -7,6 +7,7 @@
 "onboarding_welcome_step_4" = "Añade tus platos habituales para empezar rápido";
 "onboarding_nav_intro" = "Configuración rápida";
 "onboarding_nav_setup" = "Config";
+"onboarding_nav_step_short" = "Paso %d";
 "onboarding_nav_step_counter" = "Paso %d/%d";
 "onboarding_start" = "Comenzar";
 "onboarding_continue" = "Continuar";

MealMood/Views/Onboarding/CalendarStepView.swift

@@ -17,6 +17,14 @@ struct CalendarStepView: View {
     var body: some View {
         ScrollView {
             VStack(spacing: 24) {
+                Text("calendar_title")
+                    .font(.mealMoodH1)
+                    .foregroundColor(.mealMoodTextPrimary)
+                    .multilineTextAlignment(.leading)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(.horizontal, 24)
+                    .padding(.top, 12)
+
                 VStack(spacing: 16) {
                     // iCloud sync toggle
                     HStack {
@@ -115,7 +123,6 @@ struct CalendarStepView: View {
                     }
                 }
                 .padding(.horizontal, 24)
-                .padding(.top, 24)
 
                 Text("calendar_optional")
                     .font(.mealMoodSmall)

MealMood/Views/Onboarding/FirstDishesStepView.swift

@@ -34,12 +34,18 @@ struct FirstDishesStepView: View {
     var body: some View {
         ScrollView {
             VStack(spacing: 24) {
+                Text("first_dishes_title")
+                    .font(.mealMoodH1)
+                    .foregroundColor(.mealMoodTextPrimary)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(.horizontal, 24)
+                    .padding(.top, 12)
+
                 Text("first_dishes_subtitle")
                     .font(.mealMoodSmall)
                     .foregroundColor(.mealMoodTextSecondary)
                     .frame(maxWidth: .infinity, alignment: .leading)
                     .padding(.horizontal, 24)
-                    .padding(.top, 20)
 
                 // New dish form
                 VStack(spacing: 12) {

MealMood/Views/Onboarding/MealWindowsStepView.swift

@@ -6,7 +6,13 @@ struct MealWindowsStepView: View {
 
     var body: some View {
         VStack(spacing: 24) {
-            Spacer()
+            Text("meal_windows_title")
+                .font(.mealMoodH1)
+                .foregroundColor(.mealMoodTextPrimary)
+                .multilineTextAlignment(.leading)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding(.horizontal, 24)
+                .padding(.top, 12)
 
             VStack(spacing: 12) {
                 ForEach(MealWindows.allCases, id: \.self) { option in
@@ -24,10 +30,9 @@ struct MealWindowsStepView: View {
             }
             .padding(.horizontal, 24)
 
-            Spacer()
-
             PrimaryButton(title: String(localized: "onboarding_continue"), action: onNext)
                 .padding(.horizontal, 24)
+                .padding(.top, 8)
                 .padding(.bottom, 40)
         }
     }

MealMood/Views/Onboarding/OnboardingView.swift

@@ -68,7 +68,7 @@ struct OnboardingView: View {
                 }
                 .tabViewStyle(.page(indexDisplayMode: .never))
                 .animation(.easeInOut(duration: 0.3), value: viewModel.currentStep)
-                .frame(maxHeight: .infinity, alignment: .center)
+                .frame(maxHeight: .infinity, alignment: .top)
             }
         }
         .onAppear {
@@ -147,14 +147,8 @@ struct OnboardingView: View {
     }
 
     private var headerTitle: String {
-        switch viewModel.currentStep {
+        guard viewModel.currentStep > 0 else { return String(localized: "onboarding_nav_intro") }
-        case 0: return String(localized: "onboarding_nav_intro")
+        return String(format: String(localized: "onboarding_nav_step_short"), viewModel.currentStep)
-        case 1: return String(localized: "meal_windows_title")
-        case 2: return String(localized: "weekends_title")
-        case 3: return String(localized: "calendar_title")
-        case 4: return String(localized: "first_dishes_title")
-        default: return ""
-        }
     }
 
     private var stepCounterText: String {

MealMood/Views/Onboarding/WeekendsStepView.swift

@@ -6,7 +6,13 @@ struct WeekendsStepView: View {
 
     var body: some View {
         VStack(spacing: 24) {
-            Spacer()
+            Text("weekends_title")
+                .font(.mealMoodH1)
+                .foregroundColor(.mealMoodTextPrimary)
+                .multilineTextAlignment(.leading)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding(.horizontal, 24)
+                .padding(.top, 12)
 
             VStack(spacing: 16) {
                 HStack {
@@ -34,10 +40,9 @@ struct WeekendsStepView: View {
                 .font(.mealMoodSmall)
                 .foregroundColor(.mealMoodTextSecondary)
 
-            Spacer()
-
             PrimaryButton(title: String(localized: "onboarding_continue"), action: onNext)
                 .padding(.horizontal, 24)
+                .padding(.top, 8)
                 .padding(.bottom, 40)
         }
     }