Connect: Add blur background behind "Select location" and "Disconnect" buttons

3 files changed, 39 insertions, 25 deletions

diff --git a/ios/MullvadVPN/ConnectMainContentView.swift b/ios/MullvadVPN/ConnectMainContentView.swift
index 53a3ff5fd4..7d9a08b5b7 100644
--- a/ios/MullvadVPN/ConnectMainContentView.swift
+++ b/ios/MullvadVPN/ConnectMainContentView.swift
@@ -59,6 +59,10 @@ class ConnectMainContentView: UIView {
         return button
     }()
 
+    lazy var selectLocationBlurView: TranslucentButtonBlurView = {
+        return TranslucentButtonBlurView(button: selectLocationButton)
+    }()
+
     let splitDisconnectButton: DisconnectSplitButton = {
         let button = DisconnectSplitButton()
         button.primaryButton.accessibilityIdentifier = "DisconnectButton"
@@ -193,7 +197,7 @@ class ConnectMainContentView: UIView {
         case .disconnect:
             return splitDisconnectButton
         case .selectLocation:
-            return selectLocationButton
+            return selectLocationBlurView
         }
     }
 }
diff --git a/ios/MullvadVPN/DisconnectSplitButton.swift b/ios/MullvadVPN/DisconnectSplitButton.swift
index b3eaa5bcfc..6f7c399c42 100644
--- a/ios/MullvadVPN/DisconnectSplitButton.swift
+++ b/ios/MullvadVPN/DisconnectSplitButton.swift
@@ -32,7 +32,10 @@ class DisconnectSplitButton: UIView {
     private let stackView: UIStackView
 
     init() {
-        stackView = UIStackView(arrangedSubviews: [primaryButton, secondaryButton])
+        let primaryButtonBlurView = TranslucentButtonBlurView(button: primaryButton)
+        let secondaryButtonBlurView = TranslucentButtonBlurView(button: secondaryButton)
+
+        stackView = UIStackView(arrangedSubviews: [primaryButtonBlurView, secondaryButtonBlurView])
         stackView.translatesAutoresizingMaskIntoConstraints = false
         stackView.axis = .horizontal
         stackView.distribution = .fill
diff --git a/ios/MullvadVPN/TranslucentButtonBlurView.swift b/ios/MullvadVPN/TranslucentButtonBlurView.swift
index 87d44f8e47..8146acd9a4 100644
--- a/ios/MullvadVPN/TranslucentButtonBlurView.swift
+++ b/ios/MullvadVPN/TranslucentButtonBlurView.swift
@@ -10,41 +10,36 @@ import UIKit
 
 private let kButtonCornerRadius = CGFloat(4)
 
-@IBDesignable class TranslucentButtonBlurView: UIVisualEffectView {
+class TranslucentButtonBlurView: UIVisualEffectView {
+    init(button: AppButton) {
+        let effect = UIBlurEffect(style: button.style.blurEffectStyle)
 
-    override init(effect: UIVisualEffect?) {
         super.init(effect: effect)
 
-        setup()
-    }
+        button.translatesAutoresizingMaskIntoConstraints = false
 
-    required init?(coder aDecoder: NSCoder) {
-        super.init(coder: aDecoder)
+        contentView.addSubview(button)
 
-        setup()
-    }
+        NSLayoutConstraint.activate([
+            button.topAnchor.constraint(equalTo: contentView.topAnchor),
+            button.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
+            button.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
+            button.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
+        ])
 
-    private func setup() {
         layer.cornerRadius = kButtonCornerRadius
+        layer.maskedCorners = button.style.cornerMask
         layer.masksToBounds = true
-
-        updateCornerMask()
     }
 
-    override func awakeFromNib() {
-        super.awakeFromNib()
-
-        updateCornerMask()
-    }
-
-    private func updateCornerMask() {
-        for case let button as AppButton in contentView.subviews {
-            layer.maskedCorners = Self.cornerMask(buttonStyle: button.style)
-        }
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
     }
+}
 
-    private class func cornerMask(buttonStyle: AppButton.Style) -> CACornerMask {
-        switch buttonStyle {
+private extension AppButton.Style {
+    var cornerMask: CACornerMask {
+        switch self {
         case .translucentDangerSplitLeft:
             return [.layerMinXMinYCorner, .layerMinXMaxYCorner]
         case .translucentDangerSplitRight:
@@ -57,4 +52,16 @@ private let kButtonCornerRadius = CGFloat(4)
         }
     }
 
+    var blurEffectStyle: UIBlurEffect.Style {
+        switch self {
+        case .translucentDangerSplitLeft, .translucentDangerSplitRight, .translucentDanger:
+            if #available(iOS 13.0, *) {
+                return .systemUltraThinMaterialDark
+            } else {
+                return .dark
+            }
+        default:
+            return .light
+        }
+    }
 }