CustomNavigationBar: add custom back button

5 files changed, 30 insertions, 1 deletions

diff --git a/ios/AdditionalAssets/IconBackTransitionMask.svg b/ios/AdditionalAssets/IconBackTransitionMask.svg
new file mode 100644
index 0000000000..dee1cf6be2
--- /dev/null
+++ b/ios/AdditionalAssets/IconBackTransitionMask.svg
@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <circle cx="12" cy="12" r="11" fill="#000" />
+</svg>
\ No newline at end of file
diff --git a/ios/MullvadVPN/Assets.xcassets/IconBackTransitionMask.imageset/Contents.json b/ios/MullvadVPN/Assets.xcassets/IconBackTransitionMask.imageset/Contents.json
new file mode 100644
index 0000000000..e244194d6e
--- /dev/null
+++ b/ios/MullvadVPN/Assets.xcassets/IconBackTransitionMask.imageset/Contents.json
@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "IconBackTransitionMask.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}
diff --git a/ios/MullvadVPN/Assets.xcassets/IconBackTransitionMask.imageset/IconBackTransitionMask.pdf b/ios/MullvadVPN/Assets.xcassets/IconBackTransitionMask.imageset/IconBackTransitionMask.pdf
new file mode 100644
index 0000000000..c127fe54cf
--- /dev/null
+++ b/ios/MullvadVPN/Assets.xcassets/IconBackTransitionMask.imageset/IconBackTransitionMask.pdf
diff --git a/ios/MullvadVPN/CustomNavigationBar.swift b/ios/MullvadVPN/CustomNavigationBar.swift
index 3f5a91e118..2c9be14f39 100644
--- a/ios/MullvadVPN/CustomNavigationBar.swift
+++ b/ios/MullvadVPN/CustomNavigationBar.swift
@@ -10,6 +10,11 @@ import UIKit
 
 class CustomNavigationBar: UINavigationBar {
 
+    private static let setupAppearanceOnce: Void = {
+        let buttonAppearance = UIBarButtonItem.appearance(whenContainedInInstancesOf: [CustomNavigationBar.self])
+        buttonAppearance.setBackButtonTitlePositionAdjustment(UIOffset(horizontal: 4, vertical: 0), for: .default)
+    }()
+
     var prefersOpaqueBackground: Bool {
         didSet {
             setOpaqueBackgroundAppearance(prefersOpaqueBackground)
@@ -36,6 +41,8 @@ class CustomNavigationBar: UINavigationBar {
     }
 
     override init(frame: CGRect) {
+        Self.setupAppearanceOnce
+
         if #available(iOS 13, *) {
             prefersOpaqueBackground = false
         } else {
@@ -49,6 +56,9 @@ class CustomNavigationBar: UINavigationBar {
         margins.right = UIMetrics.contentLayoutMargins.right
         layoutMargins = margins
 
+        backIndicatorImage = UIImage(named: "IconBack")
+        backIndicatorTransitionMaskImage = UIImage(named: "IconBackTransitionMask")
+
         setOpaqueBackgroundAppearance(prefersOpaqueBackground)
     }
 
diff --git a/ios/convert-assets.rb b/ios/convert-assets.rb
index 0d49431304..7352d87bea 100755
--- a/ios/convert-assets.rb
+++ b/ios/convert-assets.rb
@@ -79,7 +79,8 @@ ADDITIONAL_ASSETS = [
   "TranslucentDangerButton.svg",
   "TranslucentNeutralButton.svg",
   "TranslucentDangerSplitLeftButton.svg",
-  "TranslucentDangerSplitRightButton.svg"
+  "TranslucentDangerSplitRightButton.svg",
+  "IconBackTransitionMask.svg"
 ]
 
 # Functions