Paywalls: some basic polish from design feedback (#2917)

PWL-28, PWL-29, PWL-30
RevenueCat · Sep 14, 2023 · 89601f1 · 89601f1
1 parent f7fbae9
commit 89601f1
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 27 deletions.
diff --git a/RevenueCatUI/Data/TestData.swift b/RevenueCatUI/Data/TestData.swift
@@ -167,17 +167,19 @@ internal enum TestData {
                 colors: .init(
                     light: .init(
                         background: "#FFFFFF",
-                        text1: "#000000",
+                        text1: "#111111",
                         callToActionBackground: "#EC807C",
                         callToActionForeground: "#FFFFFF",
-                        accent1: "#BC66FF"
+                        accent1: "#BC66FF",
+                        accent2: "#111100"
                     ),
                     dark: .init(
                         background: "#000000",
-                        text1: "#FFFFFF",
+                        text1: "#EEEEEE",
                         callToActionBackground: "#ACD27A",
                         callToActionForeground: "#000000",
-                        accent1: "#B022BB"
+                        accent1: "#B022BB",
+                        accent2: "#EEDDEE"
                     )
                 ),
                 blurredBackgroundImage: true,

diff --git a/RevenueCatUI/Templates/MultiPackageBoldTemplate.swift b/RevenueCatUI/Templates/MultiPackageBoldTemplate.swift
@@ -80,13 +80,17 @@ private struct MultiPackageTemplateContent: View {
 
     private var scrollableContent: some View {
         VStack {
+            Spacer()
+
             Text(self.selectedLocalization.title)
+                .foregroundColor(self.configuration.colors.text1Color)
                 .font(.largeTitle.bold())
 
             Spacer()
 
             Text(self.selectedLocalization.subtitle ?? "")
-                .font(.title2)
+                .foregroundColor(self.configuration.colors.text1Color)
+                .font(.title3)
 
             Spacer()
 
@@ -126,7 +130,7 @@ private struct MultiPackageTemplateContent: View {
                             EmptyView()
                         } else {
                             Circle()
-                                .foregroundColor(Self.selectedBackgroundColor.opacity(0.5))
+                                .foregroundColor(self.selectedBackgroundColor.opacity(0.5))
                         }
                     }
 
@@ -139,8 +143,8 @@ private struct MultiPackageTemplateContent: View {
                 textWithIntroOffer: package.localization.offerDetailsWithIntroOffer,
                 introEligibility: self.introEligibility[package.content],
                 foregroundColor: selected
-                    ? .white
-                    : .black,
+                    ? self.configuration.colors.backgroundColor
+                    : self.configuration.colors.text1Color,
                 alignment: alignment
             )
             .fixedSize(horizontal: false, vertical: true)
@@ -150,7 +154,6 @@ private struct MultiPackageTemplateContent: View {
         .padding()
         .multilineTextAlignment(.leading)
         .frame(maxWidth: .infinity, alignment: alignment)
-        .foregroundColor(self.configuration.colors.text1Color)
         .overlay {
             if selected {
                 EmptyView()
@@ -163,7 +166,7 @@ private struct MultiPackageTemplateContent: View {
             RoundedRectangle(cornerRadius: Self.cornerRadius, style: .continuous)
                 .foregroundColor(
                     selected
-                    ? Self.selectedBackgroundColor
+                    ? self.selectedBackgroundColor
                     : .clear
                 )
         }
@@ -211,18 +214,11 @@ private struct MultiPackageTemplateContent: View {
         .padding(.top)
     }
 
+    private var selectedBackgroundColor: Color { self.configuration.colors.accent2Color }
+
     private static let iconSize: CGFloat = 100
     private static let cornerRadius: CGFloat = 15
 
-    #if !os(macOS) && !os(watchOS)
-    private static let selectedBackgroundColor: Color = .init(
-        light: .init(white: 0.3),
-        dark: .init(white: 0.6)
-    )
-    #else
-    private static let selectedBackgroundColor: Color = .init(white: 0.3)
-    #endif
-
 }
 
 // MARK: - Extensions

diff --git a/RevenueCatUI/Templates/OnePackageStandardTemplate.swift b/RevenueCatUI/Templates/OnePackageStandardTemplate.swift
@@ -72,10 +72,10 @@ private struct OnePackageTemplateContent: View {
             IntroEligibilityStateView(
                 textWithNoIntroOffer: self.localization.offerDetails,
                 textWithIntroOffer: self.localization.offerDetailsWithIntroOffer,
-                introEligibility: self.introEligibility
+                introEligibility: self.introEligibility,
+                foregroundColor: self.configuration.colors.text1Color
             )
             .font(self.configuration.mode.offerDetailsFont)
-            .foregroundColor(self.configuration.colors.text1Color)
 
             self.button
                 .padding(.horizontal)

diff --git a/RevenueCatUI/Templates/OnePackageWithFeaturesTemplate.swift b/RevenueCatUI/Templates/OnePackageWithFeaturesTemplate.swift
@@ -101,7 +101,7 @@ private struct OnePackageWithFeaturesTemplateContent: View {
     }
 
     private var features: some View {
-        VStack(spacing: 20) {
+        VStack(spacing: 40) {
             ForEach(self.localization.features, id: \.title) { feature in
                 FeatureView(feature: feature, colors: self.configuration.colors)
             }

diff --git a/RevenueCatUI/Views/FooterView.swift b/RevenueCatUI/Views/FooterView.swift
@@ -44,6 +44,7 @@ struct FooterView: View {
         .foregroundColor(self.color)
         .font(.caption.bold())
         .padding(.horizontal)
+        .padding(.bottom, 5)
     }
 
     private var separator: some View {

diff --git a/RevenueCatUI/Views/PurchaseButton.swift b/RevenueCatUI/Views/PurchaseButton.swift
@@ -60,7 +60,7 @@ private extension PaywallViewMode {
 
     var buttonFont: Font {
         switch self {
-        case .fullScreen, .card: return .title2
+        case .fullScreen, .card: return .title3
         case .banner: return .footnote
         }
     }

diff --git a/Tests/TestingApps/SimpleApp/SimpleApp/SamplePaywalls.swift b/Tests/TestingApps/SimpleApp/SimpleApp/SamplePaywalls.swift
@@ -101,14 +101,16 @@ private extension SamplePaywallLoader {
                         text1: "#000000",
                         callToActionBackground: "#EC807C",
                         callToActionForeground: "#FFFFFF",
-                        accent1: "#BC66FF"
+                        accent1: "#BC66FF",
+                        accent2: "#222222"
                     ),
                     dark: .init(
                         background: "#000000",
                         text1: "#FFFFFF",
                         callToActionBackground: "#ACD27A",
                         callToActionForeground: "#000000",
-                        accent1: "#B022BB"
+                        accent1: "#B022BB",
+                        accent2: "#CCCCCC"
                     )
                 ),
                 blurredBackgroundImage: true,
@@ -130,7 +132,7 @@ private extension SamplePaywallLoader {
         return .init(
             template: .onePackageWithFeatures,
             config: .init(
-                packages: [.monthly],
+                packages: [.annual],
                 images: Self.images,
                 colors: .init(
                     light: .init(
@@ -149,7 +151,7 @@ private extension SamplePaywallLoader {
                 callToAction: "Start",
                 callToActionWithIntroOffer: "Start your {{ intro_duration }} free",
                 offerDetails: "Only {{ price }} per {{ period }}",
-                offerDetailsWithIntroOffer: "First {{ intro_duration }} free, then\n{{ price }} per {{ period }} ({{ price_per_month }} per month)",
+                offerDetailsWithIntroOffer: "First {{ intro_duration }} free, then\n{{ price }} per year ({{ price_per_month }} per month)",
                 features: [
                     .init(title: "Today",
                           content: "Full access to 1000+ workouts plus free meal plan worth $49.99.",