Add state to new connection view

5 files changed, 45 insertions, 12 deletions

diff --git a/ios/MullvadVPN/Views/BlurView.swift b/ios/MullvadVPN/Views/BlurView.swift
new file mode 100644
index 0000000000..eb976efb74
--- /dev/null
+++ b/ios/MullvadVPN/Views/BlurView.swift
@@ -0,0 +1,22 @@
+//
+//  BlurView.swift
+//  MullvadVPN
+//
+//  Created by Jon Petersson on 2024-12-06.
+//  Copyright © 2024 Mullvad VPN AB. All rights reserved.
+//
+
+import SwiftUI
+
+/// Blurred (background) view using a `UIBlurEffect`.
+struct BlurView: View {
+    var style: UIBlurEffect.Style
+
+    var body: some View {
+        Spacer()
+            .overlay {
+                VisualEffectView(effect: UIBlurEffect(style: style))
+                    .opacity(0.8)
+            }
+    }
+}
diff --git a/ios/MullvadVPN/Views/MainButton.swift b/ios/MullvadVPN/Views/MainButton.swift
index a5d6f0f718..679b34a2cd 100644
--- a/ios/MullvadVPN/Views/MainButton.swift
+++ b/ios/MullvadVPN/Views/MainButton.swift
@@ -9,8 +9,9 @@
 import SwiftUI
 
 struct MainButton: View {
-    var text: String
+    var text: LocalizedStringKey
     var style: MainButtonStyle.Style
+    var disabled = false
 
     var action: () -> Void
 
@@ -22,13 +23,13 @@ struct MainButton: View {
                 Spacer()
             }
         })
-        .buttonStyle(MainButtonStyle(style))
+        .buttonStyle(MainButtonStyle(style, disabled: disabled))
         .cornerRadius(UIMetrics.MainButton.cornerRadius)
     }
 }
 
 #Preview {
-    MainButton(text: "Connect", style: .default) {
+    MainButton(text: "Connect", style: .success) {
         print("Tapped")
     }
 }
diff --git a/ios/MullvadVPN/Views/MainButtonStyle.swift b/ios/MullvadVPN/Views/MainButtonStyle.swift
index 06a32b5606..f638c87ac2 100644
--- a/ios/MullvadVPN/Views/MainButtonStyle.swift
+++ b/ios/MullvadVPN/Views/MainButtonStyle.swift
@@ -9,10 +9,12 @@
 import SwiftUI
 
 struct MainButtonStyle: ButtonStyle {
-    @State var style: Style
+    var style: Style
+    @State var disabled: Bool
 
-    init(_ style: Style) {
+    init(_ style: Style, disabled: Bool = false) {
         self.style = style
+        self.disabled = disabled
     }
 
     func makeBody(configuration: Configuration) -> some View {
@@ -22,9 +24,15 @@ struct MainButtonStyle: ButtonStyle {
             .foregroundColor(
                 configuration.isPressed
                     ? UIColor.secondaryTextColor.color
-                    : UIColor.primaryTextColor.color
+                    : disabled
+                        ? UIColor.primaryTextColor.withAlphaComponent(0.2).color
+                        : UIColor.primaryTextColor.color
+            )
+            .background(
+                disabled
+                    ? style.color.darkened(by: 0.6)
+                    : style.color
             )
-            .background(style.color)
             .font(.body.weight(.semibold))
     }
 }
diff --git a/ios/MullvadVPN/Views/SplitMainButton.swift b/ios/MullvadVPN/Views/SplitMainButton.swift
index 59a5d1b2ea..11336f424b 100644
--- a/ios/MullvadVPN/Views/SplitMainButton.swift
+++ b/ios/MullvadVPN/Views/SplitMainButton.swift
@@ -9,9 +9,10 @@
 import SwiftUI
 
 struct SplitMainButton: View {
-    var text: String
+    var text: LocalizedStringKey
     var image: ImageResource
     var style: MainButtonStyle.Style
+    var disabled = false
 
     var primaryAction: () -> Void
     var secondaryAction: () -> Void
@@ -37,14 +38,14 @@ struct SplitMainButton: View {
             .aspectRatio(1, contentMode: .fit)
             .sizeOfView { width = $0.width }
         }
-        .buttonStyle(MainButtonStyle(style))
+        .buttonStyle(MainButtonStyle(style, disabled: disabled))
         .cornerRadius(UIMetrics.MainButton.cornerRadius)
     }
 }
 
 #Preview {
     SplitMainButton(
-        text: "Connect",
+        text: "Select location",
         image: .iconReload,
         style: .default,
         primaryAction: {
@@ -54,5 +55,4 @@ struct SplitMainButton: View {
             print("Tapped secondary")
         }
     )
-    .frame(maxWidth: .infinity)
 }
diff --git a/ios/MullvadVPN/Views/VisualEffectView.swift b/ios/MullvadVPN/Views/VisualEffectView.swift
index 0cad1b06d7..f28b715065 100644
--- a/ios/MullvadVPN/Views/VisualEffectView.swift
+++ b/ios/MullvadVPN/Views/VisualEffectView.swift
@@ -12,7 +12,9 @@ struct VisualEffectView: UIViewRepresentable {
     var effect: UIVisualEffect?
 
     func makeUIView(context: UIViewRepresentableContext<Self>) -> UIVisualEffectView {
-        UIVisualEffectView()
+        let view = UIVisualEffectView(effect: effect)
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
     }
 
     func updateUIView(_ uiView: UIVisualEffectView, context: UIViewRepresentableContext<Self>) {