Co-branding JP login screen with WP.com

Modules/Sources/DesignSystem/Foundation/Colors.xcassets/Foundation/Background/backgroundBrandWP.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xC4",
-          "green" : "0x75",
-          "red" : "0x06"
+          "blue" : "0xE3",
+          "green" : "0x58",
+          "red" : "0x38"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xDB",
-          "green" : "0x89",
-          "red" : "0x16"
+          "blue" : "0xE3",
+          "green" : "0x58",
+          "red" : "0x38"
         }
       },
       "idiom" : "universal"

Podfile

@@ -143,7 +143,7 @@ abstract_target 'Apps' do
   pod 'NSURL+IDN', '~> 0.4'
 
   # pod 'WordPressAuthenticator', '~> 8.0'
-  pod 'WordPressAuthenticator', git: 'https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git', commit: 'b51b4b238103f7812db0aa1a265995e1c6d1e355'
+  pod 'WordPressAuthenticator', git: 'https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git', commit: '419cd5ba532075d25dedc3954b80868b497b4531'
   # pod 'WordPressAuthenticator', git: 'https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git', branch: ''
   # pod 'WordPressAuthenticator', path: '../WordPressAuthenticator-iOS'
 

Podfile.lock

@@ -120,7 +120,7 @@ DEPENDENCIES:
   - SVProgressHUD (= 2.2.5)
   - SwiftLint (~> 0.50)
   - WordPress-Editor-iOS (~> 1.19.9)
-  - WordPressAuthenticator (from `https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git`, commit `b51b4b238103f7812db0aa1a265995e1c6d1e355`)
+  - WordPressAuthenticator (from `https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git`, commit `419cd5ba532075d25dedc3954b80868b497b4531`)
   - WordPressKit (from `https://github.com/wordpress-mobile/WordPressKit-iOS.git`, commit `32b5a9fdd097b82934a5ce679c915a1fc3f21848`)
   - WordPressShared (~> 2.2)
   - WordPressUI (~> 1.15)
@@ -175,7 +175,7 @@ EXTERNAL SOURCES:
   Gutenberg:
     :podspec: https://cdn.a8c-ci.services/gutenberg-mobile/Gutenberg-v1.110.0.podspec
   WordPressAuthenticator:
-    :commit: b51b4b238103f7812db0aa1a265995e1c6d1e355
+    :commit: 419cd5ba532075d25dedc3954b80868b497b4531
     :git: https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git
   WordPressKit:
     :commit: 32b5a9fdd097b82934a5ce679c915a1fc3f21848
@@ -190,7 +190,7 @@ CHECKOUT OPTIONS:
     :submodules: true
     :tag: v1.100.2
   WordPressAuthenticator:
-    :commit: b51b4b238103f7812db0aa1a265995e1c6d1e355
+    :commit: 419cd5ba532075d25dedc3954b80868b497b4531
     :git: https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git
   WordPressKit:
     :commit: 32b5a9fdd097b82934a5ce679c915a1fc3f21848
@@ -240,6 +240,6 @@ SPEC CHECKSUMS:
   ZendeskSupportSDK: 3a8e508ab1d9dd22dc038df6c694466414e037ba
   ZIPFoundation: d170fa8e270b2a32bef9dcdcabff5b8f1a5deced
 
-PODFILE CHECKSUM: 15b140d335cb977dc0159e0edc13eaf0f761502a
+PODFILE CHECKSUM: 34f96b13c844e303d2bc50174964878c5aac93dc
 
 COCOAPODS: 1.14.2

RELEASE-NOTES.txt

@@ -5,6 +5,7 @@
 * [**] [internal] Refactor domain selection flows to use the same domain selection UI. [22254]
 * [**] Re-enable the support for using Security Keys as a second factor during login [#22258]
 * [*] Fix crash in editor that sometimes happens after modifying tags or categories [#22265]
+* [**] Updated login screen's colors to highlight WordPress - Jetpack brand relationship
 * [*] Add defensive code to make sure the retain cycles in the editor don't lead to crashes [#22252]
 * [**] [internal] [Jetpack-only] Adds support for dynamic dashboard cards driven by the backend [#22326]
 * [*] Fix a rare crash in post search related to tags [#22275]

WordPress/Classes/ViewRelated/NUX/WordPressAuthenticationManager.swift

@@ -176,7 +176,7 @@ extension WordPressAuthenticationManager {
                                                   prologueButtonsBackgroundColor: prologueButtonsBackgroundColor,
                                                   prologueViewBackgroundColor: prologueViewBackgroundColor,
                                                   prologueBackgroundImage: authenticationHandler?.prologueBackgroundImage,
-                                                  prologueButtonsBlurEffect: authenticationHandler?.prologueButtonsBlurEffect,
+                                                  prologueButtonsBlurEffect: nil,
                                                   navBarBackgroundColor: .appBarBackground,
                                                   navButtonTextColor: .appBarTint,
                                                   navTitleTextColor: .appBarText)

WordPress/Jetpack/AppImages.xcassets/wp-jp-circular-lockup.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "wp-jp-circular-lockup.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Jetpack/Classes/JetpackAuthenticationManager.swift

@@ -5,7 +5,7 @@ struct JetpackAuthenticationManager: AuthenticationHandler {
     let statusBarStyle: UIStatusBarStyle = .default
     let prologueViewController: UIViewController? = JetpackPrologueViewController()
     let buttonViewTopShadowImage: UIImage? = UIImage()
-    let prologueButtonsBackgroundColor: UIColor? = JetpackPrologueStyleGuide.backgroundColor
+    let prologueButtonsBackgroundColor: UIColor? = JetpackPrologueStyleGuide.gradientColor
     let prologueButtonsBlurEffect: UIBlurEffect? = JetpackPrologueStyleGuide.prologueButtonsBlurEffect
     let prologuePrimaryButtonStyle: NUXButtonStyle? = JetpackPrologueStyleGuide.continueButtonStyle
     let prologueSecondaryButtonStyle: NUXButtonStyle? = JetpackPrologueStyleGuide.siteAddressButtonStyle

WordPress/Jetpack/Classes/NUX/JetpackPrologueStyleGuide.swift

@@ -2,28 +2,29 @@ import UIKit
 import WordPressAuthenticator
 
 
-/// The colors in here intentionally do not support light or dark modes since they're the same on both.
-///
 struct JetpackPrologueStyleGuide {
     // Background color
     static let backgroundColor = UIColor.clear
 
     // Gradient overlay color
-    static let gradientColor = UIColor(light: .muriel(color: .jetpackGreen, .shade0), dark: .muriel(color: .jetpackGreen, .shade100))
+    static let gradientColor = UIColor(
+        light: .white,
+        dark: UIColor(hexString: "050A21")
+    )
 
     // Continue with WordPress button colors
-    static let continueFillColor = UIColor(light: .muriel(color: .jetpackGreen, .shade50), dark: .white)
-    static let continueHighlightedFillColor = UIColor(light: .muriel(color: .jetpackGreen, .shade90), dark: whiteWithAlpha07)
-    static let continueTextColor = UIColor(light: .white, dark: .muriel(color: .jetpackGreen, .shade80))
+    static let continueFillColor = JetpackPromptsConfiguration.Constants.evenColor ?? .systemBlue // This is just to satisfy the compiler
+    static let continueHighlightedFillColor = continueFillColor.withAlphaComponent(0.9)
+    static let continueTextColor = UIColor.white
     static let continueHighlightedTextColor = whiteWithAlpha07
 
 
     // Enter your site address button
     static let siteFillColor = UIColor.clear
     static let siteBorderColor = UIColor.clear
     static let siteTextColor = UIColor(light: .muriel(color: .jetpackGreen, .shade90), dark: .white)
-    static let siteHighlightedFillColor = whiteWithAlpha07
-    static let siteHighlightedBorderColor = whiteWithAlpha07
+    static let siteHighlightedFillColor = UIColor.clear
+    static let siteHighlightedBorderColor = UIColor.clear
     static let siteHighlightedTextColor = UIColor(light: .muriel(color: .jetpackGreen, .shade50), dark: whiteWithAlpha07)
 
     // Color used in both old and versions

WordPress/Jetpack/Classes/NUX/JetpackPrologueViewController.swift

@@ -27,7 +27,7 @@ class JetpackPrologueViewController: UIViewController {
     }()
 
     private lazy var logoImageView: UIImageView = {
-        let imageView = UIImageView(image: UIImage(named: "jetpack-logo"))
+        let imageView = UIImageView(image: UIImage(named: "wp-jp-circular-lockup"))
         imageView.translatesAutoresizingMaskIntoConstraints = false
         return imageView
     }()
@@ -36,11 +36,6 @@ class JetpackPrologueViewController: UIViewController {
         makeGradientLayer()
     }()
 
-    private lazy var logoWidthConstraint: NSLayoutConstraint = {
-        let width = Constants.logoWidth(for: traitCollection.horizontalSizeClass)
-        return logoImageView.widthAnchor.constraint(equalToConstant: width)
-    }()
-
     private func makeGradientLayer() -> CAGradientLayer {
         let gradientLayer = CAGradientLayer()
 
@@ -94,10 +89,10 @@ class JetpackPrologueViewController: UIViewController {
         view.layer.insertSublayer(gradientLayer, above: jetpackAnimatedView.layer)
         // constraints
         NSLayoutConstraint.activate([
-            logoWidthConstraint,
-            logoImageView.heightAnchor.constraint(equalTo: logoImageView.widthAnchor),
+            logoImageView.widthAnchor.constraint(equalToConstant: 132.35),
+            logoImageView.heightAnchor.constraint(equalToConstant: 80),
             logoImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
-            logoImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 68)
+            logoImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 135)
         ])
     }
 
@@ -125,8 +120,6 @@ class JetpackPrologueViewController: UIViewController {
     override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
         super.traitCollectionDidChange(previousTraitCollection)
 
-        logoWidthConstraint.constant = Constants.logoWidth(for: traitCollection.horizontalSizeClass)
-
         guard previousTraitCollection?.userInterfaceStyle != traitCollection.userInterfaceStyle else {
             updateLabel(for: traitCollection)
             return
@@ -172,10 +165,6 @@ class JetpackPrologueViewController: UIViewController {
         static let defaultAngleDegrees: Double = 30.0
         /// Uniform multiplier used to tweak the rate generated from an angle
         static let angleRateMultiplier: CGFloat = 1.3
-        /// Returns the Jetpack logo width depending on the given size class
-        static func logoWidth(for sizeClass: UIUserInterfaceSizeClass) -> CGFloat {
-            return sizeClass == .compact ? 68 : 78
-        }
     }
 }
 

WordPress/Jetpack/Classes/NUX/New Landing Screen/ViewModel/JetpackPromptsConfiguration.swift

@@ -1,13 +1,13 @@
 import SwiftUI
+import DesignSystem
 
 /// Text and constants for animated prompts in the Jetpack prologue screen
 struct JetpackPromptsConfiguration {
 
     enum Constants {
         // alternate colors in rows
-        static let evenColor = UIColor.muriel(color: .jetpackGreen, .shade50)
-        static let oddColor = UIColor(light: .muriel(color: .jetpackGreen, .shade50).withAlphaComponent(0.5),
-                                      dark: .muriel(color: .jetpackGreen, .shade20))
+        static let evenColor = UIColor.DS.Background.brand(isJetpack: false)
+        static let oddColor = UIColor.muriel(color: .jetpackGreen, .shade40)
 
         static let basePrompts = [
             NSLocalizedString("jetpack.prologue.prompt.updatePlugin",

WordPress/Resources/AppImages.xcassets/New Jetpack prologue/JPBackground.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "JPBackground.pdf",
+      "filename" : "background-light.pdf",
       "idiom" : "universal"
     }
   ],