Paywalls: more polish from design feedback (#2932)

RevenueCatUI/Templates/MultiPackageBoldTemplate.swift

@@ -40,8 +40,6 @@ struct MultiPackageBoldTemplate: TemplateViewType {
     @ViewBuilder
     var content: some View {
         VStack(spacing: 10) {
-            self.iconImage
-
             self.scrollableContent
                 .scrollableIfNecessary()
 
@@ -64,6 +62,10 @@ struct MultiPackageBoldTemplate: TemplateViewType {
         VStack {
             Spacer()
 
+            self.iconImage
+
+            Spacer()
+
             Text(self.selectedLocalization.title)
                 .foregroundColor(self.configuration.colors.text1Color)
                 .font(.largeTitle.bold())
@@ -98,29 +100,12 @@ struct MultiPackageBoldTemplate: TemplateViewType {
                 .buttonStyle(PackageButtonStyle(isSelected: isSelected))
             }
         }
-        .padding(.bottom)
     }
 
     @ViewBuilder
     private func packageButton(_ package: TemplateViewConfiguration.Package, selected: Bool) -> some View {
-        let alignment: Alignment = .leading
-
-        VStack(alignment: alignment.horizontal, spacing: 5) {
-            HStack {
-                Image(systemName: "checkmark.circle.fill")
-                    .hidden(if: !selected)
-                    .overlay {
-                        if selected {
-                            EmptyView()
-                        } else {
-                            Circle()
-                                .foregroundColor(self.selectedBackgroundColor.opacity(0.5))
-                        }
-                    }
-
-                Text(self.localization(for: package.content).offerName ?? package.content.productName)
-            }
-            .foregroundColor(self.configuration.colors.accent1Color)
+        VStack(alignment: Self.packageButtonAlignment.horizontal, spacing: 5) {
+            self.packageButtonTitle(package, selected: selected)
 
             IntroEligibilityStateView(
                 textWithNoIntroOffer: package.localization.offerDetails,
@@ -129,15 +114,15 @@ struct MultiPackageBoldTemplate: TemplateViewType {
                 foregroundColor: selected
                     ? self.configuration.colors.backgroundColor
                     : self.configuration.colors.text1Color,
-                alignment: alignment
+                alignment: Self.packageButtonAlignment
             )
             .fixedSize(horizontal: false, vertical: true)
             .font(.body)
         }
         .font(.body.weight(.medium))
         .padding()
         .multilineTextAlignment(.leading)
-        .frame(maxWidth: .infinity, alignment: alignment)
+        .frame(maxWidth: .infinity, alignment: Self.packageButtonAlignment)
         .overlay {
             if selected {
                 EmptyView()
@@ -156,6 +141,31 @@ struct MultiPackageBoldTemplate: TemplateViewType {
         }
     }
 
+    private func packageButtonTitle(
+        _ package: TemplateViewConfiguration.Package,
+        selected: Bool
+    ) -> some View {
+        HStack {
+            Image(systemName: "checkmark.circle.fill")
+                .hidden(if: !selected)
+                .overlay {
+                    if selected {
+                        EmptyView()
+                    } else {
+                        Circle()
+                            .foregroundColor(self.selectedBackgroundColor.opacity(0.5))
+                    }
+                }
+
+            Text(self.localization(for: package.content).offerName ?? package.content.productName)
+        }
+        .foregroundColor(
+            selected
+            ? self.configuration.colors.accent1Color
+            : self.configuration.colors.text1Color
+        )
+    }
+
     private var subscribeButton: some View {
         PurchaseButton(
             package: self.selectedPackage,
@@ -177,17 +187,14 @@ struct MultiPackageBoldTemplate: TemplateViewType {
             } else {
                 RemoteImage(url: url)
             }
-        } else {
-            DebugErrorView("Template configuration is missing background URL",
-                           releaseBehavior: .emptyView)
         }
     }
 
     @ViewBuilder
     private var iconImage: some View {
         Group {
             if let url = self.configuration.iconImageURL {
-                RemoteImage(url: url, aspectRatio: 1, maxWidth: Self.iconSize)
+                RemoteImage(url: url, aspectRatio: 1, maxWidth: self.iconSize)
                     .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
             } else {
                 // Placeholder to be able to add a consistent padding
@@ -206,8 +213,10 @@ struct MultiPackageBoldTemplate: TemplateViewType {
 
     private var selectedBackgroundColor: Color { self.configuration.colors.accent2Color }
 
-    private static let iconSize: CGFloat = 100
+    @ScaledMetric(relativeTo: .largeTitle)
+    private var iconSize: CGFloat = 140
     private static let cornerRadius: CGFloat = 15
+    private static let packageButtonAlignment: Alignment = .leading
 
 }
 

RevenueCatUI/Templates/OnePackageStandardTemplate.swift

@@ -19,33 +19,11 @@ struct OnePackageStandardTemplate: TemplateViewType {
 
     var body: some View {
         VStack(spacing: self.configuration.mode.verticalSpacing) {
-            VStack(spacing: self.configuration.mode.verticalSpacing) {
-                self.headerImage
-
-                Group {
-                    Text(verbatim: self.localization.title)
-                        .font(self.configuration.mode.titleFont)
-                        .fontWeight(.heavy)
-                        .padding(
-                            self.configuration.mode.displaySubtitle
-                                ? .bottom
-                                : []
-                        )
-
-                    if self.configuration.mode.displaySubtitle, let subtitle = self.localization.subtitle {
-                        Text(verbatim: subtitle)
-                            .font(self.configuration.mode.subtitleFont)
-                    }
-                }
-                .padding(.horizontal)
-            }
-            .foregroundColor(self.configuration.colors.text1Color)
-            .multilineTextAlignment(.center)
-            .scrollable(if: self.configuration.mode.isFullScreen)
-            .scrollContentBackground(.hidden)
-            .scrollBounceBehaviorBasedOnSize()
-            .scrollIndicators(.automatic)
-            .edgesIgnoringSafeArea(self.configuration.mode.isFullScreen ? .top : [])
+            self.scrollableContent
+                .scrollableIfNecessary()
+                .scrollContentBackground(.hidden)
+                .scrollBounceBehaviorBasedOnSize()
+                .scrollIndicators(.automatic)
 
             if case .fullScreen = self.configuration.mode {
                 Spacer()
@@ -58,6 +36,7 @@ struct OnePackageStandardTemplate: TemplateViewType {
                 foregroundColor: self.configuration.colors.text1Color
             )
             .font(self.configuration.mode.offerDetailsFont)
+            .multilineTextAlignment(.center)
 
             self.button
                 .padding(.horizontal)
@@ -70,6 +49,37 @@ struct OnePackageStandardTemplate: TemplateViewType {
         }
     }
 
+    @ViewBuilder
+    private var scrollableContent: some View {
+        VStack(spacing: self.configuration.mode.verticalSpacing) {
+            self.headerImage
+
+            Spacer()
+
+            Group {
+                Text(verbatim: self.localization.title)
+                    .font(self.configuration.mode.titleFont)
+                    .fontWeight(.heavy)
+                    .padding(
+                        self.configuration.mode.displaySubtitle
+                            ? .bottom
+                            : []
+                    )
+
+                if self.configuration.mode.displaySubtitle, let subtitle = self.localization.subtitle {
+                    Text(verbatim: subtitle)
+                        .font(self.configuration.mode.subtitleFont)
+                }
+            }
+            .padding(.horizontal, 20)
+
+            Spacer()
+        }
+        .foregroundColor(self.configuration.colors.text1Color)
+        .multilineTextAlignment(.center)
+        .edgesIgnoringSafeArea(self.configuration.mode.isFullScreen ? .top : [])
+    }
+
     @ViewBuilder
     private var asyncImage: some View {
         if let headerImage = self.configuration.headerImageURL {
@@ -86,7 +96,7 @@ struct OnePackageStandardTemplate: TemplateViewType {
             self.asyncImage
                 .clipShape(
                     Circle()
-                        .offset(y: -140)
+                        .offset(y: -120)
                         .scale(3.0)
                 )
                 .padding(.bottom)

RevenueCatUI/Views/PurchaseButton.swift

@@ -53,8 +53,11 @@ struct PurchaseButton: View {
         .controlSize(self.mode.buttonSize)
         .buttonStyle(.borderedProminent)
         .frame(maxWidth: .infinity)
+        .dynamicTypeSize(...Self.maximumDynamicTypeSize)
     }
 
+    private static let maximumDynamicTypeSize: DynamicTypeSize = .accessibility3
+
 }
 
 @available(iOS 16.0, macOS 13.0, tvOS 16.0, *)