Update image placeholder design. Placeholder background color is currently the same as the card and subject to change.

Author: jaclync

WooCommerce/Classes/POS/Presentation/Reusable Views/POSItemImageView.swift

@@ -7,19 +7,32 @@ struct POSItemImageView: View {
     let scale: CGFloat
 
     var body: some View {
-        if let imageSource = imageSource {
+        if let imageSource {
             ProductImageThumbnail(productImageURL: URL(string: imageSource),
                                   productImageSize: imageSize,
                                   scale: scale,
-                                  foregroundColor: .clear,
+                                  foregroundColor: Constants.placeholderColor,
                                   cachesOriginalImage: true)
         } else {
             Rectangle()
-                .foregroundColor(Color(.secondarySystemFill))
+                .foregroundColor(.posSurfaceContainerLowest)
+                .overlay {
+                    Image(systemName: "archivebox")
+                        .resizable()
+                        .frame(width: Constants.placeholderDimension, height: Constants.placeholderDimension)
+                        .foregroundColor(Constants.placeholderColor)
+                }
         }
     }
 }
 
+private extension POSItemImageView {
+    enum Constants {
+        static let placeholderDimension: CGFloat = 48
+        static let placeholderColor: Color = .posOnDisabledContainer
+    }
+}
+
 #Preview("Placeholder") {
     POSItemImageView(imageSource: nil,
                      imageSize: 112,