♻️ Make Separator component more generic

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

@@ -2,13 +2,22 @@
 	display: flex;
 	align-items: center;
 
+	&__space,
 	&__line {
-		height: 1px;
-		background-color: $color-gray-600;
+		margin: 0;
 		display: block;
 		width: 100%;
 	}
 
+	&__line {
+		background-color: $color-gray-600;
+		height: 1px;
+	}
+
+	&__space {
+		margin-bottom: 48px;
+	}
+
 	&__text {
 		color: $color-gray;
 		@include font(12, 24, 500, 0.8px);

modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss

@@ -20,14 +20,6 @@
 		margin: 0 0 16px 0;
 	}
 
-	.ppcp-r-page-welcome-mode-separator {
-		margin: 0 0 48px 0;
-
-		.ppcp-r-separator__line {
-			background-color: $color-gray-300;
-		}
-	}
-
 	.components-base-control__field {
 		margin: 0 0 24px 0;
 	}

modules/ppcp-settings/resources/js/Components/ReusableComponents/Separator.js

@@ -1,24 +1,32 @@
-const Separator = ( props ) => {
-	let separatorClass = 'ppcp-r-separator';
+const Separator = ( { className = '', text = '', withLine = true } ) => {
+	const separatorClass = [ 'ppcp-r-separator' ];
+	const innerClass = withLine
+		? 'ppcp-r-separator__line'
+		: 'ppcp-r-separator__space';
 
-	if ( props?.className ) {
-		separatorClass += ' ' + props.className;
+	if ( className ) {
+		separatorClass.push( className );
 	}
 
-	if ( props.text ) {
-		return (
-			<div className={ separatorClass }>
-				<span className="ppcp-r-separator__line ppcp-r-separator__line--before"></span>
+	const getClass = ( type ) => `${ innerClass } ${ innerClass }--${ type }`;
 
-				<span className="ppcp-r-separator__text">{ props.text }</span>
-				<span className="ppcp-r-separator__line ppcp-r-separator__line--after"></span>
-			</div>
-		);
-	}
+	const renderSeparator = () => {
+		if ( text ) {
+			return (
+				<>
+					<span className={ getClass( 'before' ) }></span>
+					<span className="ppcp-r-separator__text">{ text }</span>
+					<span className={ getClass( 'after' ) }></span>
+				</>
+			);
+		}
+
+		return <span className={ getClass( 'full' ) }></span>;
+	};
 
 	return (
-		<div className={ separatorClass }>
-			<span className="ppcp-r-separator__line ppcp-r-separator__line--before"></span>
+		<div className={ separatorClass.join( ' ' ) }>
+			{ renderSeparator() }
 		</div>
 	);
 };

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js

@@ -122,7 +122,7 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
 					{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
 				</Button>
 			</SettingsToggleBlock>
-			<Separator className="ppcp-r-page-welcome-mode-separator" />
+			<Separator withLine={ false } />
 			<SettingsToggleBlock
 				label={
 					__( 'Manually Connect', 'woocommerce-paypal-payments' ) +