fix: various UI issues in Backup/Restore - WPB-16078 (#2550)

Co-authored-by: Christoph Aldrian <[email protected]>

Author: github-actions[bot]

WireFoundation/Sources/WireFoundation/Design/WireAccentColor/WireAccentColor+Environment.swift

@@ -28,9 +28,3 @@ public extension EnvironmentValues {
         set { self[WireAccentColorKey.self] = newValue }
     }
 }
-
-public extension View {
-    func wireAccentColor(_ accentColor: WireAccentColor) -> some View {
-        environment(\.wireAccentColor, accentColor)
-    }
-}

WireUI/Sources/WireDesign/Buttons/UIButton.Configuration+ButtonStyles.swift

@@ -23,14 +23,6 @@ public extension UIButton.Configuration {
 
     static var primary: Self {
 
-        var configuration = shared
-        configuration.baseBackgroundColor = ColorTheme.Buttons.Primary.enabled
-        return configuration
-
-    }
-
-    private static var shared: Self {
-
         var configuration = UIButton.Configuration.filled()
         configuration.buttonSize = .large
         configuration.titleTextAttributesTransformer = .init { attributeContainer in

WireUI/Sources/WireDesign/Colors/WireAccentColorMapping.swift

@@ -62,7 +62,7 @@ func WireAccentColorMappingPreview() -> some View {
         VStack {
             ForEach(WireAccentColor.allCases, id: \.self) { accentColor in
                 MappingTestView()
-                    .wireAccentColor(accentColor)
+                    .environment(\.wireAccentColor, accentColor)
                 if accentColor != WireAccentColor.allCases.last {
                     Divider()
                 }

WireUI/Sources/WireSettingsUI/Account/BackupImportExport/BackupImportExportBuilder.swift

@@ -17,7 +17,9 @@
 //
 
 import SwiftUI
+import WireDesign
 import WireDomainPkg
+import WireFoundation
 import WireLogging
 
 public struct BackupImportExportBuilder {
@@ -28,21 +30,27 @@ public struct BackupImportExportBuilder {
     let cleanUpBackupsUseCase: any CleanUpBackupsUseCaseProtocol
     let exportBackupLogger: any LoggerProtocol
     let importBackupLogger: any LoggerProtocol
+    let wireAccentColor: WireAccentColor
+    let wireAccentColorMapping: WireAccentColorMapping
 
     public init(
         backupPasswordValidator: any BackupPasswordValidatorProtocol,
         createBackupUseCase: any CreateBackupUseCaseProtocol,
         importBackupUseCase: any ImportBackupUseCaseProtocol,
         cleanUpBackupsUseCase: any CleanUpBackupsUseCaseProtocol,
         exportBackupLogger: any LoggerProtocol,
-        importBackupLogger: any LoggerProtocol
+        importBackupLogger: any LoggerProtocol,
+        wireAccentColorMapping: WireAccentColorMapping,
+        wireAccentColor: WireAccentColor
     ) {
         self.backupPasswordValidator = backupPasswordValidator
         self.createBackupUseCase = createBackupUseCase
         self.importBackupUseCase = importBackupUseCase
         self.cleanUpBackupsUseCase = cleanUpBackupsUseCase
         self.exportBackupLogger = exportBackupLogger
         self.importBackupLogger = importBackupLogger
+        self.wireAccentColorMapping = wireAccentColorMapping
+        self.wireAccentColor = wireAccentColor
     }
 
     @MainActor
@@ -56,6 +64,8 @@ public struct BackupImportExportBuilder {
             buildExportBackupView()
             buildImportBackupView()
         }
+        .environment(\.wireAccentColorMapping, wireAccentColorMapping)
+        .environment(\.wireAccentColor, wireAccentColor)
     }
 
     @MainActor @ViewBuilder
@@ -124,7 +134,9 @@ extension BackupImportExportBuilder {
             importBackupUseCase: PreviewImportBackupUseCase(),
             cleanUpBackupsUseCase: PreviewCleanUpBackupsUseCase(),
             exportBackupLogger: PreviewLogger(),
-            importBackupLogger: PreviewLogger()
+            importBackupLogger: PreviewLogger(),
+            wireAccentColorMapping: WireAccentColorMapping(),
+            wireAccentColor: .purple
         )
     }
 }

WireUI/Sources/WireSettingsUI/Account/BackupImportExport/Export/CreatingBackupProgressView/CreatingBackupProgressView.swift

@@ -36,7 +36,6 @@ struct CreatingBackupProgressView: View {
                 .toolbar {
                     ToolbarItem(placement: .topBarLeading) {
                         Button(Strings.Cancel.title, action: cancelAction)
-                            .foregroundStyle(ColorTheme.Base.primary.color)
                             .accessibilityLabel(Labels.Cancel.label)
                             .accessibilityIdentifier("cancel")
                     }
@@ -74,8 +73,10 @@ struct CreatingBackupProgressView: View {
 
 #Preview("in progress") {
     CreatingBackupProgressPreview(.ongoing(0.25))
+        .tint(Color.purple)
 }
 
 #Preview("ready") {
     CreatingBackupProgressPreview(.finished(.init(fileURLWithPath: "/")))
+        .tint(Color.purple)
 }

WireUI/Sources/WireSettingsUI/Account/BackupImportExport/Export/CreatingBackupProgressView/CreatingBackupProgressViewController.swift

@@ -84,7 +84,6 @@ final class CreatingBackupProgressViewController: UIViewController {
 
     private lazy var progressView = {
         let progressView = UIProgressView()
-        progressView.progressTintColor = ColorTheme.Base.primary
         progressView.accessibilityIdentifier = "progressView"
         return progressView
     }()
@@ -97,6 +96,10 @@ final class CreatingBackupProgressViewController: UIViewController {
         return exportButton
     }()
 
+    /// A view which is placed with the optimal bottom spacing.
+    /// It's used for calculations of the optimal sheet presentation detent.
+    private lazy var bottomSpacer = UIView()
+
     // MARK: - Methods
 
     override func viewDidLoad() {
@@ -123,7 +126,9 @@ final class CreatingBackupProgressViewController: UIViewController {
         stackView.translatesAutoresizingMaskIntoConstraints = false
         scrollView.addSubview(stackView)
 
-        // constraints
+        bottomSpacer.translatesAutoresizingMaskIntoConstraints = false
+        view.insertSubview(bottomSpacer, at: 0)
+
         let svLayoutGuide = scrollView.contentLayoutGuide
         NSLayoutConstraint.activate([
 
@@ -137,18 +142,30 @@ final class CreatingBackupProgressViewController: UIViewController {
             stackView.leadingAnchor.constraint(equalToSystemSpacingAfter: svLayoutGuide.leadingAnchor, multiplier: 3),
             stackView.topAnchor.constraint(equalToSystemSpacingBelow: svLayoutGuide.topAnchor, multiplier: 1),
             svLayoutGuide.trailingAnchor.constraint(equalToSystemSpacingAfter: stackView.trailingAnchor, multiplier: 3),
-            svLayoutGuide.bottomAnchor.constraint(equalTo: stackView.bottomAnchor)
+            svLayoutGuide.bottomAnchor.constraint(equalTo: stackView.bottomAnchor),
+
+            bottomSpacer.heightAnchor.constraint(equalToConstant: 0),
+            bottomSpacer.widthAnchor.constraint(equalToConstant: 0),
+            bottomSpacer.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+            view.bottomAnchor.constraint(equalToSystemSpacingBelow: bottomSpacer.bottomAnchor, multiplier: 3)
 
         ])
 
+        bottomSpacer.backgroundColor = .red
+
     }
 
     override func viewDidLayoutSubviews() {
         super.viewDidLayoutSubviews()
 
-        let stackViewHeight = stackView.frame.maxY + (navigationController?.navigationBar.frame.height ?? 0)
-        if let sheetPresentationController = navigationController?.sheetPresentationController {
-            sheetPresentationController.detents = [.custom { _ in stackViewHeight }]
+        guard let navigationController else { return }
+
+        let topSpace = navigationController.view.convert(stackView.bounds, from: stackView).minY
+        let stackViewHeight = stackView.frame.height
+        let bottomSpace = view.bounds.maxY - bottomSpacer.frame.maxY
+        let detent = topSpace + stackViewHeight + bottomSpace
+        if let sheetPresentationController = navigationController.sheetPresentationController {
+            sheetPresentationController.detents = [.custom { _ in detent }]
         }
     }
 

WireUI/Sources/WireSettingsUI/Account/BackupImportExport/Export/SetBackupBasswordView/SetBackupPasswordView.swift

@@ -18,11 +18,15 @@
 
 import SwiftUI
 import WireDesign
+import WireFoundation
 
 struct SetBackupPasswordView: View {
 
     @StateObject var viewModel: SetBackupPasswordViewModel
 
+    @Environment(\.wireAccentColor) private var wireAccentColor
+    @Environment(\.wireAccentColorMapping) private var wireAccentColorMapping
+
     private typealias Strings = L10n.Localizable
     private typealias Labels = L10n.Accessibility.ExportBackup
 
@@ -36,7 +40,6 @@ struct SetBackupPasswordView: View {
                 .toolbar {
                     ToolbarItem(placement: .topBarLeading) {
                         Button(Strings.ExportBackup.Cancel.title, action: viewModel.cancel)
-                            .foregroundStyle(ColorTheme.Base.primary.color)
                             .accessibilityLabel(Labels.Cancel.label)
                             .accessibilityIdentifier("cancel")
                     }
@@ -68,36 +71,37 @@ struct SetBackupPasswordView: View {
     @ViewBuilder
     private func scrollViewContent() -> some View {
         VStack(alignment: .leading, spacing: 0) {
-            Spacer()
 
             Text(Strings.ExportBackup.description)
                 .font(.body)
                 .padding(.bottom, 28)
 
-            Text(Strings.ExportBackup.SetBackupPassword.title)
-                .foregroundStyle(passwordFieldTitleColor)
-                .font(.subheadline)
-                .padding(.bottom, 2)
-
-            ToggleablePasswordField(
-                password: $viewModel.password,
-                placeholder: Strings.ExportBackup.SetBackupPassword.placeholder,
-                placeholderColor: passwordFieldPlaceholderColor,
-                borderColor: passwordFieldBorderColor,
-                focusOnAppear: true
-            )
-            .padding(.bottom, 8)
+            passwordField
+                .padding(.bottom, 8)
 
-            Text(viewModel.localizedPasswordRules)
-                .foregroundStyle(passwordFooterColor)
-                .font(.caption)
+            footer
 
-            Spacer()
         }
         .padding()
     }
 
-    // TODO: [WPB-16061] the following code is almost identical to the one in EnterPasswordView.swift, try to reuse
+    // TODO: [WPB-16061] the following code is similar to the one in EnterPasswordView.swift, try to reuse
+
+    @ViewBuilder private var passwordField: some View {
+
+        Text(Strings.ExportBackup.SetBackupPassword.title)
+            .foregroundStyle(passwordFieldTitleColor)
+            .font(.subheadline)
+            .padding(.bottom, 2)
+
+        ToggleablePasswordField(
+            password: $viewModel.password,
+            placeholder: Strings.ExportBackup.SetBackupPassword.placeholder,
+            placeholderColor: passwordFieldPlaceholderColor,
+            focusOnAppear: true
+        )
+        .tint(passwordFieldBorderColor)
+    }
 
     private var passwordFieldTitleColor: Color {
         if !viewModel.isPasswordValid {
@@ -108,7 +112,7 @@ struct SetBackupPasswordView: View {
                 : BaseColorPalette.Grays.gray40
             }.color
         } else {
-            ColorTheme.Base.primary.color
+            wireAccentColorMapping?.color(for: wireAccentColor) ?? ColorTheme.Base.primary.color
         }
     }
 
@@ -121,7 +125,7 @@ struct SetBackupPasswordView: View {
                 : BaseColorPalette.Grays.gray60
             }.color
         } else {
-            ColorTheme.Base.primary.color
+            wireAccentColorMapping?.color(for: wireAccentColor) ?? ColorTheme.Base.primary.color
         }
     }
 
@@ -134,23 +138,35 @@ struct SetBackupPasswordView: View {
                 : BaseColorPalette.Grays.gray80
             }.color
         } else {
-            ColorTheme.Base.primary.color
+            wireAccentColorMapping?.color(for: wireAccentColor) ?? ColorTheme.Base.primary.color
         }
     }
 
-    private var passwordFooterColor: Color {
+    @ViewBuilder private var footer: some View {
+
+        let footer = Text(viewModel.localizedPasswordRules)
+            .font(.caption)
+
         if !viewModel.isPasswordValid {
-            ColorTheme.Base.error.color
+
+            footer
+                .foregroundStyle(ColorTheme.Base.error.color)
+
         } else {
-            UIColor { $0.userInterfaceStyle != .dark
+
+            let footerColor = UIColor { $0.userInterfaceStyle != .dark
                 ? BaseColorPalette.Grays.gray70
                 : BaseColorPalette.Grays.gray40
-            }.color
+            }
+            footer
+                .foregroundStyle(footerColor.color)
+
         }
     }
 
 }
 
 #Preview {
     SetBackupPasswordPreview()
+        .tint(.purple)
 }

WireUI/Sources/WireSettingsUI/Account/BackupImportExport/Import/EnterPasswordView/EnterPasswordView.swift

@@ -27,6 +27,9 @@ struct EnterPasswordView: View {
     let continueAction: (_ password: String) -> Void
     let cancelAction: () -> Void
 
+    @Environment(\.wireAccentColor) private var wireAccentColor
+    @Environment(\.wireAccentColorMapping) private var wireAccentColorMapping
+
     private typealias Strings = L10n.Localizable.ImportBackup
     private typealias Labels = L10n.Accessibility.ImportBackup
 
@@ -39,7 +42,6 @@ struct EnterPasswordView: View {
                 .toolbar {
                     ToolbarItem(placement: .topBarLeading) {
                         Button(Strings.Cancel.title, action: cancelAction)
-                            .foregroundStyle(ColorTheme.Base.primary.color)
                             .accessibilityLabel(Labels.Cancel.label)
                             .accessibilityIdentifier("cancel")
                     }
@@ -87,14 +89,14 @@ struct EnterPasswordView: View {
                 password: $password,
                 placeholder: Strings.EnterPassword.TextField.placeholder,
                 placeholderColor: passwordFieldPlaceholderColor,
-                borderColor: passwordFieldBorderColor,
                 focusOnAppear: true
             )
+            .tint(passwordFieldBorderColor)
             .padding(.bottom, 8)
 
             if passwordIsWrong {
                 Text(Strings.EnterPassword.wrongPassword)
-                    .foregroundStyle(passwordFieldTitleColor)
+                    .foregroundStyle(passwordFooterColor)
                     .font(.caption)
             }
 
@@ -112,7 +114,7 @@ struct EnterPasswordView: View {
                 : BaseColorPalette.Grays.gray40
             }.color
         } else {
-            ColorTheme.Base.primary.color
+            wireAccentColorMapping?.color(for: wireAccentColor) ?? ColorTheme.Base.primary.color
         }
     }
 
@@ -125,7 +127,7 @@ struct EnterPasswordView: View {
                 : BaseColorPalette.Grays.gray60
             }.color
         } else {
-            ColorTheme.Base.primary.color
+            wireAccentColorMapping?.color(for: wireAccentColor) ?? ColorTheme.Base.primary.color
         }
     }
 
@@ -138,7 +140,7 @@ struct EnterPasswordView: View {
                 : BaseColorPalette.Grays.gray80
             }.color
         } else {
-            ColorTheme.Base.primary.color
+            wireAccentColorMapping?.color(for: wireAccentColor) ?? ColorTheme.Base.primary.color
         }
     }
 

WireUI/Sources/WireSettingsUI/Account/BackupImportExport/Import/ImportBackupViewModel.swift

@@ -119,6 +119,7 @@ final class ImportBackupViewModel: ObservableObject {
         importTask?.cancel()
         importTask = Task {
             do {
+                backupPassword = password
                 state = .importingBackup(progress: 0)
                 for try await update in importBackupUseCase.invoke(url: url, password: password) {
                     switch update {

WireUI/Sources/WireSettingsUI/Account/BackupImportExport/Import/ImportProgressView/ImportProgressView.swift

@@ -38,7 +38,6 @@ struct ImportProgressView: View {
                         Button(action: cancelAction) {
                             Text(Strings.Cancel.title)
                         }
-                        .foregroundStyle(ColorTheme.Base.primary.color)
                         .accessibilityLabel(Labels.Cancel.label)
                         .accessibilityIdentifier("cancel")
                     }