UpdatePM screen quality review

Stripe.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -1,5 +1,5 @@
 {
-  "originHash" : "2ad13697f5d60ad400147e34535361f52e72d2f7a280df77bb3c3521cc5623bc",
+  "originHash" : "f16dd06a8f672ea0982887741f3e9e8b32d2e926529cffefd0ba4f377c7018ab",
   "pins" : [
     {
       "identity" : "capture-core-sp",
@@ -55,5 +55,5 @@
       }
     }
   ],
-  "version" : 2
-}
+  "version" : 3
+}

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Elements/TextField/TextFieldElement+USBankAccount.swift

@@ -19,7 +19,7 @@ extension TextFieldElement {
         let isEditable = false
 
         private var lastFourFormatted: String {
-            "\(bankName) ••••\(lastFour)"
+            "\(bankName) •••• \(lastFour)"
         }
 
         public init(bankName:String, lastFour: String) {

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/SavedPaymentMethodFormFactory/SavedPaymentMethodFormFactory+Card.swift

@@ -43,18 +43,22 @@ extension SavedPaymentMethodFormFactory {
         }()
 
         let panElement: TextFieldElement = {
-            return TextFieldElement.LastFourConfiguration(lastFour: viewModel.paymentMethod.card?.last4 ?? "", cardBrand: viewModel.paymentMethod.card?.brand, cardBrandDropDown: cardBrandDropDown).makeElement(theme: viewModel.appearance.asElementsTheme)
+            let panElement = TextFieldElement.LastFourConfiguration(lastFour: viewModel.paymentMethod.card?.last4 ?? "", cardBrand: viewModel.paymentMethod.card?.brand, cardBrandDropDown: cardBrandDropDown).makeElement(theme: viewModel.appearance.asElementsTheme)
+            panElement.view.layer.backgroundColor = transparentMaskViewBackgroundColor().cgColor
+            return panElement
         }()
 
         let expiryDateElement: TextFieldElement = {
             let expiryDate = CardExpiryDate(month: viewModel.paymentMethod.card?.expMonth ?? 0, year: viewModel.paymentMethod.card?.expYear ?? 0)
             let expiryDateElement = TextFieldElement.ExpiryDateConfiguration(defaultValue: expiryDate.displayString, isEditable: false).makeElement(theme: viewModel.appearance.asElementsTheme)
+            expiryDateElement.view.layer.backgroundColor = transparentMaskViewBackgroundColor().cgColor
             return expiryDateElement
         }()
 
         let cvcElement: TextFieldElement = {
             let cvcConfiguration = TextFieldElement.CensoredCVCConfiguration(brand: self.viewModel.paymentMethod.card?.preferredDisplayBrand ?? .unknown)
             let cvcElement = cvcConfiguration.makeElement(theme: viewModel.appearance.asElementsTheme)
+            cvcElement.view.layer.backgroundColor = transparentMaskViewBackgroundColor().cgColor
             return cvcElement
         }()
         let cardSection: SectionElement = {
@@ -75,4 +79,5 @@ extension SavedPaymentMethodFormFactory {
         let cardBrands = viewModel.paymentMethod.card?.networks?.available.map({ STPCard.brand(from: $0) }).filter { viewModel.cardBrandFilter.isAccepted(cardBrand: $0) } ?? []
         viewModel.selectedCardBrand = cardBrands[index]
     }
+
 }

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/SavedPaymentMethodFormFactory/SavedPaymentMethodFormFactory+SEPADebit.swift

@@ -14,13 +14,19 @@ import UIKit
 extension SavedPaymentMethodFormFactory {
     func makeSEPADebit() -> UIView {
         let nameElement: SectionElement = {
-            return SectionElement(elements: [TextFieldElement.NameConfiguration(defaultValue: viewModel.paymentMethod.billingDetails?.name, isEditable: false).makeElement(theme: viewModel.appearance.asElementsTheme)])
+            let nameElement = SectionElement(elements: [TextFieldElement.NameConfiguration(defaultValue: viewModel.paymentMethod.billingDetails?.name, isEditable: false).makeElement(theme: viewModel.appearance.asElementsTheme)])
+            nameElement.view.layer.backgroundColor = transparentMaskViewBackgroundColor().cgColor
+            return nameElement
         }()
         let emailElement: SectionElement = {
-            return SectionElement(elements: [TextFieldElement.EmailConfiguration(defaultValue: viewModel.paymentMethod.billingDetails?.email, isEditable: false).makeElement(theme: viewModel.appearance.asElementsTheme)])
+            let emailElement = SectionElement(elements: [TextFieldElement.EmailConfiguration(defaultValue: viewModel.paymentMethod.billingDetails?.email, isEditable: false).makeElement(theme: viewModel.appearance.asElementsTheme)])
+            emailElement.view.layer.backgroundColor = transparentMaskViewBackgroundColor().cgColor
+            return emailElement
         }()
         let ibanElement: SectionElement = {
-            return SectionElement(elements: [TextFieldElement.LastFourIBANConfiguration(lastFour: viewModel.paymentMethod.sepaDebit?.last4 ?? "0000").makeElement(theme: viewModel.appearance.asElementsTheme)])
+            let ibanElement = SectionElement(elements: [TextFieldElement.LastFourIBANConfiguration(lastFour: viewModel.paymentMethod.sepaDebit?.last4 ?? "0000").makeElement(theme: viewModel.appearance.asElementsTheme)])
+            ibanElement.view.layer.backgroundColor = transparentMaskViewBackgroundColor().cgColor
+            return ibanElement
         }()
         let stackView = UIStackView(arrangedSubviews: [nameElement.view, emailElement.view, ibanElement.view])
         stackView.isLayoutMarginsRelativeArrangement = true

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/SavedPaymentMethodFormFactory/SavedPaymentMethodFormFactory+USBankAccount.swift

@@ -14,13 +14,19 @@ import UIKit
 extension SavedPaymentMethodFormFactory {
     func makeUSBankAccount() -> UIView {
         let nameElement: SectionElement = {
-            return SectionElement(elements: [TextFieldElement.NameConfiguration(defaultValue: viewModel.paymentMethod.billingDetails?.name, isEditable: false).makeElement(theme: viewModel.appearance.asElementsTheme)])
+            let nameElement = SectionElement(elements: [TextFieldElement.NameConfiguration(defaultValue: viewModel.paymentMethod.billingDetails?.name, isEditable: false).makeElement(theme: viewModel.appearance.asElementsTheme)])
+            nameElement.view.layer.backgroundColor = transparentMaskViewBackgroundColor().cgColor
+            return nameElement
         }()
         let emailElement: SectionElement = {
-            return SectionElement(elements: [TextFieldElement.EmailConfiguration(defaultValue: viewModel.paymentMethod.billingDetails?.email, isEditable: false).makeElement(theme: viewModel.appearance.asElementsTheme)])
+            let emailElement = SectionElement(elements: [TextFieldElement.EmailConfiguration(defaultValue: viewModel.paymentMethod.billingDetails?.email, isEditable: false).makeElement(theme: viewModel.appearance.asElementsTheme)])
+            emailElement.view.layer.backgroundColor = transparentMaskViewBackgroundColor().cgColor
+            return emailElement
         }()
         let bankAccountElement: SectionElement = {
-            return SectionElement(elements: [TextFieldElement.USBankNumberConfiguration(bankName: viewModel.paymentMethod.usBankAccount?.bankName ?? "Bank name", lastFour: viewModel.paymentMethod.usBankAccount?.last4 ?? "").makeElement(theme: viewModel.appearance.asElementsTheme)])
+            let bankAccountElement = SectionElement(elements: [TextFieldElement.USBankNumberConfiguration(bankName: viewModel.paymentMethod.usBankAccount?.bankName ?? "Bank name", lastFour: viewModel.paymentMethod.usBankAccount?.last4 ?? "").makeElement(theme: viewModel.appearance.asElementsTheme)])
+            bankAccountElement.view.layer.backgroundColor = transparentMaskViewBackgroundColor().cgColor
+            return bankAccountElement
         }()
         let stackView = UIStackView(arrangedSubviews: [nameElement.view, emailElement.view, bankAccountElement.view])
         stackView.isLayoutMarginsRelativeArrangement = true

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/SavedPaymentMethodFormFactory/SavedPaymentMethodFormFactory.swift

@@ -39,6 +39,18 @@ class SavedPaymentMethodFormFactory {
     private lazy var savedCardForm: Element = {
        return makeCard()
     }()
+
+    func transparentMaskViewBackgroundColor() -> UIColor {
+        let alpha: CGFloat = 0.075
+        let colorMaskForLight = UIColor.black.withAlphaComponent(alpha)
+        let colorMaskForDark = UIColor.white.withAlphaComponent(alpha)
+
+        return viewModel.appearance.colors.componentBackground.isBright
+        ? UIColor.dynamic(light: colorMaskForLight,
+                          dark: colorMaskForDark)
+        : UIColor.dynamic(light: colorMaskForDark,
+                          dark: colorMaskForLight)
+    }
 }
 
 // MARK: ElementDelegate

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/ViewControllers/UpdatePaymentMethodViewController.swift

@@ -86,36 +86,57 @@ final class UpdatePaymentMethodViewController: UIViewController {
 
     private lazy var removeButton: UIButton = {
         let button = UIButton(type: .custom)
+        let font = viewModel.appearance.primaryButton.font ?? viewModel.appearance.scaledFont(for: viewModel.appearance.font.base.medium, style: .callout, maximumPointSize: 25)
         if #available(iOS 15.0, *) {
             var configuration = UIButton.Configuration.bordered()
             configuration.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 16, bottom: 10, trailing: 16)
             configuration.baseBackgroundColor = .clear
+            configuration.background.cornerRadius = viewModel.appearance.cornerRadius
+            configuration.background.strokeWidth = viewModel.appearance.selectedBorderWidth ?? viewModel.appearance.borderWidth + 1
+            configuration.background.strokeColor = viewModel.appearance.colors.danger
+            configuration.titleAlignment = .center
+            configuration.attributedTitle = AttributedString(.Localized.remove, attributes: AttributeContainer([.font: font, .foregroundColor: viewModel.appearance.colors.danger]))
             button.configuration = configuration
         } else {
             button.contentEdgeInsets = UIEdgeInsets(top: 10, left: 16, bottom: 10, right: 16)
+            button.setTitleColor(viewModel.appearance.colors.danger, for: .normal)
+            button.setTitleColor(viewModel.appearance.colors.danger.disabledColor, for: .highlighted)
+            button.layer.borderColor = viewModel.appearance.colors.danger.cgColor
+            button.layer.borderWidth = viewModel.appearance.selectedBorderWidth ?? viewModel.appearance.borderWidth + 1
+            button.layer.cornerRadius = viewModel.appearance.cornerRadius
+            button.setTitle(.Localized.remove, for: .normal)
+            button.titleLabel?.textAlignment = .center
+            button.titleLabel?.font = font
+            button.titleLabel?.adjustsFontForContentSizeCategory = true
         }
-        button.setTitleColor(viewModel.appearance.colors.danger, for: .normal)
-        button.setTitleColor(viewModel.appearance.colors.danger.disabledColor, for: .highlighted)
         button.addTarget(self, action: #selector(buttonTouchDown(_:)), for: .touchDown)
         button.addTarget(self, action: #selector(buttonTouchUp(_:)), for: [.touchUpInside, .touchUpOutside])
-        button.layer.borderColor = viewModel.appearance.colors.danger.cgColor
-        button.layer.borderWidth = viewModel.appearance.primaryButton.borderWidth
-        button.layer.cornerRadius = viewModel.appearance.cornerRadius
-        button.setTitle(.Localized.remove, for: .normal)
-        button.titleLabel?.textAlignment = .center
-        button.titleLabel?.font = viewModel.appearance.scaledFont(for: viewModel.appearance.font.base.medium, style: .callout, maximumPointSize: 25)
-        button.titleLabel?.adjustsFontForContentSizeCategory = true
         button.addTarget(self, action: #selector(removePaymentMethod), for: .touchUpInside)
+        button.translatesAutoresizingMaskIntoConstraints = false
         button.isHidden = !viewModel.canRemove
         return button
     }()
 
     @objc private func buttonTouchDown(_ button: UIButton) {
-        button.layer.borderColor = viewModel.appearance.colors.danger.disabledColor.cgColor
+        if #available(iOS 15.0, *)  {
+            button.configuration?.attributedTitle?.foregroundColor = viewModel.appearance.colors.danger.disabledColor
+            button.configuration?.background.strokeColor = viewModel.appearance.colors.danger.disabledColor
+        }
+        else {
+            button.setTitleColor(viewModel.appearance.colors.danger.disabledColor, for: .normal)
+            button.layer.borderColor = viewModel.appearance.colors.danger.disabledColor.cgColor
+        }
     }
 
     @objc private func buttonTouchUp(_ button: UIButton) {
-        button.layer.borderColor = viewModel.appearance.colors.danger.cgColor
+        if #available(iOS 15.0, *)  {
+            button.configuration?.attributedTitle?.foregroundColor = viewModel.appearance.colors.danger
+            button.configuration?.background.strokeColor = viewModel.appearance.colors.danger
+        }
+        else {
+            button.setTitleColor(viewModel.appearance.colors.danger, for: .normal)
+            button.layer.borderColor = viewModel.appearance.colors.danger.cgColor
+        }
     }
 
     private lazy var paymentMethodForm: UIView = {

StripeUICore/StripeUICore/Source/Elements/ElementsUI.swift

@@ -99,8 +99,8 @@ import UIKit
         public var caption = UIFont.systemFont(ofSize: 12, weight: .regular).scaled(
                                             withTextStyle: .caption1,
                                             maximumPointSize: 20)
-        public var footnote = UIFont.preferredFont(forTextStyle: .footnote, weight: .regular, maximumPointSize: 20)
-        public var smallFootnote = UIFont.preferredFont(forTextStyle: .footnote, weight: .medium, maximumPointSize: 10)
+        public var footnote = UIFont.preferredFont(forTextStyle: .footnote, weight: .regular, maximumPointSize: 15)
+        public var smallFootnote = UIFontMetrics(forTextStyle: .footnote).scaledFont(for: .systemFont(ofSize: 11.5, weight: .medium))
         public var footnoteEmphasis = UIFont.preferredFont(forTextStyle: .footnote, weight: .medium, maximumPointSize: 20)
     }
 

StripeUICore/StripeUICore/Source/Elements/Section/SectionView.swift

@@ -37,6 +37,7 @@ final class SectionView: UIView {
         let stack = UIStackView(arrangedSubviews: [titleLabel, containerView, errorOrSubLabel])
         stack.axis = .vertical
         stack.spacing = 4
+        stack.setCustomSpacing(8, after: containerView)
         addAndPinSubview(stack)
 
         update(with: viewModel)