Merge branch 'improve-ux-for-disabled-buttons-ios-159'

3 files changed, 48 insertions, 28 deletions

diff --git a/ios/MullvadVPN/View controllers/Tunnel/TranslucentButtonBlurView.swift b/ios/MullvadVPN/View controllers/Tunnel/TranslucentButtonBlurView.swift
index 496dd1e100..22d3b4ab4a 100644
--- a/ios/MullvadVPN/View controllers/Tunnel/TranslucentButtonBlurView.swift
+++ b/ios/MullvadVPN/View controllers/Tunnel/TranslucentButtonBlurView.swift
@@ -9,21 +9,25 @@
 import UIKit
 
 class TranslucentButtonBlurView: UIVisualEffectView {
-    init(button: AppButton) {
-        let effect = UIBlurEffect(style: button.style.blurEffectStyle)
+    let appButton: AppButton
 
-        super.init(effect: effect)
+    var isEnabled: Bool {
+        didSet {
+            appButton.isEnabled = isEnabled
+            effect = appButton.blurEffect(isEnabled: isEnabled)
+        }
+    }
 
-        button.translatesAutoresizingMaskIntoConstraints = false
+    init(button: AppButton) {
+        appButton = button
+        isEnabled = button.isEnabled
 
-        contentView.addSubview(button)
+        let effect = appButton.blurEffect(isEnabled: isEnabled)
+        super.init(effect: effect)
 
-        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),
-        ])
+        contentView.addConstrainedSubviews([button]) {
+            button.pinEdgesToSuperview()
+        }
 
         layer.cornerRadius = UIMetrics.controlCornerRadius
         layer.maskedCorners = button.style.cornerMask(effectiveUserInterfaceLayoutDirection)
@@ -35,6 +39,13 @@ class TranslucentButtonBlurView: UIVisualEffectView {
     }
 }
 
+private extension AppButton {
+    func blurEffect(isEnabled: Bool) -> UIBlurEffect {
+        let style = isEnabled ? style.blurEffectStyle : style.disabledStateBlurEffectStyle
+        return UIBlurEffect(style: style)
+    }
+}
+
 private extension AppButton.Style {
     func cornerMask(_ userInterfaceLayoutDirection: UIUserInterfaceLayoutDirection)
         -> CACornerMask
@@ -62,4 +73,13 @@ private extension AppButton.Style {
             return .light
         }
     }
+
+    var disabledStateBlurEffectStyle: UIBlurEffect.Style {
+        switch self {
+        case .success, .translucentNeutral:
+            return .systemThinMaterialDark
+        default:
+            return blurEffectStyle
+        }
+    }
 }
diff --git a/ios/MullvadVPN/View controllers/Tunnel/TunnelControlView.swift b/ios/MullvadVPN/View controllers/Tunnel/TunnelControlView.swift
index 15d41c95df..bf5c654e3e 100644
--- a/ios/MullvadVPN/View controllers/Tunnel/TunnelControlView.swift
+++ b/ios/MullvadVPN/View controllers/Tunnel/TunnelControlView.swift
@@ -81,7 +81,8 @@ final class TunnelControlView: UIView {
         return button
     }()
 
-    private let selectLocationBlurView: TranslucentButtonBlurView
+    private let selectLocationButtonBlurView: TranslucentButtonBlurView
+    private let connectButtonBlurView: TranslucentButtonBlurView
     private let cancelButtonBlurView: TranslucentButtonBlurView
 
     private let splitDisconnectButton: DisconnectSplitButton = {
@@ -107,7 +108,8 @@ final class TunnelControlView: UIView {
     }
 
     override init(frame: CGRect) {
-        selectLocationBlurView = TranslucentButtonBlurView(button: selectLocationButton)
+        selectLocationButtonBlurView = TranslucentButtonBlurView(button: selectLocationButton)
+        connectButtonBlurView = TranslucentButtonBlurView(button: connectButton)
         cancelButtonBlurView = TranslucentButtonBlurView(button: cancelButton)
 
         super.init(frame: frame)
@@ -206,20 +208,10 @@ final class TunnelControlView: UIView {
     }
 
     private func updateButtonEnabledStates() {
-        let allButtons = [
-            connectButton,
-            selectLocationButton,
-            cancelButton,
-            splitDisconnectButton.primaryButton,
-            splitDisconnectButton.secondaryButton,
-        ]
+        let shouldEnableButtons = tunnelState.shouldEnableButtons
 
-        switch tunnelState {
-        case .waitingForConnectivity(.noNetwork):
-            allButtons.forEach { $0.isEnabled = false }
-        default:
-            allButtons.forEach { $0.isEnabled = true }
-        }
+        selectLocationButtonBlurView.isEnabled = shouldEnableButtons
+        connectButtonBlurView.isEnabled = shouldEnableButtons
     }
 
     private func updateTunnelRelay() {
@@ -396,7 +388,7 @@ final class TunnelControlView: UIView {
         case .cancel:
             return cancelButtonBlurView
         case .selectLocation:
-            return selectLocationBlurView
+            return selectLocationButtonBlurView
         }
     }
 
@@ -452,6 +444,14 @@ private extension TunnelState {
         }
     }
 
+    var shouldEnableButtons: Bool {
+        if case .waitingForConnectivity(.noNetwork) = self {
+            return false
+        }
+
+        return true
+    }
+
     var localizedTitleForSecureLabel: String {
         switch self {
         case .connecting, .reconnecting:
diff --git a/ios/MullvadVPN/Views/AppButton.swift b/ios/MullvadVPN/Views/AppButton.swift
index 7aa404b7f4..f8ab72f279 100644
--- a/ios/MullvadVPN/Views/AppButton.swift
+++ b/ios/MullvadVPN/Views/AppButton.swift
@@ -40,7 +40,7 @@ private extension UIControl.State {
         case .normal:
             return UIColor.AppButton.normalTitleColor
         case .disabled:
-            return UIColor.AppButton.disabledTitleColor
+            return UIColor.AppButton.disabledTitleColor.withAlphaComponent(0.5)
         case .highlighted:
             return UIColor.AppButton.highlightedTitleColor
         default: