From 95bdf8bcc79ac38302cf11250d97fdb67a1bf685 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 24 Jan 2025 16:29:03 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20layout=20of=20feature=20ov?=
 =?UTF-8?q?erview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reusable-components/_elements.scss        |  2 +-
 .../css/components/screens/_settings.scss     | 35 ++++++++-----------
 .../SettingsBlocks/FeatureSettingsBlock.js    |  4 +--
 3 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss
index 600d8850c..7b1cad358 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss
@@ -29,7 +29,7 @@
 
 	.ppcp-r-title-badge {
 		text-transform: none;
-		margin-left: 6px;
+		margin-left: 8px;
 	}
 }
 
diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
index 08f085f6f..46617375d 100644
--- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
@@ -86,33 +86,26 @@
 	}
 }
 
-.ppcp-r-feature-item {
-	padding-top: 32px;
-	border-top: 1px solid $color-gray-400;
-
-	&__title {
-		@include font(16, 20, 600);
-		color: $color-black;
-		display: block;
-		margin: 0 0 8px 0;
-	}
-
-	&__description {
-		@include font(14, 20, 400);
-		color: $color-gray-800;
-		margin: 0 0 18px 0;
-	}
+.ppcp-r-tab-overview-features {
+	--block-header-gap: 12px;
+}
 
-	&:not(:last-child) {
-		padding-bottom: 32px;
-	}
+.ppcp-r-tab-overview-help {
+	--block-header-gap: 8px;
+}
 
-	&__buttons {
+.ppcp-r-settings-block__feature {
+	.ppcp--action-buttons {
 		display: flex;
 		gap: 18px;
+
+		.components-button.is-tertiary {
+			padding-left: 0;
+			padding-right: 0;
+		}
 	}
 
-	&__notes {
+	.ppcp--item-notes {
 		display: flex;
 		flex-direction: column;
 
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
index 9bd5c21fd..285da6896 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
@@ -12,7 +12,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 		}
 
 		return (
-			<span className="ppcp-r-feature-item__notes">
+			<span className="ppcp--item-notes">
 				{ notes.map( ( note, index ) => (
 					<span key={ index }>{ note }</span>
 				) ) }
@@ -61,7 +61,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 				</Description>
 			</Header>
 			<Action>
-				<div className="ppcp-r-feature-item__buttons">
+				<div className="ppcp--action-buttons">
 					{ props.actionProps?.buttons.map(
 						( {
 							class: className,