[Woo POS] Polishes: item card image size, email text field capitaliza…

…tion, item list error button width (#14898)
woocommerce · Jan 20, 2025 · 43a0ef7 · 43a0ef7
2 parents 268c7c0 + 61d5325
commit 43a0ef7
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 21 deletions.
diff --git a/...lasses/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorView.swift b/...lasses/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorView.swift
@@ -32,7 +32,8 @@ struct PointOfSaleItemListErrorView: View {
                     Text(error.buttonText)
                 })
                 .buttonStyle(POSPrimaryButtonStyle())
-                .frame(width: PointOfSaleItemListErrorLayout.buttonWidth)
+                .frame(maxWidth: PointOfSaleItemListErrorLayout.buttonWidth)
+                .padding([.leading, .trailing])
             }
             Spacer()
         }

diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift
@@ -7,7 +7,10 @@ struct ParentProductCardView: View {
     private let detailText: String
 
     @ScaledMetric private var scale: CGFloat = 1.0
-    @Environment(\.dynamicTypeSize) var dynamicTypeSize
+
+    private var dimension: CGFloat {
+        min(Constants.productCardSize * scale, Constants.maximumProductCardSize)
+    }
 
     init(name: String, imageSource: String?, detailText: String) {
         self.name = name
@@ -18,11 +21,9 @@ struct ParentProductCardView: View {
     var body: some View {
         HStack(spacing: Constants.cardSpacing) {
             POSItemImageView(imageSource: imageSource,
-                             imageSize: Constants.productCardSize * scale,
-                             scale: scale)
-            .frame(width: min(Constants.productCardSize * scale, Constants.maximumProductCardSize),
-                   height: Constants.productCardSize * scale)
-            .clipped()
+                             imageSize: dimension,
+                             scale: 1)
+            .frame(width: dimension, height: dimension)
 
             VStack(alignment: .leading, spacing: Constants.textSpacing) {
                 Text(name)
@@ -39,7 +40,7 @@ struct ParentProductCardView: View {
             .padding(.vertical, Constants.verticalTextPadding * (1 / scale))
             Spacer()
         }
-        .frame(maxWidth: .infinity, idealHeight: Constants.productCardSize * scale)
+        .frame(maxWidth: .infinity, idealHeight: dimension)
         .background(Color.posSecondaryBackground)
         .posItemCardBorderStyles()
     }

diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift
@@ -7,18 +7,20 @@ struct SimpleProductCardView: View {
     @ScaledMetric private var scale: CGFloat = 1.0
     @Environment(\.dynamicTypeSize) var dynamicTypeSize
 
+    private var dimension: CGFloat {
+        min(Constants.productCardSize * scale, Constants.maximumProductCardSize)
+    }
+
     init(product: POSSimpleProduct) {
         self.product = product
     }
 
     var body: some View {
         HStack(spacing: Constants.cardSpacing) {
             POSItemImageView(imageSource: product.productImageSource,
-                             imageSize: Constants.productCardSize * scale,
-                             scale: scale)
-            .frame(width: min(Constants.productCardSize * scale, Constants.maximumProductCardSize),
-                   height: Constants.productCardSize * scale)
-            .clipped()
+                             imageSize: dimension,
+                             scale: 1)
+            .frame(width: dimension, height: dimension)
 
             VStack(alignment: .leading, spacing: Constants.textSpacing) {
                 Text(product.name)
@@ -35,7 +37,7 @@ struct SimpleProductCardView: View {
             .padding(.vertical, Constants.verticalTextPadding * (1 / scale))
             Spacer()
         }
-        .frame(maxWidth: .infinity, idealHeight: Constants.productCardSize * scale)
+        .frame(maxWidth: .infinity, idealHeight: dimension)
         .background(Color.posSecondaryBackground)
         .posItemCardBorderStyles()
     }

diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift
@@ -6,18 +6,20 @@ struct VariationCardView: View {
 
     @ScaledMetric private var scale: CGFloat = 1.0
 
+    private var dimension: CGFloat {
+        min(Constants.productCardSize * scale, Constants.maximumProductCardSize)
+    }
+
     init(variation: POSVariation) {
         self.variation = variation
     }
 
     var body: some View {
         HStack(spacing: Constants.cardSpacing) {
             POSItemImageView(imageSource: variation.productImageSource,
-                             imageSize: Constants.productCardSize * scale,
-                             scale: scale)
-            .frame(width: min(Constants.productCardSize * scale, Constants.maximumProductCardSize),
-                   height: Constants.productCardSize * scale)
-            .clipped()
+                             imageSize: dimension,
+                             scale: 1)
+            .frame(width: dimension, height: dimension)
 
             VStack(alignment: .leading, spacing: Constants.textSpacing) {
                 Text(variation.name)
@@ -34,7 +36,7 @@ struct VariationCardView: View {
             .padding(.vertical, Constants.verticalTextPadding * (1 / scale))
             Spacer()
         }
-        .frame(maxWidth: .infinity, idealHeight: Constants.productCardSize * scale)
+        .frame(maxWidth: .infinity, idealHeight: dimension)
         .background(Color.posSecondaryBackground)
         .posItemCardBorderStyles()
     }

diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift
@@ -36,7 +36,7 @@ struct POSSendReceiptView: View {
 
             TextField(Localization.textfieldPlaceholder, text: $textFieldInput)
                 .keyboardType(.emailAddress)
-                .textInputAutocapitalization(.none)
+                .textInputAutocapitalization(.never)
                 .autocorrectionDisabled()
                 .multilineTextAlignment(.center)
                 .font(POSFontStyle.posTitleRegular)