Fix voucher dialog margins

mullvad · Sep 18, 2023 · c51a2a6 · c51a2a6
1 parent a91c5d9
commit c51a2a6
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 16 deletions.
diff --git a/ios/MullvadVPN/Coordinators/CreateAccountVoucherCoordinator.swift b/ios/MullvadVPN/Coordinators/CreateAccountVoucherCoordinator.swift
@@ -26,8 +26,14 @@ public class CreateAccountVoucherCoordinator: Coordinator {
         self.navigationController = navigationController
         self.interactor = interactor
 
+        var layoutMargins = navigationController.view.layoutMargins.toDirectionalInsets
+        layoutMargins.top += UIMetrics.contentLayoutMargins.top
+
         viewController = RedeemVoucherViewController(
-            configuration: RedeemVoucherViewConfiguration(adjustViewWhenKeyboardAppears: true),
+            configuration: RedeemVoucherViewConfiguration(
+                adjustViewWhenKeyboardAppears: true,
+                layoutMargins: layoutMargins
+            ),
             interactor: interactor
         )
     }
@@ -64,3 +70,14 @@ extension CreateAccountVoucherCoordinator: RedeemVoucherViewControllerDelegate {
         didCancel?(self)
     }
 }
+
+private extension UIEdgeInsets {
+    var toDirectionalInsets: NSDirectionalEdgeInsets {
+        NSDirectionalEdgeInsets(
+            top: top,
+            leading: left,
+            bottom: bottom,
+            trailing: right
+        )
+    }
+}
diff --git a/ios/MullvadVPN/Coordinators/ProfileVoucherCoordinator.swift b/ios/MullvadVPN/Coordinators/ProfileVoucherCoordinator.swift
@@ -24,7 +24,10 @@ final class ProfileVoucherCoordinator: Coordinator, Presentable {
     ) {
         self.navigationController = navigationController
         viewController = RedeemVoucherViewController(
-            configuration: RedeemVoucherViewConfiguration(adjustViewWhenKeyboardAppears: false),
+            configuration: RedeemVoucherViewConfiguration(
+                adjustViewWhenKeyboardAppears: false,
+                layoutMargins: UIMetrics.SettingsRedeemVoucher.contentLayoutMargins
+            ),
             interactor: interactor
         )
     }

diff --git a/ios/MullvadVPN/UI appearance/UIMetrics.swift b/ios/MullvadVPN/UI appearance/UIMetrics.swift
@@ -38,7 +38,7 @@ enum UIMetrics {
     enum SettingsRedeemVoucher {
         static let cornerRadius = 8.0
         static let preferredContentSize = CGSize(width: 280, height: 260)
-        static let contentLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 0, bottom: 16, trailing: 0)
+        static let contentLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
     }
 
     enum AccountDeletion {

diff --git a/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherContentView.swift b/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherContentView.swift
@@ -40,7 +40,6 @@ final class RedeemVoucherContentView: UIView {
             comment: ""
         )
         label.textColor = .white
-        label.translatesAutoresizingMaskIntoConstraints = false
         label.numberOfLines = 0
         return label
     }()
@@ -61,7 +60,6 @@ final class RedeemVoucherContentView: UIView {
 
     private let activityIndicator: SpinnerActivityIndicatorView = {
         let activityIndicator = SpinnerActivityIndicatorView(style: .medium)
-        activityIndicator.translatesAutoresizingMaskIntoConstraints = false
         activityIndicator.tintColor = .white
         activityIndicator.setContentHuggingPriority(.defaultHigh, for: .horizontal)
         activityIndicator.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
@@ -111,8 +109,6 @@ final class RedeemVoucherContentView: UIView {
 
     private lazy var statusStack: UIStackView = {
         let stackView = UIStackView(arrangedSubviews: [activityIndicator, statusLabel])
-        stackView.translatesAutoresizingMaskIntoConstraints = false
-        stackView.axis = .horizontal
         stackView.spacing = UIMetrics.padding8
         return stackView
     }()
@@ -124,7 +120,6 @@ final class RedeemVoucherContentView: UIView {
             statusStack,
             logoutViewForAccountNumberIsEntered,
         ])
-        stackView.translatesAutoresizingMaskIntoConstraints = false
         stackView.axis = .vertical
         stackView.setCustomSpacing(UIMetrics.padding16, after: titleLabel)
         stackView.setCustomSpacing(UIMetrics.padding8, after: textField)
@@ -136,7 +131,6 @@ final class RedeemVoucherContentView: UIView {
 
     private lazy var buttonsStackView: UIStackView = {
         let stackView = UIStackView(arrangedSubviews: [redeemButton, cancelButton])
-        stackView.translatesAutoresizingMaskIntoConstraints = false
         stackView.axis = .vertical
         stackView.spacing = UIMetrics.padding16
         stackView.setContentCompressionResistancePriority(.required, for: .vertical)
@@ -238,9 +232,7 @@ final class RedeemVoucherContentView: UIView {
     }
 
     required init?(coder: NSCoder) {
-        self.configuration = RedeemVoucherViewConfiguration(adjustViewWhenKeyboardAppears: true)
-        super.init(coder: coder)
-        commonInit()
+        fatalError("init(coder:) has not been implemented")
     }
 
     private func commonInit() {
@@ -260,14 +252,15 @@ final class RedeemVoucherContentView: UIView {
 
     private func configureUI() {
         addConstrainedSubviews([scrollView]) {
-            scrollView.pinEdgesToSuperviewMargins()
+            scrollView.pinEdgesToSuperview(.all(configuration.layoutMargins))
         }
 
         scrollView.addConstrainedSubviews([contentHolderView]) {
             contentHolderView.pinEdgesToSuperview()
-            contentHolderView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 1.0)
-            contentHolderView.heightAnchor.constraint(greaterThanOrEqualTo: scrollView.heightAnchor, multiplier: 1.0)
+            contentHolderView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
+            contentHolderView.heightAnchor.constraint(greaterThanOrEqualTo: scrollView.heightAnchor)
         }
+
         contentHolderView.addConstrainedSubviews([voucherCodeStackView, buttonsStackView]) {
             voucherCodeStackView.pinEdgesToSuperview(.all().excluding(.bottom))
             buttonsStackView.pinEdgesToSuperview(PinnableEdges([.leading(.zero), .trailing(.zero)]))
@@ -276,6 +269,7 @@ final class RedeemVoucherContentView: UIView {
                 constant: -UIMetrics.padding16
             )
         }
+
         bottomsOfButtonsConstraint = buttonsStackView.pinEdgesToSuperview(PinnableEdges([.bottom(.zero)])).first
         bottomsOfButtonsConstraint?.isActive = true
     }

diff --git a/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherViewConfiguration.swift b/ios/MullvadVPN/View controllers/RedeemVoucher/RedeemVoucherViewConfiguration.swift
@@ -6,7 +6,9 @@
 //  Copyright © 2023 Mullvad VPN AB. All rights reserved.
 //
 
-import Foundation
+import UIKit
+
 struct RedeemVoucherViewConfiguration {
     let adjustViewWhenKeyboardAppears: Bool
+    let layoutMargins: NSDirectionalEdgeInsets
 }