Update color and related design in modal after design confirmation.

Author: jaclync

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

@@ -9,12 +9,12 @@ struct POSRootModalViewModifier: ViewModifier {
     func body(content: Content) -> some View {
         ZStack {
             content
-                .blur(radius: modalManager.isPresented ? 3 : 0)
+                .blur(radius: modalManager.isPresented ? 8 : 0)
                 .disabled(modalManager.isPresented)
                 .accessibilityElement(children: modalManager.isPresented ? .ignore : .contain)
 
             if modalManager.isPresented {
-                Color.posSurfaceContainerLowest.opacity(0.6)
+                Color.posSurfaceContainerLowest.opacity(0.8)
                     .edgesIgnoringSafeArea(.all)
                     .onTapGesture {
                         if modalManager.allowsInteractiveDismissal {
@@ -27,7 +27,10 @@ struct POSRootModalViewModifier: ViewModifier {
                     modalManager.getContent()
                         .background(Color.posSurfaceBright)
                         .cornerRadius(24)
-                        .shadow(color: Color.black.opacity(0.08), radius: 24, x: 0, y: 8)
+                        .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
                         .padding()
                 }
                 .zIndex(1)