🍱 Tweaked onboarding view

phpmon/Domain/SwiftUI/Onboarding/OnboardingView.swift

@@ -8,10 +8,34 @@
 
 import SwiftUI
 
+struct OnboardingTextItem: View {
+    @State var icon: String
+    @State var title: String
+    @State var description: String
+    var body: some View {
+        HStack(spacing: 15) {
+            Image(systemName: icon)
+                .resizable()
+                .aspectRatio(contentMode: .fit)
+                .frame(width: 24, height: 24)
+                .foregroundColor(Color.appPrimary)
+                .padding(.trailing, 10)
+            VStack(alignment: .leading, spacing: 4) {
+                Text(title.localizedForSwiftUI)
+                    .font(.system(size: 15))
+                Text(description.localizedForSwiftUI)
+                    .foregroundColor(Color.secondary)
+                    .font(.system(size: 13))
+                    .fixedSize(horizontal: false, vertical: true)
+            }
+        }
+    }
+}
+
 struct OnboardingView: View {
     var body: some View {
-        VStack {
+        VStack(spacing: 10) {
-        VStack(alignment: .leading) {
+            VStack(alignment: .center) {
                 HStack {
                     Image(nsImage: NSApp.applicationIconImage)
                         .resizable()
@@ -25,79 +49,68 @@ struct OnboardingView: View {
                             .padding(.bottom, 5)
                         Text("onboarding.explore".localized)
                             .padding(.bottom)
-                }.padding(.top, 10)
                     }
-
+                    .padding(.top, 10)
-            TabView {
-                VStack {
-                    Image("Tour.MenuBar")
-                        .resizable()
-                        .aspectRatio(contentMode: .fit)
-                        .padding(.top)
-                    Text("onboarding.tour.menu_bar".localizedForSwiftUI)
-                        .padding(.init(top: 5, leading: 20, bottom: 20, trailing: 20))
-                }.tabItem { Label("onboarding.tour.menu_bar.title".localized,
-                                  systemImage: "info.circle.fill") }
-                VStack {
-                    Image("Tour.Domains")
-                        .resizable()
-                        .aspectRatio(contentMode: .fit)
-                        .padding(.top)
-                    Text("onboarding.tour.domains".localized)
-                        .padding(.init(top: 5, leading: 20, bottom: 20, trailing: 20))
-                }.tabItem { Label("onboarding.tour.domains.title".localized,
-                                  systemImage: "info.circle.fill") }
-                VStack {
-                    Image("Tour.Isolation")
-                        .resizable()
-                        .aspectRatio(contentMode: .fit)
-                        .padding(.top)
-                    Text("onboarding.tour.isolation".localized)
-                        .padding(.init(top: 5, leading: 20, bottom: 20, trailing: 20))
-                }.tabItem { Label("onboarding.tour.isolation.title".localized,
-                                  systemImage: "info.circle.fill") }
                 }
+                VStack {
+                    VStack(alignment: .leading, spacing: 20) {
+                        OnboardingTextItem(
+                            icon: "sparkles.rectangle.stack",
+                            title: "onboarding.tour.menu_bar.title",
+                            description: "onboarding.tour.menu_bar"
+                        )
+                        OnboardingTextItem(
+                            icon: "list.star",
+                            title: "onboarding.tour.domains.title",
+                            description: "onboarding.tour.domains"
+                        )
+                        OnboardingTextItem(
+                            icon: "pin.fill",
+                            title: "onboarding.tour.isolation.title",
+                            description: "onboarding.tour.isolation"
+                        )
                     }
-        .frame(maxWidth: .infinity)
+                    .padding(20)
-
+                    .overlay(
-        VStack(alignment: .center) {
+                        RoundedRectangle(cornerRadius: 10)
+                            .stroke(Color.gray.opacity(0.3), lineWidth: 1)
+                    )
+                }.padding()
+                VStack(spacing: 20) {
                     HStack {
-                Image(systemName: "person.fill.questionmark")
+                        Image(systemName: "questionmark.circle.fill")
                             .resizable()
                             .frame(width: 24, height: 24)
-                    .foregroundColor(.accentColor)
+                            .foregroundColor(Color.appSecondary)
                             .padding(.trailing, 10)
                         Text("onboarding.tour.faq_hint".localizedForSwiftUI)
-            }.padding()
+                    }
+                    VStack {
                         Text("onboarding.tour.once".localized)
                             .font(.subheadline)
                             .foregroundColor(.gray)
                             .padding(.top, 5)
                             .padding(.bottom, 5)
-            Button("Close Tour") {
+                        Button("onboarding.tour.close".localized) {
                             App.shared.onboardingWindowController?.close()
                         }
                     }
+                }.padding()
+            }
             .frame(maxWidth: .infinity)
+            .frame(maxHeight: 580)
         }
         .padding(.top, 8)
         .padding(.leading)
         .padding(.trailing)
-        .padding(.bottom)
     }
 }
 
 struct OnboardingView_Previews: PreviewProvider {
     static var previews: some View {
         Group {
-            OnboardingView().frame(
+            OnboardingView()
-                width: 600,
+            OnboardingView().preferredColorScheme(.dark)
-                height: 600
-            )
-            OnboardingView().preferredColorScheme(.dark).frame(
-                width: 600,
-                height: 600
-            )
         }
     }
 }

phpmon/Localizable.strings

@@ -513,12 +513,13 @@ If you are seeing this message but are confused why this folder has gone missing
 
 "onboarding.title" = "Welcome Tour";
 "onboarding.welcome" = "Welcome to PHP Monitor!";
-"onboarding.explore" = "Explore some of the cool features PHP Monitor has to offer.";
+"onboarding.explore" = "Learn more about some of the features that PHP Monitor has to offer.";
 "onboarding.tour.menu_bar.title" = "Get Started";
 "onboarding.tour.menu_bar" = "PHP Monitor lives in your menu bar. From here, you can switch the globally linked PHP version, start or stop services, locate configuration files, and more.";
-"onboarding.tour.faq_hint" = "**If you are new to PHP Monitor**, I recommend that you check out the [README](https://github.com/nicoverbruggen/phpmon/blob/main/README.md) on GitHub: it contains a comprehensive FAQ with various tips and common questions and answers. Don't hesitate to get in touch either.";
+"onboarding.tour.faq_hint" = "I recommend that you check out the [README](https://github.com/nicoverbruggen/phpmon/blob/main/README.md) on GitHub: it contains a comprehensive FAQ with various tips and common questions and answers.";
 "onboarding.tour.domains.title" = "Domains";
 "onboarding.tour.domains" = "By opening the Domains window via the Menu Bar item, you can view which domains are linked and parked.";
 "onboarding.tour.isolation.title" = "Isolation";
 "onboarding.tour.isolation" = "If you have Valet 3 installed, you can even use domain isolation by right-clicking on a given domain in the Domains window. This allows you to pick a specific version of PHP to use for that domain!";
 "onboarding.tour.once" = "You will only see the Welcome Tour once. You can re-open the Welcome Tour later via the menu bar icon.";
+"onboarding.tour.close" = "Close Tour";