Paywalls: improved unselected package background color (#3079)

From the design feedback.
RevenueCat · Sep 15, 2023 · e830d32 · e830d32
1 parent 8598910
commit e830d32
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 19 deletions.
diff --git a/RevenueCatUI/Data/PaywallViewMode+Extensions.swift b/RevenueCatUI/Data/PaywallViewMode+Extensions.swift
@@ -46,4 +46,11 @@ extension PaywallViewMode {
         }
     }
 
+    var shouldDisplayBackground: Bool {
+        switch self {
+        case .fullScreen: return true
+        case .footer, .condensedFooter: return false
+        }
+    }
+
 }
diff --git a/RevenueCatUI/Data/TemplateViewConfiguration+Images.swift b/RevenueCatUI/Data/TemplateViewConfiguration+Images.swift
@@ -17,6 +17,17 @@ extension TemplateViewConfiguration {
 
 }
 
+@available(iOS 15.0, macOS 12.0, tvOS 15.0, *)
+extension TemplateViewConfiguration {
+
+    var backgroundImageURLToDisplay: URL? {
+        guard self.mode.shouldDisplayBackground else { return nil }
+
+        return self.backgroundImageURL
+    }
+
+}
+
 @available(iOS 15.0, macOS 12.0, tvOS 15.0, *)
 private extension TemplateViewConfiguration {
 

diff --git a/RevenueCatUI/Templates/Template2View.swift b/RevenueCatUI/Templates/Template2View.swift
@@ -126,23 +126,31 @@ struct Template2View: TemplateViewType {
             if selected {
                 EmptyView()
             } else {
-                RoundedRectangle(cornerRadius: Self.cornerRadius)
+                self.roundedRectangle
                     .stroke(self.configuration.colors.text1Color.opacity(Self.fadedColorOpacity), lineWidth: 2)
             }
         }
         .background {
-            let view = RoundedRectangle(cornerRadius: Self.cornerRadius, style: .continuous)
-
             if selected {
-                view
+                self.roundedRectangle
                     .foregroundColor(self.selectedBackgroundColor)
             } else {
-                view
-                    .foregroundStyle(.thinMaterial)
+                if self.configuration.backgroundImageURLToDisplay != nil {
+                    // Blur background if there is a background image.
+                    self.roundedRectangle
+                        .foregroundStyle(.thinMaterial)
+                } else {
+                    // Otherwise the text should have enough contrast with the selected background color.
+                    EmptyView()
+                }
             }
         }
     }
 
+    private var roundedRectangle: some Shape {
+        RoundedRectangle(cornerRadius: Self.cornerRadius, style: .continuous)
+    }
+
     private func packageButtonTitle(
         _ package: TemplateViewConfiguration.Package,
         selected: Bool

diff --git a/RevenueCatUI/Views/TemplateBackgroundImageView.swift b/RevenueCatUI/Views/TemplateBackgroundImageView.swift
@@ -14,8 +14,7 @@ struct TemplateBackgroundImageView: View {
     var configuration: TemplateViewConfiguration
 
     var body: some View {
-        if self.configuration.mode.shouldDisplayBackground,
-           let url = self.configuration.backgroundImageURL {
+        if let url = self.configuration.backgroundImageURLToDisplay {
             self.image(url)
                 .unredacted()
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
@@ -35,14 +34,3 @@ struct TemplateBackgroundImageView: View {
     }
 
 }
-
-private extension PaywallViewMode {
-
-    var shouldDisplayBackground: Bool {
-        switch self {
-        case .fullScreen: return true
-        case .footer, .condensedFooter: return false
-        }
-    }
-
-}