🍱 Tweaked onboarding screen

phpmon/Assets.xcassets/Tour/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

phpmon/Assets.xcassets/Tour/Tour.Domains.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "tour3.heic",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

phpmon/Assets.xcassets/Tour/Tour.Isolation.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "tour4.heic",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

phpmon/Assets.xcassets/Tour/Tour.MenuBar.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "tour2.heic",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

phpmon/Domain/SwiftUI/Onboarding/OnboardingView.swift

@@ -10,41 +10,66 @@ import SwiftUI
 
 struct OnboardingView: View {
     var body: some View {
-        HStack(alignment: .top) {
+            VStack(alignment: .center) {
-            Image(nsImage: NSApp.applicationIconImage)
+                Image(nsImage: NSApp.applicationIconImage)
-                .resizable()
+                    .resizable()
-                .padding()
+                    .frame(width: 90, height: 90)
-                .frame(width: 120, height: 120)
+                Text("onboarding.welcome".localized)
-            VStack(alignment: .leading) {
-                Text("Welcome to PHP Monitor!")
                     .font(.title)
                     .bold()
                     .padding(.bottom, 5)
-                Text("If you're seeing this message, then the app has successfully started without any issues. That's honestly the hardest part — from now on I hope it's smooth sailing for you.")
+                Text("onboarding.explore".localized)
                     .padding(.bottom)
-                VStack(alignment: .leading) {
+                TabView {
-                    Text("Switch PHP versions").font(.headline)
+                    VStack {
-                    Text("Manage your domains").font(.headline)
+                        Image("Tour.MenuBar")
-                    Text("Domain-specific PHP version isolation").font(.headline)
+                            .resizable()
-                    Text("Find your configuration files").font(.headline)
+                            .aspectRatio(contentMode: .fit)
+                            .padding(.top)
+                        Text("onboarding.tour.menu_bar".localized)
+                            .padding(.init(top: 5, leading: 20, bottom: 20, trailing: 20))
+                    }.tabItem { Label("onboarding.tour.menu_bar.title".localized, systemImage: "") }
+                    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: "") }
+                    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: "") }
                 }
-                Text("I hope you find the app as useful as I do. Enjoy, and if you can, please consider supporting the app. Thank you!")
+                Text("onboarding.tour.once".localized)
-                    .padding(.top)
+                    .font(.subheadline)
-                    .padding(.bottom)
+                    .foregroundColor(.gray)
-                VStack(alignment: .leading) {
+                    .padding(.top, 5)
-                    Button("Get Started") {
+                Button("Close Tour") {
-                        //
+
-                    }
                 }
-            }.frame(maxWidth: .infinity)
+            }
-        }.padding(20)
+            .frame(maxWidth: .infinity)
+            .padding()
     }
 }
 
 struct OnboardingView_Previews: PreviewProvider {
     static var previews: some View {
-        OnboardingView().frame(
+        Group {
-            width: 600
+            OnboardingView().frame(
-        )
+                width: 600,
+                height: 600
+            )
+            OnboardingView().preferredColorScheme(.dark).frame(
+                width: 600,
+                height: 600
+            )
+        }
     }
 }

phpmon/Localizable.strings

@@ -497,3 +497,15 @@ You can do this by running `composer global update` in your terminal. After that
 "alert.warnings.tld_issue.title" = "You are not using `.test` as the TLD for Valet.";
 "alert.warnings.tld_issue.subtitle" = "Using a non-default TLD may not work correctly and is not officially supported.";
 "alert.warnings.tld_issue.description" = "PHP Monitor will remain functional, but there might be issues: the app might not correctly show which domains have been secured. For optimal results, go to your Valet configuration file (config.json in the Valet directory) and change the TLD back to `test`.";
+
+// ONBOARDING
+
+"onboarding.welcome" = "Welcome to PHP Monitor!";
+"onboarding.explore" = "Explore some of the features below, or close the tour and get started.";
+"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.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.";