Improve layout and styling for QR Code image view.

day-079/Projects/QRConnections/QRConnections/Scenes/RootView.swift

@@ -67,6 +67,7 @@ struct RootView_Previews: PreviewProvider {
 
     static var previews: some View {
         RootView()
+            .environment(\.managedObjectContext, CurrentApp.coreDataManager.mainContext)
             .environmentObject(SampleData.appStore)
     }
 }

day-079/Projects/QRConnections/QRConnections/Scenes/User QR Code/UserQRCodeContainerView.swift

@@ -21,15 +21,8 @@ extension UserQRCodeContainerView: View {
     var body: some View {
         NavigationView {
             VStack {
-                if viewModel.qrCodeCGImage != nil {
-                    UserQRCodeView(cgImage: viewModel.qrCodeCGImage!)
-                        .transition(
-                            AnyTransition
-                                .move(edge: .top)
-                                .animation(Animation.easeOut(duration: 0.4))
-                        )
-                }
-        
+                UserQRCodeView(cgImage: viewModel.qrCodeCGImage)
+                    .frame(height: 200)
                 
                 UserQRCodeFormView(
                     viewModel: .init(userProfileState: viewModel.userProfileState)

day-079/Projects/QRConnections/QRConnections/Scenes/User QR Code/UserQRCodeView.swift

@@ -11,7 +11,7 @@ import SwiftUI
 
 
 struct UserQRCodeView {
-    let cgImage: CGImage
+    let cgImage: CGImage?
 }
 
 
@@ -19,7 +19,27 @@ struct UserQRCodeView {
 extension UserQRCodeView: View {
 
     var body: some View {
-          Image(uiImage: .init(cgImage: cgImage))
+        GeometryReader { geometry in
+            if self.cgImage != nil {
+                HStack {
+                    Spacer()
+                    Image(uiImage: .init(cgImage: self.cgImage!))
+                        .interpolation(.none)
+                        .resizable()
+                        .scaledToFit()
+                        .frame(height: geometry.size.height)
+                        .transition(
+                            AnyTransition
+                                .scale(scale: 0, anchor: .center)
+                                .animation(Animation.easeOut(duration: 0.4))
+                        )
+                    Spacer()
+                }
+            } else {
+                self.noQRCodeView
+            }
+        }
+        .padding()
     }
 }
 
@@ -29,7 +49,20 @@ extension UserQRCodeView {}
 
 
 // MARK: - View Variables
-extension UserQRCodeView {}
+extension UserQRCodeView {
+    
+    var noQRCodeView: some View {
+        VStack(spacing: 22) {
+            Image(systemName: "xmark.square")
+                .resizable()
+                .scaledToFit()
+            
+            Text("Begin entering your information to generate a QR Code.")
+                .layoutPriority(1)
+                .padding()
+        }
+    }
+}
 
 
 // MARK: - Private Helpers