♻️ Reuse SettingsBlocks in connection status

modules/ppcp-settings/resources/css/components/screens/settings/_setting-rows.scss

@@ -1,28 +1,6 @@
-.ppcp-r-setting-value-rows {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 12px;
-	width: 100%;
-}
-
-.ppcp-r-setting-value-row {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-
-	.ppcp-r-setting-label {
-		@include font(11, 22, 600);
-		color: $color-gray-900;
-		display: block;
-		text-transform: uppercase;
-	}
-
-	.ppcp-r-setting-value {
-		@include font(13, 26, 400);
-		color: $color-text-tertiary;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
+.ppcp--value-list {
+	--block-item-gap: 0;
+	--block-separator-gap: 6px;
+	--block-header-gap: 0;
+	--block-separator-size: 0;
 }

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js

@@ -2,23 +2,24 @@ import { __ } from '@wordpress/i18n';
 
 import SettingsCard from '../../../../ReusableComponents/SettingsCard';
 import { CommonHooks } from '../../../../../data';
-import SettingValueRow from './Parts/SettingValueRow';
 import ConnectionStatusBadge from './Parts/ConnectionStatusBadge';
+import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
+import { ControlStaticValue } from '../../../../ReusableComponents/SettingsBlocks';
 
 const ConnectionStatus = () => {
 	const { merchant } = CommonHooks.useMerchantInfo();
 
 	return (
 		<SettingsCard
-			className="ppcp-r-tab-connection-details"
+			className="ppcp-connection-details ppcp--value-list"
 			title={ __( 'Connection status', 'woocommerce-paypal-payments' ) }
 			description={ __(
 				'Your PayPal account connection details',
 				'woocommerce-paypal-payments'
 			) }
 		>
-			<div className="ppcp-r-setting-value-rows">
-				<SettingValueRow
+			<SettingsBlock>
+				<ControlStaticValue
 					value={
 						<ConnectionStatusBadge
 							isActive={ merchant.isConnected }
@@ -26,22 +27,22 @@ const ConnectionStatus = () => {
 						/>
 					}
 				/>
-				<SettingValueRow
-					label={ __( 'Merchant ID', 'woocommerce-paypal-payments' ) }
-					value={ merchant.id }
-				/>
-				<SettingValueRow
-					label={ __(
-						'Email address',
-						'woocommerce-paypal-payments'
-					) }
-					value={ merchant.email }
-				/>
-				<SettingValueRow
-					label={ __( 'Client ID', 'woocommerce-paypal-payments' ) }
-					value={ merchant.clientId }
-				/>
-			</div>
+			</SettingsBlock>
+			<SettingsBlock
+				title={ __( 'Merchant ID', 'woocommerce-paypal-payments' ) }
+			>
+				<ControlStaticValue value={ merchant.id } />
+			</SettingsBlock>
+			<SettingsBlock
+				title={ __( 'Email address', 'woocommerce-paypal-payments' ) }
+			>
+				<ControlStaticValue value={ merchant.email } />
+			</SettingsBlock>
+			<SettingsBlock
+				title={ __( 'Client ID', 'woocommerce-paypal-payments' ) }
+			>
+				<ControlStaticValue value={ merchant.clientId } />
+			</SettingsBlock>
 		</SettingsCard>
 	);
 };

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Parts/SettingValueRow.js

@@ -1,8 +0,0 @@
-const SettingValueRow = ( { label, value } ) => (
-	<div className="ppcp-r-setting-value-row">
-		{ label && <span className="ppcp-r-setting-label">{ label }</span> }
-		<span className="ppcp-r-setting-value">{ value }</span>
-	</div>
-);
-
-export default SettingValueRow;