Fix checkbox appearance on iOS

9 files changed, 51 insertions, 21 deletions

diff --git a/ios/MullvadVPN/Extensions/UIImage+Assets.swift b/ios/MullvadVPN/Extensions/UIImage+Assets.swift
index 84082d5776..ac0571b6da 100644
--- a/ios/MullvadVPN/Extensions/UIImage+Assets.swift
+++ b/ios/MullvadVPN/Extensions/UIImage+Assets.swift
@@ -102,4 +102,12 @@ extension UIImage {
     static var tick: UIImage {
         UIImage(named: "IconTickSml")!
     }
+
+    static var checkboxSelected: UIImage {
+        UIImage(named: "CheckboxSelected")!
+    }
+
+    static var checkboxUnselected: UIImage {
+        UIImage(named: "CheckboxUnselected")!
+    }
 }
diff --git a/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxSelected.imageset/CheckboxSelected.svg b/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxSelected.imageset/CheckboxSelected.svg
new file mode 100644
index 0000000000..88c3d0fbd9
--- /dev/null
+++ b/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxSelected.imageset/CheckboxSelected.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="white"/>
+<path d="M17 8L10.5 15.5L7 12.5" stroke="#44AD4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxSelected.imageset/Contents.json b/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxSelected.imageset/Contents.json
new file mode 100644
index 0000000000..f75e961fad
--- /dev/null
+++ b/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxSelected.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "CheckboxSelected.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxUnselected.imageset/CheckboxUnselected.svg b/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxUnselected.imageset/CheckboxUnselected.svg
new file mode 100644
index 0000000000..0446d62142
--- /dev/null
+++ b/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxUnselected.imageset/CheckboxUnselected.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="16" height="16" rx="1" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxUnselected.imageset/Contents.json b/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxUnselected.imageset/Contents.json
new file mode 100644
index 0000000000..1f442bba89
--- /dev/null
+++ b/ios/MullvadVPN/Supporting Files/Assets.xcassets/CheckboxUnselected.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "CheckboxUnselected.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/ios/MullvadVPN/UI appearance/UIMetrics.swift b/ios/MullvadVPN/UI appearance/UIMetrics.swift
index 813d333080..4f4c1142cc 100644
--- a/ios/MullvadVPN/UI appearance/UIMetrics.swift
+++ b/ios/MullvadVPN/UI appearance/UIMetrics.swift
@@ -79,7 +79,7 @@ enum UIMetrics {
         static let layoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 24, bottom: 16, trailing: 12)
         static let inputCellTextFieldLayoutMargins = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 8)
         static let selectableSettingsCellLeftViewSpacing: CGFloat = 12
-        static let checkableSettingsCellLeftViewSpacing: CGFloat = 20
+        static let checkableSettingsCellLeftViewSpacing: CGFloat = 12
 
         /// Cell layout margins used in table views that use inset style.
         static let insetLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 24, bottom: 16, trailing: 24)
diff --git a/ios/MullvadVPN/View controllers/SelectLocation/LocationCell.swift b/ios/MullvadVPN/View controllers/SelectLocation/LocationCell.swift
index 1421db97c9..7e957cc499 100644
--- a/ios/MullvadVPN/View controllers/SelectLocation/LocationCell.swift
+++ b/ios/MullvadVPN/View controllers/SelectLocation/LocationCell.swift
@@ -44,7 +44,8 @@ class LocationCell: UITableViewCell {
 
         checkboxView.isUserInteractionEnabled = false
         button.addConstrainedSubviews([checkboxView]) {
-            checkboxView.pinEdgesToSuperviewMargins(PinnableEdges([.top(8), .bottom(8), .leading(16), .trailing(16)]))
+            checkboxView.centerYAnchor.constraint(equalTo: button.centerYAnchor)
+            checkboxView.pinEdgesToSuperviewMargins(PinnableEdges([.leading(16), .trailing(16)]))
         }
 
         return button
diff --git a/ios/MullvadVPN/View controllers/Settings/CheckableSettingsCell.swift b/ios/MullvadVPN/View controllers/Settings/CheckableSettingsCell.swift
index 64812ff6c5..08598a2caf 100644
--- a/ios/MullvadVPN/View controllers/Settings/CheckableSettingsCell.swift
+++ b/ios/MullvadVPN/View controllers/Settings/CheckableSettingsCell.swift
@@ -48,11 +48,10 @@ class CheckableSettingsCell: SettingsCell {
     private func setCheckboxView() {
         setLeadingView { superview in
             superview.addConstrainedSubviews([checkboxView]) {
+                checkboxView.centerYAnchor.constraint(equalTo: superview.centerYAnchor)
                 checkboxView.pinEdgesToSuperview(PinnableEdges([
                     .leading(0),
                     .trailing(UIMetrics.SettingsCell.checkableSettingsCellLeftViewSpacing),
-                    .top(0),
-                    .bottom(0),
                 ]))
             }
         }
diff --git a/ios/MullvadVPN/Views/CheckboxView.swift b/ios/MullvadVPN/Views/CheckboxView.swift
index a1edd3d254..5152c98fc5 100644
--- a/ios/MullvadVPN/Views/CheckboxView.swift
+++ b/ios/MullvadVPN/Views/CheckboxView.swift
@@ -9,35 +9,26 @@
 import UIKit
 
 class CheckboxView: UIView {
-    private let backgroundView: UIView = {
-        let view = UIView()
-        view.backgroundColor = .white
-        view.layer.cornerRadius = 4
-        return view
+    private let checkboxSelectedView: UIImageView = {
+        UIImageView(image: UIImage.checkboxSelected)
     }()
 
-    private let checkmarkView: UIImageView = {
-        let imageView = UIImageView(image: UIImage.tick)
-        imageView.tintColor = .successColor
-        imageView.contentMode = .scaleAspectFit
-        imageView.alpha = 0
-        return imageView
+    private let checkboxUnselectedView: UIImageView = {
+        UIImageView(image: UIImage.checkboxUnselected)
     }()
 
     var isChecked = false {
         didSet {
-            checkmarkView.alpha = isChecked ? 1 : 0
+            checkboxSelectedView.alpha = isChecked ? 1 : 0
         }
     }
 
     init() {
         super.init(frame: .zero)
 
-        directionalLayoutMargins = .init(top: 4, leading: 4, bottom: 4, trailing: 4)
-
-        addConstrainedSubviews([backgroundView, checkmarkView]) {
-            backgroundView.pinEdgesToSuperview()
-            checkmarkView.pinEdgesToSuperviewMargins()
+        addConstrainedSubviews([checkboxSelectedView, checkboxUnselectedView]) {
+            checkboxSelectedView.pinEdgesToSuperview()
+            checkboxUnselectedView.pinEdgesToSuperview()
         }
     }