♻️ Start to unclutter SCSS a bit

modules/ppcp-settings/resources/css/_variables.scss

@@ -54,4 +54,9 @@ $card-vertical-gap: 48px;
 	--color-gray-200: #{$color-gray-200};
 	--color-gray-100: #{$color-gray-100};
 	--color-gradient-dark: #{$color-gradient-dark};
+
+	--color-text-title: #{$color-gray-900};
+	--color-text-main: #{$color-text-text};
+	--color-text-teriary: #{$color-text-tertiary};
+	--color-text-description: #{$color-gray-700};
 }

modules/ppcp-settings/resources/css/components/_reusable.scss

@@ -0,0 +1,19 @@
+@import "./reusable-components/payment-method-item";
+@import './reusable-components/accordion-section';
+@import './reusable-components/badge-box';
+@import './reusable-components/busy-state';
+@import './reusable-components/button';
+@import './reusable-components/fields';
+@import './reusable-components/navigation';
+@import './reusable-components/onboarding-header';
+@import './reusable-components/payment-method-icons';
+@import './reusable-components/select-box';
+@import './reusable-components/separator';
+@import './reusable-components/settings-block';
+@import './reusable-components/settings-card';
+@import './reusable-components/settings-toggle-block';
+@import './reusable-components/settings-wrapper';
+@import './reusable-components/spinner-overlay';
+@import './reusable-components/tab-navigation';
+@import './reusable-components/title-badge';
+@import './reusable-components/welcome-docs';

modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss

@@ -0,0 +1,176 @@
+/*
+ Styles the `SettingsBlock` and all its derived components.
+ */
+.ppcp-r-settings-block {
+	display: flex;
+	flex-direction: column;
+	gap: 16px 0;
+
+	&.ppcp-r-settings-block__input,
+	&.ppcp-r-settings-block__select {
+		gap: 6px 0;
+	}
+
+	.ppcp-r-settings-block__header {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+
+		&:not(:last-child):not(.ppcp-r-settings-block--accordion__header) {
+			padding-bottom: 6px;
+		}
+	}
+
+	.ppcp-r-settings-block__title {
+		@include font(11, 22, 600);
+		color: var(--color-text-title);
+		display: block;
+		text-transform: uppercase;
+
+		.ppcp-r-title-badge {
+			text-transform: none;
+			margin-left: 6px;
+		}
+	}
+
+	.ppcp-r-settings-block__title-wrapper {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	&.ppcp-r-settings-block__feature {
+		.ppcp-r-settings-block__title {
+			@include font(13, 20, 600);
+			color: var(--color-text-main);
+			text-transform: none;
+		}
+
+		.ppcp-r-settings-block__feature__description {
+			@include font(13, 20, 400);
+			color: var(--color-text-description);
+		}
+	}
+
+	&.ppcp-r-settings-block__toggle {
+		display: flex;
+		flex-direction: row;
+
+		.ppcp-r-settings-block__title {
+			@include font(13, 20, 400);
+			color: var(--color-text-main);
+			text-transform: none;
+		}
+	}
+
+	.ppcp-r-settings-block__description {
+		@include font(13, 20, 400);
+		margin: 0;
+		color: var(--color-text-description);
+
+		&:not(:last-child) {
+			padding-bottom: 1em;
+		}
+
+		a {
+			color: var(--color-blueberry);
+		}
+
+		strong {
+			color: var(--color-gray-800);
+		}
+	}
+
+	.ppcp-r-settings-block__supplementary-title-label {
+		@include font(13, 20, 400);
+		color: var(--color-text-teriary);
+		text-transform: none;
+		margin-left: 5px;
+	}
+
+	+ .ppcp-r-settings-block {
+		margin-top: 32px;
+		padding-top: 32px;
+		border-top: 1px solid var(--color-gray-200);
+	}
+
+	// Types
+	&--toggle-content {
+		&.ppcp-r-settings-block--content-visible {
+			.ppcp-r-settings-block__toggle-content {
+				transform: rotate(180deg);
+			}
+		}
+
+		.ppcp-r-settings-block__header {
+			user-select: none;
+
+			&:hover {
+				cursor: pointer;
+			}
+		}
+	}
+
+	&--sandbox-connected {
+		.ppcp-r-settings-block__content {
+			margin-top: 24px;
+		}
+
+		.ppcp-r-connection-status__data {
+			margin-bottom: 20px;
+		}
+	}
+
+	&--connect-sandbox {
+		button.components-button {
+			@include small-button;
+		}
+
+		.ppcp-r__radio-content-additional {
+			@include vertical-layout-event-gap(24px);
+			align-items: flex-start;
+
+			.ppcp-r-vertical-text-control,
+			input[type='text'] {
+				width: 100%;
+			}
+		}
+	}
+}
+
+.ppcp-r-settings-block {
+	&--order-intent,
+	&--save-payment-methods {
+		@include vertical-layout-event-gap(24px);
+
+		> .ppcp-r-settings-block__content {
+			@include vertical-layout-event-gap(24px);
+		}
+	}
+}
+
+.ppcp-r-settings-block--toggle-content {
+	.ppcp-r-settings-block__content {
+		margin-top: 32px;
+	}
+}
+
+.ppcp-r-settings-block__button {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	gap: 50px;
+}
+
+.ppcp-r-settings-block__accordion {
+	> .ppcp-r-accordion {
+		width: 100%;
+
+		.ppcp-r-accordion__toggler {
+			width: 100%;
+			margin: 0;
+			text-align: unset;
+		}
+	}
+}

modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss

@@ -0,0 +1,63 @@
+/*
+ Styles the `SettingsCard` layout component.
+
+ This is a 2-column row that displays a title + description on the
+ left side, and a "card" with settings content on the right side.
+ */
+.ppcp-r-settings-card {
+
+	// -- Theming
+
+	--card-width-header: 100%;
+	--card-width-content: 100%;
+	--card-gap: 0;
+	--card-layout: block;
+
+	@media screen and (min-width: 960px) {
+		--card-width-header: 280px;
+		--card-width-content: 610px;
+		--card-gap: 48px;
+		--card-layout: flex;
+	}
+
+	// -- Styling
+
+	display: var(--card-layout);
+	gap: var(--card-gap);
+	margin: 0 0 var(--card-gap) 0;
+
+	.ppcp-r-settings-card__header {
+		display: var(--card-layout);
+		width: var(--card-width-header);
+		flex: 0 0 var(--card-width-header);
+		gap: 18px;
+		padding-bottom: 18px;
+	}
+
+	.ppcp-r-settings-card__content-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+	}
+
+	.ppcp-r-settings-card__content {
+		flex: 1;
+		max-width: var(--card-width-content);
+		border: 1px solid var(--color-gray-200);
+		border-radius: 4px;
+		padding: 24px;
+	}
+
+	.ppcp-r-settings-card__title {
+		@include font(13, 24, 600);
+		color: var(--color-text-main);
+		margin: 0 0 4px 0;
+		display: block;
+	}
+
+	.ppcp-r-settings-card__description {
+		@include font(13, 20, 400);
+		color: var(--color-text-teriary);
+		margin: 0;
+	}
+}

modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss

@@ -26,60 +26,4 @@
 			border-bottom: 1px solid $color-gray-200;
 		}
 	}
-
-	&-settings-card {
-		@media screen and (min-width: 960px) {
-			display: flex;
-			gap: 48px;
-		}
-
-		@media screen and (max-width: 480px) {
-			padding: 24px;
-		}
-
-		&__content-wrapper {
-			display: flex;
-			flex-direction: column;
-			gap: 24px;
-		}
-
-		&__header {
-			display: flex;
-			gap: 18px;
-			padding-bottom: 18px;
-			border-bottom: 2px solid $color-gray-700;
-			margin-bottom: 32px;
-
-			@media screen and (min-width: 960px) {
-				width: 280px;
-				flex-shrink: 0;
-				border-bottom: none;
-				margin-bottom: 0;
-				padding-bottom: 0;
-			}
-		}
-
-		&__content {
-			border: 1px solid $color-gray-200;
-			border-radius: 4px;
-			padding: 24px;
-			@media screen and (min-width: 960px) {
-				flex: 1;
-			}
-		}
-
-		&__title {
-			@include font(13, 24, 600);
-			color: $color-text-text;
-			margin: 0 0 4px 0;
-			display: block;
-		}
-
-
-		&__description {
-			@include font(13, 20, 400);
-			color: $color-text-tertiary;
-			margin: 0;
-		}
-	}
 }

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

@@ -1,4 +1,5 @@
-@import "./settings/block-accordion";
+@import './settings/input';
+@import './settings/tab-styling';
 
 // Container and Tab Settings
 .ppcp-r-tabs.settings,
@@ -245,310 +246,3 @@
 	gap: 48px;
 }
 
-// Settings Card and Block Styles
-.ppcp-r-settings-card {
-	margin: 0 0 48px 0;
-}
-
-.ppcp-r-settings-card__content {
-	> .ppcp-r-settings-block {
-		&:not(:last-child) {
-			border-bottom: 1px solid $color-divider;
-		}
-	}
-}
-
-.ppcp-r-settings-block {
-	display: flex;
-	flex-direction: column;
-	gap: 16px 0;
-
-	&.ppcp-r-settings-block__input,
-	&.ppcp-r-settings-block__select {
-		gap: 6px 0;
-	}
-
-	.ppcp-r-settings-block__header {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-
-		&:not(:last-child):not(.ppcp-r-settings-block--accordion__header) {
-			padding-bottom: 6px;
-		}
-	}
-
-	.ppcp-r-settings-block__title {
-		@include font(11, 22, 600);
-		color: $color-gray-900;
-		display: block;
-		text-transform: uppercase;
-
-		.ppcp-r-title-badge {
-			text-transform: none;
-			margin-left: 6px;
-		}
-	}
-
-	.ppcp-r-settings-block__title-wrapper {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	&.ppcp-r-settings-block__feature {
-		.ppcp-r-settings-block__title {
-			@include font(13, 20, 600);
-			color: $color-text-text;
-			text-transform: none;
-		}
-
-		.ppcp-r-settings-block__feature__description {
-			color: $color-gray-700;
-			@include font(13, 20, 400);
-		}
-	}
-
-	&.ppcp-r-settings-block__toggle {
-		display: flex;
-		flex-direction: row;
-
-		.ppcp-r-settings-block__title {
-			color: $color-text-text;
-			@include font(13, 20, 400);
-			text-transform: none;
-		}
-	}
-
-	.ppcp-r-settings-block__description {
-		margin: 0;
-		@include font(13, 20, 400);
-		color: $color-gray-800;
-
-		&:not(:last-child) {
-			padding-bottom: 1em;
-		}
-
-		a {
-			color: $color-blueberry;
-		}
-
-		strong {
-			color: $color-gray-800;
-		}
-	}
-
-	.ppcp-r-settings-block__supplementary-title-label {
-		@include font(13, 20, 400);
-		color: $color-text-tertiary;
-		text-transform: none;
-		margin-left: 5px;
-	}
-
-	// Types
-	&--toggle-content {
-		&.ppcp-r-settings-block--content-visible {
-			.ppcp-r-settings-block__toggle-content {
-				transform: rotate(180deg);
-			}
-		}
-
-		.ppcp-r-settings-block__header {
-			user-select: none;
-
-			&:hover {
-				cursor: pointer;
-			}
-		}
-	}
-
-	&--sandbox-connected {
-		.ppcp-r-settings-block__content {
-			margin-top: 24px;
-		}
-
-		.ppcp-r-connection-status__data {
-			margin-bottom: 20px;
-		}
-	}
-
-	&--connect-sandbox {
-		button.components-button {
-			@include small-button;
-		}
-
-		.ppcp-r__radio-content-additional {
-			.ppcp-r-vertical-text-control {
-				width: 100%;
-			}
-
-			@include vertical-layout-event-gap(24px);
-			align-items: flex-start;
-
-			input[type='text'] {
-				width: 100%;
-			}
-		}
-	}
-
-	&--troubleshooting,
-	&--settings {
-		> .ppcp-r-settings-block__content > *:not(:last-child) {
-			padding-bottom: 32px;
-			margin-bottom: 32px;
-			border-bottom: 1px solid $color-gray-500;
-		}
-	}
-
-	// Fields
-	input[type='text'] {
-		border-color: $color-gray-700;
-		width: 100%;
-		max-width: 100%;
-		color: $color-gray-800;
-
-		&::placeholder {
-			color: $color-gray-700;
-		}
-	}
-
-	// MultiSelect control
-	.ppcp-r {
-		&__radio-wrapper {
-			align-items: flex-start;
-			gap: 12px;
-		}
-
-		&__radio-content {
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-
-			label {
-				font-weight: 600;
-			}
-		}
-
-		&__radio-content-additional {
-			padding-left: 32px;
-		}
-
-		// Select control styles
-		&__control {
-			border-radius: 2px;
-			border-color: $color-gray-700;
-			min-height: auto;
-			padding: 0;
-		}
-
-		&__input-container {
-			padding: 0;
-			margin: 0;
-		}
-
-		&__value-container {
-			padding: 0 0 0 7px;
-		}
-
-		&__indicator {
-			padding: 5px;
-		}
-
-		&__indicator-separator {
-			display: none;
-		}
-
-		&__value-container--has-value {
-			.ppcp-r__single-value {
-				color: $color-gray-800;
-			}
-		}
-
-		&__placeholder,
-		&__single-value {
-			@include font(13, 20, 400);
-		}
-
-		&__option {
-			&--is-selected {
-				background-color: $color-gray-200;
-			}
-		}
-	}
-}
-
-// Hooks table
-.ppcp-r-table {
-	&__hooks-url {
-		width: 70%;
-		padding-right: 20%;
-		text-align: left;
-		vertical-align: top;
-	}
-
-	&__hooks-events {
-		vertical-align: top;
-		text-align: left;
-		width: 40%;
-
-		span {
-			display: block;
-		}
-	}
-
-	td.ppcp-r-table__hooks-url,
-	td.ppcp-r-table__hooks-events {
-		padding-top: 12px;
-		color: $color-gray-800;
-		@include font(14, 20, 400);
-
-		span {
-			color: inherit;
-			@include font(14, 20, 400);
-		}
-	}
-
-	th.ppcp-r-table__hooks-url,
-	th.ppcp-r-table__hooks-events {
-		@include font(14, 20, 700);
-		color: $color-gray-800;
-		border-bottom: 1px solid $color-gray-600;
-		padding-bottom: 4px;
-	}
-}
-
-// Settings specific styles
-.ppcp-r-settings-card--common-settings .ppcp-r-settings-card__content,
-.ppcp-r-settings-card--expert-settings .ppcp-r-settings-card__content {
-	> .ppcp-r-settings-block {
-		&:not(:last-child) {
-			padding-bottom: 32px;
-			margin-bottom: 32px;
-		}
-	}
-}
-
-.ppcp-r-settings-block {
-	&--order-intent,
-	&--save-payment-methods {
-		@include vertical-layout-event-gap(24px);
-
-		> .ppcp-r-settings-block__content {
-			@include vertical-layout-event-gap(24px);
-		}
-	}
-}
-
-.ppcp-r-settings-block--toggle-content {
-	.ppcp-r-settings-block__content {
-		margin-top: 32px;
-	}
-}
-
-.ppcp-r-settings-block__button {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	gap: 50px;
-}

modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss

@@ -1,38 +0,0 @@
-.ppcp-r-settings-block__accordion {
-	> .ppcp-r-accordion {
-		width: 100%;
-
-		.ppcp-r-accordion__toggler {
-			width: 100%;
-			margin: 0;
-			text-align: unset;
-		}
-	}
-
-	&.ppcp-r-settings-block {
-		gap: 0;
-
-		.ppcp-r-settings-block__title {
-			@include font(13, 20, 600);
-			color: $color-text-text;
-			text-transform: none;
-		}
-
-		.ppcp-r-settings-block--accordion__title {
-			@include font(14, 20, 600);
-		}
-
-		.ppcp-r-settings-block--accordion__description {
-			color: $color-gray-700;
-			@include font(13, 20, 400);
-		}
-
-		.ppcp-r-settings-block:not(:last-child) {
-			&:not(.ppcp-r__radio-content-additional .ppcp-r-settings-block) {
-				padding-bottom: 32px;
-				margin-bottom: 32px;
-				border-bottom: 1px solid $color-divider;
-			}
-		}
-	}
-}

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

@@ -0,0 +1,77 @@
+// Fields
+.ppcp-r {
+	input[type='text'] {
+		border-color: $color-gray-700;
+		width: 100%;
+		max-width: 100%;
+		color: $color-gray-800;
+
+		&::placeholder {
+			color: $color-gray-700;
+		}
+	}
+}
+
+// MultiSelect control
+.ppcp-r {
+	&__radio-wrapper {
+		align-items: flex-start;
+		gap: 12px;
+	}
+
+	&__radio-content {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		label {
+			font-weight: 600;
+		}
+	}
+
+	&__radio-content-additional {
+		padding-left: 32px;
+	}
+
+	// Select control styles
+	&__control {
+		border-radius: 2px;
+		border-color: $color-gray-700;
+		min-height: auto;
+		padding: 0;
+	}
+
+	&__input-container {
+		padding: 0;
+		margin: 0;
+	}
+
+	&__value-container {
+		padding: 0 0 0 7px;
+	}
+
+	&__indicator {
+		padding: 5px;
+	}
+
+	&__indicator-separator {
+		display: none;
+	}
+
+	&__value-container--has-value {
+		.ppcp-r__single-value {
+			color: $color-gray-800;
+		}
+	}
+
+	&__placeholder,
+	&__single-value {
+		@include font(13, 20, 400);
+	}
+
+	&__option {
+		&--is-selected {
+			background-color: $color-gray-200;
+		}
+	}
+}

modules/ppcp-settings/resources/css/style.scss

@@ -3,26 +3,9 @@
 
 #ppcp-settings-container {
 	@import './global';
-	@import './components/reusable-components/busy-state';
+	@import './components/reusable';
-	@import './components/reusable-components/button';
-	@import './components/reusable-components/separator';
-	@import './components/reusable-components/onboarding-header';
-	@import './components/reusable-components/settings-toggle-block';
-	@import './components/reusable-components/payment-method-icons';
-	@import "./components/reusable-components/payment-method-item";
-	@import './components/reusable-components/settings-wrapper';
-	@import './components/reusable-components/select-box';
-	@import './components/reusable-components/tab-navigation';
-	@import './components/reusable-components/navigation';
-	@import './components/reusable-components/fields';
-	@import './components/reusable-components/title-badge';
-	@import './components/reusable-components/accordion-section';
-	@import './components/reusable-components/badge-box';
-	@import './components/reusable-components/spinner-overlay';
-	@import './components/reusable-components/welcome-docs';
 	@import './components/screens/onboarding';
 	@import './components/screens/settings';
-	@import './components/screens/overview/tab-styling';
 	@import './components/app';
 }
 

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js

@@ -1,9 +1,9 @@
-const SettingsBlock = ( { className, children } ) => {
+import classNames from 'classnames';
-	const blockClassName = [ 'ppcp-r-settings-block', className ].filter(
-		Boolean
-	);
 
-	return <div className={ blockClassName.join( ' ' ) }>{ children }</div>;
+const SettingsBlock = ( { className, children } ) => {
+	const blockClassName = classNames( 'ppcp-r-settings-block', className );
+
+	return <div className={ blockClassName }>{ children }</div>;
 };
 
 export default SettingsBlock;

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

@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
 import { Content, ContentWrapper } from './SettingsBlocks';
 
 const SettingsCard = ( {
@@ -9,9 +11,7 @@ const SettingsCard = ( {
 	contentItems,
 	contentContainer = true,
 } ) => {
-	const className = [ 'ppcp-r-settings-card', extraClassName ]
+	const className = classNames( 'ppcp-r-settings-card', extraClassName );
-		.filter( Boolean )
-		.join( ' ' );
 
 	const renderContent = () => {
 		// If contentItems array is provided, wrap each item in Content component