Fix admin ident styles

modules/ppcp-applepay/extensions.php

@@ -131,6 +131,16 @@ return array(
 			$fields,
 			'allow_card_button_gateway',
 			array(
+				'spacer' => array(
+					'title'        => __( '', 'woocommerce-paypal-payments' ),
+					'type'         => 'ppcp-text',
+					'text'         => '',
+					'class'        => array(),
+					'classes'      => array( 'ppcp-active-spacer' ),
+					'screens'      => array( State::STATE_ONBOARDED ),
+					'gateway'      => 'paypal',
+					'requirements' => array(),
+				),
 				'applepay_button_enabled'             => array(
 					'title'             => __( 'Apple Pay Button', 'woocommerce-paypal-payments' ),
 					'type'              => 'checkbox',
@@ -160,6 +170,7 @@ return array(
 									->action_visible( 'applepay_button_type' )
 									->action_visible( 'applepay_button_language' )
 									->action_visible( 'applepay_checkout_data_mode' )
+									->action_class( 'applepay_button_enabled', 'active' )
 									->to_array(),
 							)
 						),

modules/ppcp-axo/extensions.php

@@ -61,6 +61,7 @@ return array(
 									->action_visible( 'axo_email_widget' )
 									->action_visible( 'axo_address_widget' )
 									->action_visible( 'axo_payment_widget' )
+									->action_class( 'axo_enabled', 'active' )
 									->to_array(),
 							)
 						),

modules/ppcp-googlepay/extensions.php

@@ -129,6 +129,7 @@ return array(
 									->action_visible( 'googlepay_button_color' )
 									->action_visible( 'googlepay_button_language' )
 									->action_visible( 'googlepay_button_shipping_enabled' )
+									->action_class( 'googlepay_button_enabled', 'active' )
 									->to_array(),
 							)
 						),

modules/ppcp-wc-gateway/resources/css/common.scss

@@ -1,7 +1,7 @@
 @use "../../../ppcp-button/resources/css/mixins/apm-button" as apm-button;
 
 $border-color: #c3c3c3;
-$background-ident-color: #f9f9f9;
+$background-ident-color: #fbfbfb;
 
 .ppcp-field-hidden {
 	display: none !important;
@@ -18,13 +18,22 @@ $background-ident-color: #f9f9f9;
 	border-left: 1px solid transparent;
 	border-right: 1px solid transparent;
 
-	&.ppcp-field-indent {
+	&.active {
 		background-color: $background-ident-color;
 		border: 1px solid $border-color;
 
 		th {
 			padding-left: 20px;
 		}
+	}
+
+	&.ppcp-field-indent {
+		background-color: $background-ident-color;
+		border: 1px solid $border-color;
+
+		th {
+			padding-left: 40px;
+		}
 
 		th, td {
 			border-top: 1px solid $border-color;
@@ -38,6 +47,13 @@ $background-ident-color: #f9f9f9;
 	}
 }
 
+.ppcp-active-spacer {
+	th, td {
+		padding: 0;
+		height: 1rem;
+	}
+}
+
 // Prevents spacing after button group.
 .ppcp-button-preview-inner {
 	line-height: 0;

modules/ppcp-wc-gateway/resources/js/common/display-manager/ActionFactory.js

@@ -1,10 +1,13 @@
-import ElementAction from "./action/ElementAction";
+import VisibilityAction from "./action/VisibilityAction";
+import AttributeAction from "./action/AttributeAction";
 
 class ActionFactory {
     static make(actionConfig) {
         switch (actionConfig.type) {
-            case 'element':
-                return new ElementAction(actionConfig);
+            case 'visibility':
+                return new VisibilityAction(actionConfig);
+            case 'attribute':
+                return new AttributeAction(actionConfig);
         }
 
         throw new Error('[ActionFactory] Unknown action: ' + actionConfig.type);

modules/ppcp-wc-gateway/resources/js/common/display-manager/action/AttributeAction.js

@@ -0,0 +1,17 @@
+import BaseAction from "./BaseAction";
+
+class AttributeAction extends BaseAction {
+
+    run(status) {
+
+        if (status) {
+            jQuery(this.config.selector).addClass(this.config.html_class);
+        } else {
+            jQuery(this.config.selector).removeClass(this.config.html_class);
+        }
+
+    }
+
+}
+
+export default AttributeAction;

modules/ppcp-wc-gateway/resources/js/common/display-manager/action/VisibilityAction.js

@@ -1,6 +1,6 @@
 import BaseAction from "./BaseAction";
 
-class ElementAction extends BaseAction {
+class VisibilityAction extends BaseAction {
 
     run(status) {
 
@@ -32,4 +32,4 @@ class ElementAction extends BaseAction {
 
 }
 
-export default ElementAction;
+export default VisibilityAction;

modules/ppcp-wc-gateway/src/Helper/DisplayRule.php

@@ -26,10 +26,12 @@ class DisplayRule {
 	const CONDITION_OPERATION_EMPTY      = 'empty';
 	const CONDITION_OPERATION_NOT_EMPTY  = 'not_empty';
 
-	const ACTION_TYPE_ELEMENT = 'element';
+	const ACTION_TYPE_VISIBILITY = 'visibility';
+	const ACTION_TYPE_ATTRIBUTE  = 'attribute';
 
 	const ACTION_VISIBLE = 'visible';
 	const ACTION_ENABLE  = 'enable';
+	const ACTION_CLASS   = 'class';
 
 	/**
 	 * The element selector.
@@ -140,7 +142,7 @@ class DisplayRule {
 	public function action_visible( string $selector ): self {
 		$this->add_action(
 			array(
-				'type'     => self::ACTION_TYPE_ELEMENT,
+				'type'     => self::ACTION_TYPE_VISIBILITY,
 				'selector' => $selector,
 				'action'   => self::ACTION_VISIBLE,
 			)
@@ -148,6 +150,24 @@ class DisplayRule {
 		return $this;
 	}
 
+	/**
+	 * Adds a condition to add/remove a html class.
+	 *
+	 * @param string $selector The condition selector.
+	 * @param string $class The class.
+	 */
+	public function action_class( string $selector, string $class ): self {
+		$this->add_action(
+			array(
+				'type'       => self::ACTION_TYPE_ATTRIBUTE,
+				'selector'   => $selector,
+				'html_class' => $class,
+				'action'     => self::ACTION_CLASS,
+			)
+		);
+		return $this;
+	}
+
 	/**
 	 * Adds a condition to enable/disable the element.
 	 *
@@ -156,7 +176,7 @@ class DisplayRule {
 	public function action_enable( string $selector ): self {
 		$this->add_action(
 			array(
-				'type'     => self::ACTION_TYPE_ELEMENT,
+				'type'     => self::ACTION_TYPE_VISIBILITY,
 				'selector' => $selector,
 				'action'   => self::ACTION_ENABLE,
 			)

modules/ppcp-wc-gateway/src/Settings/Fields/connection-tab-fields.php

@@ -538,6 +538,7 @@ return function ( ContainerInterface $container, array $fields ): array {
 							->rule()
 							->condition_element( 'subtotal_mismatch_behavior', PurchaseUnitSanitizer::MODE_EXTRA_LINE )
 							->action_visible( 'subtotal_mismatch_line_name' )
+							->action_class( 'subtotal_mismatch_behavior', 'active' )
 							->to_array(),
 					)
 				),
@@ -548,6 +549,7 @@ return function ( ContainerInterface $container, array $fields ): array {
 			'type'         => 'text',
 			'desc_tip'     => true,
 			'description'  => __( 'The name of the extra line that will be sent to PayPal to correct the subtotal mismatch.', 'woocommerce-paypal-payments' ),
+			'classes'      => array( 'ppcp-field-indent' ),
 			'maxlength'    => 22,
 			'default'      => '',
 			'screens'      => array(