[Paywalls V2] Updated outdated image component properties

RevenueCatUI/Templates/V2/Components/Image/ImageComponentView.swift

@@ -85,13 +85,15 @@ struct ImageComponentView: View {
             // WIP: Fix this later when accessibility info is available
             .accessibilityHidden(true)
             // WIP: Need to replace this gradient with the better one
-            .overlay(
-                LinearGradient(
-                    gradient: Gradient(colors: style.gradientColors),
-                    startPoint: .top,
-                    endPoint: .bottom
+            .applyIfLet(style.colorOverlay, apply: { view, colorOverlay in
+                view.overlay(
+                    Color.clear
+                        .backgroundStyle(
+                            .color(colorOverlay),
+                            uiConfigProvider: viewModel.uiConfigProvider
+                        )
                 )
-            )
+            })
             // WIP: this needs more shapes and borders
             // WIP: this might also need dropshadow
             .shape(border: nil,
@@ -187,9 +189,10 @@ struct ImageComponentView_Previews: PreviewProvider {
                             )
                         ),
                         fitMode: .fill,
-                        gradientColors: [
-                            "#ffffff00", "#ffffff00", "#ffffffff"
-                        ]
+                        colorOverlay: .init(light: .linear(0, [
+                            .init(color: "#ffffff", percent: 0),
+                            .init(color: "#ffffff00", percent: 40)
+                        ]))
                     )
                 )
             )

RevenueCatUI/Templates/V2/Components/Image/ImageComponentViewModel.swift

@@ -24,7 +24,7 @@ class ImageComponentViewModel {
     private var introOfferEligibilityContext: IntroOfferEligibilityContext
 
     private let localizationProvider: LocalizationProvider
-    private let uiConfigProvider: UIConfigProvider
+    let uiConfigProvider: UIConfigProvider
     private let component: PaywallComponent.ImageComponent
 
     private let imageInfo: PaywallComponent.ThemeImageUrls
@@ -71,7 +71,11 @@ class ImageComponentViewModel {
             size: partial?.size ?? self.component.size,
             fitMode: partial?.fitMode ?? self.component.fitMode,
             maskShape: partial?.maskShape ?? self.component.maskShape,
-            gradientColors: partial?.gradientColors ?? self.component.gradientColors
+            colorOverlay: partial?.colorOverlay ?? self.component.colorOverlay,
+            padding: partial?.padding ?? self.component.padding,
+            margin: partial?.margin ?? self.component.margin,
+            border: partial?.border ?? self.component.border,
+            shadow: partial?.shadow ?? self.component.shadow
         )
 
         apply(style)
@@ -97,7 +101,11 @@ struct LocalizedImagePartial: PresentedPartial {
                 overrideSourceLid: otherPartial?.overrideSourceLid ?? basePartial?.overrideSourceLid,
                 fitMode: otherPartial?.fitMode ?? basePartial?.fitMode,
                 maskShape: otherPartial?.maskShape ?? basePartial?.maskShape,
-                gradientColors: otherPartial?.gradientColors ?? basePartial?.gradientColors
+                colorOverlay: otherPartial?.colorOverlay ?? basePartial?.colorOverlay,
+                padding: otherPartial?.padding ?? basePartial?.padding,
+                margin: otherPartial?.margin ?? basePartial?.margin,
+                border: otherPartial?.border ?? basePartial?.border,
+                shadow: otherPartial?.shadow ?? basePartial?.shadow
             )
         )
     }
@@ -134,7 +142,11 @@ struct ImageComponentStyle {
     let darkLowResUrl: URL?
     let size: PaywallComponent.Size
     let shape: ShapeModifier.Shape?
-    let gradientColors: [Color]
+    let colorOverlay: PaywallComponent.ColorScheme?
+    let padding: PaywallComponent.Padding?
+    let margin: PaywallComponent.Padding?
+    let border: PaywallComponent.Border?
+    let shadow: PaywallComponent.Shadow?
     let contentMode: ContentMode
 
     init(
@@ -143,7 +155,11 @@ struct ImageComponentStyle {
         size: PaywallComponent.Size,
         fitMode: PaywallComponent.FitMode,
         maskShape: PaywallComponent.MaskShape? = nil,
-        gradientColors: [PaywallComponent.ColorHex]? = nil
+        colorOverlay: PaywallComponent.ColorScheme? = nil,
+        padding: PaywallComponent.Padding? = nil,
+        margin: PaywallComponent.Padding? = nil,
+        border: PaywallComponent.Border? = nil,
+        shadow: PaywallComponent.Shadow? = nil
     ) {
         self.visible = visible
         self.widthLight = source.light.width
@@ -156,7 +172,11 @@ struct ImageComponentStyle {
         self.darkLowResUrl = source.dark?.heicLowRes
         self.size = size
         self.shape = maskShape?.shape
-        self.gradientColors = gradientColors?.compactMap { $0.toColor(fallback: Color.clear) } ?? []
+        self.colorOverlay = colorOverlay
+        self.padding = padding
+        self.margin = margin
+        self.border = border
+        self.shadow = shadow
         self.contentMode = fitMode.contentMode
     }
 

RevenueCatUI/Templates/V2/Previews/TemplateComponentsViewPreviews/Template1Preview.swift

@@ -34,7 +34,10 @@ private enum Template1Preview {
             )
         ),
         fitMode: .fit,
-        gradientColors: ["#ffffff00", "#ffffff00", "#ffffffff"]
+        colorOverlay: .init(light: .linear(0, [
+            .init(color: "#ffffff", percent: 0),
+            .init(color: "#ffffff00", percent: 40)
+        ]))
     )
 
     static let title = PaywallComponent.TextComponent(

RevenueCatUI/Templates/V2/Previews/TemplateComponentsViewPreviews/Template5Preview.swift

@@ -40,8 +40,10 @@ private enum Template5Preview {
             )
         ),
         fitMode: .fill,
-        maxHeight: 200,
-        gradientColors: ["#ffffff00", "#ffffff00", "#ffffffff"]
+        colorOverlay: .init(light: .linear(0, [
+            .init(color: "#ffffff", percent: 0),
+            .init(color: "#ffffff00", percent: 40)
+        ]))
     )
 
     static let title = PaywallComponent.TextComponent(

Sources/Paywalls/Components/PaywallImageComponent.swift

@@ -18,9 +18,13 @@ public extension PaywallComponent {
         public let source: ThemeImageUrls
         public let size: Size
         public let overrideSourceLid: LocalizationKey?
-        public let maskShape: MaskShape?
-        public let gradientColors: [ColorHex]?
         public let fitMode: FitMode
+        public let maskShape: MaskShape?
+        public let colorOverlay: ColorScheme?
+        public let padding: Padding?
+        public let margin: Padding?
+        public let border: Border?
+        public let shadow: Shadow?
 
         public let overrides: ComponentOverrides<PartialImageComponent>?
 
@@ -29,9 +33,12 @@ public extension PaywallComponent {
             size: Size = .init(width: .fill, height: .fit),
             overrideSourceLid: LocalizationKey? = nil,
             fitMode: FitMode = .fit,
-            maxHeight: CGFloat? = nil,
             maskShape: MaskShape? = nil,
-            gradientColors: [ColorHex]? = [],
+            colorOverlay: ColorScheme? = nil,
+            padding: Padding? = nil,
+            margin: Padding? = nil,
+            border: Border? = nil,
+            shadow: Shadow? = nil,
             overrides: ComponentOverrides<PartialImageComponent>? = nil
         ) {
             self.type = .image
@@ -40,7 +47,11 @@ public extension PaywallComponent {
             self.overrideSourceLid = overrideSourceLid
             self.fitMode = fitMode
             self.maskShape = maskShape
-            self.gradientColors = gradientColors
+            self.colorOverlay = colorOverlay
+            self.padding = padding
+            self.margin = margin
+            self.border = border
+            self.shadow = shadow
             self.overrides = overrides
         }
 
@@ -53,8 +64,12 @@ public extension PaywallComponent {
         public let size: Size?
         public let overrideSourceLid: LocalizationKey?
         public let maskShape: MaskShape?
-        public let gradientColors: [ColorHex]?
         public let fitMode: FitMode?
+        public let colorOverlay: ColorScheme?
+        public let padding: Padding?
+        public let margin: Padding?
+        public let border: Border?
+        public let shadow: Shadow?
 
         public init(
             visible: Bool? = true,
@@ -63,15 +78,23 @@ public extension PaywallComponent {
             overrideSourceLid: LocalizationKey? = nil,
             fitMode: FitMode? = nil,
             maskShape: MaskShape? = nil,
-            gradientColors: [ColorHex]? = nil
+            colorOverlay: ColorScheme? = nil,
+            padding: Padding? = nil,
+            margin: Padding? = nil,
+            border: Border? = nil,
+            shadow: Shadow? = nil
         ) {
             self.visible = visible
             self.source = source
             self.size = size
             self.overrideSourceLid = overrideSourceLid
             self.fitMode = fitMode
             self.maskShape = maskShape
-            self.gradientColors = gradientColors
+            self.colorOverlay = colorOverlay
+            self.padding = padding
+            self.margin = margin
+            self.border = border
+            self.shadow = shadow
         }
 
     }