feat: update logos and map grayscale to monochrome for 5.1 rebrand

Sources/PayPalMessages/Enums/ImageAsset.swift

@@ -61,7 +61,7 @@ enum ImageAsset: String {
 
         let renderFormat = UIGraphicsImageRendererFormat.default()
         renderFormat.opaque = false
-
+        
         let renderer = UIGraphicsImageRenderer(size: sized, format: renderFormat)
 
         let newImage = renderer.image { _ in

Sources/PayPalMessages/Extensions/UIColor.swift

@@ -2,7 +2,7 @@ import UIKit
 
 extension UIColor {
 
-    static let colorBlue600 = UIColor(red: 0.00, green: 0.44, blue: 0.73, alpha: 1)
+    static let colorBlue600 = UIColor(hexString: "#0065F2")
     static let colorGrey700 = UIColor(red: 0.17, green: 0.18, blue: 0.18, alpha: 1)
 
     convenience init(hexString: String) {

Sources/PayPalMessages/Utils/PayPalMessageAttributedStringBuilder.swift

@@ -189,25 +189,17 @@ final class PayPalMessageAttributedStringBuilder {
         includesMonogram: Bool,
         icon: UIImage
     ) -> CGRect {
-        // Use the cap height of the displayed raw text as the basis for calculations.
-        // The cap height is the distance from the baseline to the highest point of a capital letter.
-        // The height of 'P' would be the cap height.
-        let capHeight = getDynamicTypeFont(for: .systemFont(ofSize: fontSize)).capHeight
-        // The descender is the lowest part of the text that goes below the baseline.
-        // The difference in height between 'a' and 'y' would be the descender, where the
-        // descender is just the bottom part of 'y'. We calculate it ourselves instead of pulling it
-        // from the font because the PayPal logo has a slightly different descender ratio.
+        let font = getDynamicTypeFont(for: .systemFont(ofSize: fontSize))
+        let capHeight = font.capHeight
         let descender = capHeight * Constants.capHeightToDescenderRatio + Constants.descenderOffset
-        // Used to scale up the calculations when the image includes a monogram since the
-        // "PayPal" portion is smaller than the "PP" monogram
         let monogramMultiplier = includesMonogram ? Constants.monogramToPayPalRatio : 1
-        // Ratio which is used to calculate the correctly scaled width of the boundary
         let iconRatio = icon.size.width / icon.size.height
-        // The height consists of the cap height ('P') and descender (bottom of 'y') and an optional
-        // monogram ratio upscale when present
         let iconHeight = (capHeight + descender) * monogramMultiplier
-        // Veritical shift down so that the descender (bottom of 'y') falls below the baseline
-        let iconYOffset = -1 * descender
+        // Leading badge: center vertically on the text line's midpoint
+        // Inline logo: shift down so the logo's descender falls below the baseline
+        let iconYOffset = includesMonogram
+            ? (font.ascender + font.descender) / 2 - iconHeight / 2
+            : -1 * descender
 
         return CGRect(
             x: 0,

Sources/PayPalMessages/Utils/PayPalMessageViewParametersBuilder.swift

@@ -92,7 +92,7 @@ struct PayPalMessageViewParametersBuilder {
             asset = isPayLater ? ImageAsset.logoPrimaryMonochrome : ImageAsset.logoPrimaryMonochromeCredit
 
         case .grayscale:
-            asset = isPayLater ? ImageAsset.logoPrimaryGrayscale : ImageAsset.logoPrimaryGrayscaleCredit
+            asset = isPayLater ? ImageAsset.logoPrimaryMonochrome : ImageAsset.logoPrimaryMonochromeCredit
         }
 
         return ImageAsset.image(asset)
@@ -115,7 +115,7 @@ struct PayPalMessageViewParametersBuilder {
             asset = isPayLater ? ImageAsset.logoAlternativeMonochrome : ImageAsset.logoAlternativeMonochromeCredit
 
         case .grayscale:
-            asset = isPayLater ? ImageAsset.logoAlternativeGrayscale : ImageAsset.logoAlternativeGrayscaleCredit
+            asset = isPayLater ? ImageAsset.logoAlternativeMonochrome : ImageAsset.logoAlternativeMonochromeCredit
         }
 
         return ImageAsset.image(asset)
@@ -138,7 +138,7 @@ struct PayPalMessageViewParametersBuilder {
             asset = isPayLater ? ImageAsset.logoInlineMonochrome : ImageAsset.logoInlineMonochromeCredit
 
         case .grayscale:
-            asset = isPayLater ? ImageAsset.logoInlineGrayscale : ImageAsset.logoInlineGrayscaleCredit
+            asset = isPayLater ? ImageAsset.logoInlineMonochrome : ImageAsset.logoInlineMonochromeCredit
         }
 
         return ImageAsset.image(asset)

Tests/PayPalMessagesTests/PayPalMessageLogoTests.swift

@@ -92,7 +92,7 @@ final class PayPalMessageLogoTests: XCTestCase {
             logoType: .primary,
             color: .grayscale,
             productGroup: .payLater,
-            expectedAsset: .logoPrimaryGrayscale
+            expectedAsset: .logoPrimaryMonochrome
         )
     }
 
@@ -101,7 +101,7 @@ final class PayPalMessageLogoTests: XCTestCase {
             logoType: .primary,
             color: .grayscale,
             productGroup: .paypalCredit,
-            expectedAsset: .logoPrimaryGrayscaleCredit
+            expectedAsset: .logoPrimaryMonochromeCredit
         )
     }
 
@@ -166,7 +166,7 @@ final class PayPalMessageLogoTests: XCTestCase {
             logoType: .alternative,
             color: .grayscale,
             productGroup: .payLater,
-            expectedAsset: .logoAlternativeGrayscale
+            expectedAsset: .logoAlternativeMonochrome
         )
     }
 
@@ -175,7 +175,7 @@ final class PayPalMessageLogoTests: XCTestCase {
             logoType: .alternative,
             color: .grayscale,
             productGroup: .paypalCredit,
-            expectedAsset: .logoAlternativeGrayscaleCredit
+            expectedAsset: .logoAlternativeMonochromeCredit
         )
     }
 
@@ -240,7 +240,7 @@ final class PayPalMessageLogoTests: XCTestCase {
             logoType: .inline,
             color: .grayscale,
             productGroup: .payLater,
-            expectedAsset: .logoInlineGrayscale
+            expectedAsset: .logoInlineMonochrome
         )
     }
 
@@ -249,7 +249,7 @@ final class PayPalMessageLogoTests: XCTestCase {
             logoType: .inline,
             color: .grayscale,
             productGroup: .paypalCredit,
-            expectedAsset: .logoInlineGrayscaleCredit
+            expectedAsset: .logoInlineMonochromeCredit
         )
     }