New Settings UI: Adjust features button styling

woocommerce · Dec 20, 2024 · b32a119 · b32a119
1 parent cb8c3f8
commit b32a119
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git 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/...ettings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/...ettings/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
@@ -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' ),
+		],
 	},
 ];
-Original file line number
+Diff line change
@@ Expand Up / @@ -101,6 +101,8 @@ @@
     		span {
     			font-weight: 500;
     		}
+    		margin-top:24px;
     	}
     }
@@ Expand Down @@