Add shadow layers to POS item card border styles.

jaclync · jaclync · commit 522c4f6752a8 · 2025-02-10T11:21:42.000+08:00
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSItemCardBorderStylesModifier.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSItemCardBorderStylesModifier.swift
@@ -5,9 +5,11 @@ struct POSItemCardBorderStylesModifier: ViewModifier {
         content
             .overlay {
                 RoundedRectangle(cornerRadius: Constants.cardCornerRadius)
-                    .stroke(Color.black, lineWidth: Constants.nilOutline)
+                    .stroke(Color.posShadow, lineWidth: Constants.nilOutline)
             }
             .clipShape(RoundedRectangle(cornerRadius: Constants.cardCornerRadius))
+            .shadow(color: Color.posShadow.opacity(0.04), radius: 12, x: 0, y: 8)
+            .shadow(color: Color.posShadow.opacity(0.08), radius: 4, x: 0, y: 2)
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -5,9 +5,11 @@ struct POSItemCardBorderStylesModifier: ViewModifier {`
`5`	`5`	`content`
`6`	`6`	`.overlay {`
`7`	`7`	`RoundedRectangle(cornerRadius: Constants.cardCornerRadius)`
`8`		`- .stroke(Color.black, lineWidth: Constants.nilOutline)`
	`8`	`+ .stroke(Color.posShadow, lineWidth: Constants.nilOutline)`
`9`	`9`	`}`
`10`	`10`	`.clipShape(RoundedRectangle(cornerRadius: Constants.cardCornerRadius))`
	`11`	`+ .shadow(color: Color.posShadow.opacity(0.04), radius: 12, x: 0, y: 8)`
	`12`	`+ .shadow(color: Color.posShadow.opacity(0.08), radius: 4, x: 0, y: 2)`
`11`	`13`	`}`
`12`	`14`	`}`
`13`	`15`