[Order form] Fix blurry image for scan product, and QR & TTP payment methods; update selected icon color in product selector

RELEASE-NOTES.txt

@@ -5,6 +5,7 @@
 -----
 - [*] Order Creation: Resolved an issue where the exit confirmation was not displayed when there were unsaved changes in a split view [https://github.com/woocommerce/woocommerce-ios/pull/15394].
 - [*] Order Creation: Fixed an issue where order recalculation would stop working after canceling a confirmation with unsaved changes [https://github.com/woocommerce/woocommerce-ios/pull/15392].
+- [*] Order Creation/Editing: Fixed blurry icons for product scanning, QR code & Tap To Pay payment methods. Polished checkmark icon color in selected product row. [https://github.com/woocommerce/woocommerce-ios/pull/15465]
 - [internal] POS: Always create a new order during the checkout [https://github.com/woocommerce/woocommerce-ios/pull/15427].
 - [internal] Improve data fetching in Order Details, to avoid I/O performance on the main thread. [https://github.com/woocommerce/woocommerce-ios/pull/14999]
 - [internal] POS: Show location pre-alert and error during reader connection [https://github.com/woocommerce/woocommerce-ios/pull/15456].

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -281,10 +281,6 @@ extension UIImage {
         UIImage(systemName: "wave.3.right.circle")?.withRenderingMode(.alwaysTemplate) ?? .creditCardImage
     }
 
-    static var bankIcon: UIImage {
-        UIImage(systemName: "building.columns")?.withRenderingMode(.alwaysTemplate) ?? .emptyBoxImage
-    }
-
     static var scanToPayIcon: UIImage {
         UIImage(systemName: "qrcode.viewfinder")?.withRenderingMode(.alwaysTemplate) ?? .creditCardImage
     }

WooCommerce/Classes/ViewRelated/Orders/Order Creation/OrderForm.swift

@@ -812,7 +812,7 @@ private extension ProductsSection {
                 ProgressView()
             } else {
                 HStack() {
-                    Image(uiImage: .scanImage.withRenderingMode(.alwaysTemplate))
+                    Image(systemName: "barcode.viewfinder")
                         .resizable()
                         .aspectRatio(contentMode: .fit)
                         .frame(height: Layout.scanImageSize * scale)
@@ -838,7 +838,7 @@ private extension ProductsSection {
             if showAddProductViaSKUScannerLoading {
                 ProgressView()
             } else {
-                Image(uiImage: .scanImage.withRenderingMode(.alwaysTemplate))
+                Image(systemName: "barcode.viewfinder")
                     .resizable()
                     .aspectRatio(contentMode: .fit)
                     .frame(height: Layout.scanImageSize * scale)

WooCommerce/Classes/ViewRelated/Orders/Order Creation/PaymentSection/GiftCardInputView.swift

@@ -28,7 +28,7 @@ struct GiftCardInputView: View {
                             Button {
                                 showsScanner = true
                             } label: {
-                                Image(uiImage: .scanImage.withRenderingMode(.alwaysTemplate))
+                                Image(systemName: "barcode.viewfinder")
                                     .resizable()
                                     .aspectRatio(contentMode: .fit)
                                     .frame(maxHeight: Constants.scanImageSize * scale)

WooCommerce/Classes/ViewRelated/Orders/Payment Methods/PaymentMethodsView.swift

@@ -43,7 +43,7 @@ struct PaymentMethodsView: View {
                 VStack(alignment: .leading, spacing: 8) {
                     VStack(alignment: .leading, spacing: Layout.noSpacing) {
                         if viewModel.showTapToPayRow {
-                            MethodRow(icon: .tapToPayOnIPhoneIcon,
+                            MethodRow(icon: Image(systemName: "wave.3.right.circle"),
                                       title: Localization.tapToPay,
                                       accessibilityID: Accessibility.tapToPayMethod) {
                                 viewModel.collectPayment(using: .tapToPay, on: rootViewController, onSuccess: dismiss, onFailure: dismiss)
@@ -77,7 +77,11 @@ struct PaymentMethodsView: View {
                         if viewModel.showScanToPayRow {
                             Divider()
 
-                            MethodRow(icon: .scanToPayIcon, title: Localization.scanToPay, accessibilityID: Accessibility.scanToPayMethod) {
+                            MethodRow(
+                                icon: Image(systemName: "qrcode.viewfinder"),
+                                title: Localization.scanToPay,
+                                accessibilityID: Accessibility.scanToPayMethod
+                            ) {
                                 showingScanToPayView = true
                                 viewModel.trackCollectByScanToPay()
                             }
@@ -150,7 +154,7 @@ struct PaymentMethodsView: View {
 private struct MethodRow: View {
     /// Icon of the row
     ///
-    private let icon: UIImage
+    private let icon: Image
 
     /// Title of the row
     ///
@@ -173,6 +177,13 @@ private struct MethodRow: View {
     @Environment(\.safeAreaInsets) var safeAreaInsets: EdgeInsets
 
     init(icon: UIImage, title: String, accessibilityID: String = "", action: @escaping () -> ()) {
+        self.icon = Image(uiImage: icon)
+        self.title = title
+        self.accessibilityID = accessibilityID
+        self.action = action
+    }
+
+    init(icon: Image, title: String, accessibilityID: String = "", action: @escaping () -> ()) {
         self.icon = icon
         self.title = title
         self.accessibilityID = accessibilityID
@@ -182,7 +193,7 @@ private struct MethodRow: View {
     var body: some View {
         Button(action: action) {
             HStack {
-                Image(uiImage: icon)
+                icon
                     .resizable()
                     .flipsForRightToLeftLayoutDirection(true)
                     .frame(width: PaymentMethodsView.Layout.iconWidthHeight(scale: scale),

WooCommerce/Classes/ViewRelated/Products/ProductSelector/ProductRow.swift

@@ -87,7 +87,7 @@ struct ProductRow: View {
         Image(uiImage: viewModel.selectedState.image)
             .resizable()
             .frame(width: Layout.checkImageSize * scale, height: Layout.checkImageSize * scale)
-            .foregroundColor(isEnabled ? Color(.brand) : .gray)
+            .foregroundColor(isEnabled ? Color(.accent) : .gray)
     }
 }