Use the same card border modifier as in product card views.

Author: jaclync

WooCommerce/Classes/POS/Presentation/ItemRowView.swift

@@ -8,6 +8,10 @@ struct ItemRowView: View {
     @Environment(\.colorScheme) var colorScheme
     @Binding private var showProductImage: Bool
 
+    private var dimension: CGFloat {
+        min(Constants.productCardSize * scale, Constants.maximumProductCardSize)
+    }
+
     init(cartItem: CartItem, showImage: Binding<Bool> = .constant(true), onItemRemoveTapped: (() -> Void)? = nil) {
         self.cartItem = cartItem
         self._showProductImage = showImage
@@ -49,43 +53,19 @@ struct ItemRowView: View {
         }
         .frame(maxWidth: .infinity, idealHeight: Constants.productCardSize * scale)
         .background(Color.posSurfaceContainerLowest)
-        .overlay {
-            RoundedRectangle(cornerRadius: Constants.productCardCornerRadius)
-                .stroke(Color.posCartItemOutline, lineWidth: cardOutlineWidth)
-        }
-        .clipShape(RoundedRectangle(cornerRadius: Constants.productCardCornerRadius))
+        .posItemCardBorderStyles()
         .padding(.horizontal, Constants.horizontalPadding)
     }
 
     @ViewBuilder
     private var productImage: some View {
         if !showProductImage {
             EmptyView()
-        } else if let imageSource = cartItem.item.productImageSource {
-            ProductImageThumbnail(productImageURL: URL(string: imageSource),
-                                  productImageSize: Constants.productCardSize,
-                                  scale: scale,
-                                  foregroundColor: .clear,
-                                  cachesOriginalImage: true)
-            .frame(width: min(Constants.productCardSize * scale, Constants.maximumProductCardSize),
-                   height: Constants.productCardSize * scale)
-            .clipped()
         } else {
-            Rectangle()
-                .frame(width: min(Constants.productCardSize * scale, Constants.maximumProductCardSize),
-                       height: Constants.productCardSize * scale)
-                .foregroundColor(Color(.secondarySystemFill))
-        }
-    }
-}
-
-private extension ItemRowView {
-    var cardOutlineWidth: CGFloat {
-        switch colorScheme {
-        case .dark:
-            return 0
-        default:
-            return Constants.cardOutlineWidth
+            POSItemImageView(imageSource: cartItem.item.productImageSource,
+                             imageSize: dimension,
+                             scale: 1)
+            .frame(width: dimension, height: dimension)
         }
     }
 }
@@ -94,8 +74,6 @@ private extension ItemRowView {
     enum Constants {
         static let productCardSize: CGFloat = 96
         static let maximumProductCardSize: CGFloat = Self.productCardSize * 1.5
-        static let productCardCornerRadius: CGFloat = 8
-        static let cardOutlineWidth: CGFloat = 1
         static let horizontalPadding: CGFloat = 16
         static let horizontalElementSpacing: CGFloat = 16
         static let cardContentHorizontalPadding: CGFloat = 16