[Gutenberg] Set consistent editor colours in both the WordPress and Jetpack apps

RELEASE-NOTES.txt

@@ -1,5 +1,6 @@
 20.5
 -----
+* [*] [Jetpack-only] Block Editor: Makes some small changes to the editor's accent colours for consistency. [#19113]
 * [*] Use larger thumbnail previews for recommended themes during site creation [https://github.com/wordpress-mobile/WordPress-iOS/pull/18972]
 
 20.4

WordPress/Classes/Extensions/Colors and Styles/MurielColor.swift

@@ -69,6 +69,7 @@ struct MurielColor {
     static let textSubtle = AppStyleGuide.textSubtle
     static let warning = AppStyleGuide.warning
     static let jetpackGreen = AppStyleGuide.jetpackGreen
+    static let editorPrimary = AppStyleGuide.editorPrimary
 
     /// The full name of the color, with required shade value
     func assetName() -> String {

WordPress/Classes/Extensions/Colors and Styles/UIColor+MurielColors.swift

@@ -62,6 +62,12 @@ extension UIColor {
         return muriel(color: .primary, shade)
     }
 
+    /// Muriel editor primary color
+    static var editorPrimary = muriel(color: .editorPrimary)
+    class func editorPrimary(_ shade: MurielColorShade) -> UIColor {
+        return muriel(color: .editorPrimary, shade)
+    }
+
     /// Muriel success color
     static var success = muriel(color: .success)
     class func success(_ shade: MurielColorShade) -> UIColor {

WordPress/Classes/Extensions/Colors and Styles/UIColor+MurielColorsObjC.swift

@@ -16,6 +16,11 @@
         return .primaryDark
     }
 
+    @available(swift, obsoleted: 1.0)
+    static func murielEditorPrimary() -> UIColor {
+        return .editorPrimary
+    }
+
     @available(swift, obsoleted: 1.0)
     static func murielNeutral() -> UIColor {
         return .neutral

WordPress/Classes/System/WordPressAppDelegate.swift

@@ -881,6 +881,37 @@ extension WordPressAppDelegate {
         UIButton.appearance(whenContainedInInstancesOf: [WPActionBar.self]).tintColor = .primary
         WPActionBar.appearance().barBackgroundColor = .basicBackground
         WPActionBar.appearance().lineColor = .basicBackground
+
+        // Post Settings styles
+
+        /// Post Settings: Main and subscreens
+        UITableView.appearance(whenContainedInInstancesOf: [PostSettingsViewController.self]).tintColor = .editorPrimary
+        UITableView.appearance(whenContainedInInstancesOf: [AztecNavigationController.self]).tintColor = .editorPrimary
+        UISwitch.appearance(whenContainedInInstancesOf: [PostSettingsViewController.self]).onTintColor = .editorPrimary
+
+        /// Post Settings: Date picker
+        if #available(iOS 14.0, *) {
+            let editorSettingsDatePicker = UIView.appearance(whenContainedInInstancesOf: [SchedulingDatePickerViewController.self])
+            editorSettingsDatePicker.tintColor = .editorPrimary
+        }
+
+        /// Post Settings: Tag selection
+        UIView.appearance(whenContainedInInstancesOf: [PostTagPickerViewController.self]).tintColor = .editorPrimary
+
+        /// Post Settings: Categories selection
+        UIView.appearance(whenContainedInInstancesOf: [WPAddPostCategoryViewController.self]).tintColor = .editorPrimary
+        UIView.appearance(whenContainedInInstancesOf: [PostCategoriesViewController.self]).tintColor = .editorPrimary
+
+        /// It's necessary to target PostCategoriesViewController a second time to 'reset'
+        /// the UI element's `tintColor` for use in the app's Site Settings screen.
+        UIView.appearance(whenContainedInInstancesOf: [PostCategoriesViewController.self, WPSplitViewController.self]).tintColor = .primary
+
+        /// Post Settings: Featured Image Search
+        UIView.appearance(whenContainedInInstancesOf: [WPMediaPickerViewController.self]).tintColor = .editorPrimary
+
+        /// It's necessary to target WPMediaPickerViewController a second time to 'reset'
+        /// the UI element's `tintColor` for use app's main Media screen.
+        UIView.appearance(whenContainedInInstancesOf: [WPMediaPickerViewController.self, WPSplitViewController.self]).tintColor = .primary
     }
 }
 

WordPress/Classes/Utility/App Configuration/AppStyleGuide.swift

@@ -21,6 +21,7 @@ extension AppStyleGuide {
     static let textSubtle = MurielColor(name: .gray, shade: .shade50)
     static let warning = MurielColor(name: .yellow)
     static let jetpackGreen = MurielColor(name: .jetpackGreen)
+    static let editorPrimary = MurielColor(name: .blue)
 }
 
 // MARK: - Images

WordPress/Classes/ViewRelated/Gutenberg/GutenbergViewController.swift

@@ -374,6 +374,8 @@ class GutenbergViewController: UIViewController, PostEditor, FeaturedImageDelega
         super.viewWillAppear(animated)
         verificationPromptHelper?.updateVerificationStatus()
         ghostView.startAnimation()
+        // `.editorPrimary` should be the tintColor that's used for action sheets when the editor appears.
+        UIView.appearance(whenContainedInInstancesOf: [UIAlertController.self]).tintColor = .editorPrimary
     }
 
     override func viewDidAppear(_ animated: Bool) {
@@ -385,6 +387,8 @@ class GutenbergViewController: UIViewController, PostEditor, FeaturedImageDelega
 
     override func viewWillDisappear(_ animated: Bool) {
         super.viewWillDisappear(animated)
+        // Resets the action sheet's tintColor to `.primary` to prevent `.editorPrimary` being set as the tintColor for UI elements outside of the editor.
+        UIView.appearance(whenContainedInInstancesOf: [UIAlertController.self]).tintColor = .primary
     }
 
     override func viewLayoutMarginsDidChange() {
@@ -408,6 +412,13 @@ class GutenbergViewController: UIViewController, PostEditor, FeaturedImageDelega
         }
     }
 
+    override func present(_ viewControllerToPresent: UIViewController, animated flag: Bool, completion: (() -> Void)? = nil) {
+        super.present(viewControllerToPresent, animated: flag, completion: completion)
+
+        let presentedView = presentedViewController?.view
+        presentedView?.tintColor = .editorPrimary
+    }
+
     // MARK: - Functions
 
     private var keyboardShowObserver: Any?
@@ -554,12 +565,15 @@ class GutenbergViewController: UIViewController, PostEditor, FeaturedImageDelega
 extension GutenbergViewController {
     private func setupGutenbergView() {
         view.backgroundColor = .white
+        view.tintColor = .editorPrimary
         gutenberg.rootView.translatesAutoresizingMaskIntoConstraints = false
         gutenberg.rootView.backgroundColor = .basicBackground
         view.addSubview(gutenberg.rootView)
 
         view.pinSubviewToAllEdges(gutenberg.rootView)
         gutenberg.rootView.pinSubviewToAllEdges(ghostView)
+
+        UISwitch.appearance(whenContainedInInstancesOf: [RCTModalHostViewController.self]).onTintColor = .editorPrimary
     }
 }
 

WordPress/Jetpack/AppStyleGuide.swift

@@ -22,6 +22,7 @@ extension AppStyleGuide {
     static let textSubtle = MurielColor(name: .gray, shade: .shade50)
     static let warning = MurielColor(name: .yellow)
     static let jetpackGreen = MurielColor(name: .jetpackGreen)
+    static let editorPrimary = MurielColor(name: .blue)
 }
 
 // MARK: - Images