[Woo POS][Design System] Update buttons to use POS button style (#15102)

Author: jaclync

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentBluetoothRequiredAlertView.swift

@@ -33,7 +33,7 @@ struct PointOfSaleCardPresentPaymentBluetoothRequiredAlertView: View {
 
             Button(viewModel.openSettingsButtonViewModel.title,
                    action: viewModel.openSettingsButtonViewModel.actionHandler)
-            .buttonStyle(POSPrimaryButtonStyle())
+            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .posModalCloseButton(action: viewModel.dismissButtonViewModel.actionHandler,

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView.swift

@@ -28,7 +28,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView: View {
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
-            .buttonStyle(POSPrimaryButtonStyle())
+            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedUpdateAddressView.swift

@@ -20,7 +20,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedUpdateAddressView: View {
             if let primaryButtonViewModel = viewModel.primaryButtonViewModel {
                 Button(primaryButtonViewModel.title,
                        action: primaryButtonViewModel.actionHandler)
-                .buttonStyle(POSPrimaryButtonStyle())
+                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
                 .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
             }
         }

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView.swift

@@ -28,7 +28,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView: View {
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
-            .buttonStyle(POSPrimaryButtonStyle())
+            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedView.swift

@@ -35,7 +35,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedView: View {
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
-            .buttonStyle(POSPrimaryButtonStyle())
+            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift

@@ -36,7 +36,7 @@ struct PointOfSaleCardPresentPaymentFoundMultipleReadersView: View {
             }) {
                 Text(Localization.cancel)
             }
-            .buttonStyle(POSSecondaryButtonStyle())
+            .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
             .padding(Layout.buttonPadding)
         }
         .padding(Layout.padding)
@@ -53,7 +53,7 @@ private extension PointOfSaleCardPresentPaymentFoundMultipleReadersView {
             Button(Localization.connect) {
                 connect(readerID)
             }
-            .buttonStyle(POSTextButtonStyle())
+            .buttonStyle(POSButtonStyle(variant: .outlined, size: .extraSmall))
         }
         .padding(.vertical, Layout.rowVerticalPadding)
     }

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundReaderView.swift

@@ -29,11 +29,11 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {
             VStack(spacing: PointOfSaleReaderConnectionModalLayout.buttonSpacing) {
                 Button(viewModel.connectButton.title,
                        action: viewModel.connectButton.actionHandler)
-                .buttonStyle(POSPrimaryButtonStyle())
+                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
 
                 Button(viewModel.continueSearchButton.title,
                        action: viewModel.continueSearchButton.actionHandler)
-                .buttonStyle(POSSecondaryButtonStyle())
+                .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
             }
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentOptionalReaderUpdateInProgressView.swift

@@ -45,7 +45,7 @@ struct PointOfSaleCardPresentPaymentOptionalReaderUpdateInProgressView: View {
                     cancelReaderUpdate()
                 }
             })
-            .buttonStyle(POSSecondaryButtonStyle())
+            .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .multilineTextAlignment(.center)

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedLowBatteryView.swift

@@ -37,10 +37,10 @@ struct PointOfSaleCardPresentPaymentReaderUpdateFailedLowBatteryView: View {
             VStack(spacing: PointOfSaleReaderConnectionModalLayout.buttonSpacing) {
                 Button(viewModel.retrySearchButtonViewModel.title,
                        action: viewModel.retrySearchButtonViewModel.actionHandler)
-                .buttonStyle(POSPrimaryButtonStyle())
+                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
                 Button(viewModel.cancelButtonViewModel.title,
                        action: viewModel.cancelButtonViewModel.actionHandler)
-                .buttonStyle(POSSecondaryButtonStyle())
+                .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
             }
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedNonRetryableView.swift

@@ -25,7 +25,7 @@ struct PointOfSaleCardPresentPaymentReaderUpdateFailedNonRetryableView: View {
 
             Button(viewModel.cancelButtonViewModel.title,
                    action: viewModel.cancelButtonViewModel.actionHandler)
-            .buttonStyle(POSSecondaryButtonStyle())
+            .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .multilineTextAlignment(.center)