From b32a119f3f2ff42010afef2a3c41063e738ad153 Mon Sep 17 00:00:00 2001
From: Himad M <h.mouhtar@inpsyde.com>
Date: Fri, 20 Dec 2024 13:44:40 +0100
Subject: [PATCH] New Settings UI: Adjust features button styling

---
 .../resources/css/components/screens/_settings.scss  |  2 ++
 .../SettingsBlocks/FeatureSettingsBlock.js           |  1 +
 .../js/Components/Screens/Overview/TabOverview.js    | 12 +++++++++---
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
index b98a5f7e1..b9220f264 100644
--- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
@@ -101,6 +101,8 @@
 		span {
 			font-weight: 500;
 		}
+
+		margin-top:24px;
 	}
 }
 
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
index e2681a909..0d104a70c 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
@@ -37,6 +37,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 				<div className="ppcp-r-feature-item__buttons">
 					{ props.actionProps?.buttons.map( ( button ) => (
 						<Button
+							className={ button.class ? button.class : '' }
 							href={ button.url }
 							key={ button.text }
 							variant={ button.type }
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
index 102426d0a..10b56e68f 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
@@ -177,6 +177,7 @@ const featuresDefault = [
 		buttons: [
 			{
 				type: 'secondary',
+				class: 'small-button',
 				text: __( 'Configure', 'woocommerce-paypal-payments' ),
 				url: '#',
 			},
@@ -200,6 +201,7 @@ const featuresDefault = [
 		buttons: [
 			{
 				type: 'secondary',
+				class: 'small-button',
 				text: __( 'Configure', 'woocommerce-paypal-payments' ),
 				url: '#',
 			},
@@ -223,6 +225,7 @@ const featuresDefault = [
 		buttons: [
 			{
 				type: 'secondary',
+				class: 'small-button',
 				text: __( 'Apply', 'woocommerce-paypal-payments' ),
 				url: '#',
 			},
@@ -243,6 +246,7 @@ const featuresDefault = [
 		buttons: [
 			{
 				type: 'secondary',
+				class: 'small-button',
 				text: __( 'Configure', 'woocommerce-paypal-payments' ),
 				url: '#',
 			},
@@ -252,9 +256,6 @@ const featuresDefault = [
 				url: '#',
 			},
 		],
-		notes: [
-			__( '¹PayPal Q2 Earnings-2021.', 'woocommerce-paypal-payments' ),
-		],
 	},
 	{
 		id: 'apple_pay',
@@ -266,6 +267,7 @@ const featuresDefault = [
 		buttons: [
 			{
 				type: 'secondary',
+				class: 'small-button',
 				text: __(
 					'Domain registration',
 					'woocommerce-paypal-payments'
@@ -289,6 +291,7 @@ const featuresDefault = [
 		buttons: [
 			{
 				type: 'secondary',
+				class: 'small-button',
 				text: __( 'Configure', 'woocommerce-paypal-payments' ),
 				url: '#',
 			},
@@ -298,6 +301,9 @@ const featuresDefault = [
 				url: '#',
 			},
 		],
+		notes: [
+			__( '¹PayPal Q2 Earnings-2021.', 'woocommerce-paypal-payments' ),
+		],
 	},
 ];