Replace most shadow cases to posShadow when applicable.

Author: jaclync

WooCommerce/Classes/POS/Presentation/ItemListView.swift

@@ -116,7 +116,7 @@ private extension ItemListView {
         .fixedSize(horizontal: false, vertical: true)
         .background(Color.posSurfaceBright)
         .cornerRadius(Constants.bannerCornerRadius)
-        .shadow(color: Color.black.opacity(0.08), radius: 4, y: 2)
+        .posShadow(.medium)
         .accessibilityAddTraits(.isButton)
         .onTapGesture {
             showSimpleProductsModal = true

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

@@ -40,7 +40,7 @@ struct POSConnectivityView: View {
         .frame(minHeight: Constants.height)
         .background(Color.posSecondaryContainer)
         .cornerRadius(Constants.cornerRadius)
-        .shadow(color: Color.posShadow.opacity(0.2), radius: 8, x: 0, y: 2)
+        .posShadow(.medium)
         .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
     }
 

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

@@ -8,8 +8,7 @@ struct POSItemCardBorderStylesModifier: ViewModifier {
                     .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)
+            .posShadow(.medium)
     }
 }
 

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

@@ -27,10 +27,7 @@ struct POSRootModalViewModifier: ViewModifier {
                     modalManager.getContent()
                         .background(Color.posSurfaceBright)
                         .cornerRadius(POSCornerRadiusStyle.extraLarge.value)
-                        .shadow(color: Color.posShadow.opacity(0.02), radius: 43, x: 0, y: 50) // 0px 50px 43px 0px #00000005
-                        .shadow(color: Color.posShadow.opacity(0.04), radius: 36, x: 0, y: 30) // 0px 30px 36px 0px #0000000A
-                        .shadow(color: Color.posShadow.opacity(0.07), radius: 27, x: 0, y: 15) // 0px 15px 27px 0px #00000012
-                        .shadow(color: Color.posShadow.opacity(0.08), radius: 15, x: 0, y: 5)  // 0px 5px 15px 0px #00000014
+                        .posShadow(.large)
                         .padding()
                 }
                 .zIndex(1)