VPN screen improvements

DuckDuckGo.xcodeproj/project.pbxproj

@@ -3210,6 +3210,16 @@
 		BBDFDC5A2B2B8A0900F62D90 /* DataBrokerProtectionExternalWaitlistPixels.swift in Sources */ = {isa = PBXBuildFile; fileRef = BBDFDC592B2B8A0900F62D90 /* DataBrokerProtectionExternalWaitlistPixels.swift */; };
 		BBDFDC5C2B2B8D7000F62D90 /* DataBrokerProtectionExternalWaitlistPixels.swift in Sources */ = {isa = PBXBuildFile; fileRef = BBDFDC592B2B8A0900F62D90 /* DataBrokerProtectionExternalWaitlistPixels.swift */; };
 		BBDFDC5D2B2B8E2100F62D90 /* DataBrokerProtectionExternalWaitlistPixels.swift in Sources */ = {isa = PBXBuildFile; fileRef = BBDFDC592B2B8A0900F62D90 /* DataBrokerProtectionExternalWaitlistPixels.swift */; };
+		BD384AC92BBC821A00EF3735 /* vpn-dark-mode.json in Resources */ = {isa = PBXBuildFile; fileRef = BD384AC82BBC821100EF3735 /* vpn-dark-mode.json */; };
+		BD384ACA2BBC821A00EF3735 /* vpn-light-mode.json in Resources */ = {isa = PBXBuildFile; fileRef = BD384AC72BBC821100EF3735 /* vpn-light-mode.json */; };
+		BD384ACB2BBC821B00EF3735 /* vpn-dark-mode.json in Resources */ = {isa = PBXBuildFile; fileRef = BD384AC82BBC821100EF3735 /* vpn-dark-mode.json */; };
+		BD384ACC2BBC821B00EF3735 /* vpn-light-mode.json in Resources */ = {isa = PBXBuildFile; fileRef = BD384AC72BBC821100EF3735 /* vpn-light-mode.json */; };
+		BD384ACD2BBC821D00EF3735 /* vpn-dark-mode.json in Resources */ = {isa = PBXBuildFile; fileRef = BD384AC82BBC821100EF3735 /* vpn-dark-mode.json */; };
+		BD384ACE2BBC821D00EF3735 /* vpn-light-mode.json in Resources */ = {isa = PBXBuildFile; fileRef = BD384AC72BBC821100EF3735 /* vpn-light-mode.json */; };
+		BDE981D82BBCE4C700645880 /* Lottie in Frameworks */ = {isa = PBXBuildFile; productRef = BDE981D72BBCE4C700645880 /* Lottie */; };
+		BDE981D92BBD10D600645880 /* vpn-dark-mode.json in Resources */ = {isa = PBXBuildFile; fileRef = BD384AC82BBC821100EF3735 /* vpn-dark-mode.json */; };
+		BDE981DA2BBD10D600645880 /* vpn-light-mode.json in Resources */ = {isa = PBXBuildFile; fileRef = BD384AC72BBC821100EF3735 /* vpn-light-mode.json */; };
+		BDE981DF2BBDBD0100645880 /* Lottie in Frameworks */ = {isa = PBXBuildFile; productRef = BDE981DE2BBDBD0100645880 /* Lottie */; };
 		C13909EF2B85FD4E001626ED /* AutofillActionExecutor.swift in Sources */ = {isa = PBXBuildFile; fileRef = C13909EE2B85FD4E001626ED /* AutofillActionExecutor.swift */; };
 		C13909F02B85FD4E001626ED /* AutofillActionExecutor.swift in Sources */ = {isa = PBXBuildFile; fileRef = C13909EE2B85FD4E001626ED /* AutofillActionExecutor.swift */; };
 		C13909F12B85FD4E001626ED /* AutofillActionExecutor.swift in Sources */ = {isa = PBXBuildFile; fileRef = C13909EE2B85FD4E001626ED /* AutofillActionExecutor.swift */; };
@@ -4705,6 +4715,8 @@
 		B6FA8940269C425400588ECD /* PrivacyDashboardPopover.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PrivacyDashboardPopover.swift; sourceTree = "<group>"; };
 		BB5789712B2CA70F0009DFE2 /* DataBrokerProtectionSubscriptionEventHandler.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DataBrokerProtectionSubscriptionEventHandler.swift; sourceTree = "<group>"; };
 		BBDFDC592B2B8A0900F62D90 /* DataBrokerProtectionExternalWaitlistPixels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DataBrokerProtectionExternalWaitlistPixels.swift; sourceTree = "<group>"; };
+		BD384AC72BBC821100EF3735 /* vpn-light-mode.json */ = {isa = PBXFileReference; lastKnownFileType = text.json; path = "vpn-light-mode.json"; sourceTree = "<group>"; };
+		BD384AC82BBC821100EF3735 /* vpn-dark-mode.json */ = {isa = PBXFileReference; lastKnownFileType = text.json; path = "vpn-dark-mode.json"; sourceTree = "<group>"; };
 		C13909EE2B85FD4E001626ED /* AutofillActionExecutor.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AutofillActionExecutor.swift; sourceTree = "<group>"; };
 		C13909F32B85FD79001626ED /* AutofillDeleteAllPasswordsExecutorTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AutofillDeleteAllPasswordsExecutorTests.swift; sourceTree = "<group>"; };
 		C13909FA2B861039001626ED /* AutofillActionPresenter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AutofillActionPresenter.swift; sourceTree = "<group>"; };
@@ -4859,6 +4871,7 @@
 				7BEEA5122AD1235B00A9E72B /* NetworkProtectionIPC in Frameworks */,
 				7BA7CC5F2AD1210C0042E5CE /* Networking in Frameworks */,
 				7BEEA5162AD1236E00A9E72B /* NetworkProtectionUI in Frameworks */,
+				BDE981D82BBCE4C700645880 /* Lottie in Frameworks */,
 				7BFCB74E2ADE7E1A00DA3EA7 /* PixelKit in Frameworks */,
 				EE7295ED2A545C0A008C0991 /* NetworkProtection in Frameworks */,
 				EE2F9C5B2B90F2FF00D45FC9 /* Subscription in Frameworks */,
@@ -4872,6 +4885,7 @@
 			files = (
 				7BFCB7502ADE7E2300DA3EA7 /* PixelKit in Frameworks */,
 				4BCBE45C2BA7E18500FC75A1 /* Subscription in Frameworks */,
+				BDE981DF2BBDBD0100645880 /* Lottie in Frameworks */,
 				7BA7CC612AD1211C0042E5CE /* Networking in Frameworks */,
 				7BEEA5142AD1236300A9E72B /* NetworkProtectionIPC in Frameworks */,
 				7B00997F2B6508C200FE7C31 /* NetworkProtectionProxy in Frameworks */,
@@ -5815,6 +5829,7 @@
 		4B4D60632A0B29FA00BCD287 /* BothAppTargets */ = {
 			isa = PBXGroup;
 			children = (
+				BDE981DB2BBD110800645880 /* Assets */,
 				EEA3EEAF2B24EB5100E8333A /* VPNLocation */,
 				9D9AE8682AA76CDC0026E7DC /* LoginItem+NetworkProtection.swift */,
 				7BE146062A6A83C700C313B8 /* NetworkProtectionDebugMenu.swift */,
@@ -8676,6 +8691,15 @@
 			path = View;
 			sourceTree = "<group>";
 		};
+		BDE981DB2BBD110800645880 /* Assets */ = {
+			isa = PBXGroup;
+			children = (
+				BD384AC82BBC821100EF3735 /* vpn-dark-mode.json */,
+				BD384AC72BBC821100EF3735 /* vpn-light-mode.json */,
+			);
+			path = Assets;
+			sourceTree = "<group>";
+		};
 		C13909F22B85FD60001626ED /* Autofill */ = {
 			isa = PBXGroup;
 			children = (
@@ -9012,6 +9036,7 @@
 				4B41EDAA2B1544B2001EEDF4 /* LoginItems */,
 				7B00997C2B6508B700FE7C31 /* NetworkProtectionProxy */,
 				EE2F9C5A2B90F2FF00D45FC9 /* Subscription */,
+				BDE981D72BBCE4C700645880 /* Lottie */,
 			);
 			productName = DuckDuckGoAgent;
 			productReference = 4B2D06392A11CFBB00DE1F49 /* DuckDuckGo VPN.app */;
@@ -9045,6 +9070,7 @@
 				7B00997E2B6508C200FE7C31 /* NetworkProtectionProxy */,
 				4BA7C4DC2B3F64E500AFE511 /* LoginItems */,
 				4BCBE45B2BA7E18500FC75A1 /* Subscription */,
+				BDE981DE2BBDBD0100645880 /* Lottie */,
 			);
 			productName = DuckDuckGoAgentAppStore;
 			productReference = 4B2D06692A13318400DE1F49 /* DuckDuckGo VPN App Store.app */;
@@ -9563,7 +9589,9 @@
 				3706FCE6293F65D500E42796 /* social_images in Resources */,
 				3706FCE7293F65D500E42796 /* shield-dot-mouse-over.json in Resources */,
 				3706FCE9293F65D500E42796 /* fb-sdk.js in Resources */,
+				BD384ACB2BBC821B00EF3735 /* vpn-dark-mode.json in Resources */,
 				3706FCEA293F65D500E42796 /* PasswordManager.storyboard in Resources */,
+				BD384ACC2BBC821B00EF3735 /* vpn-light-mode.json in Resources */,
 				3706FCEB293F65D500E42796 /* dark-flame-mouse-over.json in Resources */,
 				3706FCEC293F65D500E42796 /* flame-mouse-over.json in Resources */,
 				3706FCED293F65D500E42796 /* httpsMobileV2Bloom.bin in Resources */,
@@ -9623,7 +9651,9 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				BDE981DA2BBD10D600645880 /* vpn-light-mode.json in Resources */,
 				7BA7CC482AD11E5C0042E5CE /* Assets.xcassets in Resources */,
+				BDE981D92BBD10D600645880 /* vpn-dark-mode.json in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -9690,7 +9720,9 @@
 				4B957C1F2AC7AE700062CA31 /* social_images in Resources */,
 				4B957C202AC7AE700062CA31 /* shield-dot-mouse-over.json in Resources */,
 				4B957C222AC7AE700062CA31 /* fb-sdk.js in Resources */,
+				BD384ACD2BBC821D00EF3735 /* vpn-dark-mode.json in Resources */,
 				4B957C232AC7AE700062CA31 /* PasswordManager.storyboard in Resources */,
+				BD384ACE2BBC821D00EF3735 /* vpn-light-mode.json in Resources */,
 				4B957C242AC7AE700062CA31 /* dark-flame-mouse-over.json in Resources */,
 				4B957C252AC7AE700062CA31 /* flame-mouse-over.json in Resources */,
 				4B957C262AC7AE700062CA31 /* httpsMobileV2Bloom.bin in Resources */,
@@ -9806,7 +9838,9 @@
 				EA18D1CA272F0DC8006DC101 /* social_images in Resources */,
 				AA7EB6E927E880A600036718 /* shield-dot-mouse-over.json in Resources */,
 				EAC80DE0271F6C0100BBF02D /* fb-sdk.js in Resources */,
+				BD384AC92BBC821A00EF3735 /* vpn-dark-mode.json in Resources */,
 				85625994269C8F9600EE44BC /* PasswordManager.storyboard in Resources */,
+				BD384ACA2BBC821A00EF3735 /* vpn-light-mode.json in Resources */,
 				AA7EB6E327E7D05500036718 /* dark-flame-mouse-over.json in Resources */,
 				AA7EB6E227E7D05500036718 /* flame-mouse-over.json in Resources */,
 				4B677433255DBEB800025BD8 /* httpsMobileV2Bloom.bin in Resources */,
@@ -15100,6 +15134,16 @@
 			package = B6F997B92B8F352500476735 /* XCRemoteSwiftPackageReference "apple-toolbox" */;
 			productName = "plugin:SwiftLintPlugin";
 		};
+		BDE981D72BBCE4C700645880 /* Lottie */ = {
+			isa = XCSwiftPackageProductDependency;
+			package = 9FF521422BAA8FF300B9819B /* XCRemoteSwiftPackageReference "lottie-spm" */;
+			productName = Lottie;
+		};
+		BDE981DE2BBDBD0100645880 /* Lottie */ = {
+			isa = XCSwiftPackageProductDependency;
+			package = 9FF521422BAA8FF300B9819B /* XCRemoteSwiftPackageReference "lottie-spm" */;
+			productName = Lottie;
+		};
 		CBC83E3529B63D380008E19C /* Configuration */ = {
 			isa = XCSwiftPackageProductDependency;
 			package = 9807F643278CA16F00E1547B /* XCRemoteSwiftPackageReference "BrowserServicesKit" */;

DuckDuckGo/NetworkProtection/AppTargets/BothAppTargets/NetworkProtectionNavBarPopoverManager.swift

@@ -66,7 +66,7 @@ final class NetworkProtectionNavBarPopoverManager: NetPPopoverManager {
 
     // swiftlint:disable:next function_body_length
     func show(positionedBelow view: NSView, withDelegate delegate: NSPopoverDelegate) {
-        let popover = networkProtectionPopover ?? {
+        let popover = {
 
             let controller = NetworkProtectionIPCTunnelController(ipcClient: ipcClient)
 
@@ -141,6 +141,7 @@ final class NetworkProtectionNavBarPopoverManager: NetPPopoverManager {
     func toggle(positionedBelow view: NSView, withDelegate delegate: NSPopoverDelegate) {
         if let networkProtectionPopover, networkProtectionPopover.isShown {
             networkProtectionPopover.close()
+            self.networkProtectionPopover = nil
         } else {
             let featureVisibility = DefaultNetworkProtectionVisibility()
 
@@ -154,6 +155,7 @@ final class NetworkProtectionNavBarPopoverManager: NetPPopoverManager {
 
     func close() {
         networkProtectionPopover?.close()
+        networkProtectionPopover = nil
     }
 }
 #endif

LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Extensions/LottieView+withIntro.swift

@@ -0,0 +1,51 @@
+//
+//  LottieView+withIntro.swift
+//
+//  Copyright © 2024 DuckDuckGo. All rights reserved.
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//  http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+
+import SwiftUI
+import Lottie
+
+extension LottieView where Placeholder: View {
+    public struct LoopWithIntroTiming {
+        let skipIntro: Bool
+        let introStartFrame: AnimationFrameTime
+        let introEndFrame: AnimationFrameTime
+        let loopStartFrame: AnimationFrameTime
+        let loopEndFrame: AnimationFrameTime
+    }
+
+    public func playing(withIntro timing: LoopWithIntroTiming, isAnimating: Binding<Bool> = .constant(true)) -> Lottie.LottieView<Placeholder> {
+        configure { uiView in
+            if uiView.isAnimationPlaying, !isAnimating.wrappedValue {
+                uiView.stop()
+                return
+            }
+
+            guard isAnimating.wrappedValue, !uiView.isAnimationPlaying else { return }
+
+            if uiView.loopMode == .playOnce, uiView.currentProgress == 1 { return }
+
+            if timing.skipIntro {
+                uiView.play(fromFrame: timing.loopStartFrame, toFrame: timing.loopEndFrame, loopMode: .loop)
+            } else {
+                uiView.play(fromFrame: timing.introStartFrame, toFrame: timing.introEndFrame, loopMode: .playOnce) { _ in
+                    uiView.play(fromFrame: timing.loopStartFrame, toFrame: timing.loopEndFrame, loopMode: .loop)
+                }
+            }
+        }
+    }
+}

LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Extensions/UserText+NetworkProtectionUI.swift

@@ -19,7 +19,8 @@
 import Foundation
 
 final class UserText {
-    static let networkProtectionStatusViewFeatureDesc = NSLocalizedString("network.protection.status.view.feature.description", value: "DuckDuckGo's VPN secures all of your device's Internet traffic anytime, anywhere.", comment: "Feature description shown in NetworkProtection's status view.")
+    static let networkProtectionStatusHeaderMessageOff = NSLocalizedString("network.protection.status.header.message.off", value: "Connect to secure all of your device’s\nInternet traffic.", comment: "Message label text for the status view when VPN is disconnected")
+    static let networkProtectionStatusHeaderMessageOn = NSLocalizedString("network.protection.status.header.message.on", value: "All device Internet traffic is being secured\nthrough the VPN.", comment: "Message label text for the status view when VPN is connected")
     static let networkProtectionStatusViewConnDetails = NSLocalizedString("network.protection.status.view.connection.details", value: "Connection Details", comment: "Connection details label shown in NetworkProtection's status view.")
     static let networkProtectionStatusViewConnLabel = NSLocalizedString("network.protection.status.view.connection.label", value: "VPN", comment: "Connection label shown in NetworkProtection's status view.")
     static let networkProtectionStatusViewLocation = NSLocalizedString("network.protection.status.view.location", value: "Location", comment: "Location label shown in NetworkProtection's status view.")

LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Menu/StatusBarMenu.swift

@@ -32,7 +32,17 @@ public final class StatusBarMenu: NSObject {
     private let model: StatusBarMenuModel
 
     private let statusItem: NSStatusItem
-    private let popover: NetworkProtectionPopover
+    private var popover: NetworkProtectionPopover?
+
+    private let controller: TunnelController
+    private let statusReporter: NetworkProtectionStatusReporter
+    private let onboardingStatusPublisher: OnboardingStatusPublisher
+    private let appLauncher: AppLaunching
+    private let menuItems: () -> [MenuItem]
+    private let agentLoginItem: LoginItem?
+    private let isMenuBarStatusView: Bool
+    private let userDefaults: UserDefaults
+    private let uninstallHandler: () async -> Void
 
     // MARK: - NetP Icon publisher
 
@@ -65,17 +75,15 @@ public final class StatusBarMenu: NSObject {
         self.statusItem = statusItem
         self.iconPublisher = NetworkProtectionIconPublisher(statusReporter: statusReporter, iconProvider: iconProvider)
 
-        popover = NetworkProtectionPopover(controller: controller,
-                                           onboardingStatusPublisher: onboardingStatusPublisher,
-                                           statusReporter: statusReporter,
-                                           appLauncher: appLauncher,
-                                           menuItems: menuItems,
-                                           agentLoginItem: agentLoginItem,
-                                           isMenuBarStatusView: isMenuBarStatusView,
-                                           userDefaults: userDefaults,
-                                           uninstallHandler: uninstallHandler)
-
-        popover.behavior = .transient
+        self.controller = controller
+        self.statusReporter = statusReporter
+        self.onboardingStatusPublisher = onboardingStatusPublisher
+        self.appLauncher = appLauncher
+        self.menuItems = menuItems
+        self.agentLoginItem = agentLoginItem
+        self.isMenuBarStatusView = isMenuBarStatusView
+        self.userDefaults = userDefaults
+        self.uninstallHandler = uninstallHandler
 
         super.init()
 
@@ -112,22 +120,34 @@ public final class StatusBarMenu: NSObject {
     // MARK: - Popover
 
     private func togglePopover(isOptionKeyPressed: Bool) {
-        if popover.isShown {
+        if let popover, popover.isShown {
             popover.close()
+            self.popover = nil
         } else {
             guard let button = statusItem.button else {
                 return
             }
 
-            popover.setShowsDebugInformation(isOptionKeyPressed)
-            popover.show(relativeTo: button.bounds, of: button, preferredEdge: .maxY)
+            popover = NetworkProtectionPopover(controller: controller,
+                                               onboardingStatusPublisher: onboardingStatusPublisher,
+                                               statusReporter: statusReporter,
+                                               appLauncher: appLauncher,
+                                               menuItems: menuItems,
+                                               agentLoginItem: agentLoginItem,
+                                               isMenuBarStatusView: isMenuBarStatusView,
+                                               userDefaults: userDefaults,
+                                               uninstallHandler: uninstallHandler)
+            popover?.behavior = .transient
+
+            popover?.setShowsDebugInformation(isOptionKeyPressed)
+            popover?.show(relativeTo: button.bounds, of: button, preferredEdge: .minY)
         }
     }
 
     // MARK: - Context
 
     private func showContextMenu() {
-        if popover.isShown {
+        if let popover, popover.isShown {
             popover.close()
         }
 

LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/NetworkProtectionAsset.swift

@@ -21,8 +21,8 @@ import Foundation
 public enum NetworkProtectionAsset: String, CaseIterable {
     case ipAddressIcon = "IP-16"
     case serverLocationIcon = "Server-Location-16"
-    case vpnDisabledImage = "VPN-Disabled-128"
-    case vpnEnabledImage = "VPN-128"
+    case vpnDisabledImage = "VPNDisabled"
+    case vpnEnabledImage = "VPN"
     case vpnIcon = "VPN-16"
 
     // Apple Icons

LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Resources/Assets.xcassets/Icons/VPN-128.imageset/Contents.json → LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Resources/Assets.xcassets/Icons/VPN.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "Network-Protetion-VPN-128.pdf",
+      "filename" : "VPN.pdf",
       "idiom" : "universal"
     }
   ],

LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Resources/Assets.xcassets/Icons/VPN-Disabled-128.imageset/Contents.json → LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Resources/Assets.xcassets/Icons/VPNDisabled.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "Network-Protetion-VPN-Disabled-128.pdf",
+      "filename" : "VPNDisabled.pdf",
       "idiom" : "universal"
     }
   ],

LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Resources/Assets.xcassets/Icons/VPNDownload.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "vpn-download.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "template-rendering-intent" : "template"
+  }
+}

LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Resources/Assets.xcassets/Icons/VPNLocation.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "VPNLocation.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "template-rendering-intent" : "template"
+  }
+}

LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Resources/Assets.xcassets/Icons/VPNUpload.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "vpn-upload.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "template-rendering-intent" : "template"
+  }
+}

LocalPackages/NetworkProtectionMac/Sources/NetworkProtectionUI/Views/StatusView/NetworkProtectionStatusView.swift

@@ -82,7 +82,7 @@ public struct NetworkProtectionStatusView: View {
             bottomMenuView()
         }
         .padding(5)
-        .frame(maxWidth: 350, alignment: .top)
+        .frame(width: 350, alignment: .top)
         .transition(.slide)
     }