phase 2 refactor for reusable onboarding element

nirvana-ios/Views/Templates/OnboardingTemplateView.swift

@@ -11,14 +11,14 @@ struct OnboardingTemplateView: View {
     let screenWidth = UIScreen.main.bounds.width
     let screenHeight = UIScreen.main.bounds.height
     
-    private let headerText: String?
+    private var headerText: String?
-    private let imageName:String?
+    private var imageName:String?
     
-    private let mainLeadingActionText:String?
+    private var mainLeadingActionText:String?
-    private let mainHighlightedActionText:String?
+    private var mainHighlightedActionText:String?
-    private let mainTrailingActionText:String?
+    private var mainTrailingActionText:String?
     
-    private let subActionText:String?
+    private var subActionText:String?
     
     private var bottomActionArea:AnyView?
     
@@ -40,31 +40,59 @@ struct OnboardingTemplateView: View {
     
     var body: some View {
         VStack(spacing: 0) {
-            // nav bar
             HeaderView()
             
             VStack {
-                // imported image name
+                self.onboardingImageView
                 
+                self.onboardingActionTextView
                 
-                if (self.mainLeadingActionText != nil) { //only show section if leading text there assuming everything is won't be there
-                    
-                }
-                
-                // passed in action area from template user
                 self.bottomActionArea
-                
             }
             .padding()
             .frame(maxWidth: screenWidth - 20)
 
             Spacer()
-        } // Vstack
+        } //outermost vstack
         .accentColor(NirvanaColor.teal)
         .background(NirvanaColor.bgLightGrey)
         .navigationBarTitleDisplayMode(.inline)
-        //        .background(RadialGradient(gradient: Gradient(colors: [NirvanaColor.teal.opacity(0.1), NirvanaColor.bgLightGrey, NirvanaColor.bgLightGrey]), center: .center, startRadius: 0, endRadius: 200)
+    }
-        //        )
+    
+    private var onboardingImageView: some View {
+        Image(self.imageName ?? "")
+            .renderingMode(.original)
+            .resizable()
+            .aspectRatio(contentMode: .fit)
+    }
+    
+    private var onboardingActionTextView: some View {
+        ZStack {
+            if (self.mainLeadingActionText == nil || self.mainHighlightedActionText == nil || self.mainTrailingActionText == nil || self.subActionText == nil) {
+                EmptyView()
+            } else {
+                VStack(alignment: .leading) {
+                    
+                    Text(self.mainLeadingActionText!)
+                        .font(.title)
+                        .foregroundColor(NirvanaColor.black)
+                    + Text(self.mainHighlightedActionText!)
+                        .font(.title)
+                        .foregroundColor(NirvanaColor.teal)
+                    + Text(self.mainTrailingActionText!)
+                        .font(.title)
+                        .foregroundColor(NirvanaColor.black)
+                    
+                    Text(self.subActionText!)
+                        .foregroundColor(Color.gray)
+                        .padding(.top, 5)
+                        .fixedSize(horizontal: false, vertical: true)
+                    
+                    Spacer()
+                }
+                .frame(maxWidth: screenWidth - 20)
+            }
+        }
     }
 }
 

nirvana-ios/Views/WelcomeView/WelcomeView.swift

@@ -12,24 +12,33 @@ struct WelcomeView: View {
     let screenHeight = UIScreen.main.bounds.height
     
     var body: some View {
-        VStack(spacing: 0) {
+            OnboardingTemplateView(imgName: "undraw_friendship_mni7", mainLeadingActText: "Your", mainHighlightedActText: "minimalist", mainTrailingActText: "social media.", subActText: "Tired of the rat race?", bottomActArea: AnyView(
-            HeaderView()
+                    VStack(alignment: .center) {
-            
+                        NavigationLink(destination: HomeView()) {
-            VStack {
+                            Text("Start Your Detox")
-                OnboardingImageView("undraw_friendship_mni7")
+                                .bold()
-                
+                                .foregroundColor(NirvanaColor.white)
-                OnboardingActionTextView(leadingText: "Your ", highlightedText: "minimalist ", trailingText: "social media", subActText: "tired of the rat race on insta, snap, tik-tok, \"meta\"?")
+                                .frame(maxWidth: .infinity)
-                
+                                .padding(.vertical, 20)
-                OnboardingActionAreaView()
+                                .background(NirvanaColor.teal)
-            }
+                                .clipShape(Capsule())
-            .padding()
+                                .shadow(radius:10)
-            .frame(maxWidth: screenWidth - 20)
+                        }
+                            
+                        Button(
+                            action: {
+                                print("link to website learn more clicked")
+                            },
+                            label: {
+                                Text("Learn More")
+                                    .bold()
+                            })
 
-            Spacer()
+                        //learn more button to usenirvana.com
-        } //outermost vstack
+                    }
-        .accentColor(NirvanaColor.teal)
+                        .padding(.top, 20)
-        .background(NirvanaColor.bgLightGrey)
+                    )
-        .navigationBarTitleDisplayMode(.inline)
+            )
     } // View body
 } // View
 
@@ -41,89 +50,4 @@ struct WelcomeView_Previews: PreviewProvider {
 }
 
 
-struct OnboardingActionTextView: View {
-    let screenWidth = UIScreen.main.bounds.width
-    let screenHeight = UIScreen.main.bounds.height
-    
-    private var mainLeadingActionText:String
-    private var mainHighlightedActionText:String
-    private var mainTrailingActionText:String
-    
-    private var subActionText:String
-    
-    init(leadingText:String, highlightedText: String, trailingText: String, subActText: String) {
-        self.mainLeadingActionText = leadingText
-        self.mainHighlightedActionText = highlightedText
-        self.mainTrailingActionText = trailingText
-        
-        self.subActionText = subActText
-    }
-    
-    var body : some View {
-        VStack(alignment: .leading) {
-            
-            Text(self.mainLeadingActionText)
-                .font(.title)
-                .foregroundColor(NirvanaColor.black)
-            + Text(self.mainHighlightedActionText)
-                .font(.title)
-                .foregroundColor(NirvanaColor.teal)
-            + Text(self.mainTrailingActionText)
-                .font(.title)
-                .foregroundColor(NirvanaColor.black)
-            
-            Text(self.subActionText)
-                .foregroundColor(Color.gray)
-                .padding(.top, 5)
-                .fixedSize(horizontal: false, vertical: true)
-            
-            Spacer()
-        }
-        .frame(maxWidth: screenWidth - 20)
-    }
-}
 
-struct OnboardingActionAreaView: View {
-    var body : some View {
-        VStack(alignment: .center) {
-            NavigationLink(destination: HomeView()) {
-                Text("Start Your Detox")
-                    .bold()
-                    .foregroundColor(NirvanaColor.white)
-                    .frame(maxWidth: .infinity)
-                    .padding(.vertical, 20)
-                    .background(NirvanaColor.teal)
-                    .clipShape(Capsule())
-                    .shadow(radius:10)
-            }
-                
-                
-            Button(
-                action: {
-                    print("link to website learn more clicked")
-                },
-                label: {
-                    Text("Learn More")
-                        .bold()
-                })
-
-            //learn more button to usenirvana.com
-        }
-        .padding(.top, 20)
-    }
-}
-
-struct OnboardingImageView: View {
-    private var imageName:String
-    
-    init(_ imgName: String) {
-        self.imageName = imgName
-    }
-    
-    var body : some View {
-        Image(self.imageName)
-            .renderingMode(.original)
-            .resizable()
-            .aspectRatio(contentMode: .fit)
-    }
-}