feat: Onboarding animation

Mail/Views/Onboarding/AuthorizationView.swift

@@ -18,6 +18,7 @@
 
 import Contacts
 import DesignSystem
+import DotLottie
 import InfomaniakCoreCommonUI
 import InfomaniakCoreSwiftUI
 import InfomaniakDI
@@ -26,18 +27,45 @@ import MailCore
 import MailResources
 import SwiftUI
 
+extension SlideCollectionViewCell {
+    func setThemeFor(colorScheme: ColorScheme, accentColor: AccentColor, dotLottieViewModel: DotLottieAnimation) {
+        switch (colorScheme, accentColor) {
+        case (.light, .pink):
+            dotLottieViewModel.resetTheme()
+        case (.light, .blue):
+            dotLottieViewModel.setTheme("Blue-Light")
+        case (.dark, .pink):
+            dotLottieViewModel.setTheme("Pink-Dark")
+        case (.dark, .blue):
+            dotLottieViewModel.setTheme("Blue-Dark")
+        case (_, _):
+            dotLottieViewModel.resetTheme()
+        }
+    }
+}
+
 extension Slide {
     static let authorizationSlides = [
         Slide(backgroundImage: MailResourcesAsset.onboardingBackground1.image,
               backgroundImageTintColor: UserDefaults.shared.accentColor.secondary.color,
-              content: .illustration(MailResourcesAsset.authorizationContact.image),
+              content: .dotLottieAnimation(IKDotLottieConfiguration(
+                  filename: "addressBookPermission",
+                  bundle: MailResourcesResources.bundle,
+                  isLooping: true,
+                  mode: .bounce
+              )),
               bottomView: OnboardingTextView(
                   title: MailResourcesStrings.Localizable.onBoardingContactsTitle,
                   description: MailResourcesStrings.Localizable.onBoardingContactsDescription
               )),
         Slide(backgroundImage: MailResourcesAsset.onboardingBackground2.image,
               backgroundImageTintColor: UserDefaults.shared.accentColor.secondary.color,
-              content: .illustration(MailResourcesAsset.authorizationNotification.image),
+              content: .dotLottieAnimation(IKDotLottieConfiguration(
+                  filename: "notificationPermission",
+                  bundle: MailResourcesResources.bundle,
+                  isLooping: true,
+                  mode: .bounce
+              )),
               bottomView: OnboardingTextView(
                   title: MailResourcesStrings.Localizable.onBoardingNotificationsTitle,
                   description: MailResourcesStrings.Localizable.onBoardingNotificationsDescription

Mail/Views/Onboarding/OnboardingView.swift

@@ -239,7 +239,7 @@ final class LoginHandler: InfomaniakLoginDelegate, ObservableObject {
 
 extension SlideCollectionViewCell {
     func updateAnimationColors(configuration: IKLottieConfiguration) {
-        guard let animation = illustrationAnimationView else { return }
+        guard case .airbnbLottieAnimationView(let animation, _) = illustrationAnimationViewContent else { return }
         IlluColors.onBoardingAllColors.forEach { $0.applyColors(to: animation) }
 
         if configuration.id == 2 || configuration.id == 3 || configuration.id == 4 {

Mail/Views/Onboarding/WaveView.swift

@@ -62,7 +62,7 @@
             slides: slides,
             pageIndicatorColor: accentColor.primary.color,
             isScrollEnabled: isScrollEnabled,
             dismissHandler: dismissHandler,
             isPageIndicatorHidden: isPageIndicatorHidden
         )
 
@@ -82,19 +82,33 @@
 
         let coordinator = context.coordinator
 
-        if coordinator.currentAccentColor != accentColor || coordinator.currentColorScheme != context.environment.colorScheme {
-            coordinator.invalidateColors()
-
-            let newColorScheme = context.environment.colorScheme
-            uiViewController.currentSlideViewCell?.backgroundImageView.tintColor = newColorScheme == .dark ? MailResourcesAsset
-                .backgroundSecondaryColor.color : accentColor.secondary.color
-            uiViewController.pageIndicator.currentPageIndicatorTintColor = accentColor.primary.color
-            if case .animation(let configuration) = slides[selectedSlide].content {
-                uiViewController.currentSlideViewCell?.updateAnimationColors(configuration: configuration)
-            }
+        guard coordinator.currentAccentColor != accentColor
+            || coordinator.currentColorScheme != context.environment.colorScheme
+        else { return }
+        coordinator.invalidateColors()
+
+        let newColorScheme = context.environment.colorScheme
+        coordinator.currentAccentColor = accentColor
+        coordinator.currentColorScheme = newColorScheme
+
+        uiViewController.currentSlideViewCell?.backgroundImageView.tintColor = newColorScheme == .dark ? MailResourcesAsset
+            .backgroundSecondaryColor.color : accentColor.secondary.color
+        uiViewController.pageIndicator.currentPageIndicatorTintColor = accentColor.primary.color
+
+        guard let illustrationAnimationViewContent = uiViewController.currentSlideViewCell?.illustrationAnimationViewContent
+        else {
+            return
+        }
 
-            coordinator.currentAccentColor = accentColor
-            coordinator.currentColorScheme = newColorScheme
+        switch illustrationAnimationViewContent {
+        case .airbnbLottieAnimationView(_, let ikLottieConfiguration):
+            uiViewController.currentSlideViewCell?.updateAnimationColors(configuration: ikLottieConfiguration)
+        case .dotLottieAnimationView(let dotLottieAnimationView, _):
+            uiViewController.currentSlideViewCell?.setThemeFor(
+                colorScheme: newColorScheme,
+                accentColor: accentColor,
+                dotLottieViewModel: dotLottieAnimationView.dotLottieViewModel
+            )
         }
     }
 
@@ -143,11 +157,26 @@
                 MailResourcesAsset.backgroundSecondaryColor.color :
                 UserDefaults.shared.accentColor.secondary.color
 
-            if case .animation(let configuration) = slides[index].content,
-               colorUpdateNeededAtIndex.contains(index) {
-                slideViewCell.updateAnimationColors(configuration: configuration)
-                colorUpdateNeededAtIndex.remove(index)
+            guard let illustrationAnimationViewContent = slideViewCell.illustrationAnimationViewContent,
+                  colorUpdateNeededAtIndex.contains(index) else {
+                return
             }
+
+            switch illustrationAnimationViewContent {
+            case .airbnbLottieAnimationView(_, let ikLottieConfiguration):
+                slideViewCell.updateAnimationColors(configuration: ikLottieConfiguration)
+            case .dotLottieAnimationView(let dotLottieAnimationView, _):
+                if let currentColorScheme,
+                   let currentAccentColor {
+                    slideViewCell.setThemeFor(
+                        colorScheme: currentColorScheme,
+                        accentColor: currentAccentColor,
+                        dotLottieViewModel: dotLottieAnimationView.dotLottieViewModel
+                    )
+                }
+            }
+
+            colorUpdateNeededAtIndex.remove(index)
         }
 
         func invalidateColors() {

Mail/Views/Switch User/CreateAccountView.swift

@@ -17,6 +17,7 @@
  */
 
 import DesignSystem
+import DotLottie
 import InfomaniakCore
 import InfomaniakCoreCommonUI
 import InfomaniakCoreSwiftUI
@@ -33,23 +34,40 @@ struct CreateAccountView: View {
     @AppStorage(UserDefaults.shared.key(.accentColor)) private var accentColor = DefaultPreferences.accentColor
 
     @Environment(\.dismiss) private var dismiss
+    @Environment(\.colorScheme) private var colorScheme
 
     @ModalState(context: ContextKeys.createAccount) private var isPresentingCreateAccount = false
 
     @ObservedObject var loginHandler: LoginHandler
 
+    private var animation: DotLottieAnimation {
+        let defaultAnimation = DotLottieAnimation(
+            fileName: "createAccount",
+            bundle: MailResourcesResources.bundle,
+            config: AnimationConfig(autoplay: true, loop: true)
+        )
+
+        if colorScheme == .dark {
+            if accentColor == .blue {
+                defaultAnimation.setTheme("Blue-Dark")
+            } else {
+                defaultAnimation.setTheme("Pink-Dark")
+            }
+        } else if accentColor == .blue {
+            defaultAnimation.setTheme("Blue-Light")
+        }
+
+        return defaultAnimation
+    }
+
     var body: some View {
         VStack(spacing: 0) {
             CloseButton(size: .medium, dismissAction: dismiss)
                 .padding(.top, IKPadding.onBoardingLogoTop)
                 .padding(.top, value: .micro)
                 .frame(maxWidth: .infinity, alignment: .leading)
 
-            accentColor.createAccountImage.swiftUIImage
-                .resizable()
-                .scaledToFit()
-                .padding(.top, value: .large)
-                .padding(.bottom, value: .giant)
+            animation.view()
 
             Text(MailResourcesStrings.Localizable.newAccountTitle)
                 .textStyle(.header1)

MailCore/Models/Settings/AccentColor.swift

@@ -103,15 +103,6 @@ public enum AccentColor: String, CaseIterable, SettingsOptionEnum {
         }
     }
 
-    public var createAccountImage: MailResourcesImages {
-        switch self {
-        case .pink:
-            return MailResourcesAsset.createAccountPink
-        case .blue:
-            return MailResourcesAsset.createAccountBlue
-        }
-    }
-
     public var defaultApp: MailResourcesImages {
         switch self {
         case .pink: