Add dark mode animation.

duckduckgo · Mar 6, 2024 · abd7320 · abd7320
1 parent 7e318a0
commit abd7320
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/DuckDuckGo.xcodeproj/project.pbxproj b/DuckDuckGo.xcodeproj/project.pbxproj
@@ -277,6 +277,7 @@
 		4B60ACA1252EC0B100E8D219 /* FullScreenVideoUserScript.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B60ACA0252EC0B100E8D219 /* FullScreenVideoUserScript.swift */; };
 		4B62C4BA25B930DD008912C6 /* AppConfigurationFetchTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B62C4B925B930DD008912C6 /* AppConfigurationFetchTests.swift */; };
 		4B6484F327FD1E350050A7A1 /* MenuControllerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B6484E927FD1E340050A7A1 /* MenuControllerView.swift */; };
+		4B6ED9452B992FE4007F5CAA /* vpn-dark-mode.json in Resources */ = {isa = PBXBuildFile; fileRef = 4B6ED9442B992FE4007F5CAA /* vpn-dark-mode.json */; };
 		4B75EA9226A266CB00018634 /* PrintingUserScript.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B75EA9126A266CB00018634 /* PrintingUserScript.swift */; };
 		4B78074E2B183A1F009DB2CF /* SurveyURLBuilder.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B78074D2B183A1F009DB2CF /* SurveyURLBuilder.swift */; };
 		4B83396C29AC0701003F7EA9 /* AppTrackingProtectionStoringModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B470EE2299C6DD10086EBDC /* AppTrackingProtectionStoringModel.swift */; };
@@ -1382,6 +1383,7 @@
 		4B60ACA0252EC0B100E8D219 /* FullScreenVideoUserScript.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FullScreenVideoUserScript.swift; sourceTree = "<group>"; };
 		4B62C4B925B930DD008912C6 /* AppConfigurationFetchTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppConfigurationFetchTests.swift; sourceTree = "<group>"; };
 		4B6484E927FD1E340050A7A1 /* MenuControllerView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = MenuControllerView.swift; sourceTree = "<group>"; };
+		4B6ED9442B992FE4007F5CAA /* vpn-dark-mode.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = "vpn-dark-mode.json"; sourceTree = "<group>"; };
 		4B75EA9126A266CB00018634 /* PrintingUserScript.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PrintingUserScript.swift; sourceTree = "<group>"; };
 		4B78074B2B1823C5009DB2CF /* VPNWaitlistActivationDateStore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VPNWaitlistActivationDateStore.swift; sourceTree = "<group>"; };
 		4B78074D2B183A1F009DB2CF /* SurveyURLBuilder.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SurveyURLBuilder.swift; sourceTree = "<group>"; };
@@ -3495,6 +3497,7 @@
 			isa = PBXGroup;
 			children = (
 				4B37E04F2B928CA6009E81CA /* vpn-light-mode.json */,
+				4B6ED9442B992FE4007F5CAA /* vpn-dark-mode.json */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -6117,6 +6120,7 @@
 				AA4D6AA223DE4CC4007E8790 /* [email protected] in Resources */,
 				AA4D6AB823DE4D15007E8790 /* [email protected] in Resources */,
 				984147C024F026A300362052 /* Tab.storyboard in Resources */,
+				4B6ED9452B992FE4007F5CAA /* vpn-dark-mode.json in Resources */,
 				02F880642AB206740020C2DF /* PrivacyInfo.xcprivacy in Resources */,
 				AA4D6AE123DE4D33007E8790 /* [email protected] in Resources */,
 				AA4D6A9123DE49A5007E8790 /* [email protected] in Resources */,

diff --git a/DuckDuckGo/NetworkProtectionStatusView.swift b/DuckDuckGo/NetworkProtectionStatusView.swift
@@ -24,6 +24,8 @@ import NetworkProtection
 
 @available(iOS 15, *)
 struct NetworkProtectionStatusView: View {
+    @Environment(\.colorScheme) var colorScheme
+
     @StateObject public var statusModel: NetworkProtectionStatusViewModel
     @State private var isFeedbackFormActive = false
 
@@ -100,20 +102,11 @@ struct NetworkProtectionStatusView: View {
         HStack {
             Spacer(minLength: 0)
             VStack(alignment: .center, spacing: 8) {
-                LottieView(
-                    lottieFile: "vpn-light-mode",
-                    loopMode: .withIntro(
-                        .init(
-                            // Skip the intro if NetP is enabled, but the user didn't manually trigger it
-                            skipIntro: statusModel.isNetPEnabled && !statusModel.shouldDisableToggle,
-                            introStartFrame: 0,
-                            introEndFrame: 100,
-                            loopStartFrame: 130,
-                            loopEndFrame: 370
-                        )
-                    ),
-                    isAnimating: $statusModel.isNetPEnabled
-                )
+                if colorScheme == .light {
+                    headerAnimationView("vpn-light-mode")
+                } else {
+                    headerAnimationView("vpn-dark-mode")
+                }
                 Text(statusModel.headerTitle)
                     .daxHeadline()
                     .multilineTextAlignment(.center)
@@ -188,6 +181,24 @@ struct NetworkProtectionStatusView: View {
                 }
             })
     }
+
+    @ViewBuilder
+    private func headerAnimationView(_ animationName: String) -> some View {
+        LottieView(
+            lottieFile: animationName,
+            loopMode: .withIntro(
+                .init(
+                    // Skip the intro if NetP is enabled, but the user didn't manually trigger it
+                    skipIntro: statusModel.isNetPEnabled && !statusModel.shouldDisableToggle,
+                    introStartFrame: 0,
+                    introEndFrame: 100,
+                    loopStartFrame: 130,
+                    loopEndFrame: 370
+                )
+            ),
+            isAnimating: $statusModel.isNetPEnabled
+        )
+    }
 }
 
 private struct NetworkProtectionErrorView: View {