[IPPInAppFeedback] UI banner component design tweaks

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -210,6 +210,12 @@ extension UIImage {
         return UIImage.gridicon(.comment)
     }
 
+    /// Comment Content Icon
+    ///
+    static var commentContent: UIImage {
+        return UIImage(named: "icon-comment-content") ?? UIImage.gridicon(.comment)
+    }
+
     /// Credit Card Icon
     ///
     static var creditCardImage: UIImage {
@@ -1174,6 +1180,7 @@ extension UIImage {
     static var builtInReaderError: UIImage {
         return UIImage(named: "built-in-reader-error")!
     }
+
 }
 
 private extension UIImage {

WooCommerce/Classes/ViewRelated/Orders/OrderListViewController.swift

@@ -828,7 +828,7 @@ private extension OrderListViewController {
         let viewModel = TopBannerViewModel(
             title: bannerTitle,
             infoText: bannerText,
-            icon: UIImage.gridicon(.comment),
+            icon: UIImage.commentContent,
             isExpanded: true,
             topButton: .dismiss(handler: {
                 self.showIPPFeedbackDismissAlert()

WooCommerce/Classes/ViewRelated/Top Banner/TopBannerView.swift

@@ -114,6 +114,9 @@ private extension TopBannerView {
 
         zip(viewModel.actionButtons, actionButtons).forEach { buttonInfo, button in
             button.setTitle(buttonInfo.title, for: .normal)
+            // Overrides the general .applyLinkButtonStyle() with pink color
+            // pecCkj-fa-p2
+            button.setTitleColor(UIColor.withColorStudio(.pink), for: .normal)
             button.on(.touchUpInside, call: { _ in buttonInfo.action(button) })
         }
     }
@@ -141,7 +144,7 @@ private extension TopBannerView {
 
     func createMainStackView(with viewModel: TopBannerViewModel) -> UIStackView {
         let iconInformationStackView = createIconInformationStackView(with: viewModel)
-        let mainStackView = UIStackView(arrangedSubviews: [iconInformationStackView, createBorderView()])
+        let mainStackView = UIStackView(arrangedSubviews: [createBorderView(), iconInformationStackView, createBorderView()])
         if isActionEnabled {
             configureActionStackView(with: viewModel)
             mainStackView.addArrangedSubview(actionStackView)

WooCommerce/Resources/Images.xcassets/icon-comment-content.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "comment-content.svg",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}