💄 Fix layout of feature overview

woocommerce · Jan 24, 2025 · 95bdf8b · 95bdf8b
1 parent 105202f
commit 95bdf8b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 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
@@ -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
@@ -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/...ettings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/...ettings/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,