Implement unified customization for SC bottom banner

GliaWidgets/Sources/RemoteConfiguration/RemoteConfiguration+Chat.swift

@@ -19,6 +19,7 @@ extension RemoteConfiguration {
         let newMessagesDividerText: Text?
         let systemMessage: MessageBalloon?
         let gva: Gva?
+        let secureMessaging: SecureConversations?
     }
 
     struct Gva: Codable {

GliaWidgets/Sources/Theme/Theme+Chat.swift

@@ -398,8 +398,9 @@ extension Theme {
         let secureMessagingBottomBannerStyle = SecureMessagingBottomBannerViewStyle(
             message: Localization.SecureMessaging.Chat.Banner.bottom,
             font: font.caption,
+            textStyle: .caption1,
             textColor: color.baseNormal,
-            backgroundColor: color.baseNeutral,
+            backgroundColor: .fill(color: color.baseNeutral),
             dividerColor: color.baseShade
         )
 

GliaWidgets/Sources/View/Chat/ChatStyle.RemoteConfig.swift

@@ -55,6 +55,16 @@ extension ChatStyle {
             text: configuration?.newMessagesDividerText,
             assetBuilder: assetsBuilder
         )
+        applyAdditionalStyles(
+            configuration: configuration,
+            assetsBuilder: assetsBuilder
+        )
+    }
+
+    private func applyAdditionalStyles(
+        configuration: RemoteConfiguration.Chat?,
+        assetsBuilder: RemoteConfiguration.AssetsBuilder
+    ) {
         systemMessageStyle.apply(
             configuration: configuration?.systemMessage,
             assetsBuilder: assetsBuilder
@@ -63,6 +73,10 @@ extension ChatStyle {
             configuration: configuration?.gva,
             assetBuilder: assetsBuilder
         )
+        secureMessagingBottomBannerStyle.apply(
+            configuration: configuration?.secureMessaging,
+            assetBuilder: assetsBuilder
+        )
         applyBackground(color: configuration?.background?.color)
     }
 

GliaWidgets/Sources/View/Chat/SecureMessagingBottomBannerView.swift

@@ -71,7 +71,7 @@ final class SecureMessagingBottomBannerView: UIView {
     private func renderProps() {
         label.text = props.style.message
         label.textColor = props.style.textColor
-        backgroundColor = props.style.backgroundColor
+        backgroundColor = props.style.backgroundColor.color
         label.font = props.style.font
         isHidden = props.isHidden
         divider.backgroundColor = props.style.dividerColor

GliaWidgets/Sources/View/Chat/SecureMessagingBottomBannerViewStyle.RemoteConfig.swift

@@ -1,3 +1,37 @@
-// TODO: Unified customization will be implemented with MOB-3717
+import UIKit
 
-import Foundation
+extension SecureMessagingBottomBannerViewStyle {
+    mutating func apply(
+        configuration: RemoteConfiguration.SecureConversations?,
+        assetBuilder: RemoteConfiguration.AssetsBuilder
+    ) {
+        configuration?.bottomBannerBackground?.color.unwrap {
+            switch $0.type {
+            case .fill:
+                $0.value
+                    .map { UIColor(hex: $0) }
+                    .first
+                    .unwrap { backgroundColor = .fill(color: $0) }
+            case .gradient:
+                let colors = $0.value.convertToCgColors()
+                backgroundColor = .gradient(colors: colors)
+            }
+        }
+
+        configuration?.topBannerDividerColor?.value
+            .map { UIColor(hex: $0) }
+            .first
+            .unwrap { dividerColor = $0 }
+
+        configuration?.bottomBannerText?.foreground?.value
+            .map { UIColor(hex: $0) }
+            .first
+            .unwrap { textColor = $0 }
+
+        UIFont.convertToFont(
+            uiFont: assetBuilder.fontBuilder(configuration?.bottomBannerText?.font),
+            textStyle: textStyle
+        )
+        .unwrap { font = $0 }
+    }
+}

GliaWidgets/Sources/View/Chat/SecureMessagingBottomBannerViewStyle.swift

@@ -6,40 +6,46 @@ public struct SecureMessagingBottomBannerViewStyle: Equatable {
     public var message: String
     /// Font of banner message.
     public var font: UIFont
+    /// Style of the text of the  banner message.
+    public var textStyle: UIFont.TextStyle
     /// Color of the text of the  banner message.
     public var textColor: UIColor
     /// Color of the banner background.
-    public var backgroundColor: UIColor
+    public var backgroundColor: ColorType
     /// Color of the banner divider.
     public var dividerColor: UIColor
 
     /// - Parameters:
     ///   - message: Text of the banner message.
     ///   - font: Font of banner message.
+    ///   - textStyle: Style of the text of the  banner message.
     ///   - textColor: Color of the text of the  banner message.
     ///   - backgroundColor: Color of the banner background.
     ///   - dividerColor: Color of the banner divider.
     public init(
         message: String,
         font: UIFont,
+        textStyle: UIFont.TextStyle,
         textColor: UIColor,
-        backgroundColor: UIColor,
+        backgroundColor: ColorType,
         dividerColor: UIColor
     ) {
         self.message = message
         self.font = font
         self.textColor = textColor
         self.backgroundColor = backgroundColor
         self.dividerColor = dividerColor
+        self.textStyle = textStyle
     }
 }
 
 extension SecureMessagingBottomBannerViewStyle {
     static let initial = Self(
         message: "",
         font: .preferredFont(forTextStyle: .caption1),
+        textStyle: .caption1,
         textColor: .label,
-        backgroundColor: .red,
+        backgroundColor: .fill(color: .red),
         dividerColor: .yellow
     )
 }

GliaWidgetsTests/Sources/ChatView/ChatStyle.Mock.swift

@@ -541,13 +541,15 @@ extension SecureMessagingBottomBannerViewStyle {
     static func mock(
         message: String = Localization.SecureMessaging.Chat.Banner.bottom,
         font: UIFont = Theme().chat.secureMessagingBottomBannerStyle.font,
+        textStyle: UIFont.TextStyle = Theme().chat.secureMessagingBottomBannerStyle.textStyle,
         textColor: UIColor = Theme().chat.secureMessagingBottomBannerStyle.textColor,
-        backgroundColor: UIColor = Theme().chat.secureMessagingBottomBannerStyle.backgroundColor,
+        backgroundColor: ColorType = Theme().chat.secureMessagingBottomBannerStyle.backgroundColor,
         dividerColor: UIColor = Theme().chat.secureMessagingBottomBannerStyle.dividerColor
     ) -> Self {
         .init(
             message: message,
             font: font,
+            textStyle: textStyle,
             textColor: textColor,
             backgroundColor: backgroundColor,
             dividerColor: dividerColor