From e1198ed9c9a671540512662fc904b3ff4e682699 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 6 Oct 2021 14:37:19 +0100
Subject: [PATCH] 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
---
 .../components/sidebar/template-summary/index.js   |  2 +-
 .../components/sidebar/template-summary/style.scss |  3 ++-
 .../components/sidebar/template-card/style.scss    | 14 +++++++-------
 3 files changed, 10 insertions(+), 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
index f9e9f93cee2701..30358038ffb5b6 100644
--- 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
index 993c5bcbbc7adf..bfec3bc7b32461 100644
--- 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
index 89ac0ca844af87..8b119b497f15cf 100644
--- 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;
 }