Align the layout of the template card with the block card (#35391)

* Fix layout of template card in site editor * Fix layout of template card in template editor * Vars
WordPress · Oct 6, 2021 · e1198ed · e1198ed
1 parent 2ecd5a0
commit e1198ed
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/packages/edit-post/src/components/sidebar/template-summary/index.js b/packages/edit-post/src/components/sidebar/template-summary/index.js
@@ -22,7 +22,7 @@ function TemplateSummary() {
 
 	return (
 		<PanelBody>
-			<Flex align="flex-start">
+			<Flex align="flex-start" gap="3">
 				<FlexItem>
 					<Icon icon={ layout } />
 				</FlexItem>

diff --git a/packages/edit-post/src/components/sidebar/template-summary/style.scss b/packages/edit-post/src/components/sidebar/template-summary/style.scss
@@ -1,4 +1,5 @@
 h2.edit-post-template-summary__title {
-	margin: 0;
 	line-height: $icon-size;
+	margin: 0 0 $grid-unit-05;
+	font-weight: 500;
 }
diff --git a/packages/edit-site/src/components/sidebar/template-card/style.scss b/packages/edit-site/src/components/sidebar/template-card/style.scss
@@ -5,12 +5,14 @@
 
 .edit-site-template-card__content {
 	flex-grow: 1;
+	margin-bottom: $grid-unit-05;
 }
 
 .edit-site-template-card__title {
 	font-weight: 500;
+	line-height: $icon-size;
 	&.edit-site-template-card__title {
-		margin: 0 0 5px;
+		margin: 0 0 $grid-unit-05;
 	}
 }
 
@@ -19,10 +21,8 @@
 }
 
 .edit-site-template-card__icon {
-	flex: 0 0 $button-size;
-	margin-left: -2px;
-	margin-right: 10px;
-	padding: 0 3px;
-	width: $button-size;
-	height: $button-size-small;
+	flex: 0 0 $icon-size;
+	margin-right: $grid-unit-15;
+	width: $icon-size;
+	height: $icon-size;
 }