Paywalls: improved FooterView (#3171)

### Motivation
The buttons at the bottom of the paywall templates underneath the CTA
are smaller than 44pt at the default font size and visually are too
tight to the CTA button.

### Description
I set the minimum height to 44pt for all of the buttons in the footer
view and then updated the template layouts to account for the change.

I tested using the SimpleApp in multiple simulators. Unfortunately I do
not have iOS 15 simulators and can't seem to download them in Xcode so I
wasn't able to test this against iOS 15 yet which I know we've run into
layout issues with before.

### Screenshots
<img width="766" alt="image"
src="https://github.com/RevenueCat/purchases-ios/assets/8403025/b637783a-eb3b-4bbe-aa21-6f51162d79dd">

<img width="792" alt="image"
src="https://github.com/RevenueCat/purchases-ios/assets/8403025/0ecf1942-cd63-4ad4-9f48-bc61960faafd">

<img width="1208" alt="image"
src="https://github.com/RevenueCat/purchases-ios/assets/8403025/00b34d16-54fa-4004-9117-04f4e229f133">

<img width="1076" alt="image"
src="https://github.com/RevenueCat/purchases-ios/assets/8403025/787acd17-a966-40dc-974c-4276d848569f">

<img width="897" alt="image"
src="https://github.com/RevenueCat/purchases-ios/assets/8403025/a59d8150-b1dc-4dd0-8469-14360a9cbc38">


<img width="816" alt="image"
src="https://github.com/RevenueCat/purchases-ios/assets/8403025/f45cf75d-4a44-4c51-b8b1-58034d9af08b">

---------

Co-authored-by: Charlie Chapman <charlie.chapman@revenuecat.com>
Co-authored-by: NachoSoto <ignaciosoto90@gmail.com>

RevenueCatUI/Data/Constants.swift

@@ -27,6 +27,13 @@ enum Constants {
     /// For UI elements that wouldn't make sense to keep scaling up forever
     static let maximumDynamicTypeSize: DynamicTypeSize = .accessibility3
 
+    /// See https://developer.apple.com/design/human-interface-guidelines/buttons#Best-practices
+    #if swift(>=5.9) && os(visionOS)
+    static let minimumButtonHeight: CGFloat = 60
+    #else
+    static let minimumButtonHeight: CGFloat = 44
+    #endif
+
     static func defaultHorizontalPaddingLength(_ idiom: UserInterfaceIdiom) -> CGFloat? {
         if idiom == .pad {
             return 24

RevenueCatUI/Templates/Template1View.swift

@@ -51,6 +51,7 @@ struct Template1View: TemplateViewType {
             .font(self.font(for: .callout))
             .multilineTextAlignment(.center)
             .defaultHorizontalPadding()
+            .padding(.top, self.defaultVerticalPaddingLength)
 
             self.button
                 .defaultHorizontalPadding()

RevenueCatUI/Templates/Template2View.swift

@@ -71,6 +71,7 @@ struct Template2View: TemplateViewType {
         .animation(Constants.fastAnimation, value: self.selectedPackage)
         .multilineTextAlignment(.center)
         .frame(maxHeight: .infinity)
+        .padding(.top, self.defaultVerticalPaddingLength)
     }
 
     private var scrollableContent: some View {
@@ -122,7 +123,7 @@ struct Template2View: TemplateViewType {
                 .buttonStyle(PackageButtonStyle(isSelected: isSelected))
             }
         }
-        .padding([.horizontal, .top], self.defaultHorizontalPaddingLength)
+        .padding(.horizontal, self.defaultHorizontalPaddingLength)
 
         Spacer()
     }

RevenueCatUI/Templates/Template3View.swift

@@ -76,7 +76,6 @@ struct Template3View: TemplateViewType {
                 introEligibility: self.introEligibility,
                 purchaseHandler: self.purchaseHandler
             )
-            .padding(.bottom)
 
             FooterView(configuration: self.configuration,
                        purchaseHandler: self.purchaseHandler)

RevenueCatUI/Views/FooterView.swift

@@ -30,7 +30,7 @@ struct FooterView: View {
 
     init(
         configuration: TemplateViewConfiguration,
-        bold: Bool = true,
+        bold: Bool = false,
         purchaseHandler: PurchaseHandler,
         displayingAllPlans: Binding<Bool>? = nil
     ) {
@@ -49,7 +49,7 @@ struct FooterView: View {
         mode: PaywallViewMode,
         fonts: PaywallFontProvider,
         color: Color,
-        bold: Bool = true,
+        bold: Bool = false,
         purchaseHandler: PurchaseHandler,
         displayingAllPlans: Binding<Bool>?
     ) {
@@ -117,6 +117,7 @@ struct FooterView: View {
         } label: {
             Text("All subscriptions", bundle: .module)
         }
+        .frame(minHeight: Constants.minimumButtonHeight)
     }
 
     private var separator: some View {
@@ -134,7 +135,7 @@ struct FooterView: View {
     fileprivate var font: Font.TextStyle {
         return self.interfaceIdiom == .pad
         ? .callout
-        : .caption
+        : .footnote
     }
 
 }
@@ -150,10 +151,10 @@ private struct SeparatorView: View {
             .accessibilityHidden(true)
     }
 
-    @ScaledMetric(relativeTo: .caption)
+    @ScaledMetric(relativeTo: .footnote)
     private var separatorSize: CGFloat = 4
 
-    @ScaledMetric(relativeTo: .caption)
+    @ScaledMetric(relativeTo: .footnote)
     private var boldSeparatorSize: CGFloat = 5
 }
 
@@ -179,6 +180,7 @@ private struct RestorePurchasesButton: View {
                 Text("Restore purchases", bundle: .module)
             }
         }
+        .frame(minHeight: Constants.minimumButtonHeight)
         .buttonStyle(.plain)
         .alert(isPresented: self.$displayRestoredAlert) {
             Alert(title: Text("Purchases restored successfully!", bundle: .module))
@@ -224,6 +226,7 @@ private struct LinkButton: View {
             ),
             destination: self.url
         )
+        .frame(minHeight: Constants.minimumButtonHeight)
     }
 
 }

Tests/purchases-ios-snapshots-commit

@@ -1 +1 @@
-82d84e2e241db3853e487cb8718a22d112dfba8f
+58e1e2b348e67f180562a49541247d0f0796050e