Fix increased touch areas for buttons in header bar view

3 files changed, 22 insertions, 7 deletions

diff --git a/ios/MullvadVPN/Containers/Root/HeaderBarView.swift b/ios/MullvadVPN/Containers/Root/HeaderBarView.swift
index f133179658..e938391be7 100644
--- a/ios/MullvadVPN/Containers/Root/HeaderBarView.swift
+++ b/ios/MullvadVPN/Containers/Root/HeaderBarView.swift
@@ -47,7 +47,6 @@ class HeaderBarView: UIView {
 
     private lazy var buttonContainer: UIStackView = {
         let stackView = UIStackView(arrangedSubviews: [accountButton, settingsButton])
-        stackView.spacing = UIMetrics.headerBarButtonSpacing
         return stackView
     }()
 
@@ -57,7 +56,7 @@ class HeaderBarView: UIView {
         return layer
     }()
 
-    let accountButton: IncreasedHitButton = {
+    let accountButton: UIButton = {
         let button = makeHeaderBarButton(with: UIImage(named: "IconAccount"))
         button.accessibilityIdentifier = "AccountButton"
         button.accessibilityLabel = NSLocalizedString(
@@ -66,10 +65,12 @@ class HeaderBarView: UIView {
             value: "Account",
             comment: ""
         )
+        button.heightAnchor.constraint(equalToConstant: UIMetrics.Button.barButtonSize).isActive = true
+        button.widthAnchor.constraint(equalTo: button.heightAnchor, multiplier: 1).isActive = true
         return button
     }()
 
-    let settingsButton: IncreasedHitButton = {
+    let settingsButton: UIButton = {
         let button = makeHeaderBarButton(with: UIImage(named: "IconSettings"))
         button.accessibilityIdentifier = "SettingsButton"
         button.accessibilityLabel = NSLocalizedString(
@@ -78,6 +79,8 @@ class HeaderBarView: UIView {
             value: "Settings",
             comment: ""
         )
+        button.heightAnchor.constraint(equalToConstant: UIMetrics.Button.barButtonSize).isActive = true
+        button.widthAnchor.constraint(equalTo: button.heightAnchor, multiplier: 1).isActive = true
         return button
     }()
 
@@ -164,8 +167,13 @@ class HeaderBarView: UIView {
 
         accessibilityContainerType = .semanticGroup
 
-        let imageSize = brandNameImage?.size ?? .zero
-        let brandNameAspectRatio = imageSize.width / max(imageSize.height, 1)
+        let brandImageSize = brandNameImage?.size ?? .zero
+        let brandNameAspectRatio = brandImageSize.width / max(brandImageSize.height, 1)
+
+        var buttonContainerTrailingAdjustment: CGFloat = 0
+        if let buttonImageWidth = settingsButton.currentImage?.size.width {
+            buttonContainerTrailingAdjustment = max((UIMetrics.Button.barButtonSize - buttonImageWidth) / 2, 0)
+        }
 
         [deviceNameLabel, timeLeftLabel].forEach { deviceInfoHolder.addArrangedSubview($0) }
 
@@ -190,7 +198,10 @@ class HeaderBarView: UIView {
             brandNameImageView.heightAnchor.constraint(equalToConstant: UIMetrics.headerBarBrandNameHeight)
 
             buttonContainer.centerYAnchor.constraint(equalTo: brandNameImageView.centerYAnchor)
-            buttonContainer.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor)
+            buttonContainer.trailingAnchor.constraint(
+                equalTo: layoutMarginsGuide.trailingAnchor,
+                constant: buttonContainerTrailingAdjustment
+            )
 
             deviceInfoHolder.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor)
             deviceInfoHolder.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor)
diff --git a/ios/MullvadVPN/UI appearance/UIMetrics.swift b/ios/MullvadVPN/UI appearance/UIMetrics.swift
index c8f1704973..3a9a65b76b 100644
--- a/ios/MullvadVPN/UI appearance/UIMetrics.swift
+++ b/ios/MullvadVPN/UI appearance/UIMetrics.swift
@@ -38,6 +38,10 @@ enum UIMetrics {
         static let cornerRadius = 8.0
         static let preferredContentSize = CGSize(width: 292, height: 263)
     }
+
+    enum Button {
+        static let barButtonSize: CGFloat = 44.0
+    }
 }
 
 extension UIMetrics {
diff --git a/ios/MullvadVPN/Views/IncreasedHitButton.swift b/ios/MullvadVPN/Views/IncreasedHitButton.swift
index 14037887b2..e3a79838d6 100644
--- a/ios/MullvadVPN/Views/IncreasedHitButton.swift
+++ b/ios/MullvadVPN/Views/IncreasedHitButton.swift
@@ -9,7 +9,7 @@
 import UIKit
 
 final class IncreasedHitButton: UIButton {
-    private let defaultSize = 44.0
+    private let defaultSize = UIMetrics.Button.barButtonSize
 
     override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
         let width = bounds.width