💄 Improve webhook details in Troubleshooting tab

modules/ppcp-settings/resources/css/components/reusable-components/_button.scss

@@ -38,6 +38,8 @@ button.components-button, a.components-button {
 
 	/* style the button template */
 
+	text-align: center;
+
 	&:not(:disabled) {
 		@extend %button-style-default;
 	}

modules/ppcp-settings/resources/css/components/screens/settings/_tab-settings.scss

@@ -7,3 +7,25 @@
 	--block-header-gap: 0;
 	--block-separator-size: 0;
 }
+
+.ppcp--webhooks {
+	.ppcp--webhook-list li {
+		list-style: none;
+
+		&::before {
+			content: '✔︎';
+			opacity: 0.35;
+			font-size: 0.75em;
+			line-height: 1.35;
+			display: inline-block;
+			margin-right: 8px;
+		}
+	}
+}
+.ppcp--webhook-resubscribe,
+.ppcp--webhook-simulation {
+	.ppcp--action .components-button {
+		min-width: 160px;
+		display: block;
+	}
+}

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js

@@ -13,7 +13,7 @@ const HooksListBlock = () => {
 	}
 
 	return (
-		<SettingsBlock separatorAndGap={ false }>
+		<SettingsBlock separatorAndGap={ false } className="ppcp--webhooks">
 			<WebhookUrl url={ url } />
 			<WebhookEvents events={ events } />
 		</SettingsBlock>
@@ -37,7 +37,7 @@ const WebhookEvents = ( { events } ) => {
 			<Title>
 				{ __( 'Subscribed Events', 'woocommerce-paypal-payments' ) }
 			</Title>
-			<ul>
+			<ul className="ppcp--webhook-list">
 				{ events.map( ( event, index ) => (
 					<li key={ index }>{ event }</li>
 				) ) }

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js

@@ -59,6 +59,7 @@ const ResubscribeBlock = () => {
 				'woocommerce-paypal-payments'
 			) }
 			horizontalLayout={ true }
+			className="ppcp--webhook-resubscribe"
 		>
 			<ControlButton
 				type={ 'secondary' }

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SimulationBlock.js

@@ -116,6 +116,7 @@ const SimulationBlock = () => {
 				'woocommerce-paypal-payments'
 			) }
 			horizontalLayout={ true }
+			className="ppcp--webhook-simulation"
 		>
 			<ControlButton
 				type={ 'secondary' }