Finished & finalized calibration view

Author: qazwini

Turbah.xcodeproj/project.xcworkspace/xcuserdata/momo.xcuserdatad/UserInterfaceState.xcuserstate

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

Turbah/Assets.xcassets/calibrate.imageset/Contents.json

@@ -10,20 +10,45 @@ import UIKit
 
 class CalibrateView: UIVisualEffectView {
 
-    let instructionLabel: UILabel = {
-        let label = UILabel()
-        label.textAlignment = .center
-        label.text = "Calibrate compass before use for better accuracy"
-        label.numberOfLines = 2
-        return label
-    }()
+    var stack = UIStackView()
+    var vibrancyView = UIVisualEffectView()
+    var instructionLabel = UILabel()
+    var calibrateImageView = UIImageView()
+    var removeButton = UIImageView()
 
     private func setupViews() {
         effect = blurEffect
         translatesAutoresizingMaskIntoConstraints = false
 
-        contentView.addSubview(instructionLabel)
-        instructionLabel.fillSuperview(padding: UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))
+        vibrancyView.effect = UIVibrancyEffect(blurEffect: blurEffect, style: .secondaryLabel)
+        contentView.addSubview(vibrancyView)
+        vibrancyView.fillSuperview()
+        
+        instructionLabel.textAlignment = .center
+        instructionLabel.numberOfLines = 2
+        instructionLabel.font = .systemFont(ofSize: 16, weight: .semibold)
+        instructionLabel.text = "Calibrate compass before use for better accuracy"
+        
+        calibrateImageView.contentMode = .scaleAspectFit
+        calibrateImageView.image = #imageLiteral(resourceName: "calibrate").withRenderingMode(.alwaysTemplate)
+        calibrateImageView.widthAnchor.constraint(equalToConstant: 164).isActive = true
+        calibrateImageView.heightAnchor.constraint(equalToConstant: 78).isActive = true
+        
+        stack.axis = .vertical
+        stack.distribution = .fill
+        stack.alignment = .center
+        stack.spacing = 30
+        stack.addArrangedSubview(calibrateImageView)
+        stack.addArrangedSubview(instructionLabel)
+        
+        vibrancyView.contentView.addSubview(stack)
+        stack.fillSuperview(padding: UIEdgeInsets(top: 40, left: 30, bottom: 30, right: 30))
+        
+        removeButton.translatesAutoresizingMaskIntoConstraints = false
+        removeButton.image = UIImage(systemName: "xmark.circle.fill", withConfiguration: UIImage.SymbolConfiguration(pointSize: 28))
+        vibrancyView.contentView.addSubview(removeButton)
+        removeButton.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
+        removeButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10).isActive = true
     }
 
     override func layoutSubviews() {

Turbah/Assets.xcassets/calibrate.imageset/calibrate@2x.png

@@ -256,18 +256,23 @@ class ViewController: UIViewController, CLLocationManagerDelegate, ARCoachingOve
     var calibrateView: CalibrateView?
 
     func showCalibrateView() {
-        guard !save.didShowCalibration else { return }
+        //guard !save.didShowCalibration else { return }
 
         calibrateView = CalibrateView()
         calibrateView!.alpha = 0
         calibrateView!.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(removeCalibrateView)))
 
         view.addSubview(calibrateView!)
         calibrateView!.centerInSuperview()
+        calibrateView!.widthAnchor.constraint(equalToConstant: 273).isActive = true
 
         UIView.animate(withDuration: 0.2, delay: 0.5, options: [], animations: {
             self.calibrateView?.alpha = 1
-        })
+        }) { _ in
+            DispatchQueue.main.asyncAfter(deadline: .now() + 4) {
+                self.removeCalibrateView()
+            }
+        }
     }
 
     @objc func removeCalibrateView() {