Paywalls: tweaking colors on template 2&3 (#3011)

RevenueCat · Aug 15, 2023 · 9956b2c · 9956b2c
1 parent b523646
commit 9956b2c
Show file tree

Hide file tree

Showing 34 changed files with 36 additions and 5 deletions.
diff --git a/RevenueCatUI/Data/TestData.swift b/RevenueCatUI/Data/TestData.swift
@@ -237,12 +237,22 @@ internal enum TestData {
                 images: Self.images,
                 colors: .init(
                     light: .init(
+                        background: "#FAFAFA",
+                        text1: "#000000",
+                        text2: "#2A2A2A",
+                        callToActionBackground: "#222222",
+                        callToActionForeground: "#FFFFFF",
+                        accent1: "#F4E971",
+                        accent2: "#121212"
+                    ),
+                    dark: .init(
                         background: "#272727",
                         text1: "#FFFFFF",
                         text2: "#B7B7B7",
                         callToActionBackground: "#FFFFFF",
                         callToActionForeground: "#000000",
-                        accent1: "#F4E971"
+                        accent1: "#F4E971",
+                        accent2: "#4A4A4A"
                     )
                 ),
                 termsOfServiceURL: URL(string: "https://revenuecat.com/tos")!

diff --git a/RevenueCatUI/Helpers/PreviewHelpers.swift b/RevenueCatUI/Helpers/PreviewHelpers.swift
@@ -86,6 +86,7 @@ struct PreviewableTemplate<T: TemplateViewType>: View {
             self.creator(configuration)
                 .environmentObject(self.introEligibilityViewModel)
                 .environmentObject(PreviewHelpers.purchaseHandler)
+                .background(configuration.backgroundView)
                 .task {
                     await self.introEligibilityViewModel.computeEligibility(
                         for: configuration.packages

diff --git a/RevenueCatUI/Templates/Template2View.swift b/RevenueCatUI/Templates/Template2View.swift
@@ -128,7 +128,7 @@ struct Template2View: TemplateViewType {
                 EmptyView()
             } else {
                 RoundedRectangle(cornerRadius: Self.cornerRadius)
-                    .stroke(self.configuration.colors.text1Color, lineWidth: 2)
+                    .stroke(self.configuration.colors.text1Color.opacity(Self.fadedColorOpacity), lineWidth: 2)
             }
         }
         .background {
@@ -156,7 +156,7 @@ struct Template2View: TemplateViewType {
                         EmptyView()
                     } else {
                         Circle()
-                            .foregroundColor(self.selectedBackgroundColor.opacity(0.5))
+                            .foregroundColor(self.selectedBackgroundColor.opacity(Self.fadedColorOpacity))
                     }
                 }
 
@@ -239,6 +239,8 @@ struct Template2View: TemplateViewType {
     private var appIconSize: CGFloat = 100
     @ScaledMetric(relativeTo: .largeTitle)
     private var iconSize: CGFloat = 140
+
+    private static let fadedColorOpacity: CGFloat = 0.3
     private static let cornerRadius: CGFloat = 15
     private static let packageButtonAlignment: Alignment = .leading
 

diff --git a/RevenueCatUI/Templates/Template3View.swift b/RevenueCatUI/Templates/Template3View.swift
@@ -126,7 +126,7 @@ private struct FeatureView: View {
                         .padding(self.iconPadding)
                 }
             }
-            .foregroundColor(.black)
+            .foregroundColor(self.colors.accent2Color)
             .frame(width: self.iconSize, height: self.iconSize)
     }
 

diff --git a/Tests/RevenueCatUITests/Templates/Template3ViewTests.swift b/Tests/RevenueCatUITests/Templates/Template3ViewTests.swift
@@ -15,6 +15,14 @@ class Template3ViewTests: BaseSnapshotTest {
         .snapshot(size: Self.fullScreenSize)
     }
 
+    func testDarkMode() {
+        PaywallView(offering: Self.offering.withLocalImages,
+                    introEligibility: Self.eligibleChecker,
+                    purchaseHandler: Self.purchaseHandler)
+        .environment(\.colorScheme, .dark)
+        .snapshot(size: Self.fullScreenSize)
+    }
+
     func testCustomFont() {
         PaywallView(offering: Self.offering.withLocalImages,
                     fonts: Self.fonts,

diff --git a/...ates/__Snapshots__/OtherPaywallViewTests/iOS16-testDefaultDarkModePaywall.1.png b/...ates/__Snapshots__/OtherPaywallViewTests/iOS16-testDefaultDarkModePaywall.1.png
diff --git a/...ts/Templates/__Snapshots__/OtherPaywallViewTests/iOS16-testDefaultPaywall.1.png b/...ts/Templates/__Snapshots__/OtherPaywallViewTests/iOS16-testDefaultPaywall.1.png
diff --git a/...ates/__Snapshots__/OtherPaywallViewTests/iOS16-testLoadingCardPaywallView.1.png b/...ates/__Snapshots__/OtherPaywallViewTests/iOS16-testLoadingCardPaywallView.1.png
diff --git a/...emplates/__Snapshots__/OtherPaywallViewTests/iOS16-testLoadingPaywallView.1.png b/...emplates/__Snapshots__/OtherPaywallViewTests/iOS16-testLoadingPaywallView.1.png
diff --git a/...ates/__Snapshots__/OtherPaywallViewTests/iOS17-testDefaultDarkModePaywall.1.png b/...ates/__Snapshots__/OtherPaywallViewTests/iOS17-testDefaultDarkModePaywall.1.png
diff --git a/...ts/Templates/__Snapshots__/OtherPaywallViewTests/iOS17-testDefaultPaywall.1.png b/...ts/Templates/__Snapshots__/OtherPaywallViewTests/iOS17-testDefaultPaywall.1.png
diff --git a/...ates/__Snapshots__/OtherPaywallViewTests/iOS17-testLoadingCardPaywallView.1.png b/...ates/__Snapshots__/OtherPaywallViewTests/iOS17-testLoadingCardPaywallView.1.png
diff --git a/...emplates/__Snapshots__/OtherPaywallViewTests/iOS17-testLoadingPaywallView.1.png b/...emplates/__Snapshots__/OtherPaywallViewTests/iOS17-testLoadingPaywallView.1.png
diff --git a/...ts/Templates/__Snapshots__/PaywallViewLocalizationTests/iOS16-testSpanish.1.png b/...ts/Templates/__Snapshots__/PaywallViewLocalizationTests/iOS16-testSpanish.1.png
diff --git a/...ts/Templates/__Snapshots__/PaywallViewLocalizationTests/iOS17-testSpanish.1.png b/...ts/Templates/__Snapshots__/PaywallViewLocalizationTests/iOS17-testSpanish.1.png
diff --git a/...tUITests/Templates/__Snapshots__/Template2ViewTests/iOS16-testCardPaywall.1.png b/...tUITests/Templates/__Snapshots__/Template2ViewTests/iOS16-testCardPaywall.1.png
diff --git a/...atUITests/Templates/__Snapshots__/Template2ViewTests/iOS16-testCustomFont.1.png b/...atUITests/Templates/__Snapshots__/Template2ViewTests/iOS16-testCustomFont.1.png
diff --git a/...eCatUITests/Templates/__Snapshots__/Template2ViewTests/iOS16-testDarkMode.1.png b/...eCatUITests/Templates/__Snapshots__/Template2ViewTests/iOS16-testDarkMode.1.png
diff --git a/...ITests/Templates/__Snapshots__/Template2ViewTests/iOS16-testSamplePaywall.1.png b/...ITests/Templates/__Snapshots__/Template2ViewTests/iOS16-testSamplePaywall.1.png
diff --git a/...tUITests/Templates/__Snapshots__/Template2ViewTests/iOS17-testCardPaywall.1.png b/...tUITests/Templates/__Snapshots__/Template2ViewTests/iOS17-testCardPaywall.1.png
diff --git a/...atUITests/Templates/__Snapshots__/Template2ViewTests/iOS17-testCustomFont.1.png b/...atUITests/Templates/__Snapshots__/Template2ViewTests/iOS17-testCustomFont.1.png
diff --git a/...eCatUITests/Templates/__Snapshots__/Template2ViewTests/iOS17-testDarkMode.1.png b/...eCatUITests/Templates/__Snapshots__/Template2ViewTests/iOS17-testDarkMode.1.png
diff --git a/...ITests/Templates/__Snapshots__/Template2ViewTests/iOS17-testSamplePaywall.1.png b/...ITests/Templates/__Snapshots__/Template2ViewTests/iOS17-testSamplePaywall.1.png
diff --git a/...tUITests/Templates/__Snapshots__/Template3ViewTests/iOS16-testCardPaywall.1.png b/...tUITests/Templates/__Snapshots__/Template3ViewTests/iOS16-testCardPaywall.1.png
diff --git a/...Templates/__Snapshots__/Template3ViewTests/iOS16-testCondensedCardPaywall.1.png b/...Templates/__Snapshots__/Template3ViewTests/iOS16-testCondensedCardPaywall.1.png
diff --git a/...atUITests/Templates/__Snapshots__/Template3ViewTests/iOS16-testCustomFont.1.png b/...atUITests/Templates/__Snapshots__/Template3ViewTests/iOS16-testCustomFont.1.png
diff --git a/...eCatUITests/Templates/__Snapshots__/Template3ViewTests/iOS16-testDarkMode.1.png b/...eCatUITests/Templates/__Snapshots__/Template3ViewTests/iOS16-testDarkMode.1.png
diff --git a/...ITests/Templates/__Snapshots__/Template3ViewTests/iOS16-testSamplePaywall.1.png b/...ITests/Templates/__Snapshots__/Template3ViewTests/iOS16-testSamplePaywall.1.png
diff --git a/...tUITests/Templates/__Snapshots__/Template3ViewTests/iOS17-testCardPaywall.1.png b/...tUITests/Templates/__Snapshots__/Template3ViewTests/iOS17-testCardPaywall.1.png
diff --git a/...Templates/__Snapshots__/Template3ViewTests/iOS17-testCondensedCardPaywall.1.png b/...Templates/__Snapshots__/Template3ViewTests/iOS17-testCondensedCardPaywall.1.png
diff --git a/...atUITests/Templates/__Snapshots__/Template3ViewTests/iOS17-testCustomFont.1.png b/...atUITests/Templates/__Snapshots__/Template3ViewTests/iOS17-testCustomFont.1.png
diff --git a/...eCatUITests/Templates/__Snapshots__/Template3ViewTests/iOS17-testDarkMode.1.png b/...eCatUITests/Templates/__Snapshots__/Template3ViewTests/iOS17-testDarkMode.1.png
diff --git a/...ITests/Templates/__Snapshots__/Template3ViewTests/iOS17-testSamplePaywall.1.png b/...ITests/Templates/__Snapshots__/Template3ViewTests/iOS17-testSamplePaywall.1.png
diff --git a/Tests/TestingApps/SimpleApp/SimpleApp/SamplePaywalls.swift b/Tests/TestingApps/SimpleApp/SimpleApp/SamplePaywalls.swift
@@ -260,12 +260,22 @@ private extension SamplePaywallLoader {
                 images: Self.images,
                 colors: .init(
                     light: .init(
+                        background: "#FAFAFA",
+                        text1: "#000000",
+                        text2: "#2A2A2A",
+                        callToActionBackground: "#222222",
+                        callToActionForeground: "#FFFFFF",
+                        accent1: "#F4E971",
+                        accent2: "#121212"
+                    ),
+                    dark: .init(
                         background: "#272727",
                         text1: "#FFFFFF",
                         text2: "#B7B7B7",
                         callToActionBackground: "#FFFFFF",
                         callToActionForeground: "#000000",
-                        accent1: "#F4E971"
+                        accent1: "#F4E971",
+                        accent2: "#4A4A4A"
                     )
                 ),
                 termsOfServiceURL: Self.tosURL